@sprlab/wccompiler 0.2.1 → 0.4.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/sfc-parser.js

@@ -0,0 +1,262 @@
+/**
+ * SFC Parser — extracts <script>, <template> and <style> blocks from .wcc files.
+ *
+ * Pure ESM module with no Node.js dependencies (usable in browser and server).
+ *
+ * Two-phase algorithm:
+ *   Phase 1: Block extraction via regex
+ *   Phase 2: Validation (required blocks, duplicates, unexpected content, defineComponent)
+ */
+
+/**
+ * @typedef {Object} SFCDescriptor
+ * @property {string} script   — Content of the <script> block
+ * @property {string} template — Content of the <template> block
+ * @property {string} style    — Content of the <style> block ('' if absent)
+ * @property {string} lang     — 'ts' | 'js'
+ * @property {string} tag      — Tag name extracted from defineComponent({ tag })
+ */
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+/**
+ * Create an Error with a `.code` property (project convention).
+ * @param {string} code
+ * @param {string} message
+ * @returns {Error}
+ */
+function sfcError(code, message) {
+  const error = new Error(message);
+  /** @ts-expect-error — custom error code for programmatic handling */
+  error.code = code;
+  return error;
+}
+
+// ── Phase 1: Block extraction ───────────────────────────────────────
+
+/**
+ * @typedef {Object} BlockMatch
+ * @property {string} content  — Inner content between open and close tags
+ * @property {string} attrs    — Attributes string from the opening tag
+ * @property {number} start    — Start index of the opening tag in source
+ * @property {number} end      — End index (after closing tag) in source
+ */
+
+/**
+ * Find all occurrences of a given block type in the source.
+ *
+ * @param {string} source
+ * @param {string} blockName — 'script' | 'template' | 'style'
+ * @returns {BlockMatch[]}
+ */
+function findBlocks(source, blockName) {
+  const openRe = new RegExp(`<${blockName}(\\s[^>]*)?>`, 'g');
+  const closeTag = `</${blockName}>`;
+  /** @type {BlockMatch[]} */
+  const matches = [];
+  let m;
+
+  while ((m = openRe.exec(source)) !== null) {
+    const openEnd = m.index + m[0].length;
+    const closeIdx = source.indexOf(closeTag, openEnd);
+    if (closeIdx === -1) continue; // unclosed tag — skip
+
+    matches.push({
+      content: source.slice(openEnd, closeIdx),
+      attrs: m[1] || '',
+      start: m.index,
+      end: closeIdx + closeTag.length,
+    });
+  }
+
+  return matches;
+}
+
+/**
+ * Extract the `lang` attribute value from an attributes string.
+ * Returns 'ts' if lang="ts", otherwise 'js'.
+ *
+ * @param {string} attrs
+ * @returns {'ts' | 'js'}
+ */
+function extractLang(attrs) {
+  const langMatch = attrs.match(/lang\s*=\s*["']([^"']+)["']/);
+  return langMatch && langMatch[1] === 'ts' ? 'ts' : 'js';
+}
+
+// ── Phase 2: Validation ─────────────────────────────────────────────
+
+/**
+ * Extract the tag name from a defineComponent({ tag: '...' }) call.
+ *
+ * @param {string} script
+ * @param {string} fileName
+ * @returns {string}
+ */
+function extractTagFromDefineComponent(script, fileName) {
+  const dcMatch = script.match(/defineComponent\(\s*\{([^}]*)\}\s*\)/);
+  if (!dcMatch) {
+    throw sfcError(
+      'MISSING_DEFINE_COMPONENT',
+      `Error en '${fileName}': defineComponent() es obligatorio`
+    );
+  }
+
+  const body = dcMatch[1];
+
+  // Reject template/styles fields inside defineComponent in SFC mode
+  if (/\btemplate\s*:/.test(body)) {
+    throw sfcError(
+      'SFC_INLINE_PATHS_FORBIDDEN',
+      `SFC file '${fileName}': template/styles paths are not allowed in SFC mode (content is inline)`
+    );
+  }
+  if (/\bstyles\s*:/.test(body)) {
+    throw sfcError(
+      'SFC_INLINE_PATHS_FORBIDDEN',
+      `SFC file '${fileName}': template/styles paths are not allowed in SFC mode (content is inline)`
+    );
+  }
+
+  const tagMatch = body.match(/tag\s*:\s*['"]([^'"]+)['"]/);
+  if (!tagMatch) {
+    throw sfcError(
+      'MISSING_DEFINE_COMPONENT',
+      `Error en '${fileName}': defineComponent() must include a tag field`
+    );
+  }
+
+  return tagMatch[1];
+}
+
+/**
+ * Check that no non-whitespace content exists outside the recognized blocks.
+ *
+ * @param {string} source
+ * @param {Array<{start: number, end: number}>} blockRanges — sorted by start
+ * @param {string} fileName
+ */
+function validateNoUnexpectedContent(source, blockRanges, fileName) {
+  let cursor = 0;
+
+  for (const range of blockRanges) {
+    const outside = source.slice(cursor, range.start);
+    if (outside.trim().length > 0) {
+      throw sfcError(
+        'SFC_UNEXPECTED_CONTENT',
+        `SFC file '${fileName}' contains unexpected content outside blocks`
+      );
+    }
+    cursor = range.end;
+  }
+
+  // Check trailing content after last block
+  const trailing = source.slice(cursor);
+  if (trailing.trim().length > 0) {
+    throw sfcError(
+      'SFC_UNEXPECTED_CONTENT',
+      `SFC file '${fileName}' contains unexpected content outside blocks`
+    );
+  }
+}
+
+// ── Public API ──────────────────────────────────────────────────────
+
+/**
+ * Parse an SFC source string and extract its blocks.
+ *
+ * @param {string} source — Full content of the .wcc file
+ * @param {string} [fileName='<unknown>'] — File name for error messages
+ * @returns {SFCDescriptor}
+ * @throws {Error} with codes: SFC_MISSING_TEMPLATE, SFC_MISSING_SCRIPT,
+ *                 SFC_DUPLICATE_BLOCK, SFC_UNEXPECTED_CONTENT,
+ *                 SFC_INLINE_PATHS_FORBIDDEN, MISSING_DEFINE_COMPONENT
+ */
+export function parseSFC(source, fileName = '<unknown>') {
+  // ── Phase 1: Extract blocks ─────────────────────────────────────
+
+  const scriptBlocks = findBlocks(source, 'script');
+  const templateBlocks = findBlocks(source, 'template');
+  const styleBlocks = findBlocks(source, 'style');
+
+  // Check for duplicates
+  if (scriptBlocks.length > 1) {
+    throw sfcError(
+      'SFC_DUPLICATE_BLOCK',
+      `SFC file '${fileName}' contains duplicate <script> blocks`
+    );
+  }
+  if (templateBlocks.length > 1) {
+    throw sfcError(
+      'SFC_DUPLICATE_BLOCK',
+      `SFC file '${fileName}' contains duplicate <template> blocks`
+    );
+  }
+  if (styleBlocks.length > 1) {
+    throw sfcError(
+      'SFC_DUPLICATE_BLOCK',
+      `SFC file '${fileName}' contains duplicate <style> blocks`
+    );
+  }
+
+  // ── Phase 2: Validation ─────────────────────────────────────────
+
+  // Required blocks
+  if (templateBlocks.length === 0) {
+    throw sfcError(
+      'SFC_MISSING_TEMPLATE',
+      `SFC file '${fileName}' is missing a <template> block`
+    );
+  }
+  if (scriptBlocks.length === 0) {
+    throw sfcError(
+      'SFC_MISSING_SCRIPT',
+      `SFC file '${fileName}' is missing a <script> block`
+    );
+  }
+
+  // Collect all block ranges for unexpected-content check
+  /** @type {Array<{start: number, end: number}>} */
+  const allRanges = [
+    ...scriptBlocks,
+    ...templateBlocks,
+    ...styleBlocks,
+  ].sort((a, b) => a.start - b.start);
+
+  validateNoUnexpectedContent(source, allRanges, fileName);
+
+  // Extract block contents
+  const scriptContent = scriptBlocks[0].content;
+  const templateContent = templateBlocks[0].content;
+  const styleContent = styleBlocks.length > 0 ? styleBlocks[0].content : '';
+  const lang = extractLang(scriptBlocks[0].attrs);
+
+  // Validate defineComponent and extract tag
+  const tag = extractTagFromDefineComponent(scriptContent, fileName);
+
+  return {
+    script: scriptContent,
+    template: templateContent,
+    style: styleContent,
+    lang,
+    tag,
+  };
+}
+
+/**
+ * Pretty-printer: reconstruct an SFC string from a descriptor.
+ *
+ * @param {SFCDescriptor} descriptor
+ * @returns {string}
+ */
+export function printSFC(descriptor) {
+  const langAttr = descriptor.lang === 'ts' ? ' lang="ts"' : '';
+  let result = `<script${langAttr}>${descriptor.script}</script>\n\n`;
+  result += `<template>${descriptor.template}</template>`;
+
+  if (descriptor.style && descriptor.style.length > 0) {
+    result += `\n\n<style>${descriptor.style}</style>`;
+  }
+
+  return result;
+}

