@sprlab/wccompiler 0.2.1 → 0.3.0

package/lib/reactive-runtime.js

@@ -1,5 +1,5 @@
 /**
- * Template string containing the mini reactive runtime (~40 lines).
+ * Template string containing the mini reactive runtime.
  * This gets inlined at the top of each compiled component so the output
  * is fully self-contained with zero imports.
  *
@@ -7,12 +7,16 @@
  * - __signal(initialValue): getter/setter function with subscriber tracking
  * - __computed(fn): cached derived value that auto-invalidates
  * - __effect(fn): runs fn immediately and re-runs when dependencies change
+ * - __batch(fn): batch multiple signal writes, flush effects once at the end
  *
  * Dependency tracking uses a global stack (__currentEffect).
+ * Batching uses a depth counter — nested batches are supported.
  */
 /** @type {string} */
 export const reactiveRuntime = `
 let __currentEffect = null;
+let __batchDepth = 0;
+const __pendingEffects = [];
 
 function __signal(initial) {
   let _value = initial;
@@ -25,7 +29,13 @@ function __signal(initial) {
     const old = _value;
     _value = args[0];
     if (old !== _value) {
-      for (const fn of [..._subs]) fn();
+      if (__batchDepth > 0) {
+        for (const fn of _subs) {
+          if (!__pendingEffects.includes(fn)) __pendingEffects.push(fn);
+        }
+      } else {
+        for (const fn of [..._subs]) fn();
+      }
     }
   };
 }
@@ -35,7 +45,13 @@ function __computed(fn) {
   const _subs = new Set();
   const recompute = () => {
     _dirty = true;
-    for (const fn of [..._subs]) fn();
+    if (__batchDepth > 0) {
+      for (const fn of _subs) {
+        if (!__pendingEffects.includes(fn)) __pendingEffects.push(fn);
+      }
+    } else {
+      for (const fn of [..._subs]) fn();
+    }
   };
   return () => {
     if (__currentEffect) _subs.add(__currentEffect);
@@ -51,12 +67,27 @@ function __computed(fn) {
 }
 
 function __effect(fn) {
+  let _cleanup = null;
   const run = () => {
+    if (typeof _cleanup === 'function') _cleanup();
     const prev = __currentEffect;
     __currentEffect = run;
-    fn();
+    _cleanup = fn();
     __currentEffect = prev;
   };
   run();
 }
+
+function __batch(fn) {
+  __batchDepth++;
+  try {
+    fn();
+  } finally {
+    __batchDepth--;
+    if (__batchDepth === 0) {
+      const pending = __pendingEffects.splice(0);
+      for (const f of pending) f();
+    }
+  }
+}
 `;

package/lib/types.js

@@ -26,6 +26,15 @@
 /**
  * @typedef {Object} LifecycleHook
  * @property {string} body — The callback body (JavaScript code)
+ * @property {boolean} async — Whether the callback is async
+ */
+
+/**
+ * @typedef {Object} WatcherDef
+ * @property {string} target — Signal/prop/computed name to watch (e.g., 'count')
+ * @property {string} newParam — Parameter name for new value (e.g., 'newVal')
+ * @property {string} oldParam — Parameter name for old value (e.g., 'oldVal')
+ * @property {string} body — Callback body
  */
 
 /**
@@ -68,6 +77,7 @@
  * @property {ComputedDef[]} computeds — computed() declarations
  * @property {EffectDef[]} effects — effect() declarations
  * @property {ConstantVar[]} constantVars — Plain const declarations (non-reactive)
+ * @property {WatcherDef[]} watchers — watch() declarations
  * @property {MethodDef[]} methods — function declarations
  * @property {PropDef[]} propDefs — Prop definitions with names and defaults
  * @property {string|null} propsObjectName — Variable name from `const X = defineProps(...)`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Zero-runtime compiler that transforms .ts/.js component files into native web components with signals-based reactivity",
   "type": "module",
   "bin": {

package/types/wcc.d.ts

@@ -7,6 +7,7 @@ declare module 'wcc' {
   export function signal<T>(value: T): Signal<T>;
   export function computed<T>(fn: () => T): () => T;
   export function effect(fn: () => void): void;
+  export function watch<T>(target: string, fn: (newVal: T, oldVal: T) => void): void;
   export function defineComponent(options: {
     tag: string;
     template: string;
@@ -21,7 +22,7 @@ declare module 'wcc' {
 
   export function templateRef(name: string): { value: HTMLElement | null };
 
-  export function onMount(fn: () => void): void;
-  export function onDestroy(fn: () => void): void;
+  export function onMount(fn: () => void | Promise<void>): void;
+  export function onDestroy(fn: () => void | Promise<void>): void;
   export function templateBindings(bindings: Record<string, any>): void;
 }