From 72d8e72811b8373f950aac9ca5512f92da7ec6e6 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 12:04:04 -0700
Subject: [PATCH 01/10] Remove jsSamples mod

---
 packages/lit-dev-content/site/css/mods.css                  | 6 ------
 .../src/components/litdev-code-language-switch.ts           | 3 +--
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/lit-dev-content/site/css/mods.css b/packages/lit-dev-content/site/css/mods.css
index 13172e41b..6530f98cc 100644
--- a/packages/lit-dev-content/site/css/mods.css
+++ b/packages/lit-dev-content/site/css/mods.css
@@ -21,10 +21,4 @@
   --playground-code-tag-color: #808080;
   --playground-code-attribute-color: #9cdcfe;
   --playground-code-callee-color: #dcdcaa;
-}
-
-.jsSamples {
-  /* TODO(aomarks) Remove when JS samples launch, and update the
-  litdev-code-language-switch display property to match this. */
-  --litdev-code-language-switch-display: inline-flex;
 }
\ No newline at end of file
diff --git a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
index db01f2cd9..1ea786046 100644
--- a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
+++ b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
@@ -27,8 +27,7 @@ export class LitDevCodeLanguageSwitch extends LitElement {
     }
 
     :host {
-      /* TODO(aomarks) Fix as inline-flex after jsSamples mod is retired. */
-      display: var(--litdev-code-language-switch-display, none);
+      display: inline-flex;
       align-items: center;
       font-size: 13px;
       width: calc(48em / 13);

From 325458264a55862e5cbfa27eae3e429cd8d97e48 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 12:13:00 -0700
Subject: [PATCH 02/10] Replace home-page-specific language toggle with new
 global one

---
 .../lit-dev-content/site/css/home/3-tour.css  | 22 +++++++++------
 .../lit-dev-content/site/home/3-tour.html     |  7 ++---
 .../src/pages/home-components.ts              |  3 +-
 packages/lit-dev-content/src/pages/home.ts    | 28 -------------------
 4 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/packages/lit-dev-content/site/css/home/3-tour.css b/packages/lit-dev-content/site/css/home/3-tour.css
index 93e90a295..3e532618b 100644
--- a/packages/lit-dev-content/site/css/home/3-tour.css
+++ b/packages/lit-dev-content/site/css/home/3-tour.css
@@ -30,6 +30,13 @@
   margin: 0;
 }
 
+body[code-language-preference="ts"] #tourJsCode {
+  display: none;
+}
+body[code-language-preference="js"] #tourTsCode {
+  display: none;
+}
+
 #tourJsCode > figure,
 #tourTsCode > figure {
   /* Extra room for the JS/TS switch */
@@ -38,14 +45,11 @@
   margin-bottom: 2em;
 }
 
-#tourJsTsSwitch {
+litdev-code-language-switch {
   position: absolute;
-  top: 20px;
-  right: 25px;
-  --mdc-theme-secondary: #0a7dff;
-  --mdc-typography-body2-font-size: 17px;
-  --mdc-theme-text-primary-on-background: #444;
-  zoom: 90%;
+  font-size: 16px;
+  top: 14px;
+  right: 14px;
 }
 
 #tourCode .tourHighlight {
@@ -148,8 +152,8 @@
     border-right: none;
   }
 
-  #tourJsTsSwitch {
-    position: absolute;
+  litdev-code-language-switch {
+    font-size: 13px;
     top: 45px;
     right: -20px;
   }
diff --git a/packages/lit-dev-content/site/home/3-tour.html b/packages/lit-dev-content/site/home/3-tour.html
index 1ace554bd..b285f68b7 100644
--- a/packages/lit-dev-content/site/home/3-tour.html
+++ b/packages/lit-dev-content/site/home/3-tour.html
@@ -1,13 +1,12 @@
 <section id="tour">
   <div id="tourCodeAndNotes">
     <div id="tourCode">
-      <mwc-formfield id="tourJsTsSwitch" label="TypeScript">
-        <mwc-switch checked></mwc-switch>
-      </mwc-formfield>
+      <litdev-code-language-switch>
+      </litdev-code-language-switch>
       <div id="tourTsCode">
         {% highlight 'ts' %}{% include '../../samples/examples/hello-world-typescript/simple-greeting.ts' %}{% endhighlight %}
       </div>
-      <div id="tourJsCode" hidden>
+      <div id="tourJsCode">
         {% highlight 'js' %}{% include '../../samples/examples/hello-world-javascript/simple-greeting.js' %}{% endhighlight %}
       </div>
       <div id="tourHtmlCode">
diff --git a/packages/lit-dev-content/src/pages/home-components.ts b/packages/lit-dev-content/src/pages/home-components.ts
index 9e6d99941..b211ae7b2 100644
--- a/packages/lit-dev-content/src/pages/home-components.ts
+++ b/packages/lit-dev-content/src/pages/home-components.ts
@@ -10,5 +10,4 @@
 // TODO(aomarks) A better solution would be for each page to dynamically import its
 // lazy dependencies. Rollup almost does the right thing here, except that the relative
 // import paths are wrong when we import. Find a way to fix the relative paths.
-import '@material/mwc-formfield';
-import '@material/mwc-switch';
+import '../components/litdev-code-language-switch.js';
diff --git a/packages/lit-dev-content/src/pages/home.ts b/packages/lit-dev-content/src/pages/home.ts
index db75cccce..0580238de 100644
--- a/packages/lit-dev-content/src/pages/home.ts
+++ b/packages/lit-dev-content/src/pages/home.ts
@@ -1,5 +1,3 @@
-import type {Switch} from '@material/mwc-switch';
-
 // TODO(aomarks) This is only here for some mods. Remove it and mods when home
 // page design finalized.
 document.body.classList.add('home');
