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 - - - - + + + +