From d290fc90a0f90dc532b01e49e279e531bfe4293f Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Tue, 12 Dec 2023 21:17:57 +0100 Subject: [PATCH] refactor: use `static props` in all examples (#19) --- examples/attach-effect/Counter.mjs | 5 +++-- examples/attach-effect/Decrease.mjs | 6 ++++-- examples/demo/BooleanPropTest.mjs | 5 ++++- examples/demo/HelloWorld.mjs | 5 ++++- examples/demo/index.html | 2 +- examples/pens/counter-toggle.html | 5 +++-- examples/type-restore/Counter.mjs | 7 ++++--- examples/type-restore/HelloWorld.mjs | 5 +++-- examples/type-restore/Object.mjs | 1 - examples/type-restore/Toggle.mjs | 5 +++-- 10 files changed, 29 insertions(+), 17 deletions(-) diff --git a/examples/attach-effect/Counter.mjs b/examples/attach-effect/Counter.mjs index 35b88b6..5897e1d 100644 --- a/examples/attach-effect/Counter.mjs +++ b/examples/attach-effect/Counter.mjs @@ -1,9 +1,10 @@ // @ts-check import { WebComponent, attachEffect } from "../../src/index.js"; export class Counter extends WebComponent { - static properties = ["count"]; + static props = { + count: 0, + }; onInit() { - this.props.count = 0; this.onclick = () => ++this.props.count; attachEffect(this.props.count, (count) => console.log(count)); } diff --git a/examples/attach-effect/Decrease.mjs b/examples/attach-effect/Decrease.mjs index b9c990c..70c7d56 100644 --- a/examples/attach-effect/Decrease.mjs +++ b/examples/attach-effect/Decrease.mjs @@ -2,9 +2,11 @@ import { WebComponent, attachEffect } from "../../src/index.js"; export class Decrease extends WebComponent { - static properties = ["count"]; + static props = { + count: 999, + }; + onInit() { - this.props.count = 999; this.onclick = () => --this.props.count; attachEffect(this.props.count, (count) => console.log(count)); } diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs index e10423d..956ee31 100644 --- a/examples/demo/BooleanPropTest.mjs +++ b/examples/demo/BooleanPropTest.mjs @@ -1,7 +1,10 @@ import { WebComponent } from "../../src/index.js"; export class BooleanPropTest extends WebComponent { - static properties = ["is-inline", "anotherone"]; + static props = { + isInline: false, + anotherone: false, + }; get template() { return `

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

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

`; diff --git a/examples/demo/HelloWorld.mjs b/examples/demo/HelloWorld.mjs index 01057a5..30ee97b 100644 --- a/examples/demo/HelloWorld.mjs +++ b/examples/demo/HelloWorld.mjs @@ -2,7 +2,10 @@ import { WebComponent } from "../../src/index.js"; export class HelloWorld extends WebComponent { - static properties = ["count", "emotion"]; + static props = { + count: 0, + emotion: "sad", + }; onInit() { this.props.count = 0; diff --git a/examples/demo/index.html b/examples/demo/index.html index b781152..4d01297 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/pens/counter-toggle.html b/examples/pens/counter-toggle.html index 1487807..20cde20 100644 --- a/examples/pens/counter-toggle.html +++ b/examples/pens/counter-toggle.html @@ -27,9 +27,10 @@ } class Toggle extends WebComponent { - static properties = ["toggle"]; + static props = { + toggle: false, + }; onInit() { - this.props.toggle = false; this.onclick = () => (this.props.toggle = !this.props.toggle); } get template() { diff --git a/examples/type-restore/Counter.mjs b/examples/type-restore/Counter.mjs index 9c2c09d..bcabbdf 100644 --- a/examples/type-restore/Counter.mjs +++ b/examples/type-restore/Counter.mjs @@ -1,10 +1,11 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js"; +import { WebComponent } from "../../src/index.js"; export class Counter extends WebComponent { - static properties = ["count"]; + static props = { + count: 1, + }; onInit() { - this.props.count = 1; let i = 1; this.onclick = () => ++this.props.count; let double = () => i * 2; diff --git a/examples/type-restore/HelloWorld.mjs b/examples/type-restore/HelloWorld.mjs index 331467a..23d6c40 100644 --- a/examples/type-restore/HelloWorld.mjs +++ b/examples/type-restore/HelloWorld.mjs @@ -1,9 +1,10 @@ import { WebComponent } from "../../src/index.js"; export class HelloWorld extends WebComponent { - static properties = ["name"]; + static props = { + name: "a", + }; onInit() { - this.props.name = "a"; this.onclick = () => (this.props.name += "a"); } get template() { diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index f8b283a..b05ecf6 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -1,7 +1,6 @@ import { WebComponent } from "../../src/index.js"; export class ObjectText extends WebComponent { - // static properties = ["object"]; static props = { object: { hello: "worldzz", diff --git a/examples/type-restore/Toggle.mjs b/examples/type-restore/Toggle.mjs index 960a616..7beeaa3 100644 --- a/examples/type-restore/Toggle.mjs +++ b/examples/type-restore/Toggle.mjs @@ -2,9 +2,10 @@ import { WebComponent } from "../../src/index.js"; export class Toggle extends WebComponent { - static properties = ["toggle"]; + static props = { + toggle: false, + }; onInit() { - this.props.toggle = false; this.onclick = () => this.handleToggle(); } handleToggle() {