package/lib/tree-walker.js

@@ -117,9 +117,10 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
           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.]+)\}\}$/);
+          const interpMatch = attr.value.match(/^\{\{([\w.()]+)\}\}$/);
           if (interpMatch) {
-            const expr = interpMatch[1];
+            const rawExpr = interpMatch[1];
+            const expr = rawExpr.endsWith('()') ? rawExpr.slice(0, -2) : rawExpr;
             propBindings.push({
               attr: attr.name,
               expr,
@@ -240,19 +241,25 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
     }
 
     // --- Text node with interpolations ---
-    if (node.nodeType === 3 && /\{\{[\w.]+\}\}/.test(node.textContent)) {
+    if (node.nodeType === 3 && /\{\{[\w.()]+\}\}/.test(node.textContent)) {
       const text = node.textContent;
       const trimmed = text.trim();
-      const soleMatch = trimmed.match(/^\{\{([\w.]+)\}\}$/);
+      const soleMatch = trimmed.match(/^\{\{([\w.()]+)\}\}$/);
       const parent = node.parentNode;
 
+      // Strip trailing () from expression to get the base name for type lookup
+      function baseName(expr) {
+        return expr.endsWith('()') ? expr.slice(0, -2) : expr;
+      }
+
       // Case 1: {{var}} is the sole content of the parent element and parent has only one child text node
       if (soleMatch && parent.childNodes.length === 1) {
         const varName = `__b${bindIdx++}`;
+        const name = baseName(soleMatch[1]);
         bindings.push({
           varName,
-          name: soleMatch[1],
-          type: bindingType(soleMatch[1]),
+          name,
+          type: bindingType(name),
           path: pathParts.slice(0, -1), // path to parent, not text node
         });
         parent.textContent = '';
@@ -262,7 +269,7 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
       // Case 2: Mixed text and interpolations — split into spans
       const doc = node.ownerDocument;
       const fragment = doc.createDocumentFragment();
-      const parts = text.split(/(\{\{[\w.]+\}\})/);
+      const parts = text.split(/(\{\{[\w.()]+\}\})/);
       const parentPath = pathParts.slice(0, -1);
 
       // Find the index of this text node among its siblings
@@ -274,14 +281,15 @@ export function walkTree(rootEl, signalNames, computedNames, propNames = new Set
 
       let offset = 0;
       for (const part of parts) {
-        const bm = part.match(/^\{\{([\w.]+)\}\}$/);
+        const bm = part.match(/^\{\{([\w.()]+)\}\}$/);
         if (bm) {
           fragment.appendChild(doc.createElement('span'));
           const varName = `__b${bindIdx++}`;
+          const name = baseName(bm[1]);
           bindings.push({
             varName,
-            name: bm[1],
-            type: bindingType(bm[1]),
+            name,
+            type: bindingType(name),
             path: [...parentPath, `childNodes[${baseIndex + offset}]`],
           });
           offset++;

package/lib/types.js

@@ -26,6 +26,16 @@
 /**
  * @typedef {Object} LifecycleHook
  * @property {string} body — The callback body (JavaScript code)
+ * @property {boolean} async — Whether the callback is async
+ */
+
+/**
+ * @typedef {Object} WatcherDef
+ * @property {'signal' | 'getter'} kind — Type of watch target
+ * @property {string} target — Signal/computed name (for kind='signal') or getter expression (for kind='getter')
+ * @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 +78,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,7 +1,7 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.2.1",
-  "description": "Zero-runtime compiler that transforms .ts/.js component files into native web components with signals-based reactivity",
+  "version": "0.4.0",
+  "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "bin": {
     "wcc": "./bin/wcc.js"
@@ -44,4 +44,4 @@
     "node": "24.0.0",
     "yarn": "4.12.0"
   }
-}
+}

package/types/wcc.d.ts

@@ -7,13 +7,13 @@ 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: Signal<T>, fn: (newVal: T, oldVal: T) => void): void;
+  export function watch<T>(target: () => T, fn: (newVal: T, oldVal: T) => void): void;
   export function defineComponent(options: {
     tag: string;
-    template: string;
-    styles?: string;
   }): void;
 
-  export function defineProps<T extends Record<string, any>>(defaults?: Partial<T>): T;
+  export function defineProps<T extends Record<string, any>>(defaults: T): T;
   export function defineProps(names: string[]): Record<string, any>;
 
   export function defineEmits<T>(): T;
@@ -21,7 +21,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 templateBindings(bindings: Record<string, any>): void;
+  export function onMount(fn: () => void | Promise<void>): void;
+  export function onDestroy(fn: () => void | Promise<void>): void;
+  export function defineExpose(bindings: Record<string, any>): void;
 }

package/types/wcc.test.js

@@ -30,8 +30,8 @@ describe('type declarations (wcc.d.ts)', () => {
     const content = readFileSync(dtsPath, 'utf-8');
     expect(content).toContain('function defineComponent');
     expect(content).toContain('tag: string');
-    expect(content).toContain('template: string');
-    expect(content).toContain('styles?: string');
+    expect(content).not.toContain('template?: string');
+    expect(content).not.toContain('styles?: string');
   });
 
   it('Signal<T> interface has call signature (): T', () => {

package/lib/printer.js

@@ -1,118 +0,0 @@
-/**
- * Pretty Printer — serializes a ParseResult IR back to valid .js source format.
- *
- * Used for round-trip testing: parse → prettyPrint → parse should yield
- * an equivalent IR.
- */
-
-/** @import { ParseResult } from './types.js' */
-
-/**
- * Pretty-print a ParseResult IR back to component source format.
- *
- * @param {ParseResult} ir — The intermediate representation
- * @returns {string} Reconstructed source code
- */
-export function prettyPrint(ir) {
-  const sections = [];
-
-  // 1. Import statement — include only macros actually used
-  const macros = ['defineComponent'];
-  if ((ir.propDefs || []).length > 0) macros.push('defineProps');
-  if ((ir.emits || []).length > 0) macros.push('defineEmits');
-  if (ir.signals.length > 0) macros.push('signal');
-  if (ir.computeds.length > 0) macros.push('computed');
-  if (ir.effects.length > 0) macros.push('effect');
-  if ((ir.onMountHooks || []).length > 0) macros.push('onMount');
-  if ((ir.onDestroyHooks || []).length > 0) macros.push('onDestroy');
-  sections.push(`import { ${macros.join(', ')} } from 'wcc'`);
-
-  // 2. defineComponent call
-  const defParts = [];
-  defParts.push(`  tag: '${ir.tagName}',`);
-  defParts.push(`  template: './${ir.tagName}.html',`);
-  if (ir.style !== '') {
-    defParts.push(`  styles: './${ir.tagName}.css',`);
-  }
-  sections.push(`export default defineComponent({\n${defParts.join('\n')}\n})`);
-
-  // 3. defineProps (if present)
-  if ((ir.propDefs || []).length > 0) {
-    const propsObjName = ir.propsObjectName || 'props';
-    const propEntries = ir.propDefs.map(p => `${p.name}: ${p.default}`);
-    sections.push(`const ${propsObjName} = defineProps({ ${propEntries.join(', ')} })`);
-  }
-
-  // 3b. defineEmits (if present)
-  if ((ir.emits || []).length > 0) {
-    const emitsObjName = ir.emitsObjectName || 'emit';
-    const emitEntries = ir.emits.map(e => `'${e}'`).join(', ');
-    sections.push(`const ${emitsObjName} = defineEmits([${emitEntries}])`);
-  }
-
-  // 4. Signal declarations
-  if (ir.signals.length > 0) {
-    const signalLines = ir.signals.map(
-      s => `const ${s.name} = signal(${s.value})`
-    );
-    sections.push(signalLines.join('\n'));
-  }
-
-  // 5. Computed declarations
-  if (ir.computeds.length > 0) {
-    const computedLines = ir.computeds.map(
-      c => `const ${c.name} = computed(() => ${c.body})`
-    );
-    sections.push(computedLines.join('\n'));
-  }
-
-  // 6. Effect declarations
-  if (ir.effects.length > 0) {
-    const effectBlocks = ir.effects.map(e => {
-      const indentedBody = e.body
-        .split('\n')
-        .map(line => `  ${line}`)
-        .join('\n');
-      return `effect(() => {\n${indentedBody}\n})`;
-    });
-    sections.push(effectBlocks.join('\n\n'));
-  }
-
-  // 7. Function declarations
-  if (ir.methods.length > 0) {
-    const fnBlocks = ir.methods.map(m => {
-      const indentedBody = m.body
-        .split('\n')
-        .map(line => `  ${line}`)
-        .join('\n');
-      return `function ${m.name}(${m.params}) {\n${indentedBody}\n}`;
-    });
-    sections.push(fnBlocks.join('\n\n'));
-  }
-
-  // 8. Lifecycle hooks — onMount
-  if ((ir.onMountHooks || []).length > 0) {
-    const mountBlocks = ir.onMountHooks.map(h => {
-      const indentedBody = h.body
-        .split('\n')
-        .map(line => `  ${line}`)
-        .join('\n');
-      return `onMount(() => {\n${indentedBody}\n})`;
-    });
-    sections.push(mountBlocks.join('\n\n'));
-  }
-
-  // 9. Lifecycle hooks — onDestroy
-  if ((ir.onDestroyHooks || []).length > 0) {
-    const destroyBlocks = ir.onDestroyHooks.map(h => {
-      const indentedBody = h.body
-        .split('\n')
-        .map(line => `  ${line}`)
-        .join('\n');
-      return `onDestroy(() => {\n${indentedBody}\n})`;
-    });
-    sections.push(destroyBlocks.join('\n\n'));
-  }
-
-  return sections.join('\n\n') + '\n';
-}