@sprlab/wccompiler 0.2.0 → 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/tree-walker.js

@@ -15,7 +15,7 @@
 import { JSDOM } from 'jsdom';
 import { BOOLEAN_ATTRIBUTES } from './types.js';
 
-/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding } from './types.js' */
+/** @import { Binding, EventBinding, IfBlock, IfBranch, ShowBinding, AttrBinding, ForBlock, ModelBinding, SlotBinding, SlotProp, RefBinding, ChildComponentBinding, ChildPropBinding } from './types.js' */
 
 /**
  * Walk a DOM tree rooted at rootEl, discovering bindings and events.
@@ -24,7 +24,7 @@ import { BOOLEAN_ATTRIBUTES } from './types.js';
  * @param {Set<string>} signalNames — Set of signal variable names
  * @param {Set<string>} computedNames — Set of computed variable names
  * @param {Set<string>} [propNames] — Set of prop names from defineProps
- * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[] }}
+ * @returns {{ bindings: Binding[], events: EventBinding[], showBindings: ShowBinding[], modelBindings: ModelBinding[], attrBindings: AttrBinding[], slots: SlotBinding[], childComponents: ChildComponentBinding[] }}
  */
 export function walkTree(rootEl, signalNames, computedNames, propNames = new Set()) {
   /** @type {Binding[]} */
@@ -39,12 +39,15 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   const attrBindings = [];
   /** @type {SlotBinding[]} */
   const slots = [];
+  /** @type {ChildComponentBinding[]} */
+  const childComponents = [];
   let bindIdx = 0;
   let eventIdx = 0;
   let showIdx = 0;
   let modelIdx = 0;
   let attrIdx = 0;
   let slotIdx = 0;
+  let childIdx = 0;
 
   /**
    * Determine the binding type for a variable name.
@@ -103,6 +106,40 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
         return; // Don't recurse into the replaced element
       }
 
+      // Detect child custom elements (tag name contains a hyphen)
+      const tagLower = el.tagName.toLowerCase();
+      if (tagLower.includes('-') && tagLower !== rootEl.tagName?.toLowerCase()) {
+        /** @type {ChildPropBinding[]} */
+        const propBindings = [];
+        for (const attr of Array.from(el.attributes)) {
+          // Skip directive attributes (@event, :bind, show, model, etc.)
+          if (attr.name.startsWith('@') || attr.name.startsWith(':') || attr.name.startsWith('bind:')) continue;
+          if (['show', 'model', 'if', 'else-if', 'else', 'each', 'ref'].includes(attr.name)) continue;
+
+          // Check for {{interpolation}} in attribute value
+          const interpMatch = attr.value.match(/^\{\{([\w.]+)\}\}$/);
+          if (interpMatch) {
+            const expr = interpMatch[1];
+            propBindings.push({
+              attr: attr.name,
+              expr,
+              type: propNames.has(expr) ? 'prop' : signalNames.has(expr) ? 'signal' : computedNames.has(expr) ? 'computed' : 'method',
+            });
+            // Clear the interpolation from the attribute — the effect sets it at runtime
+            el.setAttribute(attr.name, '');
+          }
+        }
+
+        if (propBindings.length > 0) {
+          childComponents.push({
+            tag: tagLower,
+            varName: `__child${childIdx++}`,
+            path: [...pathParts],
+            propBindings,
+          });
+        }
+      }
+
       // Check for @event attributes
       const attrsToRemove = [];
       for (const attr of Array.from(el.attributes)) {
@@ -265,7 +302,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
   }
 
   walk(rootEl, []);
-  return { bindings, events, showBindings, modelBindings, attrBindings, slots };
+  return { bindings, events, showBindings, modelBindings, attrBindings, slots, childComponents };
 }
 
 // ── Conditional chain processing (if / else-if / else) ──────────────
@@ -338,6 +375,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   stripFirstSegment(result.attrBindings);
   stripFirstSegment(result.modelBindings);
   stripFirstSegment(result.slots);
+  stripFirstSegment(result.childComponents);
 
   return {
     bindings: result.bindings,
@@ -346,6 +384,7 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
     attrBindings: result.attrBindings,
     modelBindings: result.modelBindings,
     slots: result.slots,
+    childComponents: result.childComponents,
     processedHtml,
   };
 }

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(...)`
@@ -86,6 +96,8 @@
  * @property {SlotBinding[]} slots — Slot bindings (empty array if no slots)
  * @property {RefDeclaration[]} refs — templateRef declarations from script (empty array if none)
  * @property {RefBinding[]} refBindings — ref attribute bindings from template (empty array if none)
+ * @property {ChildComponentBinding[]} childComponents — Child component bindings (empty array if none)
+ * @property {ChildComponentImport[]} childImports — Resolved child component imports (empty array if none)
  */
 
 /**
@@ -179,6 +191,27 @@
  * @property {SlotProp[]} slotProps  — Array of :prop="expr" bindings on the slot
  */
 
+/**
+ * @typedef {Object} ChildPropBinding
+ * @property {string} attr   — Attribute name on the child element (e.g., 'label')
+ * @property {string} expr   — Expression from {{expr}} (e.g., 'role')
+ * @property {string} type   — Binding source type: 'signal' | 'computed' | 'prop' | 'constant' | 'method'
+ */
+
+/**
+ * @typedef {Object} ChildComponentBinding
+ * @property {string} tag          — Child component tag name (e.g., 'wcc-badge')
+ * @property {string} varName      — Internal ref name (e.g., '__child0')
+ * @property {string[]} path       — DOM path from __root
+ * @property {ChildPropBinding[]} propBindings — Reactive attribute bindings
+ */
+
+/**
+ * @typedef {Object} ChildComponentImport
+ * @property {string} tag          — Child component tag name
+ * @property {string} importPath   — Relative import path (e.g., './wcc-badge.js')
+ */
+
 /**
  * Set of HTML attributes that use property assignment instead of setAttribute.
  * @type {Set<string>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.2.0",
+  "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;
 }