@sprlab/wccompiler 0.3.0 → 0.4.0

package/lib/codegen.js

@@ -75,7 +75,7 @@ function slotPropRef(source, signalNames, computedNames, propNames) {
  * @param {string|null} [emitsObjectName] — Emits object variable name
  * @returns {string}
  */
-export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = []) {
+export function transformExpr(expr, signalNames, computedNames, propsObjectName = null, propNames = new Set(), emitsObjectName = null, constantNames = [], methodNames = []) {
   let result = expr;
 
   // Transform emit calls: emitsObjectName( → this._emit(
@@ -84,6 +84,14 @@ export function transformExpr(expr, signalNames, computedNames, propsObjectName
     result = result.replace(emitsRe, 'this._emit(');
   }
 
+  // Transform method calls: methodName( → this._methodName(
+  for (const name of methodNames) {
+    if (propsObjectName && name === propsObjectName) continue;
+    if (emitsObjectName && name === emitsObjectName) continue;
+    const methodRe = new RegExp(`\\b${name}\\(`, 'g');
+    result = result.replace(methodRe, `this._${name}(`);
+  }
+
   // Transform props.x → this._s_x() BEFORE signal/computed transforms
   if (propsObjectName && propNames.size > 0) {
     const propsRe = new RegExp(`\\b${propsObjectName}\\.(\\w+)`, 'g');
@@ -239,15 +247,24 @@ export function transformForExpr(expr, itemVar, indexVar, propsSet, rootVarNames
 
   for (const p of propsSet) {
     if (excludeSet.has(p)) continue;
-    r = r.replace(new RegExp(`\\b${p}\\b`, 'g'), `this._s_${p}()`);
+    // First: transform name() calls → this._s_name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${p}\\(\\)`, 'g'), `this._s_${p}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${p}\\b(?!\\()`, 'g'), `this._s_${p}()`);
   }
   for (const n of rootVarNames) {
     if (excludeSet.has(n)) continue;
-    r = r.replace(new RegExp(`\\b${n}\\b`, 'g'), `this._${n}()`);
+    // First: transform name() calls → this._name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${n}\\(\\)`, 'g'), `this._${n}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${n}\\b(?!\\()`, 'g'), `this._${n}()`);
   }
   for (const n of computedNames) {
     if (excludeSet.has(n)) continue;
-    r = r.replace(new RegExp(`\\b${n}\\b`, 'g'), `this._c_${n}()`);
+    // First: transform name() calls → this._c_name() (don't double-call)
+    r = r.replace(new RegExp(`\\b${n}\\(\\)`, 'g'), `this._c_${n}()`);
+    // Then: transform bare name references
+    r = r.replace(new RegExp(`\\b${n}\\b(?!\\()`, 'g'), `this._c_${n}()`);
   }
   return r;
 }
@@ -297,6 +314,75 @@ export function isStaticForExpr(expr, itemVar, indexVar, propsSet, rootVarNames,
   return true;
 }
 
+/**
+ * Generate the JS expression for an event handler based on its type:
+ * - Simple name (e.g. "removeItem") → this._removeItem.bind(this)
+ * - Function call (e.g. "removeItem(item)") → (e) => { this._removeItem(item); }
+ * - Arrow function (e.g. "() => removeItem(item)") → () => { removeItem(item); }
+ *
+ * @param {string} handler — The raw handler string from the template
+ * @param {string[]} signalNames
+ * @param {string[]} computedNames
+ * @param {string|null} propsObjectName
+ * @param {Set<string>} propNames
+ * @param {string|null} emitsObjectName
+ * @param {string[]} constantNames
+ * @returns {string}
+ */
+export function generateEventHandler(handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames) {
+  if (handler.includes('=>')) {
+    // Arrow function expression: (e) => removeItem(item)
+    const arrowIdx = handler.indexOf('=>');
+    const params = handler.slice(0, arrowIdx).trim();
+    let body = handler.slice(arrowIdx + 2).trim();
+    body = transformMethodBody(body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, [], constantNames);
+    return `${params} => { ${body}; }`;
+  } else if (handler.includes('(')) {
+    // Function call expression: removeItem(item)
+    const parenIdx = handler.indexOf('(');
+    const fnName = handler.slice(0, parenIdx).trim();
+    const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
+    const transformedArgs = args ? transformExpr(args, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames) : '';
+    return `(e) => { this._${fnName}(${transformedArgs}); }`;
+  } else {
+    // Simple method name
+    return `this._${handler}.bind(this)`;
+  }
+}
+
+/**
+ * Generate the JS expression for an event handler inside an each block.
+ * Similar to generateEventHandler but uses transformForExpr for the each scope.
+ *
+ * @param {string} handler
+ * @param {string} itemVar
+ * @param {string|null} indexVar
+ * @param {Set<string>} propNames
+ * @param {Set<string>} signalNamesSet
+ * @param {Set<string>} computedNamesSet
+ * @returns {string}
+ */
+export function generateForEventHandler(handler, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet) {
+  if (handler.includes('=>')) {
+    // Arrow function expression
+    const arrowIdx = handler.indexOf('=>');
+    const params = handler.slice(0, arrowIdx).trim();
+    let body = handler.slice(arrowIdx + 2).trim();
+    body = transformForExpr(body, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+    return `${params} => { ${body}; }`;
+  } else if (handler.includes('(')) {
+    // Function call expression: removeItem(item)
+    const parenIdx = handler.indexOf('(');
+    const fnName = handler.slice(0, parenIdx).trim();
+    const args = handler.slice(parenIdx + 1, handler.lastIndexOf(')')).trim();
+    const transformedArgs = args ? transformForExpr(args, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet) : '';
+    return `(e) => { this._${fnName}(${transformedArgs}); }`;
+  } else {
+    // Simple method name
+    return `this._${handler}.bind(this)`;
+  }
+}
+
 /**
  * Generate per-item setup code for bindings, events, show, attr, model, and slots.
  * Used by both keyed and non-keyed each effects.
@@ -326,7 +412,8 @@ function generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signal
   // Events
   for (const e of forBlock.events) {
     const nodeRef = pathExpr(e.path, 'node');
-    lines.push(`${indent}  ${nodeRef}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+    const handlerExpr = generateForEventHandler(e.handler, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+    lines.push(`${indent}  ${nodeRef}.addEventListener('${e.event}', ${handlerExpr});`);
   }
 
   // Show
@@ -435,6 +522,7 @@ export function generateComponent(parseResult) {
   const signalNames = signals.map(s => s.name);
   const computedNames = computeds.map(c => c.name);
   const constantNames = constantVars.map(v => v.name);
+  const methodNames = methods.map(m => m.name);
   const refVarNames = refs.map(r => r.varName);
   const propNames = new Set(propDefs.map(p => p.name));
 
@@ -560,13 +648,18 @@ export function generateComponent(parseResult) {
 
   // Computed initialization
   for (const c of computeds) {
-    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const body = transformExpr(c.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     lines.push(`    this._c_${c.name} = __computed(() => ${body});`);
   }
 
   // Watcher prev-value initialization
-  for (const w of watchers) {
-    lines.push(`    this.__prev_${w.target} = undefined;`);
+  for (let idx = 0; idx < watchers.length; idx++) {
+    const w = watchers[idx];
+    if (w.kind === 'signal') {
+      lines.push(`    this.__prev_${w.target} = undefined;`);
+    } else {
+      lines.push(`    this.__prev_watch${idx} = undefined;`);
+    }
   }
 
   // ── if: template creation, anchor reference, state init ──
@@ -702,38 +795,58 @@ export function generateComponent(parseResult) {
   }
 
   // Watcher effects
-  for (const w of watchers) {
-    // Determine the signal reference for the watch target
-    let watchRef;
-    if (propNames.has(w.target)) {
-      watchRef = `this._s_${w.target}()`;
-    } else if (computedNames.includes(w.target)) {
-      watchRef = `this._c_${w.target}()`;
-    } else {
-      watchRef = `this._${w.target}()`;
-    }
+  for (let idx = 0; idx < watchers.length; idx++) {
+    const w = watchers[idx];
     const body = transformMethodBody(w.body, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
-    lines.push('    __effect(() => {');
-    lines.push(`      const ${w.newParam} = ${watchRef};`);
-    lines.push(`      if (this.__prev_${w.target} !== undefined) {`);
-    lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
-    const bodyLines = body.split('\n');
-    for (const line of bodyLines) {
-      lines.push(`        ${line}`);
+
+    if (w.kind === 'signal') {
+      // Determine the signal reference for the watch target
+      let watchRef;
+      if (propNames.has(w.target)) {
+        watchRef = `this._s_${w.target}()`;
+      } else if (computedNames.includes(w.target)) {
+        watchRef = `this._c_${w.target}()`;
+      } else {
+        watchRef = `this._${w.target}()`;
+      }
+      lines.push('    __effect(() => {');
+      lines.push(`      const ${w.newParam} = ${watchRef};`);
+      lines.push(`      if (this.__prev_${w.target} !== undefined) {`);
+      lines.push(`        const ${w.oldParam} = this.__prev_${w.target};`);
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`        ${line}`);
+      }
+      lines.push('      }');
+      lines.push(`      this.__prev_${w.target} = ${w.newParam};`);
+      lines.push('    });');
+    } else {
+      // kind === 'getter' — transform the getter expression and use it directly
+      const getterExpr = transformMethodBody(w.target, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, refVarNames, constantNames);
+      const prevName = `__prev_watch${idx}`;
+      lines.push('    __effect(() => {');
+      lines.push(`      const ${w.newParam} = ${getterExpr};`);
+      lines.push(`      if (this.${prevName} !== undefined) {`);
+      lines.push(`        const ${w.oldParam} = this.${prevName};`);
+      const bodyLines = body.split('\n');
+      for (const line of bodyLines) {
+        lines.push(`        ${line}`);
+      }
+      lines.push('      }');
+      lines.push(`      this.${prevName} = ${w.newParam};`);
+      lines.push('    });');
     }
-    lines.push('      }');
-    lines.push(`      this.__prev_${w.target} = ${w.newParam};`);
-    lines.push('    });');
   }
 
   // Event listeners
   for (const e of events) {
-    lines.push(`    this.${e.varName}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+    const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    lines.push(`    this.${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
   }
 
   // Show effects — one __effect per ShowBinding
   for (const sb of showBindings) {
-    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     lines.push('    __effect(() => {');
     lines.push(`      this.${sb.varName}.style.display = (${expr}) ? '' : 'none';`);
     lines.push('    });');
@@ -775,7 +888,7 @@ export function generateComponent(parseResult) {
 
   // Attr binding effects — one __effect per AttrBinding
   for (const ab of attrBindings) {
-    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+    const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
     if (ab.kind === 'attr') {
       lines.push('    __effect(() => {');
       lines.push(`      const __v = ${expr};`);
@@ -827,10 +940,10 @@ export function generateComponent(parseResult) {
     for (let i = 0; i < ifBlock.branches.length; i++) {
       const branch = ifBlock.branches[i];
       if (branch.type === 'if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      if (${expr}) { __branch = ${i}; }`);
       } else if (branch.type === 'else-if') {
-        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(branch.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      else if (${expr}) { __branch = ${i}; }`);
       } else {
         // else
@@ -1086,20 +1199,21 @@ export function generateComponent(parseResult) {
 
       // Events: generate addEventListener
       for (const e of branch.events) {
+        const handlerExpr = generateEventHandler(e.handler, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
         lines.push(`      const ${e.varName} = ${pathExpr(e.path, 'node')};`);
-        lines.push(`      ${e.varName}.addEventListener('${e.event}', this._${e.handler}.bind(this));`);
+        lines.push(`      ${e.varName}.addEventListener('${e.event}', ${handlerExpr});`);
       }
 
       // Show bindings: generate effects
       for (const sb of branch.showBindings) {
-        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(sb.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      const ${sb.varName} = ${pathExpr(sb.path, 'node')};`);
         lines.push(`      __effect(() => { ${sb.varName}.style.display = (${expr}) ? '' : 'none'; });`);
       }
 
       // Attr bindings: generate effects
       for (const ab of branch.attrBindings) {
-        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames);
+        const expr = transformExpr(ab.expression, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
         lines.push(`      const ${ab.varName} = ${pathExpr(ab.path, 'node')};`);
         lines.push(`      __effect(() => {`);
         lines.push(`        const __val = ${expr};`);

package/lib/compiler-browser.js

@@ -43,6 +43,7 @@ import {
 
 import { generateComponent } from './codegen.js';
 import { BOOLEAN_ATTRIBUTES } from './types.js';
+import { parseSFC } from './sfc-parser.js';
 
 // ── Browser-compatible DOM helpers ──────────────────────────────────
 
@@ -503,3 +504,23 @@ export async function compileFromStrings({ script, template, style = '', tag, la
   });
 }
 
+/**
+ * Compile an SFC component from a source string (browser-compatible).
+ * Parses the SFC to extract blocks, then delegates to compileFromStrings.
+ *
+ * @param {string} source — Full content of the .wcc file
+ * @param {{ stripTypes?: (code: string) => Promise<string> }} [options]
+ * @returns {Promise<string>} Compiled JavaScript
+ */
+export async function compileFromSFC(source, options) {
+  const descriptor = parseSFC(source);
+  return compileFromStrings({
+    script: descriptor.script,
+    template: descriptor.template,
+    style: descriptor.style,
+    tag: descriptor.tag,
+    lang: descriptor.lang,
+    stripTypes: options?.stripTypes,
+  });
+}
+