feat: #232 Signals based JSX compilation

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.tsx

@@ -0,0 +1,62 @@
+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...',
+    );
+  }
+
+  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);
+  }
+
+  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/pages/sandbox.html

@@ -30,9 +30,15 @@
         min-width: 5%;
         margin: 0 auto;
       }
+
+      sb-signal-counter-jsx {
+        display: block;
+        margin: 0 auto;
+        width: 50%;
+      }
     </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 +48,88 @@
 
     <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",
+          "wc-compiler/effect": "../node_modules/wc-compiler/src/effect.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import { Signal } from 'signal-polyfill';
+
+      globalThis.Signal = Signal;
+    </script>
+    <script type="module">
+      // NOTE: `Signal` has to be defined first
+      import { effect } from 'wc-compiler/effect';
+      globalThis.effect = effect;
+
+      globalThis._wcc = function (strings, ...values) {
+        let str = '';
+        strings.forEach((string, i) => {
+          str += string + (values[i] === 0 ? '0' : values[i] || '');
+        });
+        return str;
+      };
+    </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');
-
-        counterJsxResetButton.addEventListener('click', () => {
-          document.querySelector('sb-counter-jsx').setAttribute('count', randomReset());
+        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');
+
+        signalCounterJsxResetButton.addEventListener('click', () => {
+          document.querySelectorAll('sb-signal-counter-jsx').forEach((el) => {
+            el.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.tsx"></script>
   </head>
 
   <body>
     <h1>WCC Sandbox</h1>
 
-    <h2>Light DOM (no JS)</h2>
+    <h2>JSX + inferredObservability</h2>
+
+    <sb-signal-counter-jsx></sb-signal-counter-jsx>
+    <hr />
+    <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&gt;&lt;/sb-signal-counter-jsx&gt;
+    </pre>
+    <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 +267,6 @@ <h2>TSX + DSD + inferredObservability</h2>
       &lt;sb-counter-dsd-tsx
         count="3"
       &gt;&lt;/sb-counter-dsd-tsx&gt;
-    </pre>
+    </pre> -->
   </body>
 </html>

greenwood.config.ts

@@ -1,8 +1,33 @@
-import type { Config } from '@greenwood/cli';
+import type { Config, CopyPlugin } from '@greenwood/cli';
 import { greenwoodPluginMarkdown } from '@greenwood/plugin-markdown';
 import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
 import { greenwoodPluginCssModules } from '@greenwood/plugin-css-modules';
 import { greenwoodPluginImportRaw } from '@greenwood/plugin-import-raw';
+import fs from 'node:fs';
+
+// TODO: this does not run in dev :/
+function copyEffectPlugin(): CopyPlugin {
+  console.log('herere???');
+  return {
+    type: 'copy',
+    name: 'plugin-copy-wcc-effect',
+    provider: async () => {
+      console.log('copy???');
+      return [
+        {
+          // copy a file
+          from: new URL('./src/effect.js', import.meta.url),
+          to: new URL('./node_modules/wc-compiler/src/effect.js', import.meta.url),
+        },
+      ];
+    },
+  };
+}
+
+fs.copyFileSync(
+  new URL('./src/effect.js', import.meta.url),
+  new URL('./node_modules/wc-compiler/src/effect.js', import.meta.url),
+);
 
 const config: Config = {
   activeContent: true,
@@ -12,6 +37,7 @@ const config: Config = {
     importAttributes: ['css'],
   },
   plugins: [
+    // copyEffectPlugin(),
     greenwoodPluginImportRaw(),
     greenwoodPluginCssModules(),
     greenwoodPluginImportJsx(),