format samples

Author: louis-bompart

packages/lit-dev-content/samples/_check-code-helpers.ts

@@ -1,6 +1,8 @@
 import {PostDoc} from 'postdoc-lib';
 
-export const installCodeChecker = async (checkCode: () => Promise<{passed: boolean, message?: string}>) => {
+export const installCodeChecker = async (
+  checkCode: () => Promise<{passed: boolean; message?: string}>,
+) => {
   const postDoc = new PostDoc({
     messageTarget: window.top!,
     messageReceiver: window,
@@ -15,9 +17,9 @@ export const installCodeChecker = async (checkCode: () => Promise<{passed: boole
           postDoc.postMessage({status, message});
           break;
       }
-    }
+    },
   });
 
   await postDoc.handshake;
   postDoc.postMessage({status: 'READY'});
-}
+};

packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html

@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts

@@ -1,10 +1,11 @@
-import { html, LitElement, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement, css} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
   render() {
-    return html`<p>I'm blue</p><div>I'm red</div>`;
+    return html`<p>I'm blue</p>
+      <div>I'm red</div>`;
   }
 
   static styles = css`
@@ -15,4 +16,4 @@ export class MyElement extends LitElement {
       color: red;
     }
   `;
-}
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/index.html

@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts

@@ -1,30 +1,26 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { html as staticHTML, StaticValue } from 'lit/static-html.js';
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {html as staticHTML, StaticValue} from 'lit/static-html.js';
 
 @customElement('input-or-textfield')
 export class MyElement extends LitElement {
   // attribute is false because this is a value that can't be serialized to an
   // HTML attribute
-  @property({ attribute: false }) tagLiteral: StaticValue|null = null;
+  @property({attribute: false}) tagLiteral: StaticValue | null = null;
   @property() value = '';
 
   render() {
     return html`
-      ${
-        staticHTML`
+      ${staticHTML`
           <${this.tagLiteral}
             @input=${this.#onInput}
             .value=${this.value}></${this.tagLiteral}>
-        `
-      }
-      <div>
-        The value of the input is: ${this.value}
-      </div>
+        `}
+      <div>The value of the input is: ${this.value}</div>
     `;
   }
 
   #onInput(e: InputEvent) {
-    this.value = (e.target as (HTMLInputElement | HTMLTextAreaElement)).value;
+    this.value = (e.target as HTMLInputElement | HTMLTextAreaElement).value;
   }
 }

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { literal } from 'lit/static-html.js';
+import {css, html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {literal} from 'lit/static-html.js';
 import './input-or-textfield.js';
 
 @customElement('my-element')
@@ -14,37 +14,49 @@ export class MyElement extends LitElement {
         <div>
           <label>
             <input
-                type="radio"
-                name="selection"
-                @change=${this.#onChange}
-                value="input"
-                checked>
+              type="radio"
+              name="selection"
+              @change=${this.#onChange}
+              value="input"
+              checked
+            />
             input
           </label>
         </div>
         <div>
           <label>
             <input
-                type="radio"
-                name="selection"
-                @change=${this.#onChange}
-                value="textarea">
+              type="radio"
+              name="selection"
+              @change=${this.#onChange}
+              value="textarea"
+            />
             textarea
           </label>
         </div>
       </fieldset>
       <!-- /* playground-fold-end */ -->
       <input-or-textfield
-          value="this is the default value"
-          .tagLiteral=${this.tagLiteral}>
+        value="this is the default value"
+        .tagLiteral=${this.tagLiteral}
+      >
       </input-or-textfield>
     `;
   }
 
   #onChange(e: InputEvent) {
     const target = e.target as HTMLInputElement;
-    this.tagLiteral = target.value === 'input' ? literal`input` : literal`textarea`;
+    this.tagLiteral =
+      target.value === 'input' ? literal`input` : literal`textarea`;
   }
 
-  static styles = css`/* playground-fold */:host { font-family: sans-serif; } :host > * { margin-block: .5em; }/* playground-fold-end */`;
+  static styles = css`
+    /* playground-fold */
+    :host {
+      font-family: sans-serif;
+    }
+    :host > * {
+      margin-block: 0.5em;
+    } /* playground-fold-end */
+  `;
 }

packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html

@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts

@@ -1,19 +1,19 @@
-import { html, LitElement, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import {html, LitElement, css} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-  @state() counter = 0
+  @state() counter = 0;
 
   firstUpdated() {
-    setInterval(() =>  this.counter += 1 , 1000);
+    setInterval(() => (this.counter += 1), 1000);
   }
 
   render() {
     const classes = {
       red: this.counter % 2 === 0,
-      blue: this.counter % 2 === 1
+      blue: this.counter % 2 === 1,
     };
     return html`<p class=${classMap(classes)}>Hello!</p>`;
   }
@@ -26,4 +26,4 @@ export class MyElement extends LitElement {
       color: blue;
     }
   `;
-}
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html

@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element></my-element>
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
 
 @customElement('my-element')
 export class MyElement extends LitElement {
@@ -14,13 +14,18 @@ export class MyElement extends LitElement {
 
     return html`
       <button
-          @click=${() => {this.someBoolean = !this.someBoolean}}>
+        @click=${() => {
+          this.someBoolean = !this.someBoolean;
+        }}
+      >
         Toggle template
       </button>
       <div>This is an inline ternary conditional</div>
-      ${this.someBoolean ? html`<p>Some other text</p>` : html`<p>Some text</p>`}
+      ${this.someBoolean
+        ? html`<p>Some other text</p>`
+        : html`<p>Some text</p>`}
       <div>This is a variable conditional</div>
       ${someText}
     `;
   }
-}
+}