add properties and state examples

Author: e111077

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

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<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

@@ -0,0 +1,33 @@
+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
+ * following format:
+ *
+ * array-attribute='1, "2", 3' to [1, '2', 3]
+ */
+export const arrayConverter: ComplexAttributeConverter<Array<unknown>> = {
+  toAttribute: (array: Array<unknown>) => {
+    return JSON.stringify(array).substring(1, JSON.stringify(array).length - 1);
+  },
+  fromAttribute: (value: string) => {
+    try {
+      return JSON.parse(`[${value}]`);
+    } catch {
+      return [];
+    }
+  }
+};
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @property({ converter: arrayConverter, reflect: true })
+  array: Array<number|string> = [];
+
+  render() {
+    return this.array.map((item) =>
+      html`<div>${typeof item}: ${item}</div>`
+    );
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "200px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('id-card')
+export class IdCard extends LitElement {
+  // Default attribute converter is string
+  @property() name = '';
+  // Number attribute converter converts attribtues to numbers
+  @property({ type: Number }) age = 0;
+  // Boolean attribute converter converts attribtues to boolean using
+  // .hasAttribute(). NOTE: boolean-attribute="false" will result in `true`
+  @property({ type: Boolean }) programmer = false;
+  // You can also specify the attribute name
+  @property({ type: Boolean, attribute: 'is-cool' }) isCool = false;
+
+  render() {
+    return html`
+      <h3>${this.name}</h3>
+      <p>Age: ${this.age}</p>
+      <label style="display: block;">
+        <input disabled type="checkbox" ?checked=${this.programmer}>
+        Programmer
+      </label>
+      <label>
+        <input disabled type="checkbox" ?checked=${this.isCool}>
+        Is Cool
+      </label>
+    `;
+  }
+}

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

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

packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './id-card.js';
+
+@customElement('my-wallet')
+export class MyWallet extends LitElement {
+  render() {
+    return html`
+      <id-card .name=${"Steven"} .age=${27} ?programmer=${true} .isCool=${true}></id-card>
+      <!-- It can also convert attributes into properties -->
+      <id-card name="Elliott" age="30" programmer></id-card>
+      <!--
+        NOTE: boolean-attribute="false" will be true, because the default
+        boolean attribute converter uses .hasAttribute()
+      -->
+      <id-card name="Dan" age="35" programmer is-cool></id-card>
+    `;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/project.json

@@ -0,0 +1,9 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "id-card.ts": {},
+    "my-wallet.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "400px"
+}

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

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

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

@@ -0,0 +1,66 @@
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  // Duration affects render, so it should be reactive. Though we don't want it
+  // to be exposed to consumers of my-element because we only want to expose
+  // `start()`, `pause()`, `reset()`, so we use a private state.
+  @state() private _duration = 0;
+  // isPlaying affects render, so it should be reactive. Though we don't want it
+  // to be exposed to consumers of my-element, so we use a private state.
+  @state() private _isPlaying = false;
+  private lastTick = 0;
+
+  render() {
+    const min = Math.floor(this._duration / 60000);
+    const sec = pad(min, Math.floor(this._duration / 1000 % 60));
+    const hun = pad(true, Math.floor(this._duration % 1000 / 10));
+
+    return html`
+      <div>
+        ${min ? `${min}:${sec}.${hun}` : `${sec}.${hun}`}
+      </div>
+      <div>
+        ${this._isPlaying ?
+        html`<button @click=${this.pause}>Pause</button>` :
+        html`<button @click=${this.start}>Play</button>`
+      }
+        <button @click=${this.reset}>Reset</button>
+      </div>
+    `;
+  }
+
+  start() {
+    this._isPlaying = true;
+    this.lastTick = Date.now();
+    this._tick();
+  }
+
+  pause() {
+    this._isPlaying = false;
+  }
+
+  reset() {
+    this._duration = 0;
+  }
+
+  private _tick() {
+    if (this._isPlaying) {
+      const now = Date.now();
+      this._duration += Math.max(0, now - this.lastTick);
+      this.lastTick = now;
+      requestAnimationFrame(() => this._tick());
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.reset();
+  }
+}
+/* playground-fold */
+function pad(pad: unknown, val: number) {
+  return pad ? String(val).padStart(2, '0') : val;
+}
+/* playground-fold-end */

packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "100px"
+}