diff --git a/examples/attach-effect/Counter.mjs b/examples/attach-effect/Counter.mjs index f05a251..30ea586 100644 --- a/examples/attach-effect/Counter.mjs +++ b/examples/attach-effect/Counter.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent, attachEffect } from "../../src/"; +import { WebComponent, attachEffect } from "../../src/index.js"; export class Counter extends WebComponent { static properties = ["count"]; onInit() { diff --git a/examples/attach-effect/Decrease.mjs b/examples/attach-effect/Decrease.mjs index f76384d..898d144 100644 --- a/examples/attach-effect/Decrease.mjs +++ b/examples/attach-effect/Decrease.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent, attachEffect } from "../../src/"; +import { WebComponent, attachEffect } from "../../src/index.js"; export class Decrease extends WebComponent { static properties = ["count"]; diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs index 4173991..765e143 100644 --- a/examples/demo/BooleanPropTest.mjs +++ b/examples/demo/BooleanPropTest.mjs @@ -1,4 +1,4 @@ -import { WebComponent } from "../../src"; +import { WebComponent } from "../../src/index.js" export class BooleanPropTest extends WebComponent { static properties = ["is-inline", "anotherone"]; diff --git a/examples/demo/Counter.mjs b/examples/demo/Counter.mjs index 594d445..7734b30 100644 --- a/examples/demo/Counter.mjs +++ b/examples/demo/Counter.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent } from "../../src"; +import { WebComponent } from "../../src/index.js" export class Counter extends WebComponent { static properties = ["count"]; diff --git a/examples/demo/HelloWorld.mjs b/examples/demo/HelloWorld.mjs index 92634cd..97ed7d2 100644 --- a/examples/demo/HelloWorld.mjs +++ b/examples/demo/HelloWorld.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent } from "../../src"; +import { WebComponent } from "../../src/index.js" export class HelloWorld extends WebComponent { static properties = ["count", "emotion"]; diff --git a/examples/demo/SimpleText.mjs b/examples/demo/SimpleText.mjs index f2832a1..927e29a 100644 --- a/examples/demo/SimpleText.mjs +++ b/examples/demo/SimpleText.mjs @@ -1,5 +1,5 @@ // @ts-check -import { WebComponent } from "../../src" +import { WebComponent } from "../../src/index.js" class SimpleText extends WebComponent { clickCallback() { diff --git a/examples/props-blueprint/hello-world.js b/examples/props-blueprint/hello-world.js new file mode 100644 index 0000000..1638be8 --- /dev/null +++ b/examples/props-blueprint/hello-world.js @@ -0,0 +1,12 @@ +import { WebComponent } from "../../src/index.js"; + +export class HelloWorld extends WebComponent { + static props = { + myName: 'World', + }; + get template() { + return `

Hello ${this.props.myName}

`; + } +} + +customElements.define("hello-world", HelloWorld); diff --git a/examples/props-blueprint/index.html b/examples/props-blueprint/index.html new file mode 100644 index 0000000..e0b7097 --- /dev/null +++ b/examples/props-blueprint/index.html @@ -0,0 +1,14 @@ + + + + + + WC demo + + + + + + + + diff --git a/examples/props-blueprint/index.js b/examples/props-blueprint/index.js new file mode 100644 index 0000000..622ad35 --- /dev/null +++ b/examples/props-blueprint/index.js @@ -0,0 +1,15 @@ +import { WebComponent } from "../../src/index.js"; + +export class Counter extends WebComponent { + static props = { + count: 123, + }; + onInit() { + this.onclick = () => ++this.props.count; + } + get template() { + return ``; + } +} + +customElements.define("my-counter", Counter); diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index 78da5fb..83c39b5 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -1,12 +1,12 @@ import { WebComponent } from "../../src/WebComponent.js"; export class ObjectText extends WebComponent { - static properties = ["object"]; - onInit() { - this.props.object = { - hello: 'worldzz', - age: 2 - }; + // static properties = ["object"]; + static props = { + object: { + hello: 'worldzz', + age: 2 + } } onChanges() { console.log('>>> object', this.props.object) diff --git a/package.json b/package.json index f300b83..95f96a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-component-base", - "version": "2.0.0-beta.4", + "version": "2.0.0-beta.6", "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily", "type": "module", "exports": { diff --git a/src/WebComponent.js b/src/WebComponent.js index 0b4bfd6..341b82f 100644 --- a/src/WebComponent.js +++ b/src/WebComponent.js @@ -1,4 +1,4 @@ -import { getKebabCase, getCamelCase, serialize, deserialize } from "./utils"; +import { getKebabCase, getCamelCase, serialize, deserialize } from "./utils/index.js"; /** * A minimal base class to reduce the complexity of creating reactive custom elements @@ -13,6 +13,11 @@ export class WebComponent extends HTMLElement { */ static properties = []; + /** + * Blueprint for the Proxy props + */ + static props; + /** * Read-only string property that represents how the component will be rendered * @returns {string | Node | (string | Node)[]} @@ -74,7 +79,14 @@ export class WebComponent extends HTMLElement { } static get observedAttributes() { - return this.properties; + const propKeys = this.props ? Object.keys(this.props).map(camelCase => getKebabCase(camelCase)) : []; + + return [...( + new Set([ + ...this.properties, + ...propKeys + ]) + )] } connectedCallback() { @@ -147,9 +159,18 @@ export class WebComponent extends HTMLElement { } #initializeProps() { + let initialProps = {} + if(this.constructor.props) { + initialProps = this.constructor.props; + Object.keys(initialProps).forEach(camelCase => { + const value = initialProps[camelCase] + this.#typeMap[camelCase] = typeof value + this.setAttribute(getKebabCase(camelCase), serialize(value)) + }) + } if (!this.#props) { this.#props = new Proxy( - {}, + initialProps, this.#handler((key, value) => this.setAttribute(key, value), this) ); }