feat: #232 Signals based JSX compilation (prototype)

docs/components/sandbox/picture-frame.js

@@ -2,6 +2,7 @@ export default class PictureFrame extends HTMLElement {
   connectedCallback() {
     const title = this.getAttribute('title');
 
+    // should handle for pre-rendering (has double output)
     this.innerHTML = `
       <div class="picture-frame">
         <h6 class="heading">${title}</h6>

docs/components/sandbox/signal-counter.css

@@ -0,0 +1,19 @@
+:host,
+:root {
+  text-align: center;
+}
+
+.heading {
+  display: block;
+  text-decoration: underline;
+}
+
+.even {
+  color: green;
+  display: block;
+}
+
+.odd {
+  color: red;
+  display: block;
+}

docs/components/sandbox/signal-counter.jsx

@@ -0,0 +1,54 @@
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+  count;
+  parity;
+  isLarge;
+
+  constructor() {
+    super();
+    this.count = new Signal.State(0);
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+    this.isLarge = new Signal.Computed(() =>
+      this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...',
+    );
+  }
+
+  // Light DOM
+  connectedCallback() {
+    this.render();
+  }
+
+  increment() {
+    this.count.set(this.count.get() + 1);
+  }
+
+  decrement() {
+    this.count.set(this.count.get() - 1);
+  }
+
+  double() {
+    this.count.set(this.count.get() * 2);
+  }
+
+  render() {
+    const { count, parity, isLarge } = this;
+
+    return (
+      <div>
+        <span class="heading">My Signal Counter</span>
+        <button onclick={this.increment}>Increment (+)</button>
+        <button onclick={this.decrement}>Decrement (-)</button>
+        {/* TODO: inline version breaks with effects */}
+        {/* <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button> */}
+        <button onclick={this.double}>Double (++)</button>
+        <span class={parity.get()}>
+          The count is {count.get()} ({parity.get()})
+        </span>
+        <p data-count={count.get()}>({isLarge.get()})</p>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-signal-counter-jsx', SignalCounter);

docs/components/sandbox/signal-counter.tsx

@@ -0,0 +1,68 @@
+import sheet from './signal-counter.css' with { type: 'css' };
+
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+  count;
+  parity;
+  isLarge;
+
+  constructor() {
+    super();
+    this.count = new Signal.State(0);
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+    this.isLarge = new Signal.Computed(() =>
+      this.count.get() >= 100 ? 'Wow!!!' : 'Keep Going...',
+    );
+  }
+
+  // Shadow DOM
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+      this.render();
+    }
+
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+
+  increment() {
+    this.count.set(this.count.get() + 1);
+  }
+
+  decrement() {
+    this.count.set(this.count.get() - 1);
+  }
+
+  double() {
+    this.count.set(this.count.get() * 2);
+  }
+
+  disconnectedCallback() {
+    console.log('Disconnected!');
+  }
+
+  render() {
+    const { count, parity, isLarge } = this;
+
+    return (
+      <div>
+        <span class="heading">My Signal Counter</span>
+        <button onclick={this.increment}>Increment (+)</button>
+        <button onclick={this.decrement}>Decrement (-)</button>
+        {/* TODO: inline version breaks with effects */}
+        {/* https://github.com/ProjectEvergreen/wcc/issues/256 */}
+        {/* <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button> */}
+        <button onclick={this.double}>Double (++)</button>
+        <span class={parity.get()}>
+          The count is {count.get()} ({parity.get()})
+        </span>
+        <p data-count={count.get()}>({isLarge.get()})</p>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-signal-counter-tsx', SignalCounter);

docs/components/sandbox/signal-greeting.tsx

@@ -0,0 +1,30 @@
+export const inferredObservability = true;
+
+export default class SignalGreeting extends HTMLElement {
+  name;
+
+  constructor() {
+    super();
+    this.name = new Signal.State('World');
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+    }
+
+    this.render();
+  }
+
+  render() {
+    const { name } = this;
+
+    return (
+      <h3 style="text-align: center" data-name={name.get()}>
+        Hello {name.get()} 👋
+      </h3>
+    );
+  }
+}
+
+customElements.define('sb-signal-greeting-jsx', SignalGreeting);