From 73dd374a3e7a56f16b7cdc2d639c66f62a77f1fb Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Fri, 1 Dec 2023 08:42:10 +0100 Subject: [PATCH] feat: attach-effect (#2) We are now able to attach "side effects" to property value changes, from inside the component and outside. --- README.md | 12 +++--- attach-effect/Counter.mjs | 25 ++++++++++++ attach-effect/index.html | 13 +++++++ examples/demo/BooleanPropTest.mjs | 2 +- examples/demo/Counter.mjs | 2 +- examples/demo/HelloWorld.mjs | 2 +- examples/demo/SimpleText.mjs | 3 +- examples/demo/index.html | 8 ++-- examples/pens/counter-toggle.html | 58 ++++++++++++++++++++++++++++ examples/type-restore/Counter.mjs | 2 +- examples/type-restore/HelloWorld.mjs | 2 +- examples/type-restore/Object.mjs | 2 +- examples/type-restore/Toggle.mjs | 2 +- examples/type-restore/index.html | 8 ++-- package-lock.json | 4 +- package.json | 27 +++++++++++-- site/.npmrc | 2 - site/nitro.config.mjs | 3 +- src/WebComponent.js | 36 ++++++++++++----- src/attach-effect.js | 13 +++++++ src/index.js | 2 + 21 files changed, 186 insertions(+), 42 deletions(-) create mode 100644 attach-effect/Counter.mjs create mode 100644 attach-effect/index.html create mode 100644 examples/pens/counter-toggle.html delete mode 100644 site/.npmrc create mode 100644 src/attach-effect.js create mode 100644 src/index.js diff --git a/README.md b/README.md index b15f967..410b311 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c Import using [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component. We will use this in the rest of our [usage examples](#usage). ```js -import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js"; +import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js"; ``` ## Installation via npm @@ -56,7 +56,7 @@ In your component class: ```js // HelloWorld.mjs -import WebComponent from "https://unpkg.com/web-component-base@latest/WebComponent.min.js"; +import { WebComponent } from "https://unpkg.com/web-component-base@latest/WebComponent.min.js"; class HelloWorld extends WebComponent { static properties = ["my-name", "emotion"]; @@ -153,7 +153,7 @@ Here is an example of using a custom element in a single .html file. WC Base Test + + +

Attach Effect Test

+ + + diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs index 0b0eba8..140fcf7 100644 --- a/examples/demo/BooleanPropTest.mjs +++ b/examples/demo/BooleanPropTest.mjs @@ -1,4 +1,4 @@ -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class BooleanPropTest extends WebComponent { static properties = ["is-inline", "anotherone"]; diff --git a/examples/demo/Counter.mjs b/examples/demo/Counter.mjs index 83c4507..b1e4503 100644 --- a/examples/demo/Counter.mjs +++ b/examples/demo/Counter.mjs @@ -1,5 +1,5 @@ // @ts-check -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class Counter extends WebComponent { static properties = ["count"]; diff --git a/examples/demo/HelloWorld.mjs b/examples/demo/HelloWorld.mjs index e8f6d2f..1518fe5 100644 --- a/examples/demo/HelloWorld.mjs +++ b/examples/demo/HelloWorld.mjs @@ -1,5 +1,5 @@ // @ts-check -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class HelloWorld extends WebComponent { static properties = ["count", "emotion"]; diff --git a/examples/demo/SimpleText.mjs b/examples/demo/SimpleText.mjs index 59efb8d..37e2702 100644 --- a/examples/demo/SimpleText.mjs +++ b/examples/demo/SimpleText.mjs @@ -1,6 +1,5 @@ // @ts-check - -import { WebComponent } from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; class SimpleText extends WebComponent { clickCallback() { diff --git a/examples/demo/index.html b/examples/demo/index.html index 3620fc6..b781152 100644 --- a/examples/demo/index.html +++ b/examples/demo/index.html @@ -4,10 +4,10 @@ WC demo - - - - + + + + diff --git a/examples/pens/counter-toggle.html b/examples/pens/counter-toggle.html new file mode 100644 index 0000000..00d6c43 --- /dev/null +++ b/examples/pens/counter-toggle.html @@ -0,0 +1,58 @@ + + + + + + WC demo + + + + +
+ Counter: + +
+
+ Toggle: + +
+ + diff --git a/examples/type-restore/Counter.mjs b/examples/type-restore/Counter.mjs index c45d41d..7349ed4 100644 --- a/examples/type-restore/Counter.mjs +++ b/examples/type-restore/Counter.mjs @@ -1,5 +1,5 @@ // @ts-check -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class Counter extends WebComponent { static properties = ["count"]; diff --git a/examples/type-restore/HelloWorld.mjs b/examples/type-restore/HelloWorld.mjs index d2fe04e..409c439 100644 --- a/examples/type-restore/HelloWorld.mjs +++ b/examples/type-restore/HelloWorld.mjs @@ -1,4 +1,4 @@ -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class HelloWorld extends WebComponent { static properties = ["name"]; diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index 0e2800a..24b432c 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -1,4 +1,4 @@ -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class ObjectText extends WebComponent { static properties = ["object"]; diff --git a/examples/type-restore/Toggle.mjs b/examples/type-restore/Toggle.mjs index 3468643..66fba87 100644 --- a/examples/type-restore/Toggle.mjs +++ b/examples/type-restore/Toggle.mjs @@ -1,5 +1,5 @@ // @ts-check -import WebComponent from "../src/WebComponent.js"; +import WebComponent from "../../src/WebComponent.js"; export class Toggle extends WebComponent { static properties = ["toggle"]; diff --git a/examples/type-restore/index.html b/examples/type-restore/index.html index 9d3bad5..11d470a 100644 --- a/examples/type-restore/index.html +++ b/examples/type-restore/index.html @@ -4,10 +4,10 @@ WC demo - - - - + + + +