@@ -8,7 +6,6 @@ window.addEventListener('DOMContentLoaded', () => {
   fadeInLogoOnScroll();
   fadeHeaderOnScroll();
   activateTourRegions();
-  activateTourJsTsSwitch();
 });
 
 const fadeInLogoOnScroll = () => {
@@ -177,28 +174,3 @@ const activateTourRegions = () => {
     activateRegion(jsCode, note, region.js);
   }
 };
-
-const activateTourJsTsSwitch = async () => {
-  const sw = document.querySelector('#tourJsTsSwitch > mwc-switch') as Switch;
-  sw.addEventListener('change', () => {
-    document.querySelector('#tourTsCode')!.toggleAttribute('hidden');
-    document.querySelector('#tourJsCode')!.toggleAttribute('hidden');
-    const playgroundLink = document.querySelector(
-      '#playgroundLink'
-    ) as HTMLAnchorElement;
-    if (sw.checked) {
-      playgroundLink.href = '/playground/';
-    } else {
-      playgroundLink.href =
-        '/playground/#sample=examples/hello-world-javascript';
-    }
-  });
-
-  // No way to set an mwc-formfield field cursor?
-  await customElements.whenDefined('mwc-formfield');
-  requestAnimationFrame(() => {
-    document
-      .querySelector('#tourJsTsSwitch')!
-      .shadowRoot!.querySelector('label')!.style.cursor = 'pointer';
-  });
-};

From 72a5f8c72038e42869841f1c8f1d2b2580240687 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 12:14:14 -0700
Subject: [PATCH 03/10] Remove mwc-switch and mwc-formfield dependencies

---
 packages/lit-dev-content/package-lock.json    | 114 ------------------
 packages/lit-dev-content/package.json         |   2 -
 .../src/components/mwc-formfield.ts           |   7 --
 3 files changed, 123 deletions(-)
 delete mode 100644 packages/lit-dev-content/src/components/mwc-formfield.ts

diff --git a/packages/lit-dev-content/package-lock.json b/packages/lit-dev-content/package-lock.json
index 432652aac..22a094c9e 100644
--- a/packages/lit-dev-content/package-lock.json
+++ b/packages/lit-dev-content/package-lock.json
@@ -15,11 +15,9 @@
 				"@material/mwc-button": "^0.22.1",
 				"@material/mwc-dialog": "^0.23.0",
 				"@material/mwc-drawer": "^0.22.1",
-				"@material/mwc-formfield": "^0.22.1",
 				"@material/mwc-icon-button": "^0.22.1",
 				"@material/mwc-icon-button-toggle": "^0.22.1",
 				"@material/mwc-snackbar": "^0.22.1",
-				"@material/mwc-switch": "^0.22.1",
 				"lit": "^2.0.0-pre.1",
 				"lit-element": "^2.3.1",
 				"lit-html": "^1.2.1",
@@ -663,20 +661,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"node_modules/@material/form-field": {
-			"version": "12.0.0-canary.22d29cbb4.0",
-			"resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.22d29cbb4.0.tgz",
-			"integrity": "sha512-wYNyh1RMqEviuWcredWYx8ENEjR1GYdQu/NE9SKlfK7zKsFxF7szwHDd/3cZd7BSYVJUeylveDW+KgXQaW0YpQ==",
-			"dependencies": {
-				"@material/base": "12.0.0-canary.22d29cbb4.0",
-				"@material/feature-targeting": "12.0.0-canary.22d29cbb4.0",
-				"@material/ripple": "12.0.0-canary.22d29cbb4.0",
-				"@material/rtl": "12.0.0-canary.22d29cbb4.0",
-				"@material/theme": "12.0.0-canary.22d29cbb4.0",
-				"@material/typography": "12.0.0-canary.22d29cbb4.0",
-				"tslib": "^2.1.0"
-			}
-		},
 		"node_modules/@material/icon-button": {
 			"version": "12.0.0-canary.22d29cbb4.0",
 			"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.22d29cbb4.0.tgz",
@@ -953,18 +937,6 @@
 				"tslib": "^2.0.1"
 			}
 		},
-		"node_modules/@material/mwc-formfield": {
-			"version": "0.22.1",
-			"resolved": "https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.1.tgz",
-			"integrity": "sha512-jk8YyX1STjh+HCQOjlEmtr+kVG8Nlkemh9GoVNkJoIH6k7n+WgYcVXoJtfGWJFBkO8kfHziRVeLRPGP8Nt8ErA==",
-			"dependencies": {
-				"@material/form-field": "=12.0.0-canary.22d29cbb4.0",
-				"@material/mwc-base": "^0.22.1",
-				"lit-element": "^2.5.1",
-				"lit-html": "^1.4.1",
-				"tslib": "^2.0.1"
-			}
-		},
 		"node_modules/@material/mwc-icon": {
 			"version": "0.22.1",
 			"resolved": "https://registry.npmjs.org/@material/mwc-icon/-/mwc-icon-0.22.1.tgz",
@@ -1102,18 +1074,6 @@
 				"tslib": "^2.0.1"
 			}
 		},
