From 833e835f65893b9dc8821890905d6a7f0393188b Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Thu, 19 Dec 2024 22:43:12 +0100 Subject: [PATCH] chore: format code --- .github/workflows/eslint.yml | 6 +- .vscode/settings.json | 2 +- README.md | 182 +- eslint.config.js | 10 +- examples/attach-effect/Counter.mjs | 14 +- examples/attach-effect/Decrease.mjs | 14 +- examples/attach-effect/index.html | 2 +- examples/demo/BooleanPropTest.mjs | 11 +- examples/demo/Counter.mjs | 8 +- examples/demo/HelloWorld.mjs | 18 +- examples/demo/SimpleText.mjs | 14 +- examples/demo/Toggle.js | 8 +- examples/demo/index.html | 6 +- examples/pens/counter-toggle.html | 18 +- examples/props-blueprint/hello-world.js | 10 +- examples/props-blueprint/index.html | 2 +- examples/props-blueprint/index.js | 10 +- examples/scoped-styles/index.js | 28 +- examples/templating/index.js | 22 +- examples/templating/with-lit.js | 26 +- examples/type-restore/Counter.mjs | 10 +- examples/type-restore/HelloWorld.mjs | 12 +- examples/type-restore/Object.mjs | 48 +- examples/type-restore/Toggle.mjs | 14 +- examples/type-restore/index.html | 30 +- examples/use-shadow/index.js | 26 +- pnpm-lock.yaml | 3566 +++++++++++++++----- pnpm-workspace.yaml | 2 +- site/README.md | 34 +- site/mcfly.config.mjs | 6 +- site/nitro.config.mjs | 2 +- site/public/prism.css | 117 +- site/public/prism.js | 507 ++- site/routes/[...index].js | 4 +- site/src/components/code-block.js | 34 +- site/src/components/feature-set.js | 72 +- site/src/components/my-counter.js | 4 +- site/src/components/my-head.html | 2 +- site/src/components/vanilla-hello-world.js | 14 +- site/src/pages/index.html | 18 +- src/WebComponent.js | 122 +- src/attach-effect.js | 6 +- src/html.js | 42 +- src/index.js | 6 +- src/utils/create-element.mjs | 38 +- src/utils/deserialize.mjs | 12 +- src/utils/get-camel-case.mjs | 2 +- src/utils/get-kebab-case.mjs | 4 +- src/utils/index.js | 10 +- src/utils/serialize.mjs | 10 +- test/serialize.test.ts | 46 +- 51 files changed, 3547 insertions(+), 1684 deletions(-) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 25f8fe3..7276731 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -2,12 +2,12 @@ name: ESLint on: push: - branches: ["main"] + branches: ['main'] pull_request: # The branches below must be a subset of the branches above - branches: ["main"] + branches: ['main'] schedule: - - cron: "36 3 * * 2" + - cron: '36 3 * * 2' jobs: eslint: diff --git a/.vscode/settings.json b/.vscode/settings.json index 86fe7e9..a90d63b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { "js/ts.implicitProjectConfig.checkJs": true, "editor.formatOnSave": true -} \ No newline at end of file +} diff --git a/README.md b/README.md index 171c8af..b12190b 100644 --- a/README.md +++ b/README.md @@ -14,36 +14,39 @@ When you extend the `WebComponent` class for your component, you only have to de The result is a reactive UI on property changes. Links: + - [Read a blog explaining the reactivity](https://ayos.blog/reactive-custom-elements-with-html-dataset/) - [View demo on CodePen](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010) ## Table of Contents + 1. [Project Status](#project-status) 1. [Installation](#installation) - 1. [Import via CDN](#import-via-cdn) - 1. [Installation via npm](#installation-via-npm) + 1. [Import via CDN](#import-via-cdn) + 1. [Installation via npm](#installation-via-npm) 1. [Exports](#exports) - 1. [Main Exports](#main-exports) - 1. [Utilities](#utilities) + 1. [Main Exports](#main-exports) + 1. [Utilities](#utilities) 1. [Usage](#usage) 1. [Examples](#Examples) - 1. [To-Do App](#1-to-do-app) - 1. [Single HTML file](#2-single-html-file-example) - 1. [Feature Demos](#3-feature-demos) + 1. [To-Do App](#1-to-do-app) + 1. [Single HTML file](#2-single-html-file-example) + 1. [Feature Demos](#3-feature-demos) 1. [`template` vs `render()`](#template-vs-render) 1. [Prop access](#prop-access) - 1. [Alternatives](#alternatives) + 1. [Alternatives](#alternatives) 1. [Styling](#styling) 1. [Shadow DOM Opt-In](#shadow-dom-opt-in) 1. [Just the Templating](#just-the-templating) 1. [Life-Cycle Hooks](#life-cycle-hooks) - 1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized - 1. [`afterViewInit`](#afterviewinit) - after the view is first initialized - 1. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM - 1. [`onChanges`](#onchanges) - every time an attribute value changes + 1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized + 1. [`afterViewInit`](#afterviewinit) - after the view is first initialized + 1. [`onDestroy`](#ondestroy) - the component is disconnected from the DOM + 1. [`onChanges`](#onchanges) - every time an attribute value changes 1. [Library Size](#library-size) ## Project Status + It is ready for many cases we see people use custom elements for. If you have a cool project built on **WebComponent.io** we'd love to know! :) For building some advanced interactions, we have a few issues that are still open: [#24 smart diffing](https://github.com/ayoayco/web-component-base/issues/24) & [#4 attachEffect improvements](https://github.com/ayoayco/web-component-base/issues/4) @@ -53,6 +56,7 @@ In the mean time, if you have some complex needs, we recommend using the `WebCom ...or you can even [use just parts](#just-the-templating) of it for your own base class. ## Installation + The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please file an issue in our [issue tracker](https://ayco.io/gh/web-component-base/issues) for problems or requests regarding our distribution. ### Import via CDN @@ -62,10 +66,11 @@ It is possible to import directly using a CDN like [esm.sh](https://esm.sh/web-c Additionally, we use `@latest` in the rest of our [usage examples](#usage) here for simplicity, but take note that this incurs additional resolution steps for CDNs to find the actual latest published version. You may replace the `@latest` in the URL with specific versions as shown in our CodePen examples, and this will typically be better for performance. ```js -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js" +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' ``` ### Installation via npm + Usable for projects with bundlers or using import maps pointing to the specific files downloaded in `node_modules/web-component-base`. ```bash @@ -81,31 +86,37 @@ You can import everything separately, or in a single file each for the main expo ```js // all in a single file -import { WebComponent, html, attachEffect } from "web-component-base"; +import { WebComponent, html, attachEffect } from 'web-component-base' // in separate files -import { WebComponent } from "web-component-base/WebComponent.js"; +import { WebComponent } from 'web-component-base/WebComponent.js' -import { html } from "web-component-base/html.js"; +import { html } from 'web-component-base/html.js' -import { attachEffect } from "web-component-base/attach-effect.js"; +import { attachEffect } from 'web-component-base/attach-effect.js' ``` ### Utilities + ```js // in a single file -import { serialize, deserialize, getCamelCase, getKebabCase, createElement } from "web-component-base/utils"; +import { + serialize, + deserialize, + getCamelCase, + getKebabCase, + createElement, +} from 'web-component-base/utils' // or separate files -import { serialize } from "web-component-base/utils/serialize.js"; +import { serialize } from 'web-component-base/utils/serialize.js' -import { createElement } from "web-component-base/utils/create-element.js"; +import { createElement } from 'web-component-base/utils/create-element.js' // etc... - ``` ## Usage @@ -114,21 +125,21 @@ In your component class: ```js // HelloWorld.mjs -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' class HelloWorld extends WebComponent { - static props ={ + static props = { myName: 'World', - emotion: 'sad' + emotion: 'sad', } get template() { return ` -

