Adds JS/TS toggle to interactive docs samples (lit#478)

Adds a JS/TS toggle to all interactive samples in the docs, behind the `?mods=jsSamples` feature flag.

Note: The playground page, tutorial page, and static samples will come in a followup PR.

Also note: There are a some issues with the JS samples that I've seen already, mostly around `/*playground-fold*/` and `/*playground-hide*/` comments not getting preserved quite right. I'll address those in a followup too.

Also moves the "open in playground" link from the top-right of the preview to the top-right of the whole playground. I think this makes more sense since its an action on the whole thing, not just the preview, but especially now that there will be a second control there.

Also fixes upgrade layout shift issues with inline playgrounds.

Part of lit#332

packages/lit-dev-content/site/css/code.css

@@ -33,12 +33,10 @@ html {
   overflow-y: auto;
 }
 
-playground-preview,
-playground-ide::part(preview) {
+playground-preview {
   background: var(--color-light-gray);
 }
 
-playground-ide::part(preview-toolbar),
 playground-preview::part(preview-toolbar) {
   background: var(--color-light-gray);
   border-bottom: 1px solid #ccc;
@@ -47,7 +45,6 @@ playground-preview::part(preview-toolbar) {
   box-sizing: border-box;
 }
 
-playground-ide::part(tab-bar),
 playground-tab-bar {
   background: white;
   font-size: 16px;
@@ -56,7 +53,6 @@ playground-tab-bar {
   box-sizing: border-box;
 }
 
-playground-file-editor,
-playground-ide::part(editor) {
+playground-file-editor {
   background: white;
 }

packages/lit-dev-content/site/css/docs.css

@@ -116,26 +116,33 @@ article pre > code:not([class]) {
   border: var(--code-border);
 }
 
-/* Playground examples */
-litdev-example {
+/* With tabs */
+litdev-example:not([filename]) {
+  --litdev-example-bar-height: 45px;
+}
+
+/* Without tabs */
+litdev-example[filename] {
+  --litdev-example-bar-height: 31px;
 }
 
-/* Full IDEs */
-playground-ide {
+litdev-example {
+  /* Prevent layout shift before upgrade, since custom elements default to
+  inline. */
+  display: block;
+  height: calc(
+    var(--litdev-example-bar-height) +
+    var(--litdev-example-editor-height) +
+    var(--litdev-example-preview-height));
 }
 
 .CodeMirror,
-litdev-example,
-playground-ide {
+litdev-example {
   font-size: 0.85em;
   border-radius: 5px;
   border: var(--code-border);
 }
 
-playground-ide {
-  background: var(--playground-code-background);
-}
-
 figure {
   /* We put code snippets in figures for improved a11y semantics, but they come
      with default margins. */

packages/lit-dev-content/site/css/mods.css

@@ -22,3 +22,9 @@
   --playground-code-attribute-color: #9cdcfe;
   --playground-code-callee-color: #dcdcaa;
 }
+
+.jsSamples {
+  /* TODO(aomarks) Remove when JS samples launch, and update the
+  litdev-typescript-switch display property to match this. */
+  --litdev-typescript-switch-display: inline-flex;
+}

packages/lit-dev-content/src/components/litdev-example-controls.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {LitElement, html, css, customElement, property} from 'lit-element';
+import './litdev-typescript-switch.js';
+
+/**
+ * Controls for lit.dev code examples.
+ */
+@customElement('litdev-example-controls')
+export class LitDevExampleControls extends LitElement {
+  static override styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    #openInPlayground {
+      display: flex;
+      color: inherit;
+      opacity: 70%;
+      margin-left: 10px;
+    }
+
+    #openInPlayground:hover {
+      opacity: 100%;
+    }
+  `;
+
+  /**
+   * Path to the project dir from `samples/PROJECT/project.json`.
+   */
+  @property()
+  project?: string;
+
+  override render() {
+    return html`
+      <litdev-typescript-switch></litdev-typescript-switch>
+      <a
+        id="openInPlayground"
+        title="Open this example in the playground"
+        target="_blank"
+        href="/playground/#sample=${this.project}"
+      >
+        <!-- Source: https://material.io/resources/icons/?icon=launch&style=baseline -->
+        <svg width="22px" height="22px" viewBox="0 0 24 24" fill="#5f5f5f">
+          <path
+            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+          />
+        </svg>
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'litdev-typescript-controls': LitDevExampleControls;
+  }
+}

packages/lit-dev-content/src/components/litdev-example.ts

@@ -8,7 +8,12 @@ import {LitElement, html, css, property} from 'lit-element';
 import {styleMap} from 'lit-html/directives/style-map';
 import {nothing} from 'lit-html';
 import {ifDefined} from 'lit-html/directives/if-defined.js';
+import {
+  getTypeScriptPreference,
+  TYPESCRIPT_PREFERENCE_EVENT_NAME,
+} from '../typescript-preference.js';
 import 'playground-elements/playground-ide.js';
+import './litdev-example-controls.js';
 
 /**
  * Embedded playground code example in vertical layout.
@@ -17,24 +22,57 @@ export class LitDevExample extends LitElement {
   static styles = css`
     :host {
       display: block;
-      /* For absolute positioning of openInPlayground button. */
-      position: relative;
-      border-radius: none;
+      /* Move the border-bottom from the host to the iframe. Iframes will have a
+      white background (by default), which will clip any host border slightly.
+      */
+      border-bottom: none !important;
     }
 
+    #bar {
+      display: flex;
+      height: var(--litdev-example-bar-height);
+    }
+
+    /* With tabs */
+    :host(:not([filename])) > #bar {
+      border-bottom: var(--code-border);
+    }
+
+    /* Without tabs */
+    :host([filename]) > #bar {
+      background: var(--playground-code-background);
+    }
+    :host([filename]) > #bar > litdev-example-controls {
+      padding-top: 6px;
+    }
+    :host([filename]) > playground-file-editor {
+      /* Top padding is unnecessary because the same-background toolbar already
+      provides a bunch of visual space at the top.*/
+      padding-top: 0;
+    }
+
+    #bar,
+    playground-tab-bar,
     playground-file-editor,
