@sprlab/wccompiler 0.5.3 → 0.5.5

package/lib/codegen.js

@@ -473,7 +473,7 @@ function generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signal
       lines.push(`${indent}    const __sp = { ${propsEntries} };`);
       lines.push(`${indent}    let __h = __slotEl.innerHTML;`);
       lines.push(`${indent}    for (const [k, v] of Object.entries(__sp)) {`);
-      lines.push(`${indent}      __h = __h.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
+      lines.push(`${indent}      __h = __h.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '(\\\\(\\\\))?\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
       lines.push(`${indent}    }`);
       lines.push(`${indent}    __slotEl.innerHTML = __h;`);
       lines.push(`${indent}  }`);
@@ -761,13 +761,14 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`      this.${b.varName}.textContent = this._c_${b.name}() ?? '';`);
       lines.push('    }));');
     } else {
-      // method type — check if it's a props.x access pattern
+      // method/expression type — check if it's a props.x access or a complex expression
       let ref;
       if (propsObjectName && b.name.startsWith(propsObjectName + '.')) {
         const propName = b.name.slice(propsObjectName.length + 1);
         ref = `this._s_${propName}()`;
       } else {
-        ref = `this._${b.name}()`;
+        // Use transformExpr for complex expressions (e.g. items().length, ternary)
+        ref = transformExpr(b.name, signalNames, computedNames, propsObjectName, propNames, emitsObjectName, constantNames, methodNames);
       }
       lines.push('    this.__disposers.push(__effect(() => {');
       lines.push(`      this.${b.varName}.textContent = ${ref} ?? '';`);
@@ -787,7 +788,7 @@ export function generateComponent(parseResult, options = {}) {
       lines.push(`        const __props = { ${propsObj} };`);
       lines.push(`        let __html = this.__slotTpl_${s.name};`);
       lines.push("        for (const [k, v] of Object.entries(__props)) {");
-      lines.push(`          __html = __html.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
+      lines.push(`          __html = __html.replace(new RegExp('\\\\{\\\\{\\\\s*' + k + '(\\\\(\\\\))?\\\\s*\\\\}\\\\}', 'g'), v ?? '');`);
       lines.push('        }');
       lines.push(`        this.${s.varName}.innerHTML = __html;`);
       lines.push('      });');

package/lib/sfc-parser.js

@@ -57,16 +57,59 @@ function findBlocks(source, blockName) {
   let m;
 
   while ((m = openRe.exec(source)) !== null) {
+    const attrs = m[1] || '';
+
+    // For template blocks: skip <template #name> (slot content, not SFC block)
+    if (blockName === 'template' && /#/.test(attrs)) {
+      continue;
+    }
+
     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,
-    });
+
+    // Use depth counting to find the matching close tag (handles nested <template #name>)
+    if (blockName === 'template') {
+      let depth = 1;
+      let searchPos = openEnd;
+      let closeIdx = -1;
+      const openTagRe = /<template[\s>]/g;
+      const closeTagStr = '</template>';
+
+      while (depth > 0 && searchPos < source.length) {
+        const nextClose = source.indexOf(closeTagStr, searchPos);
+        if (nextClose === -1) break;
+
+        // Check for any opening <template> between searchPos and nextClose
+        openTagRe.lastIndex = searchPos;
+        let openMatch;
+        while ((openMatch = openTagRe.exec(source)) !== null && openMatch.index < nextClose) {
+          depth++;
+        }
+
+        depth--; // for the </template> we found
+        if (depth === 0) {
+          closeIdx = nextClose;
+          break;
+        }
+        searchPos = nextClose + closeTagStr.length;
+      }
+
+      if (closeIdx === -1) continue;
+      matches.push({
+        content: source.slice(openEnd, closeIdx),
+        attrs,
+        start: m.index,
+        end: closeIdx + closeTag.length,
+      });
+    } else {
+      const closeIdx = source.indexOf(closeTag, openEnd);
+      if (closeIdx === -1) continue;
+      matches.push({
+        content: source.slice(openEnd, closeIdx),
+        attrs,
+        start: m.index,
+        end: closeIdx + closeTag.length,
+      });
+    }
   }
 
   return matches;

package/lib/tree-walker.js

@@ -240,10 +240,10 @@ 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 && /\{\{(?:[^}]|\}(?!\}))+\}\}/.test(node.textContent)) {
       const text = node.textContent;
       const trimmed = text.trim();
-      const soleMatch = trimmed.match(/^\{\{([\w.()]+)\}\}$/);
+      const soleMatch = trimmed.match(/^\{\{((?:[^}]|\}(?!\}))+)\}\}$/);
       const parent = node.parentNode;
 
       // Strip trailing () from expression to get the base name for type lookup
@@ -268,7 +268,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(/(\{\{(?:[^}]|\}(?!\}))+\}\})/);
       const parentPath = pathParts.slice(0, -1);
 
       // Find the index of this text node among its siblings
@@ -280,7 +280,7 @@ 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(/^\{\{((?:[^}]|\}(?!\}))+)\}\}$/);
         if (bm) {
           fragment.appendChild(doc.createElement('span'));
           const varName = `__b${bindIdx++}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sprlab/wccompiler",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Zero-runtime compiler that transforms .wcc single-file components into native web components with signals-based reactivity",
   "type": "module",
   "bin": {