Final JS docs fixes and launch

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",

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 */
 }

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 */

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 */

packages/lit-dev-content/samples/examples/hello-world-typescript/project.json → 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": {},

packages/lit-dev-content/samples/examples/hello-world-javascript/simple-greeting.js → 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);

packages/lit-dev-content/samples/tsconfig.json

@@ -17,6 +17,13 @@
   "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",
+    // 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"
   ]
 }

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 %}

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: