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