feat: #232 Signals based JSX compilation

docs/components/sandbox/signal-counter.jsx

@@ -0,0 +1,45 @@
+export const inferredObservability = true;
+
+export default class SignalCounter extends HTMLElement {
+  constructor() {
+    super();
+    this.count = new Signal.State(0);
+    this.parity = new Signal.Computed(() => (this.count.get() % 2 === 0 ? 'even' : 'odd'));
+  }
+
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+      this.render();
+    }
+  }
+
+  increment() {
+    this.count.set(this.count.get() + 1);
+    console.log('increment', this.count.get());
+  }
+
+  decrement() {
+    this.count.set(this.count.get() - 1);
+    console.log('decrement', this.count.get());
+  }
+
+  render() {
+    const { count, parity } = this;
+
+    return (
+      <div>
+        <button onclick={this.increment}>Increment (+)</button>
+        <button onclick={this.decrement}>Decrement (-)</button>
+        <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</button>
+        <span>
+          The count is {count.get()} ({parity.get()})
+        </span>
+      </div>
+    );
+  }
+}
+
+customElements.define('sb-signal-counter-jsx', SignalCounter);

docs/pages/sandbox.html

@@ -32,7 +32,7 @@
       }
     </style>
 
-    <script type="module" src="../components/sandbox/card.js"></script>
+    <!-- <script type="module" src="../components/sandbox/card.js"></script>
     <script type="module" src="../components/sandbox/card.jsx"></script>
 
     <script type="module" src="../components/sandbox/counter-dsd.jsx"></script>
@@ -42,38 +42,67 @@
 
     <script type="module" src="../components/sandbox/header.js"></script>
     <script type="module" src="../components/sandbox/header.jsx"></script>
-    <script type="module" src="../components/sandbox/picture-frame.js"></script>
+    <script type="module" src="../components/sandbox/picture-frame.js"></script> -->
+    <script type="importmap">
+      {
+        "imports": {
+          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import { Signal } from 'signal-polyfill';
+
+      globalThis.Signal = Signal;
+    </script>
     <script>
       function randomReset() {
         return Math.floor(Math.random() * 100);
       }
 
       globalThis.document.addEventListener('DOMContentLoaded', () => {
-        const counterJsxResetButton = document.getElementById('counter-jsx-reset');
-        const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
-        const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
+        const signalCounterJsxResetButton = document.getElementById('signal-counter-reset');
+        // const counterJsxResetButton = document.getElementById('counter-jsx-reset');
+        // const counterJsxDsdResetButton = document.getElementById('counter-jsx-dsd-reset');
+        // const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
 
-        counterJsxResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        signalCounterJsxResetButton.addEventListener('click', () => {
+          document.querySelector('sb-signal-counter-jsx').setAttribute('count', randomReset());
         });
 
-        counterJsxDsdResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
-        });
+        // counterJsxResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        // });
 
-        counterTsxDsdResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-dsd-tsx').setAttribute('count', randomReset());
-        });
+        // counterJsxDsdResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-dsd-jsx').setAttribute('count', randomReset());
+        // });
+
+        // counterTsxDsdResetButton.addEventListener('click', () => {
+        //   document.querySelector('sb-counter-dsd-tsx').setAttribute('count', randomReset());
+        // });
       });
     </script>
 
-    <!-- interactive scripts can be configured in sandbox.js -->
+    <script type="module" src="../components/sandbox/signal-counter.jsx"></script>
   </head>
 
   <body>
     <h1>WCC Sandbox</h1>
 
-    <h2>Light DOM (no JS)</h2>
+    <h2>JSX + inferredObservability</h2>
+
+    <sb-signal-counter-jsx count="3"></sb-signal-counter-jsx>
+
+    <button class="reset" id="signal-counter-reset">Random Reset</button>
+
+    <pre>
+      &lt;sb-signal-counter-jsx
+        count="3"
+      &gt;&lt;/sb-signal-counter-jsx&gt;
+    </pre>
+
+    <!-- <h2>Light DOM (no JS)</h2>
 
     <sb-header></sb-header>
 
@@ -211,6 +240,6 @@ <h2>TSX + DSD + inferredObservability</h2>
       &lt;sb-counter-dsd-tsx
         count="3"
       &gt;&lt;/sb-counter-dsd-tsx&gt;
-    </pre>
+    </pre> -->
   </body>
 </html>