From 62674262ce6fe3aab6eb88268677b45089328aad Mon Sep 17 00:00:00 2001
From: Lloyd Richards <59728961+lloydrichards@users.noreply.github.com>
Date: Sun, 27 Oct 2024 14:00:12 +0100
Subject: [PATCH] refactor(lit): update lit examples with current patterns
(#268)
* fix: :bug: spelling mistake for prop
* refactor: :recycle: use repeat to map over items
* refactor: :recycle: use lit task for async data fetching
* chore: :rotating_light: rebuild lock
---
.../2-templating/3-loop/lit/colors-list.js | 7 +-
.../1-props/lit/x-app.js | 2 +-
.../6-form-input/4-select/lit/color-select.js | 5 +-
.../2-fetch-data/lit/x-app.js | 56 +-
package.json | 1 +
pnpm-lock.yaml | 10239 +++++++---------
6 files changed, 4646 insertions(+), 5664 deletions(-)
diff --git a/content/2-templating/3-loop/lit/colors-list.js b/content/2-templating/3-loop/lit/colors-list.js
index b0efbac..dc083d5 100644
--- a/content/2-templating/3-loop/lit/colors-list.js
+++ b/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`
- ${this.colors.map((color) => html`- ${color}
`)}
+ ${repeat(
+ this.colors,
+ (color) => color,
+ (color) => html`- ${color}
`
+ )}
`;
}
diff --git a/content/4-component-composition/1-props/lit/x-app.js b/content/4-component-composition/1-props/lit/x-app.js
index 5d222e4..eed0f5b 100644
--- a/content/4-component-composition/1-props/lit/x-app.js
+++ b/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
>`;
}
}
diff --git a/content/6-form-input/4-select/lit/color-select.js b/content/6-form-input/4-select/lit/color-select.js
index 911668a..19ee7bf 100644
--- a/content/6-form-input/4-select/lit/color-select.js
+++ b/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`