Address feedback. Fixes #821. (#834)

* Address feedback. Fixes #821.

* Missed one.

Author: Arthur Evans

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/00/before/my-element.ts

@@ -16,9 +16,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <button @click=${this.flipCoin}>Flip a coin!</button>
-    <p>Result: ${this.result}</p>
-
+      <button @click=${this.flipCoin}>Flip a coin!</button>
+      <p>Result: ${this.result}</p>
     `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/01/after/my-element.ts

@@ -16,8 +16,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <button @click=${this.flipCoin}>Flip a coin!</button>
-    <p>Result: ${this.result}</p>
+      <button @click=${this.flipCoin}>Flip a coin!</button>
+      <p>Result: ${this.result}</p>
     `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.js

@@ -17,9 +17,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <button @click=${this.flipCoin}>Flip a coin!</button>
-    <p>Result: ${this.result}</p>
-
+      <button @click=${this.flipCoin}>Flip a coin!</button>
+      <p>Result: ${this.result}</p>
     `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/01/before/my-element.ts

@@ -15,9 +15,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    <button @click=${this.flipCoin}>Flip a coin!</button>
-    <p>Result: ${this.result}</p>
-
+      <button @click=${this.flipCoin}>Flip a coin!</button>
+      <p>Result: ${this.result}</p>
     `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/02/after/my-element.ts

@@ -15,8 +15,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    ${map(this.groceries, (item) =>
-      html`<button @click=${() => this.removeItem(item)}>x</button>  ${item}<br>`
+      ${map(this.groceries, (item) =>
+        html`<button @click=${() => this.removeItem(item)}>x</button>  ${item}<br>`
       )}
     `;
   }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/02/before/my-element.ts

@@ -14,8 +14,8 @@ export class MyElement extends LitElement {
 
   render() {
     return html`
-    ${map(this.groceries, (item) =>
-      html`<button @click=${() => this.removeItem(item)}>x</button> ${item}<br>`
+      ${map(this.groceries, (item) =>
+        html`<button @click=${() => this.removeItem(item)}>x</button> ${item}<br>`
       )}
     `;
   }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/04/after/my-element.ts

@@ -31,6 +31,6 @@ export class MyElement extends LitElement {
       <label>Backward: <input id="backward" @input=${this.onInput} .value=${this.backward}></label>
       <div>Forward text: ${this.forward}</div>
       <div>Backward text: ${this.backward}</div>
-    `
+    `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/04/before/my-element.ts

@@ -21,6 +21,6 @@ export class MyElement extends LitElement {
       <label>Backward: <input id="backward" @input=${this.onInput} .value=${this.backward}></label>
       <div>Forward text: ${this.forward}</div>
       <div>Backward text: ${this.backward}</div>
-    `
+    `;
   }
 }

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/05/after/my-element.ts

@@ -33,7 +33,7 @@ export class MyElement extends LitElement {
     if (changedProperties.has('_showMessage')) {
       const final = this._message.getBoundingClientRect().width;
       const starting = 0 - final;
-      var player = this._message.animate([
+      this._message.animate([
         { transform: `translateX(${starting}px)` },
         { transform: `translateX(0)` }
       ], {

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/05/before/my-element.ts

@@ -18,7 +18,7 @@ export class MyElement extends LitElement {
   _showMessage = false;
 
   @query('#message')
-  _message!: HTMLParagraphElement;
+  _message!: HTMLDivElement;
 
   render() {
     return html`

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/06/before/bye-element.ts

@@ -18,7 +18,7 @@ export class ByeElement extends LitElement {
   _showMessage = false;
 
   @query('#message')
-  _message!: HTMLParagraphElement;
+  _message!: HTMLDivElement;
 
   render() {
     return html`
@@ -28,11 +28,12 @@ export class ByeElement extends LitElement {
       </div>
     `;
   }
+
   protected updated(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('_showMessage')) {
       const rect = this._message.getBoundingClientRect();
       const startingX = 0 - rect.width;
-      var player = this._message.animate([
+      this._message.animate([
         { transform: `translateX(${startingX}px) scale(0.1)` },
         { transform: `translateX(0) translateY(0) scale(1)` }
       ], {

Diff for: packages/lit-dev-content/samples/tutorials/reactivity/tutorial.json

@@ -31,7 +31,7 @@
     },
     {
       "title": "Recap",
-      "hasAfter": true
+      "noSolve": true
     }
   ]
 }

Diff for: packages/lit-dev-content/site/tutorials/content/reactivity/05.md

@@ -27,7 +27,7 @@ Add the following `updated()` method to the component:
     if (changedProperties.has('_showMessage')) {
       const final = this._message.getBoundingClientRect().width;
       const starting = 0 - final;
-      var player = this._message.animate([
+      this._message.animate([
         { transform: `translateX(${starting}px)` },
         { transform: `translateX(0)` }
       ], {