Hello ${this.props.myName}${this.props.emotion === "sad" ? ". 😭" : "! 🙌"}

- `; +

Hello ${this.props.myName}${this.props.emotion === 'sad' ? '. 😭' : '! 🙌'}

+ ` } } -customElements.define('hello-world', HelloWorld); +customElements.define('hello-world', HelloWorld) ``` In your HTML page: @@ -163,40 +174,42 @@ A simple app that allows adding / completing tasks: Here is an example of using a custom element in a single .html file. ```html - + WC Base Test ``` ### 3. Feature Demos + Some feature-specific demos: -1. [Context-Aware Post-Apocalyptic Human](https://codepen.io/ayoayco-the-styleful/pen/WNqJMNG?editors=1010) + +1. [Context-Aware Post-Apocalyptic Human](https://codepen.io/ayoayco-the-styleful/pen/WNqJMNG?editors=1010) 1. [Simple reactive property](https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz?editors=1010) 1. [Counter & Toggle](https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010) 1. [Using custom templating (lit-html)](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010) @@ -209,25 +222,23 @@ Some feature-specific demos: This mental model attempts to reduce the cognitive complexity of authoring components: -1. The `template` is a read-only property (initialized with a `get` keyword) that represents *how* the component view is rendered. +1. The `template` is a read-only property (initialized with a `get` keyword) that represents _how_ the component view is rendered. 1. There is a `render()` method that triggers a view render. -1. This `render()` method is *automatically* called under the hood every time an attribute value changed. -1. You can *optionally* call this `render()` method at any point to trigger a render if you need (eg, if you have private unobserved properties that need to manually trigger a render) +1. This `render()` method is _automatically_ called under the hood every time an attribute value changed. +1. You can _optionally_ call this `render()` method at any point to trigger a render if you need (eg, if you have private unobserved properties that need to manually trigger a render) 1. Overriding the `render()` function for handling a custom `template` is also possible. Here's an example of using `lit-html`: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010) ## Prop Access - The `props` property of the `WebComponent` interface is provided for easy read/write access to a camelCase counterpart of *any* observed attribute. +The `props` property of the `WebComponent` interface is provided for easy read/write access to a camelCase counterpart of _any_ observed attribute. ```js class HelloWorld extends WebComponent { static props = { - myProp: 'World' + myProp: 'World', } get template() { - return html` -

Hello ${this.props.myProp}

- `; + return html`

Hello ${this.props.myProp}

` } } ``` @@ -235,11 +246,13 @@ class HelloWorld extends WebComponent { Assigning a value to the `props.camelCase` counterpart of an observed attribute will trigger an "attribute change" hook. For example, assigning a value like so: + ``` this.props.myName = 'hello' ``` ...is like calling the following: + ``` this.setAttribute('my-name','hello'); ``` @@ -253,6 +266,7 @@ Therefore, this will tell the browser that the UI needs a render if the attribut ### Alternatives The current alternatives are using what `HTMLElement` provides out-of-the-box, which are: + 1. `HTMLElement.dataset` for attributes prefixed with `data-*`. Read more about this [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). 1. Methods for reading/writing attribute values: `setAttribute(...)` and `getAttribute(...)`; note that managing the attribute names as strings can be difficult as the code grows. @@ -261,56 +275,58 @@ The current alternatives are using what `HTMLElement` provides out-of-the-box, w When using the built-in `html` function for tagged templates, a style object of type `Partial` can be passed to any element's `style` attribute. This allows for calculated and conditional styles. Read more on style objects [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration). Try it now with this [example on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzXjwQ?editors=1010) + ```js -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' class StyledElements extends WebComponent { static props = { emphasize: false, - type: "warn", - }; + type: 'warn', + } #typeStyles = { warn: { - backgroundColor: "yellow", - border: "1px solid orange", + backgroundColor: 'yellow', + border: '1px solid orange', }, error: { - backgroundColor: "orange", - border: "1px solid red", + backgroundColor: 'orange', + border: '1px solid red', }, - }; + } get template() { return html`
-

