feat: #232 transform template signals usage into effects and templates

Author: thescientist13

docs/components/sandbox/signal-counter.jsx

@@ -18,12 +18,14 @@ export default class SignalCounter extends HTMLElement {
 
   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());
+  }
+
+  double() {
+    this.count.set(this.count.get() * 2);
   }
 
   render() {
@@ -33,7 +35,9 @@ export default class SignalCounter extends HTMLElement {
       <div>
         <button onclick={this.increment}>Increment (+)</button>
         <button onclick={this.decrement}>Decrement (-)</button>
-        <button onclick={() => this.count.set(this.count.get() * 2)}>Double (++)</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>
           The count is {count.get()} ({parity.get()})
         </span>

docs/pages/sandbox.html

@@ -46,7 +46,8 @@
     <script type="importmap">
       {
         "imports": {
-          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js"
+          "signal-polyfill": "../node_modules/signal-polyfill/dist/index.js",
+          "wc-compiler/effect": "../node_modules/wc-compiler/src/effect.js"
         }
       }
     </script>
@@ -55,6 +56,19 @@
 
       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);
@@ -67,7 +81,9 @@
         // const counterTsxDsdResetButton = document.getElementById('counter-tsx-dsd-reset');
 
         signalCounterJsxResetButton.addEventListener('click', () => {
-          document.querySelector('sb-signal-counter-jsx').setAttribute('count', randomReset());
+          document.querySelectorAll('sb-signal-counter-jsx').forEach((el) => {
+            el.setAttribute('count', randomReset());
+          });
         });
 
         // counterJsxResetButton.addEventListener('click', () => {
@@ -92,6 +108,7 @@ <h1>WCC Sandbox</h1>
 
     <h2>JSX + inferredObservability</h2>
 
+    <sb-signal-counter-jsx count="0"></sb-signal-counter-jsx>
     <sb-signal-counter-jsx count="3"></sb-signal-counter-jsx>
 
     <button class="reset" id="signal-counter-reset">Random Reset</button>

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(),

package.json

@@ -17,7 +17,8 @@
     "./register": "./src/register.js",
     "./dom-shim": "./src/dom-shim.js",
     "./jsx-loader": "./src/jsx-loader.js",
-    "./jsx-runtime": "./src/jsx-runtime.ts"
+    "./jsx-runtime": "./src/jsx-runtime.ts",
+    "./effect": "./src/effect.js"
   },
   "author": "Owen Buckley <owen@thegreenhouse.io>",
   "keywords": [

src/effect.js

@@ -0,0 +1,39 @@
+// https://github.com/proposal-signals/signal-polyfill?tab=readme-ov-file#creating-a-simple-effect
+import { Signal } from 'signal-polyfill';
+
+let needsEnqueue = true;
+
+const w = new Signal.subtle.Watcher(() => {
+  if (needsEnqueue) {
+    needsEnqueue = false;
+    queueMicrotask(processPending);
+  }
+});
+
+function processPending() {
+  needsEnqueue = true;
+
+  for (const s of w.getPending()) {
+    s.get();
+  }
+
+  w.watch();
+}
+
+export function effect(callback) {
+  let cleanup;
+
+  const computed = new Signal.Computed(() => {
+    typeof cleanup === 'function' && cleanup();
+    cleanup = callback();
+  });
+
+  w.watch(computed);
+  computed.get();
+
+  return () => {
+    w.unwatch(computed);
+    typeof cleanup === 'function' && cleanup();
+    cleanup = undefined;
+  };
+}