feat: update all examples to use latest features

examples/attach-effect/Counter.mjs

@@ -1,11 +1,11 @@
 // @ts-check
-import { WebComponent, attachEffect } from "../../src/index.js";
+import { WebComponent, attachEffect, html } from "../../src/index.js";
 export class Counter extends WebComponent {
   static props = {
     count: 0,
   };
+
   onInit() {
-    this.onclick = () => ++this.props.count;
     attachEffect(this.props.count, (count) => console.log(count));
   }
 
@@ -14,7 +14,7 @@ export class Counter extends WebComponent {
   }
 
   get template() {
-    return `<button id="btn">${this.props.count}</button>`;
+    return html`<button onclick=${() => ++this.props.count} id="btn">${this.props.count}</button>`;
   }
 }
 

examples/attach-effect/Decrease.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { WebComponent, attachEffect } from "../../src/index.js";
+import { WebComponent, attachEffect, html } from "../../src/index.js";
 
 export class Decrease extends WebComponent {
   static props = {
@@ -7,7 +7,6 @@ export class Decrease extends WebComponent {
   };
 
   onInit() {
-    this.onclick = () => --this.props.count;
     attachEffect(this.props.count, (count) => console.log(count));
   }
 
@@ -16,7 +15,7 @@ export class Decrease extends WebComponent {
   }
 
   get template() {
-    return `<button id="btn">${this.props.count}</button>`;
+    return html`<button onclick=${() => --this.props.count} id="btn">${this.props.count}</button>`;
   }
 }
 

examples/demo/BooleanPropTest.mjs

@@ -1,4 +1,4 @@
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class BooleanPropTest extends WebComponent {
   static props = {
@@ -7,7 +7,9 @@ export class BooleanPropTest extends WebComponent {
   };
 
   get template() {
-    return `<p>is-inline: ${this.props.isInline}</p><p>another-one: ${this.props.anotherone}</p>`;
+    return html`
+      <p>is-inline: ${this.props.isInline}</p><p>another-one: ${this.props.anotherone}</p>
+    `;
   }
 }
 

examples/demo/HelloWorld.mjs

@@ -1,5 +1,5 @@
 // @ts-check
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class HelloWorld extends WebComponent {
   static props = {
@@ -9,32 +9,15 @@ export class HelloWorld extends WebComponent {
 
   onInit() {
     this.props.count = 0;
-    this.onclick = () => ++this.props.count;
   }
 
   get template() {
     const label = this.props.count ? `Clicked ${this.props.count}` : "World";
     const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌";
 
-    const button = document.createElement("button");
-    button.innerText = `Hello ${label}${emote}`;
-    const paragraph = document.createElement("p");
-    paragraph.innerText = "Oh what, dynamic DOM?";
-
-    return [button, paragraph, "no way"];
-  }
-
-  render() {
-    if (typeof this.template === "string") {
-      this.innerHTML = this.template;
-    } else if (this.template instanceof Node) {
-      this.replaceChildren(this.template);
-    } else if (
-      Array.isArray(this.template) &&
-      this.template.every((t) => t instanceof Node || typeof t === "string")
-    ) {
-      this.replaceChildren(...this.template);
-    }
+    return html`
+      <button onclick=${() => ++this.props.count}>Hello ${label}${emote}</button>
+    `
   }
 }
 

examples/demo/SimpleText.mjs

@@ -1,13 +1,10 @@
 // @ts-check
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 class SimpleText extends WebComponent {
   clickCallback() {
     console.log(">>> click!");
   }
-  onInit() {
-    this.onclick = this.clickCallback;
-  }
 
   onDestroy() {
     console.log(">>> removing event listener");
@@ -15,7 +12,7 @@ class SimpleText extends WebComponent {
   }
 
   get template() {
-    return `<span style="cursor:pointer">Click me!</span>`;
+    return html`<span onclick=${this.clickCallback} style="cursor:pointer">Click me!</span>`;
   }
 }
 

examples/pens/counter-toggle.html

@@ -13,7 +13,7 @@
       import {
         WebComponent,
         html,
-      } from "https://unpkg.com/web-component-base@latest/index.js";
+      } from "https://esm.sh/web-component-base@latest";
 
       export class Counter extends WebComponent {
         static props = {
@@ -30,11 +30,11 @@
         static props = {
           toggle: false,
         };
-        onInit() {
-          this.onclick = () => (this.props.toggle = !this.props.toggle);
-        }
+
+        clickFn = () => (this.props.toggle = !this.props.toggle);
+
         get template() {
-          return `<button>${this.props.toggle ? "On" : "Off"}</button>`;
+          return html`<button onclick=${this.clickFn}>${this.props.toggle ? "On" : "Off"}</button>`;
         }
       }
 

examples/props-blueprint/hello-world.js

@@ -1,11 +1,11 @@
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class HelloWorld extends WebComponent {
   static props = {
     myName: "World",
   };
   get template() {
-    return `<p>Hello ${this.props.myName}</p>`;
+    return html`<p>Hello ${this.props.myName}</p>`;
   }
 }
 

examples/props-blueprint/index.js

@@ -1,14 +1,11 @@
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class Counter extends WebComponent {
   static props = {
     count: 123,
   };
-  onInit() {
-    this.onclick = () => ++this.props.count;
-  }
   get template() {
-    return `<button id="btn">${this.props.count}</button>`;
+    return html`<button onclick=${() => ++this.props.count} id="btn">${this.props.count}</button>`;
   }
 }
 

examples/type-restore/Counter.mjs

@@ -1,20 +1,12 @@
 // @ts-check
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class Counter extends WebComponent {
   static props = {
     count: 1,
   };
-  onInit() {
-    let i = 1;
-    this.onclick = () => ++this.props.count;
-    let double = () => i * 2;
-    console.log(double());
-    i = 3;
-    console.log(double());
-  }
   get template() {
-    return `<button>${this.props.count}</button>`;
+    return html`<button onclick=${() => ++this.props.count}>${this.props.count}</button>`;
   }
 }
 

examples/type-restore/HelloWorld.mjs

@@ -1,14 +1,13 @@
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class HelloWorld extends WebComponent {
   static props = {
     name: "a",
   };
-  onInit() {
-    this.onclick = () => (this.props.name += "a");
-  }
+  addA = () => (this.props.name += "a");
+
   get template() {
-    return `<button>W${this.props.name}h!</button>`;
+    return html`<button onclick=${this.addA}>W${this.props.name}h!</button>`;
   }
 }
 

examples/type-restore/Object.mjs

@@ -1,5 +1,8 @@
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
+/**
+ * TODO: rendering currently wipes all children so focus gets removed on fields
+ */
 export class ObjectText extends WebComponent {
   static props = {
     object: {
@@ -11,38 +14,37 @@ export class ObjectText extends WebComponent {
     console.log(">>> object", this.props.object);
   }
   get template() {
-    const greeting = document.createElement("textarea");
-    greeting.innerHTML = this.props.object.hello;
-    greeting.setAttribute("id", "greeting-field");
-    const greetingLabel = document.createElement("label");
-    greetingLabel.setAttribute("for", "greeting-field");
-    greetingLabel.textContent = "Hello";
-    greeting.onkeyup = () => {
-      this.props.object = {
-        ...this.props.object,
-        hello: greeting.value,
-      };
-    };
-    const ageField = document.createElement("input");
-    ageField.value = this.props.object.age;
-    ageField.setAttribute("id", "age-field");
-    const ageLabel = document.createElement("label");
-    ageLabel.setAttribute("for", "age-field");
-    ageLabel.textContent = "Age";
-    ageField.onkeyup = () => {
-      this.props.object = {
-        ...this.props.object,
-        age: ageField.value,
-      };
-    };
-    const form = document.createElement("form");
-    form.append(greetingLabel, greeting, ageLabel, ageField);
-    return form;
+    return html`
+      <form>
+        <label for="greeting-field">Hello</label>
+        <textarea
+          onkeyup=${
+            (event) => {
+              this.props.object = {
+                ...this.props.object,
+                hello: event.target.value,
+              };
+            }
+          }
+          id="greeting-field">
+            ${this.props.object.hello}
+        </textarea>
+        <label for="age-field">Age</label>
+        <input
+          onkeyup=${
+            (event) => {
+              this.props.object = {
+                ...this.props.object,
+                age: event.target.value,
+              };
+            }
+          }
+        id="age-field" value=${this.props.object.age} />
+      </form>
+    `;
   }
 
-  render() {
-    if (this.children.length === 0) this.replaceChildren(this.template);
-  }
+
 }
 
 customElements.define("my-object", ObjectText);

examples/type-restore/Toggle.mjs

@@ -1,18 +1,17 @@
 // @ts-check
-import { WebComponent } from "../../src/index.js";
+import { html, WebComponent } from "../../src/index.js";
 
 export class Toggle extends WebComponent {
   static props = {
     toggle: false,
   };
-  onInit() {
-    this.onclick = () => this.handleToggle();
-  }
   handleToggle() {
     this.props.toggle = !this.props.toggle;
   }
   get template() {
-    return `<button id="toggle">${this.props.toggle ? "On" : "Off"}</button>`;
+    return html`
+      <button onclick=${() => this.handleToggle()} id="toggle">${this.props.toggle ? "On" : "Off"}</button>
+    `;
   }
 }
 

examples/use-shadow/index.js

@@ -6,7 +6,7 @@ export class Counter extends WebComponent {
     count: 123,
   };
   static shadowRootInit = {
-    mode: "closed",
+    mode: "open",
   };
 
   get template() {