Wow!

+

Wow!

- `; + ` } } -customElements.define("styled-elements", StyledElements); +customElements.define('styled-elements', StyledElements) ``` ## Shadow DOM Opt-In + Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component. Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010) Example: + ```js static shadowRootInit = { mode: "closed", }; ``` - ## Just the Templating You don't have to extend the whole base class just to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes. @@ -318,110 +334,112 @@ You don't have to extend the whole base class just to use some features. All int Here's an example of using the `html` tag template on a class that extends from vanilla `HTMLElement`... also [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/bGzJQJg?editors=1010). ```js -import {html} from 'https://unpkg.com/web-component-base/html' -import {createElement} from 'https://unpkg.com/web-component-base/utils' +import { html } from 'https://unpkg.com/web-component-base/html' +import { createElement } from 'https://unpkg.com/web-component-base/utils' class MyQuote extends HTMLElement { connectedCallback() { - const el = createElement(html` - `); + const el = createElement( + html` ` + ) this.appendChild(el) } } customElements.define('my-quote', MyQuote) ``` + ## Life-Cycle Hooks Define behavior when certain events in the component's life cycle is triggered by providing hook methods ### onInit() + - Triggered when the component is connected to the DOM - Best for setting up the component ```js -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' class ClickableText extends WebComponent { // gets called when the component is used in an HTML document onInit() { - this.onclick = () => console.log(">>> click!"); + this.onclick = () => console.log('>>> click!') } get template() { - return `Click me!`; + return `Click me!` } } ``` ### afterViewInit() -- Triggered after the view is first initialized +- Triggered after the view is first initialized ```js class ClickableText extends WebComponent { // gets called when the component's innerHTML is first filled afterViewInit() { - const footer = this.querySelector('footer'); + const footer = this.querySelector('footer') // do stuff to footer after view is initialized } get template() { - return `
Awesome site © 2023
`; + return `
Awesome site © 2023
` } } ``` ### onDestroy() + - Triggered when the component is disconnected from the DOM - best for undoing any setup done in `onInit()` ```js -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' class ClickableText extends WebComponent { - clickCallback() { - console.log(">>> click!"); + console.log('>>> click!') } onInit() { - this.onclick = this.clickCallback; + this.onclick = this.clickCallback } onDestroy() { - console.log(">>> removing event listener"); - this.removeEventListener("click", this.clickCallback); + console.log('>>> removing event listener') + this.removeEventListener('click', this.clickCallback) } get template() { - return `Click me!`; + return `Click me!` } } ``` ### onChanges() + - Triggered when an attribute value changed ```js -import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"; +import { WebComponent } from 'https://unpkg.com/web-component-base@latest/index.js' class ClickableText extends WebComponent { // gets called when an attribute value changes onChanges(changes) { - const {property, previousValue, currentValue} = changes; - console.log('>>> ', {property, previousValue, currentValue}) + const { property, previousValue, currentValue } = changes + console.log('>>> ', { property, previousValue, currentValue }) } get template() { - return `Click me!`; + return `Click me!` } } ``` -## Library Size +## Library Size All the functions and the base class in the library are minimalist by design and only contains what is needed for their purpose. diff --git a/eslint.config.js b/eslint.config.js index 0342145..3907d17 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,5 +1,5 @@ -import globals from "globals"; -import pluginJs from "@eslint/js"; +import globals from 'globals' +import pluginJs from '@eslint/js' /** @type {import('eslint').Linter.Config[]} */ export default [ @@ -7,10 +7,10 @@ export default [ pluginJs.configs.recommended, { rules: { - "no-unused-vars": "warn", + 'no-unused-vars': 'warn', }, }, { - ignores: ["site/*"], + ignores: ['site/*'], }, -]; +] diff --git a/examples/attach-effect/Counter.mjs b/examples/attach-effect/Counter.mjs index 3275173..8269a50 100644 --- a/examples/attach-effect/Counter.mjs +++ b/examples/attach-effect/Counter.mjs @@ -1,21 +1,23 @@ // @ts-check -import { WebComponent, attachEffect, html } from "../../src/index.js"; +import { WebComponent, attachEffect, html } from '../../src/index.js' export class Counter extends WebComponent { static props = { count: 0, - }; + } onInit() { - attachEffect(this.props.count, (count) => console.log(count)); + attachEffect(this.props.count, (count) => console.log(count)) } afterViewInit() { - attachEffect(this.props.count, (count) => console.log(count + 100)); + attachEffect(this.props.count, (count) => console.log(count + 100)) } get template() { - return html``; + return html`` } } -customElements.define("my-counter", Counter); +customElements.define('my-counter', Counter) diff --git a/examples/attach-effect/Decrease.mjs b/examples/attach-effect/Decrease.mjs index 5f7d319..8e4aa4a 100644 --- a/examples/attach-effect/Decrease.mjs +++ b/examples/attach-effect/Decrease.mjs @@ -1,22 +1,24 @@ // @ts-check -import { WebComponent, attachEffect, html } from "../../src/index.js"; +import { WebComponent, attachEffect, html } from '../../src/index.js' export class Decrease extends WebComponent { static props = { count: 999, - }; + } onInit() { - attachEffect(this.props.count, (count) => console.log(count)); + attachEffect(this.props.count, (count) => console.log(count)) } afterViewInit() { - attachEffect(this.props.count, (count) => console.log(count + 100)); + attachEffect(this.props.count, (count) => console.log(count + 100)) } get template() { - return html``; + return html`` } } -customElements.define("my-decrement", Decrease); +customElements.define('my-decrement', Decrease) diff --git a/examples/attach-effect/index.html b/examples/attach-effect/index.html index 63ec0a0..e0c64bb 100644 --- a/examples/attach-effect/index.html +++ b/examples/attach-effect/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs index f975aa2..4259050 100644 --- a/examples/demo/BooleanPropTest.mjs +++ b/examples/demo/BooleanPropTest.mjs @@ -1,16 +1,17 @@ -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class BooleanPropTest extends WebComponent { static props = { isInline: false, anotherone: false, - }; + } get template() { return html` -

is-inline: ${this.props.isInline}

another-one: ${this.props.anotherone}

- `; +

is-inline: ${this.props.isInline}

+

another-one: ${this.props.anotherone}

+ ` } } -customElements.define("boolean-prop-test", BooleanPropTest); +customElements.define('boolean-prop-test', BooleanPropTest) diff --git a/examples/demo/Counter.mjs b/examples/demo/Counter.mjs index 85a458a..8607207 100644 --- a/examples/demo/Counter.mjs +++ b/examples/demo/Counter.mjs @@ -1,17 +1,17 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent, html } from '../../src/index.js' export class Counter extends WebComponent { static props = { count: 0, - }; + } get template() { return html` - `; + ` } } -customElements.define("my-counter", Counter); +customElements.define('my-counter', Counter) diff --git a/examples/demo/HelloWorld.mjs b/examples/demo/HelloWorld.mjs index 9d2e734..079423b 100644 --- a/examples/demo/HelloWorld.mjs +++ b/examples/demo/HelloWorld.mjs @@ -1,24 +1,26 @@ // @ts-check -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class HelloWorld extends WebComponent { static props = { count: 0, - emotion: "sad", - }; + emotion: 'sad', + } onInit() { - this.props.count = 0; + this.props.count = 0 } get template() { - const label = this.props.count ? `Clicked ${this.props.count}` : "World"; - const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌"; + const label = this.props.count ? `Clicked ${this.props.count}` : 'World' + const emote = this.props.emotion === 'sad' ? '. 😭' : '! 🙌' return html` - + ` } } -customElements.define("hello-world", HelloWorld); +customElements.define('hello-world', HelloWorld) diff --git a/examples/demo/SimpleText.mjs b/examples/demo/SimpleText.mjs index 54fffd8..3857060 100644 --- a/examples/demo/SimpleText.mjs +++ b/examples/demo/SimpleText.mjs @@ -1,19 +1,21 @@ // @ts-check -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' class SimpleText extends WebComponent { clickCallback() { - console.log(">>> click!"); + console.log('>>> click!') } onDestroy() { - console.log(">>> removing event listener"); - this.removeEventListener("click", this.clickCallback); + console.log('>>> removing event listener') + this.removeEventListener('click', this.clickCallback) } get template() { - return html`Click me!`; + return html`Click me!` } } -customElements.define("simple-text", SimpleText); +customElements.define('simple-text', SimpleText) diff --git a/examples/demo/Toggle.js b/examples/demo/Toggle.js index cecadb9..238bad4 100644 --- a/examples/demo/Toggle.js +++ b/examples/demo/Toggle.js @@ -1,16 +1,16 @@ -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent, html } from '../../src/index.js' class Toggle extends WebComponent { static props = { toggle: false, - }; + } get template() { return html` - `; + ` } } -customElements.define("my-toggle", Toggle); +customElements.define('my-toggle', Toggle) diff --git a/examples/demo/index.html b/examples/demo/index.html index 9a4fb9c..eca5e44 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -24,10 +24,10 @@