-		"node_modules/@material/mwc-switch": {
-			"version": "0.22.1",
-			"resolved": "https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.1.tgz",
-			"integrity": "sha512-KDY3uqT2qTEw6Z9TS91Ucs0LViUcMsP1XHu6ZNhbv9Ai1uK/i8pwVWAIGIX9Cm1iCdjiYGfKm4DZLORDb/rfEQ==",
-			"dependencies": {
-				"@material/mwc-base": "^0.22.1",
-				"@material/mwc-ripple": "^0.22.1",
-				"@material/switch": "=12.0.0-canary.22d29cbb4.0",
-				"lit-element": "^2.5.1",
-				"tslib": "^2.0.1"
-			}
-		},
 		"node_modules/@material/mwc-textfield": {
 			"version": "0.22.1",
 			"resolved": "https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.22.1.tgz",
@@ -1222,24 +1182,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"node_modules/@material/switch": {
-			"version": "12.0.0-canary.22d29cbb4.0",
-			"resolved": "https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.22d29cbb4.0.tgz",
-			"integrity": "sha512-kubSphtXl74TC/PAjp67lYi7Ngk0MEKTLzp1ZHiMHElew2Z9/IYHP0pPaQRTkBY0ddIx6hVdHMiMf8qB4zuz2w==",
-			"dependencies": {
-				"@material/animation": "12.0.0-canary.22d29cbb4.0",
-				"@material/base": "12.0.0-canary.22d29cbb4.0",
-				"@material/density": "12.0.0-canary.22d29cbb4.0",
-				"@material/dom": "12.0.0-canary.22d29cbb4.0",
-				"@material/elevation": "12.0.0-canary.22d29cbb4.0",
-				"@material/feature-targeting": "12.0.0-canary.22d29cbb4.0",
-				"@material/ripple": "12.0.0-canary.22d29cbb4.0",
-				"@material/rtl": "12.0.0-canary.22d29cbb4.0",
-				"@material/shape": "12.0.0-canary.22d29cbb4.0",
-				"@material/theme": "12.0.0-canary.22d29cbb4.0",
-				"tslib": "^2.1.0"
-			}
-		},
 		"node_modules/@material/textfield": {
 			"version": "12.0.0-canary.22d29cbb4.0",
 			"resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-12.0.0-canary.22d29cbb4.0.tgz",
@@ -9303,20 +9245,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"@material/form-field": {
-			"version": "12.0.0-canary.22d29cbb4.0",
-			"resolved": "https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.22d29cbb4.0.tgz",
-			"integrity": "sha512-wYNyh1RMqEviuWcredWYx8ENEjR1GYdQu/NE9SKlfK7zKsFxF7szwHDd/3cZd7BSYVJUeylveDW+KgXQaW0YpQ==",
-			"requires": {
-				"@material/base": "12.0.0-canary.22d29cbb4.0",
-				"@material/feature-targeting": "12.0.0-canary.22d29cbb4.0",
-				"@material/ripple": "12.0.0-canary.22d29cbb4.0",
-				"@material/rtl": "12.0.0-canary.22d29cbb4.0",
-				"@material/theme": "12.0.0-canary.22d29cbb4.0",
-				"@material/typography": "12.0.0-canary.22d29cbb4.0",
-				"tslib": "^2.1.0"
-			}
-		},
 		"@material/icon-button": {
 			"version": "12.0.0-canary.22d29cbb4.0",
 			"resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-12.0.0-canary.22d29cbb4.0.tgz",
@@ -9595,18 +9523,6 @@
 				"tslib": "^2.0.1"
 			}
 		},
-		"@material/mwc-formfield": {
-			"version": "0.22.1",
-			"resolved": "https://registry.npmjs.org/@material/mwc-formfield/-/mwc-formfield-0.22.1.tgz",
-			"integrity": "sha512-jk8YyX1STjh+HCQOjlEmtr+kVG8Nlkemh9GoVNkJoIH6k7n+WgYcVXoJtfGWJFBkO8kfHziRVeLRPGP8Nt8ErA==",
-			"requires": {
-				"@material/form-field": "=12.0.0-canary.22d29cbb4.0",
-				"@material/mwc-base": "^0.22.1",
-				"lit-element": "^2.5.1",
-				"lit-html": "^1.4.1",
-				"tslib": "^2.0.1"
-			}
-		},
 		"@material/mwc-icon": {
 			"version": "0.22.1",
 			"resolved": "https://registry.npmjs.org/@material/mwc-icon/-/mwc-icon-0.22.1.tgz",
@@ -9744,18 +9660,6 @@
 				"tslib": "^2.0.1"
 			}
 		},
