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}
     `;
   }
-}
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/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/constructable-stylesheets/my-element.ts

@@ -1,6 +1,9 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { trustedStyles, type CSSStyleSheet } from './trusted-stringified-css-source.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {
+  trustedStyles,
+  type CSSStyleSheet,
+} from './trusted-stringified-css-source.js';
 
 // Use constructable stylesheets on TRUSTED CSS strings to use them in a LitElement
 const styles = new CSSStyleSheet();
@@ -11,10 +14,6 @@ const styles = new CSSStyleSheet();
 export class MyElement extends LitElement {
   static styles = styles;
   render() {
-    return html`
-      <div>
-        This should be red!
-      </div>
-    `;
+    return html` <div>This should be red!</div> `;
   }
 }

packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts

@@ -5,7 +5,7 @@ export const trustedStyles = `
 `;
 
 // This may be needed for some older versions of TS
-export type CSSStyleSheet = typeof globalThis['CSSStyleSheet'] & {
+export type CSSStyleSheet = (typeof globalThis)['CSSStyleSheet'] & {
   replaceSync(cssText: string): void;
   replace(cssText: string): void;
 };

packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html

@@ -21,4 +21,4 @@
 </div>
 <div>
   <my-element></my-element>
-</div>
+</div>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts

@@ -1,5 +1,5 @@
-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 {
@@ -15,4 +15,4 @@ export class MyElement extends LitElement {
   render() {
     return html`<p part="paragraph">This is in a shadow root!</p>`;
   }
-}
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html

@@ -1,3 +1,3 @@
 <script type="module" src="./my-element.js"></script>
 
-<my-element array='1,"2",3,4,"5"'></my-element>
+<my-element array='1,"2",3,4,"5"'></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts

@@ -1,5 +1,6 @@
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';import {ComplexAttributeConverter} from 'lit';
+import {html, LitElement} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+import {ComplexAttributeConverter} from 'lit';
 
 /**
  * Bidirectionally converts an array from an attribute to a property of the
@@ -17,17 +18,15 @@ export const arrayConverter: ComplexAttributeConverter<Array<unknown>> = {
     } catch {
       return [];
     }
-  }
+  },
 };
 
 @customElement('my-element')
 export class MyElement extends LitElement {
-  @property({ converter: arrayConverter, reflect: true })
-  array: Array<number|string> = [];
+  @property({converter: arrayConverter, reflect: true})
+  array: Array<number | string> = [];
 
   render() {
-    return this.array.map((item) =>
-      html`<div>${typeof item}: ${item}</div>`
-    );
+    return this.array.map((item) => html`<div>${typeof item}: ${item}</div>`);
   }
-}
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
 
 export type ScoreEvent = CustomEvent<number>;
 
@@ -13,6 +13,8 @@ export class GamePlayer extends LitElement {
   }
 
   handleScore(points: number) {
-    this.dispatchEvent(new CustomEvent('score', { detail: points, bubbles: true }));
+    this.dispatchEvent(
+      new CustomEvent('score', {detail: points, bubbles: true}),
+    );
   }
-}
+}

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

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

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.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';
 import './game-player.js';
 import type {ScoreEvent} from './game-player.js';
 
@@ -12,9 +12,13 @@ export class ScoreBoard extends LitElement {
     return html`
       <h1>${this.playerOneScore} - ${this.playerTwoScore}</h1>
       <h2>Player 1</h2>
-      <game-player @score=${(e: ScoreEvent) => this.playerOneScore += e.detail}></game-player>
+      <game-player
+        @score=${(e: ScoreEvent) => (this.playerOneScore += e.detail)}
+      ></game-player>
       <h2>Player 2</h2>
-      <game-player @score=${(e: ScoreEvent) => this.playerTwoScore += e.detail}></game-player>
+      <game-player
+        @score=${(e: ScoreEvent) => (this.playerTwoScore += e.detail)}
+      ></game-player>
     `;
   }
-}
+}