-    playground-preview,
-    playground-tab-bar {
+    playground-preview {
       border-radius: 5px;
       box-sizing: border-box;
     }
 
     playground-tab-bar {
       background: #fff;
       font-family: 'Open Sans', sans-serif;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: var(--code-border);
+      height: var(--litdev-example-tab-bar-height);
+      /* Allow the tab bar to shrink below its content size so that when an
+      example is very narrow the tab bar shrinks and scrolls instead of pushing
+      the controls outside the parent. */
+      min-width: 0;
+    }
+
+    litdev-example-controls {
+      height: var(--litdev-example-controls-height);
+      padding-right: 6px;
+      box-sizing: border-box;
     }
 
     playground-file-editor {
@@ -53,6 +91,7 @@ export class LitDevExample extends LitElement {
       margin: 0 0.5px;
       height: var(--litdev-example-preview-height, 100px);
       border-top: var(--code-border);
+      border-bottom: var(--code-border);
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
@@ -62,19 +101,6 @@ export class LitDevExample extends LitElement {
          we can just omit rendering it. */
       display: none;
     }
-
-    .openInPlayground {
-      position: absolute;
-      bottom: calc(var(--litdev-example-preview-height) - 24px - 16px);
-      right: 16px;
-      color: inherit;
-      z-index: 2;
-      opacity: 70%;
-    }
-
-    .openInPlayground:hover {
-      opacity: 100%;
-    }
   `;
 
   /**
@@ -87,7 +113,7 @@ export class LitDevExample extends LitElement {
    * Name of file in project to display.
    * If no file is provided, we show the tab-bar with all project files.
    */
-  @property()
+  @property({reflect: true})
   filename?: string;
 
   /**
@@ -96,6 +122,26 @@ export class LitDevExample extends LitElement {
   @property({attribute: 'sandbox-base-url'})
   sandboxBaseUrl?: string;
 
+  override connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener(
+      TYPESCRIPT_PREFERENCE_EVENT_NAME,
+      this._onTypeScriptPreferenceChanged
+    );
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      TYPESCRIPT_PREFERENCE_EVENT_NAME,
+      this._onTypeScriptPreferenceChanged
+    );
+  }
+
+  private _onTypeScriptPreferenceChanged = () => {
+    this.requestUpdate();
+  };
+
   render() {
     if (!this.project) {
       return nothing;
@@ -106,44 +152,44 @@ export class LitDevExample extends LitElement {
       borderRadius: showTabBar ? 'unset' : 'inherit',
     };
 
+    const mode = getTypeScriptPreference();
+    const projectSrc =
+      mode === 'ts'
+        ? `/samples/${this.project}/project.json`
+        : `/samples/js/${this.project}/project.json`;
+    const filename =
+      mode === 'ts' ? this.filename : this.filename?.replace(/.ts$/, '.js');
+
     return html`
       <playground-project
         sandbox-base-url=${ifDefined(this.sandboxBaseUrl)}
         id="project"
-        project-src="/samples/${this.project}/project.json"
+        project-src=${projectSrc}
       >
       </playground-project>
 
-      ${showTabBar
-        ? html`<playground-tab-bar
-            project="project"
-            editor="project-file-editor"
-          ></playground-tab-bar>`
-        : nothing}
+      <div id="bar">
+        ${showTabBar
+          ? html`<playground-tab-bar
+              project="project"
+              editor="project-file-editor"
+            ></playground-tab-bar>`
+          : nothing}
+
+        <litdev-example-controls
+          .project=${this.project}
+        ></litdev-example-controls>
+      </div>
 
       <playground-file-editor
         id="project-file-editor"
         project="project"
-        filename="${ifDefined(this.filename)}"
+        filename="${ifDefined(filename)}"
         style=${styleMap(fileEditorOverrideStyles)}
       >
       </playground-file-editor>
 
       <playground-preview project="project"></playground-preview>
-
-      <a
-        class="openInPlayground"
-        title="Open this example in the playground"
-        target="_blank"
-        href="/playground/#sample=${this.project}"
-      >
-        <!-- Source: https://material.io/resources/icons/?icon=launch&style=baseline -->
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor">
-          <path
-            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-          />
-        </svg>
-      </a>
     `;
   }
 }