refactor(lit): update lit examples with current patterns (#268)

* fix: 🐛 spelling mistake for prop

* refactor: ♻️ use repeat to map over items

* refactor: ♻️ use lit task for async data fetching

* chore: 🚨 rebuild lock

content/2-templating/3-loop/lit/colors-list.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 
 @customElement("colors-list")
 export class ColorsList extends LitElement {
@@ -8,7 +9,11 @@ export class ColorsList extends LitElement {
   render() {
     return html`
       <ul>
-        ${this.colors.map((color) => html`<li>${color}</li>`)}
+        ${repeat(
+          this.colors,
+          (color) => color,
+          (color) => html`<li>${color}</li>`
+        )}
       </ul>
     `;
   }

content/4-component-composition/1-props/lit/x-app.js

@@ -10,7 +10,7 @@ export class XApp extends LitElement {
       name="John"
       age="20"
       .favouriteColors=${["green", "blue", "red"]}
-      isavailable
+      isAvailable
     ></user-profile>`;
   }
 }

content/6-form-input/4-select/lit/color-select.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat";
 
 @customElement("color-select")
 export class ColorSelect extends LitElement {
@@ -20,7 +21,9 @@ export class ColorSelect extends LitElement {
   render() {
     return html`
       <select @change=${this.handleChange}>
-        ${this.colors.map(
+        ${repeat(
+          this.colors,
+          (color) => color.id,
           (color) =>
             html`<option
               value=${color.id}

content/7-webapp-features/2-fetch-data/lit/x-app.js

@@ -1,47 +1,27 @@
+import { Task } from "@lit/task";
 import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 
 @customElement("x-app")
 export class XApp extends LitElement {
-  @state()
-  loading = false;
-
-  @state()
-  error;
-
-  @state()
-  data;
-
-  async fetchUsers() {
-    this.loading = true;
-    try {
+  fetchUsers = new Task(this, {
+    task: async () => {
       const response = await fetch("https://randomuser.me/api/?results=3");
-      const { results: users } = await response.json();
-      this.data = users;
-      this.error = undefined;
-    } catch (err) {
-      this.data = undefined;
-      this.error = err;
-    }
-    this.loading = false;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.fetchUsers();
-  }
+      if (!response.ok) {
+        throw new Error(response.status);
+      }
+      return response.json();
+    },
+    args: () => [],
+  });
 
   render() {
-    if (this.loading) {
-      return html`<p>Fetching users...</p>`;
-    }
-    if (this.error) {
-      return html`<p>An error occurred while fetching users</p>`;
-    }
-    if (this.data) {
-      return html`
+    return this.fetchUsers.render({
+      pending: () => html`<p>Fetching users...</p>`,
+      error: (e) => html`<p>An error occurred while fetching users</p>`,
+      complete: (data) => html`
         <ul>
-          ${this.data.map(
+          ${data.map(
             (user) => html`
               <li>
                 <img src=${user.picture.thumbnail} alt="user" />
@@ -50,7 +30,7 @@ export class XApp extends LitElement {
             `
           )}
         </ul>
-      `;
-    }
+      `,
+    });
   }
 }

package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.1",
+    "@lit/task": "^1.0.1",
     "classnames": "^2.5.1",
     "radix3": "^1.1.2"
   },