diff --git a/examples/pens/counter-toggle.html b/examples/pens/counter-toggle.html index a234cb6..0bb541a 100644 --- a/examples/pens/counter-toggle.html +++ b/examples/pens/counter-toggle.html @@ -13,33 +13,35 @@ import { WebComponent, html, - } from "https://esm.sh/web-component-base@latest"; + } from 'https://esm.sh/web-component-base@latest' export class Counter extends WebComponent { static props = { count: 0, - }; + } get template() { return html``; + ` } } class Toggle extends WebComponent { static props = { toggle: false, - }; + } - clickFn = () => (this.props.toggle = !this.props.toggle); + clickFn = () => (this.props.toggle = !this.props.toggle) get template() { - return html``; + return html`` } } - customElements.define("my-counter", Counter); - customElements.define("my-toggle", Toggle); + customElements.define('my-counter', Counter) + customElements.define('my-toggle', Toggle) diff --git a/examples/props-blueprint/hello-world.js b/examples/props-blueprint/hello-world.js index df9398f..9f40800 100644 --- a/examples/props-blueprint/hello-world.js +++ b/examples/props-blueprint/hello-world.js @@ -1,12 +1,12 @@ -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class HelloWorld extends WebComponent { static props = { - myName: "World", - }; + myName: 'World', + } get template() { - return html`

Hello ${this.props.myName}

`; + return html`

Hello ${this.props.myName}

` } } -customElements.define("hello-world", HelloWorld); +customElements.define('hello-world', HelloWorld) diff --git a/examples/props-blueprint/index.html b/examples/props-blueprint/index.html index e0b7097..d42eb38 100644 --- a/examples/props-blueprint/index.html +++ b/examples/props-blueprint/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/props-blueprint/index.js b/examples/props-blueprint/index.js index cea7cad..95b3a9d 100644 --- a/examples/props-blueprint/index.js +++ b/examples/props-blueprint/index.js @@ -1,12 +1,14 @@ -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class Counter extends WebComponent { static props = { count: 123, - }; + } get template() { - return html``; + return html`` } } -customElements.define("my-counter", Counter); +customElements.define('my-counter', Counter) diff --git a/examples/scoped-styles/index.js b/examples/scoped-styles/index.js index 58fe4dc..1ccc685 100644 --- a/examples/scoped-styles/index.js +++ b/examples/scoped-styles/index.js @@ -1,39 +1,39 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent, html } from '../../src/index.js' class StyledElements extends WebComponent { static props = { condition: false, - type: "info", - }; + type: 'info', + } #typeStyles = { info: { - backgroundColor: "blue", - border: "1px solid green", + backgroundColor: 'blue', + border: '1px solid green', }, warn: { - backgroundColor: "yellow", - border: "1px solid orange", + backgroundColor: 'yellow', + border: '1px solid orange', }, error: { - backgroundColor: "orange", - border: "1px solid red", + backgroundColor: 'orange', + border: '1px solid red', }, - }; + } get template() { return html`
-

Wow!

+

Wow!

- `; + ` } } -customElements.define("styled-elements", StyledElements); +customElements.define('styled-elements', StyledElements) diff --git a/examples/templating/index.js b/examples/templating/index.js index 3769ec8..605021d 100644 --- a/examples/templating/index.js +++ b/examples/templating/index.js @@ -1,22 +1,22 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent, html } from '../../src/index.js' export class Counter extends WebComponent { static props = { count: 123, - }; + } get template() { - const list = ["a", "b", "c", "what"]; + const list = ['a', 'b', 'c', 'what'] const links = [ { - url: "https://ayco.io", - text: "Ayo Ayco", + url: 'https://ayco.io', + text: 'Ayo Ayco', }, { - url: "https://ayco.io/gh/McFly", - text: "McFly", + url: 'https://ayco.io/gh/McFly', + text: 'McFly', }, - ]; + ] return html` `; + return html`` } } -customElements.define("my-counter", Counter); +customElements.define('my-counter', Counter) diff --git a/examples/type-restore/HelloWorld.mjs b/examples/type-restore/HelloWorld.mjs index ef0d2f3..fb12975 100644 --- a/examples/type-restore/HelloWorld.mjs +++ b/examples/type-restore/HelloWorld.mjs @@ -1,14 +1,14 @@ -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class HelloWorld extends WebComponent { static props = { - name: "a", - }; - addA = () => (this.props.name += "a"); + name: 'a', + } + addA = () => (this.props.name += 'a') get template() { - return html``; + return html`` } } -customElements.define("my-hello-world", HelloWorld); +customElements.define('my-hello-world', HelloWorld) diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index 7290c82..71e70b8 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -1,4 +1,4 @@ -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' /** * TODO: rendering currently wipes all children so focus gets removed on fields @@ -6,45 +6,43 @@ import { html, WebComponent } from "../../src/index.js"; export class ObjectText extends WebComponent { static props = { object: { - hello: "worldzz", + hello: 'worldzz', age: 2, }, - }; + } onChanges() { - console.log(">>> object", this.props.object); + console.log('>>> object', this.props.object) } get template() { return html`
+ { - this.props.object = { - ...this.props.object, - age: event.target.value, - }; + onkeyup=${(event) => { + this.props.object = { + ...this.props.object, + age: event.target.value, } - } - id="age-field" value=${this.props.object.age} /> + }} + id="age-field" + value=${this.props.object.age} + />
- `; + ` } - - } -customElements.define("my-object", ObjectText); +customElements.define('my-object', ObjectText) diff --git a/examples/type-restore/Toggle.mjs b/examples/type-restore/Toggle.mjs index a4ff160..686a594 100644 --- a/examples/type-restore/Toggle.mjs +++ b/examples/type-restore/Toggle.mjs @@ -1,18 +1,20 @@ // @ts-check -import { html, WebComponent } from "../../src/index.js"; +import { html, WebComponent } from '../../src/index.js' export class Toggle extends WebComponent { static props = { toggle: false, - }; + } handleToggle() { - this.props.toggle = !this.props.toggle; + this.props.toggle = !this.props.toggle } get template() { return html` - - `; + + ` } } -customElements.define("my-toggle", Toggle); +customElements.define('my-toggle', Toggle) diff --git a/examples/type-restore/index.html b/examples/type-restore/index.html index 952258c..c95a860 100644 --- a/examples/type-restore/index.html +++ b/examples/type-restore/index.html @@ -1,4 +1,4 @@ - + @@ -10,33 +10,27 @@ -
- Counter: -
-
- Toggle: -
-
- String: -
+
Counter:
+
Toggle:
+
String:

diff --git a/examples/use-shadow/index.js b/examples/use-shadow/index.js index 63e2a5e..3f560cf 100644 --- a/examples/use-shadow/index.js +++ b/examples/use-shadow/index.js @@ -1,33 +1,33 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent, html } from '../../src/index.js' export class Counter extends WebComponent { static props = { count: 123, - }; + } static shadowRootInit = { - mode: "open", - }; + mode: 'open', + } get template() { - const list = ["a", "b", "c", "what"]; + const list = ['a', 'b', 'c', 'what'] const links = [ { - url: "https://ayco.io", - text: "Ayo Ayco", + url: 'https://ayco.io', + text: 'Ayo Ayco', }, { - url: "https://ayco.io/gh/McFly", - text: "McFly", + url: 'https://ayco.io/gh/McFly', + text: 'McFly', }, - ]; + ] return html`