-		"@material/mwc-switch": {
-			"version": "0.22.1",
-			"resolved": "https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.22.1.tgz",
-			"integrity": "sha512-KDY3uqT2qTEw6Z9TS91Ucs0LViUcMsP1XHu6ZNhbv9Ai1uK/i8pwVWAIGIX9Cm1iCdjiYGfKm4DZLORDb/rfEQ==",
-			"requires": {
-				"@material/mwc-base": "^0.22.1",
-				"@material/mwc-ripple": "^0.22.1",
-				"@material/switch": "=12.0.0-canary.22d29cbb4.0",
-				"lit-element": "^2.5.1",
-				"tslib": "^2.0.1"
-			}
-		},
 		"@material/mwc-textfield": {
 			"version": "0.22.1",
 			"resolved": "https://registry.npmjs.org/@material/mwc-textfield/-/mwc-textfield-0.22.1.tgz",
@@ -9864,24 +9768,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"@material/switch": {
-			"version": "12.0.0-canary.22d29cbb4.0",
-			"resolved": "https://registry.npmjs.org/@material/switch/-/switch-12.0.0-canary.22d29cbb4.0.tgz",
-			"integrity": "sha512-kubSphtXl74TC/PAjp67lYi7Ngk0MEKTLzp1ZHiMHElew2Z9/IYHP0pPaQRTkBY0ddIx6hVdHMiMf8qB4zuz2w==",
-			"requires": {
-				"@material/animation": "12.0.0-canary.22d29cbb4.0",
-				"@material/base": "12.0.0-canary.22d29cbb4.0",
-				"@material/density": "12.0.0-canary.22d29cbb4.0",
-				"@material/dom": "12.0.0-canary.22d29cbb4.0",
-				"@material/elevation": "12.0.0-canary.22d29cbb4.0",
-				"@material/feature-targeting": "12.0.0-canary.22d29cbb4.0",
-				"@material/ripple": "12.0.0-canary.22d29cbb4.0",
-				"@material/rtl": "12.0.0-canary.22d29cbb4.0",
-				"@material/shape": "12.0.0-canary.22d29cbb4.0",
-				"@material/theme": "12.0.0-canary.22d29cbb4.0",
-				"tslib": "^2.1.0"
-			}
-		},
 		"@material/textfield": {
 			"version": "12.0.0-canary.22d29cbb4.0",
 			"resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-12.0.0-canary.22d29cbb4.0.tgz",
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
index 65890256d..3a21b8abe 100644
--- a/packages/lit-dev-content/package.json
+++ b/packages/lit-dev-content/package.json
@@ -52,11 +52,9 @@
     "@material/mwc-button": "^0.22.1",
     "@material/mwc-dialog": "^0.23.0",
     "@material/mwc-drawer": "^0.22.1",
-    "@material/mwc-formfield": "^0.22.1",
     "@material/mwc-icon-button": "^0.22.1",
     "@material/mwc-icon-button-toggle": "^0.22.1",
     "@material/mwc-snackbar": "^0.22.1",
-    "@material/mwc-switch": "^0.22.1",
     "lit": "^2.0.0-pre.1",
     "lit-element": "^2.3.1",
     "lit-html": "^1.2.1",
diff --git a/packages/lit-dev-content/src/components/mwc-formfield.ts b/packages/lit-dev-content/src/components/mwc-formfield.ts
deleted file mode 100644
index f94601087..000000000
--- a/packages/lit-dev-content/src/components/mwc-formfield.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import '@material/mwc-formfield';

From 62c0d620085a23ec3d8bda264ce08e929ac0b67b Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 13:19:17 -0700
Subject: [PATCH 04/10] Replace separate JS + TS Hello World examples with
 unified one

Leaving the JS verison hand-rolled for now because of the imperfect position
of the static styles vs static properties block. Will address in
upcoming ts-decorators change.
---
 .../examples/hello-world-javascript/project.json      | 11 -----------
 .../examples/hello-world-typescript/index.html        |  7 -------
 .../index.html                                        |  0
 .../project.json                                      |  4 ++--
 .../simple-greeting.js                                |  3 +--
 .../simple-greeting.ts                                |  0
 packages/lit-dev-content/samples/tsconfig.json        |  5 ++++-
 packages/lit-dev-content/site/home/3-tour.html        |  4 ++--
 packages/lit-dev-content/src/pages/playground.ts      |  2 +-
 9 files changed, 10 insertions(+), 26 deletions(-)
 delete mode 100644 packages/lit-dev-content/samples/examples/hello-world-javascript/project.json
 delete mode 100644 packages/lit-dev-content/samples/examples/hello-world-typescript/index.html
 rename packages/lit-dev-content/samples/examples/{hello-world-javascript => hello-world}/index.html (100%)
 rename packages/lit-dev-content/samples/examples/{hello-world-typescript => hello-world}/project.json (56%)
 rename packages/lit-dev-content/samples/examples/{hello-world-javascript => hello-world}/simple-greeting.js (93%)
 rename packages/lit-dev-content/samples/examples/{hello-world-typescript => hello-world}/simple-greeting.ts (100%)

diff --git a/packages/lit-dev-content/samples/examples/hello-world-javascript/project.json b/packages/lit-dev-content/samples/examples/hello-world-javascript/project.json
deleted file mode 100644
index ae65ed436..000000000
--- a/packages/lit-dev-content/samples/examples/hello-world-javascript/project.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "/samples/base.json",
-  "title": "Hello World (JavaScript)",
-  "description": "Basic example of a Lit component using JavaScript.",
-  "section": "Basics",
-  "files": {
-    "simple-greeting.js": {},
-    "index.html": {}
-  },
-  "order": 1
-}
diff --git a/packages/lit-dev-content/samples/examples/hello-world-typescript/index.html b/packages/lit-dev-content/samples/examples/hello-world-typescript/index.html
deleted file mode 100644
index 17c6af374..000000000
--- a/packages/lit-dev-content/samples/examples/hello-world-typescript/index.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<head>
-  <script type="module" src="./simple-greeting.js"></script>
-</head>
-<body>
-  <simple-greeting name="World"></simple-greeting>
-</body>
diff --git a/packages/lit-dev-content/samples/examples/hello-world-javascript/index.html b/packages/lit-dev-content/samples/examples/hello-world/index.html
similarity index 100%
rename from packages/lit-dev-content/samples/examples/hello-world-javascript/index.html
rename to packages/lit-dev-content/samples/examples/hello-world/index.html
diff --git a/packages/lit-dev-content/samples/examples/hello-world-typescript/project.json b/packages/lit-dev-content/samples/examples/hello-world/project.json
similarity index 56%
rename from packages/lit-dev-content/samples/examples/hello-world-typescript/project.json
rename to packages/lit-dev-content/samples/examples/hello-world/project.json
index 561f1b279..2017cf6f0 100644
--- a/packages/lit-dev-content/samples/examples/hello-world-typescript/project.json
+++ b/packages/lit-dev-content/samples/examples/hello-world/project.json
@@ -1,7 +1,7 @@
 {
   "extends": "/samples/base.json",
-  "title": "Hello World (TypeScript)",
-  "description": "Basic example of a Lit component using TypeScript.",
+  "title": "Hello World",
+  "description": "Basic example of a Lit component.",
   "section": "Basics",
   "files": {
     "simple-greeting.ts": {},
diff --git a/packages/lit-dev-content/samples/examples/hello-world-javascript/simple-greeting.js b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
similarity index 93%
rename from packages/lit-dev-content/samples/examples/hello-world-javascript/simple-greeting.js
rename to packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
index f3a4875eb..a4141443a 100644
--- a/packages/lit-dev-content/samples/examples/hello-world-javascript/simple-greeting.js
+++ b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.js
@@ -4,7 +4,7 @@ export class SimpleGreeting extends LitElement {
   static styles = css`p { color: blue }`;
 
   static properties = {
-    name: {type: String}
+    name: {type: String},
   };
 
   constructor() {
@@ -16,5 +16,4 @@ export class SimpleGreeting extends LitElement {
     return html`<p>Hello, ${this.name}!</p>`;
   }
 }
-
 customElements.define('simple-greeting', SimpleGreeting);
diff --git a/packages/lit-dev-content/samples/examples/hello-world-typescript/simple-greeting.ts b/packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts
similarity index 100%
rename from packages/lit-dev-content/samples/examples/hello-world-typescript/simple-greeting.ts
rename to packages/lit-dev-content/samples/examples/hello-world/simple-greeting.ts
diff --git a/packages/lit-dev-content/samples/tsconfig.json b/packages/lit-dev-content/samples/tsconfig.json
index 4aa8ac5ac..efb3f84f6 100644
--- a/packages/lit-dev-content/samples/tsconfig.json
+++ b/packages/lit-dev-content/samples/tsconfig.json
@@ -17,6 +17,9 @@
   "exclude": [
     // Intentionally contains unused imports. This one's .js output is
     // hand-rolled becuase TypeScript will elide imports.
-    "tutorial/02-define/before/my-element.ts"
+    "tutorial/02-define/before/my-element.ts",
+    // Position of static properties block is imperfect, and this example is
+    // prominent on the homepage. See https://github.com/lit/lit/issues/2159.
+    "examples/hello-world/simple-greeting.ts"
   ]
 }
diff --git a/packages/lit-dev-content/site/home/3-tour.html b/packages/lit-dev-content/site/home/3-tour.html
index b285f68b7..3057b4fe8 100644
--- a/packages/lit-dev-content/site/home/3-tour.html
+++ b/packages/lit-dev-content/site/home/3-tour.html
@@ -4,10 +4,10 @@
       <litdev-code-language-switch>
       </litdev-code-language-switch>
       <div id="tourTsCode">
-        {% highlight 'ts' %}{% include '../../samples/examples/hello-world-typescript/simple-greeting.ts' %}{% endhighlight %}
+        {% highlight 'ts' %}{% include '../../samples/examples/hello-world/simple-greeting.ts' %}{% endhighlight %}
       </div>
       <div id="tourJsCode">
-        {% highlight 'js' %}{% include '../../samples/examples/hello-world-javascript/simple-greeting.js' %}{% endhighlight %}
+        {% highlight 'js' %}{% include '../../samples/js/examples/hello-world/simple-greeting.js' %}{% endhighlight %}
       </div>
       <div id="tourHtmlCode">
         {% highlight 'html' %}<simple-greeting name="World"></simple-greeting>{% endhighlight %}
diff --git a/packages/lit-dev-content/src/pages/playground.ts b/packages/lit-dev-content/src/pages/playground.ts
index f110f1096..1f39cb36a 100644
--- a/packages/lit-dev-content/src/pages/playground.ts
+++ b/packages/lit-dev-content/src/pages/playground.ts
@@ -150,7 +150,7 @@ window.addEventListener('DOMContentLoaded', () => {
       };
     } else {
       showCodeLanguageSwitch();
-      let sample = 'examples/hello-world-typescript';
+      let sample = 'examples/hello-world';
       const urlSample = params.get('sample');
       if (urlSample?.match(/^[a-zA-Z0-9_\-\/]+$/)) {
         sample = urlSample;

From f21ca44dc01e92474a7586fe81bece28f862656b Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 13:26:16 -0700
Subject: [PATCH 05/10] Fix home page highlights for JS mode

This actually broke in https://github.com/lit/lit.dev/pull/495
where I forgot to update these ranges.
---
 packages/lit-dev-content/src/pages/home.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/lit-dev-content/src/pages/home.ts b/packages/lit-dev-content/src/pages/home.ts
index 0580238de..78e7f41b9 100644
--- a/packages/lit-dev-content/src/pages/home.ts
+++ b/packages/lit-dev-content/src/pages/home.ts
@@ -63,8 +63,8 @@ const activateTourRegions = () => {
         end: {line: 3, char: 32},
       },
       js: {
-        start: {line: 23, char: 0},
-        end: {line: 23, char: 55},
+        start: {line: 18, char: 0},
+        end: {line: 18, char: 55},
       },
     },
     {
@@ -74,8 +74,8 @@ const activateTourRegions = () => {
         end: {line: 5, char: 41},
       },
       js: {
-        start: {line: 4, char: 4},
-        end: {line: 4, char: 32},
+        start: {line: 3, char: 2},
+        end: {line: 3, char: 41},
       },
     },
     {
@@ -85,8 +85,8 @@ const activateTourRegions = () => {
         end: {line: 8, char: 19},
       },
       js: {
-        start: {line: 9, char: 6},
-        end: {line: 9, char: 25},
+        start: {line: 5, char: 2},
+        end: {line: 7, char: 23},
       },
     },
     {
@@ -96,8 +96,8 @@ const activateTourRegions = () => {
         end: {line: 11, char: 42},
       },
       js: {
-        start: {line: 19, char: 11.5},
-        end: {line: 19, char: 42},
+        start: {line: 15, char: 11.5},
+        end: {line: 15, char: 42},
       },
     },
   ];

From 116596d0b51f09d2291bd7e1b1317a3d83332e36 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 13:08:25 -0700
Subject: [PATCH 06/10] Check for generated samples that have lost or
 re-ordered playground fold/hide comments

---
 .../src/generate-js-samples.ts                | 29 ++++++++++++++++++-
 .../lit-dev-tools-esm/src/typescript-util.ts  |  6 ++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/packages/lit-dev-tools-esm/src/generate-js-samples.ts b/packages/lit-dev-tools-esm/src/generate-js-samples.ts
index 346814560..4a1c91540 100644
--- a/packages/lit-dev-tools-esm/src/generate-js-samples.ts
+++ b/packages/lit-dev-tools-esm/src/generate-js-samples.ts
@@ -12,6 +12,7 @@ import {
 
 import pathlib from 'path';
 import fs from 'fs/promises';
+import fsSync from 'fs';
 import {fileURLToPath} from 'url';
 
 import chokidar from 'chokidar';
@@ -187,10 +188,11 @@ const tsCompileOpts: InvokeTypeScriptOpts = {
     ],
   }),
 
-  transformJs: (js) => {
+  transformJs: (js, filepath) => {
     // Replace the special blank line placeholder comments from
     // preserveBlankLinesTransformer.
     js = js.replace(BLANK_LINE_PLACEHOLDER_COMMENT_REGEXP, '\n');
+
     // Prettier does a nicer job than TypeScript's built-in formatter.
     js = prettier.format(js, {
       parser: 'typescript',
@@ -198,6 +200,31 @@ const tsCompileOpts: InvokeTypeScriptOpts = {
       bracketSpacing: false,
       embeddedLanguageFormatting: 'off',
     });
+
+    const jsPath = pathlib.relative(process.cwd(), filepath);
+    const playgroundCommentRegexp =
+      /\/\*\s*(playground-(fold|hide)(-end)?)\s\*\//g;
+    const tsPath = jsPath
+      .replace(/^samples\/js\//, 'samples/')
+      .replace(/\.js$/, '.ts');
+    const ts = fsSync.readFileSync(tsPath, 'utf8');
+    const tsPlaygroundComments = [...ts.matchAll(playgroundCommentRegexp)].map(
+      ([, kind]) => kind
+    );
+    const jsPlaygroundComments = [...js.matchAll(playgroundCommentRegexp)].map(
+      ([, kind]) => kind
+    );
+    if (tsPlaygroundComments.join(';') !== jsPlaygroundComments.join(';')) {
+      const msg =
+        `Mismatched playground hide/fold comments:` +
+        `\n  ${tsPath}` +
+        `\n  ${jsPath}\n`;
+      if (watchMode) {
+        console.error(msg);
+      } else {
+        throw new Error(msg);
+      }
+    }
     return js;
   },
 };
diff --git a/packages/lit-dev-tools-esm/src/typescript-util.ts b/packages/lit-dev-tools-esm/src/typescript-util.ts
index 9ea91968f..4b14284de 100644
--- a/packages/lit-dev-tools-esm/src/typescript-util.ts
+++ b/packages/lit-dev-tools-esm/src/typescript-util.ts
@@ -22,9 +22,9 @@ export interface InvokeTypeScriptOpts {
   transformersFactory?: (program: ts.Program) => ts.CustomTransformers;
 
   /**
-   * Function to transform JavaScript before it is written.
+   * Function to transform JavaScript as a string before it is written.
    */
-  transformJs?: (js: string) => string;
+  transformJs?: (js: string, filepath: string) => string;
 }
 
 /**
@@ -107,6 +107,6 @@ const wrapWriteFile =
   (path, data, byteOrderMark) =>
     ts.sys.writeFile(
       path,
-      opts.transformJs ? opts.transformJs(data) : data,
+      opts.transformJs ? opts.transformJs(data, path) : data,
       byteOrderMark
     );

From d9baec650965c989a985b22b81b5a20cde81ad32 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 14:13:26 -0700
Subject: [PATCH 07/10] Hand-roll two examples that are losing important fold
 comments

---
 .../docs/templates/lists-arrays/my-element.js | 23 +++++++++++++++
 .../docs/templates/lists-map/my-element.js    | 29 +++++++++++++++++++
 .../lit-dev-content/samples/tsconfig.json     |  6 +++-
 3 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/lit-dev-content/samples/docs/templates/lists-arrays/my-element.js
 create mode 100644 packages/lit-dev-content/samples/docs/templates/lists-map/my-element.js

diff --git a/packages/lit-dev-content/samples/docs/templates/lists-arrays/my-element.js b/packages/lit-dev-content/samples/docs/templates/lists-arrays/my-element.js
new file mode 100644
index 000000000..fb56fe7af
--- /dev/null
+++ b/packages/lit-dev-content/samples/docs/templates/lists-arrays/my-element.js
@@ -0,0 +1,23 @@
+/* playground-fold */
+import {LitElement, html} from 'lit';
+
+class MyElement extends LitElement {
+/* playground-fold-end */
+
+static properties = {
+  colors: {},
+};
+
+constructor() {
+  super();
+  this.colors = ['red', 'green', 'blue'];
+}
+
+render() {
+  return html`<p>Colors: ${this.colors}</p>`;
+}
+/* playground-fold */
+
+}
+customElements.define('my-element', MyElement);
+/* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/docs/templates/lists-map/my-element.js b/packages/lit-dev-content/samples/docs/templates/lists-map/my-element.js
new file mode 100644
index 000000000..18b0fc2f0
--- /dev/null
+++ b/packages/lit-dev-content/samples/docs/templates/lists-map/my-element.js
@@ -0,0 +1,29 @@
+/* playground-fold */
+import {LitElement, html} from 'lit';
+
+class MyElement extends LitElement {
+/* playground-fold-end */
+
+static properties = {
+  colors: {},
+};
+
+constructor() {
+  super();
+  this.colors = ['red', 'green', 'blue'];
+}
+
+render() {
+  return html`
+    <ul>
+      ${this.colors.map((color) =>
+        html`<li style="color: ${color}">${color}</li>`
+      )}
+    </ul>
+  `;
+}
+/* playground-fold */
+
+}
+customElements.define('my-element', MyElement);
+/* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/tsconfig.json b/packages/lit-dev-content/samples/tsconfig.json
index efb3f84f6..ef37bcabd 100644
--- a/packages/lit-dev-content/samples/tsconfig.json
+++ b/packages/lit-dev-content/samples/tsconfig.json
@@ -20,6 +20,10 @@
     "tutorial/02-define/before/my-element.ts",
     // Position of static properties block is imperfect, and this example is
     // prominent on the homepage. See https://github.com/lit/lit/issues/2159.
-    "examples/hello-world/simple-greeting.ts"
+    "examples/hello-world/simple-greeting.ts",
+    // Comments in some locations get lost by TypeScript. See
+    // https://github.com/lit/lit/issues/2158.
+    "docs/templates/lists-arrays/my-element.ts",
+    "docs/templates/lists-map/my-element.ts"
   ]
 }

From 2b1c9fda20b8b2745050c2fdae6eec0dd044c5b2 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 15:04:22 -0700
Subject: [PATCH 08/10] Move a fold comment so that it preserved as trailing
 instead of lost

---
 .../samples/docs/templates/expressions/my-element.ts           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/lit-dev-content/samples/docs/templates/expressions/my-element.ts b/packages/lit-dev-content/samples/docs/templates/expressions/my-element.ts
index 31e2e5676..20651bbdf 100644
--- a/packages/lit-dev-content/samples/docs/templates/expressions/my-element.ts
+++ b/packages/lit-dev-content/samples/docs/templates/expressions/my-element.ts
@@ -18,6 +18,5 @@ class MyElement extends LitElement {
       ${this.show ? html`
           <ul>${this.todos.map(i => html`<li>${i}</li>`)}</ul>
         ` : ''}`;
-  }
-  /* playground-fold */
+  }/* playground-fold */
 }

From 755ed87e5acdb8df26bfeff190233852f678082e Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 14:22:47 -0700
Subject: [PATCH 09/10] Remove some unecessary TypeScript vs JavaScript
 language, and add a few more switchable samples.

---
 .../site/_includes/blog-post.html             |  1 +
 ...-02-05-lit-element-and-lit-html-release.md | 24 +++++++++++--
 .../site/docs/components/overview.md          |  4 ---
 .../site/docs/getting-started.md              |  5 +--
 packages/lit-dev-content/site/docs/index.md   |  2 +-
 .../site/docs/tools/starter-kits.md           | 36 ++++++++++---------
 6 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/packages/lit-dev-content/site/_includes/blog-post.html b/packages/lit-dev-content/site/_includes/blog-post.html
index 0bdf0ef67..a93f3cd0a 100644
--- a/packages/lit-dev-content/site/_includes/blog-post.html
+++ b/packages/lit-dev-content/site/_includes/blog-post.html
@@ -8,6 +8,7 @@
 
 {% block head %}
   {% inlinecss "blog-post.css" %}
+  <script type="module" src="{{ site.baseurl }}/js/components/litdev-switchable-sample.js"></script>
 {% endblock %}
 
 {% block drawer %}
diff --git a/packages/lit-dev-content/site/blog/2019-02-05-lit-element-and-lit-html-release.md b/packages/lit-dev-content/site/blog/2019-02-05-lit-element-and-lit-html-release.md
index 6b422984f..8a4ea4358 100644
--- a/packages/lit-dev-content/site/blog/2019-02-05-lit-element-and-lit-html-release.md
+++ b/packages/lit-dev-content/site/blog/2019-02-05-lit-element-and-lit-html-release.md
@@ -90,7 +90,9 @@ LitElement uses lit-html to render components and adds APIs to declare reactive
 properties and attributes. Elements update automatically when their properties
 change. And they update _fast_, without diffing.
 
-Here's a simple LitElement component in TypeScript:
+Here's a simple LitElement component:
+
+{% switchable-sample %}
 
 ```ts
 @customElement('name-tag')
@@ -104,7 +106,25 @@ class NameTag extends LitElement {
 }
 ```
 
-(We have a great vanilla JavaScript API also.)
+```js
+class NameTag extends LitElement {
+  static properties = {
+    name: {},
+  };
+
+  constructor() {
+    super();
+    this.name = 'a secret';
+  }
+
+  render() {
+    return html`<p>Hi, my name is ${this.name}!</p>`;
+  }
+}
+customElements.define('name-tag', NameTag);
+```
+
+{% endswitchable-sample %}
 
 This creates an element you can use anywhere you'd use a regular HTML element:
 
diff --git a/packages/lit-dev-content/site/docs/components/overview.md b/packages/lit-dev-content/site/docs/components/overview.md
index f39c1efe8..09ba9a45b 100644
--- a/packages/lit-dev-content/site/docs/components/overview.md
+++ b/packages/lit-dev-content/site/docs/components/overview.md
@@ -24,8 +24,4 @@ Here's a sample component:
 
 {% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %}
 
-<div class="alert alert-info">
-
-**TypeScript or JavaScript?** Unless otherwise noted, samples are in TypeScript, but you can use plain JavaScript with Lit, too.
-
 </div>
diff --git a/packages/lit-dev-content/site/docs/getting-started.md b/packages/lit-dev-content/site/docs/getting-started.md
index 4297c041b..84103c233 100644
--- a/packages/lit-dev-content/site/docs/getting-started.md
+++ b/packages/lit-dev-content/site/docs/getting-started.md
@@ -10,10 +10,7 @@ There are many ways to get started using Lit, from our Playground and interactiv
 
 ## Lit Playground
 
-Get started right away with the interactive playground and examples. Start with editable "Hello World" examples in JavaScript and TypeScript, then customize them or move on to more examples.
-
-* [Hello World (TypeScript)](/playground/#sample=examples/hello-world-typescript)
-* [Hello World (JavaScript)](/playground/#sample=examples/hello-world-javascript)
+Get started right away with the interactive playground and examples. Start with "[Hello World](/playground)", then customize it or move on to more examples.
 
 ## Interactive tutorial
 
diff --git a/packages/lit-dev-content/site/docs/index.md b/packages/lit-dev-content/site/docs/index.md
index ac024079d..f2564a804 100644
--- a/packages/lit-dev-content/site/docs/index.md
+++ b/packages/lit-dev-content/site/docs/index.md
@@ -42,7 +42,7 @@ Some things to note:
 * Lit’s [expressive, declarative templates](/docs/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered.
 * [Reactive properties](/docs/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes.
 * [Styles](/docs/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context.
-* This example is in TypeScript, but TypeScript is 100% optional–Lit works great in JavaScript, too.
+* Lit works great in vanilla JavaScript, or you can use TypeScript for more even better ergonomics by using decorators and strong types.
 
 Lit doesn’t require compilation or building during development, so it can be used virtually tool-free if you prefer. First-class [IDE support](/docs/tools/development/#ide-plugins) (code-completion, linting, etc.) and [tooling for production](/docs/tools/production/) (localization, template minification, etc.) are readily available.
 
diff --git a/packages/lit-dev-content/site/docs/tools/starter-kits.md b/packages/lit-dev-content/site/docs/tools/starter-kits.md
index 6e1e5a70c..2c03e86ed 100644
--- a/packages/lit-dev-content/site/docs/tools/starter-kits.md
+++ b/packages/lit-dev-content/site/docs/tools/starter-kits.md
@@ -94,7 +94,12 @@ A couple of things to look for in the code:
 
 *   The code defines a class for the component (`MyElement`) and registers it with the browser as a custom element named `<my-element>`.
 
-    _JavaScript_
+    {% switchable-sample %}
+
+    ```ts
+    @customElement('my-element')
+    export class MyElement extends LitElement { /* ... */ }
+    ```
 
     ```js
     export class MyElement extends LitElement { /* ... */ }
@@ -102,12 +107,8 @@ A couple of things to look for in the code:
     customElements.define('my-element', MyElement);
     ```
 
-    _TypeScript_
+    {% endswitchable-sample %}
 
-    ```ts
-    @customElement('my-element')
-    export class MyElement extends LitElement { /* ... */ }
-    ```
 
 *   The component's `render` method defines a [template](/docs/templates/overview/) that will be rendered as a part of the component. In this case, it includes some text, some data bindings, and a button. For more information, see [Templates](/docs/templates/overview/).
 
@@ -128,11 +129,20 @@ A couple of things to look for in the code:
 
 *   The component defines some properties. The component responds to changes in these properties (for example, by re-rendering the template when necessary). For more information, see [Properties](/docs/components/properties/).
 
-    _JavaScript_
+    {% switchable-sample %}
 
-    ```js
+    ```ts
     export class MyElement extends LitElement {
+      // ...
+      @property({type: String})
+      name = 'World';
+      //...
+    }
+    ```
 
+    ```js
+    export class MyElement extends LitElement {
+      // ...
       static properties = {
         name: {type: String}
       };
@@ -145,16 +155,8 @@ A couple of things to look for in the code:
     }
     ```
 
-    _TypeScript_
+    {% endswitchable-sample %}
 
-    ```ts
-    export class MyElement extends LitElement {
-      // ...
-      @property({type: String})
-      name = 'World';
-      //...
-    }
-    ```
 
 ### Rename your component
 

From c79bd656974ca05ec87f263f0288e64ebbacd0d1 Mon Sep 17 00:00:00 2001
From: Alexander Marks <aomarks@google.com>
Date: Tue, 14 Sep 2021 15:49:50 -0700
Subject: [PATCH 10/10] Fix "Lit works great..." language

---
 packages/lit-dev-content/site/docs/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lit-dev-content/site/docs/index.md b/packages/lit-dev-content/site/docs/index.md
index f2564a804..9f8306044 100644
--- a/packages/lit-dev-content/site/docs/index.md
+++ b/packages/lit-dev-content/site/docs/index.md
@@ -42,7 +42,7 @@ Some things to note:
 * Lit’s [expressive, declarative templates](/docs/templates/overview/) (utilizing JavaScript tagged template literals) make it easy to describe how a component should be rendered.
 * [Reactive properties](/docs/components/properties/) represent a component’s public API and/or internal state; your component automatically re-renders whenever a reactive property changes.
 * [Styles](/docs/components/styles) are scoped by default, keeping your CSS selectors simple and ensuring that your component’s styling won’t pollute (or be polluted by) the surrounding context.
-* Lit works great in vanilla JavaScript, or you can use TypeScript for more even better ergonomics by using decorators and strong types.
+* Lit works great in vanilla JavaScript, or you can use TypeScript for even better ergonomics by using decorators and type declarations.
 
 Lit doesn’t require compilation or building during development, so it can be used virtually tool-free if you prefer. First-class [IDE support](/docs/tools/development/#ide-plugins) (code-completion, linting, etc.) and [tooling for production](/docs/tools/production/) (localization, template minification, etc.) are readily available.