@sprlab/wccompiler 0.5.12 → 0.5.14

package/lib/codegen.js

@@ -479,6 +479,325 @@ function generateItemSetup(lines, forBlock, itemVar, indexVar, propNames, signal
       lines.push(`${indent}  }`);
     }
   }
+
+  // Nested each directives (forBlocks)
+  for (const innerFor of (forBlock.forBlocks || [])) {
+    const innerVn = innerFor.varName;
+    const innerItemVar = innerFor.itemVar;
+    const innerIndexVar = innerFor.indexVar;
+    const innerSource = innerFor.source;
+    const innerKeyExpr = innerFor.keyExpr;
+
+    // Build excludeSet that includes BOTH outer and inner loop variables
+    // so transformForExpr does not rewrite them as signals
+    const outerExcludeVars = [itemVar];
+    if (indexVar) outerExcludeVars.push(indexVar);
+    const innerExcludeVars = [innerItemVar];
+    if (innerIndexVar) innerExcludeVars.push(innerIndexVar);
+
+    // Create inner template element
+    lines.push(`${indent}  const ${innerVn}_tpl = document.createElement('template');`);
+    lines.push(`${indent}  ${innerVn}_tpl.innerHTML = \`${innerFor.templateHtml}\`;`);
+
+    // Find inner anchor comment in the cloned outer item node
+    lines.push(`${indent}  const ${innerVn}_anchor = ${pathExpr(innerFor.anchorPath, 'node')};`);
+
+    // Transform the inner source expression (may reference outer item var)
+    const innerSourceExpr = transformForExpr(innerSource, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+
+    // Determine if inner source is static (only references outer loop vars)
+    const innerSourceIsStatic = isStaticForExpr(innerSource, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+
+    if (innerKeyExpr) {
+      // ── Keyed reconciliation for nested each ──
+      lines.push(`${indent}  const ${innerVn}_source = ${innerSourceIsStatic ? innerSource : innerSourceExpr};`);
+      lines.push(`${indent}  const ${innerVn}_iter = typeof ${innerVn}_source === 'number'`);
+      lines.push(`${indent}    ? Array.from({ length: ${innerVn}_source }, (_, i) => i + 1)`);
+      lines.push(`${indent}    : (${innerVn}_source || []);`);
+      lines.push(`${indent}  const ${innerVn}_newNodes = [];`);
+      lines.push(`${indent}  ${innerVn}_iter.forEach((${innerItemVar}, ${innerIndexVar || '__idx'}) => {`);
+      lines.push(`${indent}    const __key = ${innerKeyExpr};`);
+      lines.push(`${indent}    const clone = ${innerVn}_tpl.content.cloneNode(true);`);
+      lines.push(`${indent}    const innerNode = clone.firstChild;`);
+
+      // Generate inner item bindings with combined excludeSet
+      generateNestedItemSetup(lines, innerFor, itemVar, indexVar, innerItemVar, innerIndexVar, propNames, signalNamesSet, computedNamesSet, indent + '    ');
+
+      lines.push(`${indent}    ${innerVn}_newNodes.push(innerNode);`);
+      lines.push(`${indent}  });`);
+      lines.push(`${indent}  for (const n of ${innerVn}_newNodes) { ${innerVn}_anchor.parentNode.insertBefore(n, ${innerVn}_anchor); }`);
+    } else {
+      // ── Non-keyed nested each: iterate and clone ──
+      lines.push(`${indent}  const ${innerVn}_source = ${innerSourceIsStatic ? innerSource : innerSourceExpr};`);
+      lines.push(`${indent}  const ${innerVn}_iter = typeof ${innerVn}_source === 'number'`);
+      lines.push(`${indent}    ? Array.from({ length: ${innerVn}_source }, (_, i) => i + 1)`);
+      lines.push(`${indent}    : (${innerVn}_source || []);`);
+      lines.push(`${indent}  ${innerVn}_iter.forEach((${innerItemVar}, ${innerIndexVar || '__idx'}) => {`);
+      lines.push(`${indent}    const clone = ${innerVn}_tpl.content.cloneNode(true);`);
+      lines.push(`${indent}    const innerNode = clone.firstChild;`);
+
+      // Generate inner item bindings with combined excludeSet
+      generateNestedItemSetup(lines, innerFor, itemVar, indexVar, innerItemVar, innerIndexVar, propNames, signalNamesSet, computedNamesSet, indent + '    ');
+
+      lines.push(`${indent}    ${innerVn}_anchor.parentNode.insertBefore(innerNode, ${innerVn}_anchor);`);
+      lines.push(`${indent}  });`);
+    }
+  }
+
+  // Nested if/else-if/else chains (ifBlocks)
+  for (const ifBlock of (forBlock.ifBlocks || [])) {
+    const vn = ifBlock.varName;
+    const branches = ifBlock.branches;
+
+    // 3.1: Create template elements for each branch
+    for (let i = 0; i < branches.length; i++) {
+      const branch = branches[i];
+      lines.push(`${indent}  const ${vn}_t${i} = document.createElement('template');`);
+      lines.push(`${indent}  ${vn}_t${i}.innerHTML = \`${branch.templateHtml}\`;`);
+    }
+
+    // 3.1: Find anchor comment in the cloned node
+    lines.push(`${indent}  const ${vn}_anchor = ${pathExpr(ifBlock.anchorPath, 'node')};`);
+
+    // 3.2: Generate per-item conditional evaluation (static, not reactive)
+    lines.push(`${indent}  let ${vn}_branch = null;`);
+    for (let i = 0; i < branches.length; i++) {
+      const branch = branches[i];
+      if (branch.type === 'if') {
+        lines.push(`${indent}  if (${branch.expression}) { ${vn}_branch = ${i}; }`);
+      } else if (branch.type === 'else-if') {
+        lines.push(`${indent}  else if (${branch.expression}) { ${vn}_branch = ${i}; }`);
+      } else {
+        // else
+        lines.push(`${indent}  else { ${vn}_branch = ${i}; }`);
+      }
+    }
+
+    // 3.3: Insert only the matching branch node and apply branch bindings/events/show/attr/model
+    lines.push(`${indent}  if (${vn}_branch !== null) {`);
+    const tplArray = branches.map((_, i) => `${vn}_t${i}`).join(', ');
+    lines.push(`${indent}    const ${vn}_tpl = [${tplArray}][${vn}_branch];`);
+    lines.push(`${indent}    const ${vn}_clone = ${vn}_tpl.content.cloneNode(true);`);
+    lines.push(`${indent}    const ${vn}_node = ${vn}_clone.firstChild;`);
+    lines.push(`${indent}    ${vn}_anchor.parentNode.insertBefore(${vn}_node, ${vn}_anchor);`);
+
+    // Apply branch bindings/events/show/attr/model using the outer loop's item variable
+    const hasSetup = branches.some(b =>
+      (b.bindings && b.bindings.length > 0) ||
+      (b.events && b.events.length > 0) ||
+      (b.showBindings && b.showBindings.length > 0) ||
+      (b.attrBindings && b.attrBindings.length > 0) ||
+      (b.modelBindings && b.modelBindings.length > 0)
+    );
+    if (hasSetup) {
+      // Generate per-branch setup inline (static evaluation using item variable)
+      for (let i = 0; i < branches.length; i++) {
+        const branch = branches[i];
+        const hasBranchSetup =
+          (branch.bindings && branch.bindings.length > 0) ||
+          (branch.events && branch.events.length > 0) ||
+          (branch.showBindings && branch.showBindings.length > 0) ||
+          (branch.attrBindings && branch.attrBindings.length > 0) ||
+          (branch.modelBindings && branch.modelBindings.length > 0);
+        if (!hasBranchSetup) continue;
+
+        const keyword = i === 0 ? 'if' : 'else if';
+        lines.push(`${indent}    ${keyword} (${vn}_branch === ${i}) {`);
+
+        // Bindings (static: use item var directly)
+        for (const b of branch.bindings) {
+          const nodeRef = pathExpr(b.path, `${vn}_node`);
+          if (isStaticForBinding(b.name, itemVar, indexVar)) {
+            lines.push(`${indent}      ${nodeRef}.textContent = ${b.name} ?? '';`);
+          } else {
+            const expr = transformForExpr(b.name, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+            lines.push(`${indent}      __effect(() => { ${nodeRef}.textContent = ${expr} ?? ''; });`);
+          }
+        }
+
+        // Events
+        for (const e of branch.events) {
+          const nodeRef = pathExpr(e.path, `${vn}_node`);
+          const handlerExpr = generateForEventHandler(e.handler, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+          lines.push(`${indent}      ${nodeRef}.addEventListener('${e.event}', ${handlerExpr});`);
+        }
+
+        // Show bindings
+        for (const sb of (branch.showBindings || [])) {
+          const nodeRef = pathExpr(sb.path, `${vn}_node`);
+          if (isStaticForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
+            lines.push(`${indent}      ${nodeRef}.style.display = (${sb.expression}) ? '' : 'none';`);
+          } else {
+            const expr = transformForExpr(sb.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+            lines.push(`${indent}      __effect(() => { ${nodeRef}.style.display = (${expr}) ? '' : 'none'; });`);
+          }
+        }
+
+        // Attr bindings
+        for (const ab of (branch.attrBindings || [])) {
+          const nodeRef = pathExpr(ab.path, `${vn}_node`);
+          if (isStaticForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet)) {
+            lines.push(`${indent}      const __val_${ab.varName} = ${ab.expression};`);
+            lines.push(`${indent}      if (__val_${ab.varName} != null && __val_${ab.varName} !== false) { ${nodeRef}.setAttribute('${ab.attr}', __val_${ab.varName}); }`);
+          } else {
+            const expr = transformForExpr(ab.expression, itemVar, indexVar, propNames, signalNamesSet, computedNamesSet);
+            lines.push(`${indent}      __effect(() => {`);
+            lines.push(`${indent}        const __val = ${expr};`);
+            lines.push(`${indent}        if (__val == null || __val === false) { ${nodeRef}.removeAttribute('${ab.attr}'); }`);
+            lines.push(`${indent}        else { ${nodeRef}.setAttribute('${ab.attr}', __val); }`);
+            lines.push(`${indent}      });`);
+          }
+        }
+
+        // Model bindings
+        for (const mb of (branch.modelBindings || [])) {
+          const nodeRef = pathExpr(mb.path, `${vn}_node`);
+          lines.push(`${indent}      __effect(() => {`);
+          if (mb.prop === 'checked' && mb.radioValue !== null) {
+            lines.push(`${indent}        ${nodeRef}.checked = (this._${mb.signal}() === '${mb.radioValue}');`);
+          } else if (mb.prop === 'checked') {
+            lines.push(`${indent}        ${nodeRef}.checked = !!this._${mb.signal}();`);
+          } else {
+            lines.push(`${indent}        ${nodeRef}.value = this._${mb.signal}() ?? '';`);
+          }
+          lines.push(`${indent}      });`);
+          if (mb.prop === 'checked' && mb.radioValue === null) {
+            lines.push(`${indent}      ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); });`);
+          } else if (mb.coerce) {
+            lines.push(`${indent}      ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); });`);
+          } else {
+            lines.push(`${indent}      ${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); });`);
+          }
+        }
+
+        lines.push(`${indent}    }`);
+      }
+    }
+    lines.push(`${indent}  }`);
+  }
+}
+
+/**
+ * Generate inner item bindings/events/show/attr/model for a nested each directive.
+ * Uses transformForExpr with an excludeSet that includes BOTH outer and inner loop variables.
+ *
+ * @param {string[]} lines - Output lines array
+ * @param {ForBlock} innerFor - The nested ForBlock
+ * @param {string} outerItemVar - Outer loop item variable
+ * @param {string|null} outerIndexVar - Outer loop index variable
+ * @param {string} innerItemVar - Inner loop item variable
+ * @param {string|null} innerIndexVar - Inner loop index variable
+ * @param {Set<string>} propNames - Prop names set
+ * @param {Set<string>} signalNamesSet - Signal names set
+ * @param {Set<string>} computedNamesSet - Computed names set
+ * @param {string} indent - Current indentation
+ */
+function generateNestedItemSetup(lines, innerFor, outerItemVar, outerIndexVar, innerItemVar, innerIndexVar, propNames, signalNamesSet, computedNamesSet, indent) {
+  // Build combined exclude set with both outer and inner loop variables
+  const combinedExcludeItemVar = innerItemVar;
+  const combinedExcludeIndexVar = innerIndexVar;
+
+  // For transformForExpr, we need to ensure both outer and inner vars are excluded.
+  // We create a modified propNames/signalNamesSet/computedNamesSet that doesn't include
+  // any of the loop variables. transformForExpr already excludes itemVar/indexVar,
+  // but we also need to exclude the outer loop variables.
+  // Strategy: filter out outer loop vars from the sets passed to transformForExpr
+  const filteredSignalNames = new Set([...signalNamesSet].filter(n => n !== outerItemVar && n !== outerIndexVar));
+  const filteredComputedNames = new Set([...computedNamesSet].filter(n => n !== outerItemVar && n !== outerIndexVar));
+  const filteredPropNames = new Set([...propNames].filter(n => n !== outerItemVar && n !== outerIndexVar));
+
+  // Helper: check if expression is static (only references inner/outer loop vars, no signals/computeds/props)
+  function isNestedStatic(expr) {
+    // An expression is static if it only references the loop variables (outer + inner)
+    const allExclude = new Set([innerItemVar, outerItemVar]);
+    if (innerIndexVar) allExclude.add(innerIndexVar);
+    if (outerIndexVar) allExclude.add(outerIndexVar);
+
+    for (const p of propNames) {
+      if (allExclude.has(p)) continue;
+      if (new RegExp(`\\b${p}\\b`).test(expr)) return false;
+    }
+    for (const n of signalNamesSet) {
+      if (allExclude.has(n)) continue;
+      if (new RegExp(`\\b${n}\\b`).test(expr)) return false;
+    }
+    for (const n of computedNamesSet) {
+      if (allExclude.has(n)) continue;
+      if (new RegExp(`\\b${n}\\b`).test(expr)) return false;
+    }
+    return true;
+  }
+
+  // Helper: transform expression excluding both outer and inner loop vars
+  function transformNested(expr) {
+    return transformForExpr(expr, innerItemVar, innerIndexVar, filteredPropNames, filteredSignalNames, filteredComputedNames);
+  }
+
+  // Bindings
+  for (const b of innerFor.bindings) {
+    const nodeRef = pathExpr(b.path, 'innerNode');
+    if (isNestedStatic(b.name)) {
+      lines.push(`${indent}${nodeRef}.textContent = ${b.name} ?? '';`);
+    } else {
+      const expr = transformNested(b.name);
+      lines.push(`${indent}__effect(() => { ${nodeRef}.textContent = ${expr} ?? ''; });`);
+    }
+  }
+
+  // Events
+  for (const e of innerFor.events) {
+    const nodeRef = pathExpr(e.path, 'innerNode');
+    const handlerExpr = generateForEventHandler(e.handler, innerItemVar, innerIndexVar, filteredPropNames, filteredSignalNames, filteredComputedNames);
+    lines.push(`${indent}${nodeRef}.addEventListener('${e.event}', ${handlerExpr});`);
+  }
+
+  // Show
+  for (const sb of innerFor.showBindings) {
+    const nodeRef = pathExpr(sb.path, 'innerNode');
+    if (isNestedStatic(sb.expression)) {
+      lines.push(`${indent}${nodeRef}.style.display = (${sb.expression}) ? '' : 'none';`);
+    } else {
+      const expr = transformNested(sb.expression);
+      lines.push(`${indent}__effect(() => { ${nodeRef}.style.display = (${expr}) ? '' : 'none'; });`);
+    }
+  }
+
+  // Attr bindings
+  for (const ab of innerFor.attrBindings) {
+    const nodeRef = pathExpr(ab.path, 'innerNode');
+    if (isNestedStatic(ab.expression)) {
+      lines.push(`${indent}const __val_${ab.varName} = ${ab.expression};`);
+      lines.push(`${indent}if (__val_${ab.varName} != null && __val_${ab.varName} !== false) { ${nodeRef}.setAttribute('${ab.attr}', __val_${ab.varName}); }`);
+    } else {
+      const expr = transformNested(ab.expression);
+      lines.push(`${indent}__effect(() => {`);
+      lines.push(`${indent}  const __val = ${expr};`);
+      lines.push(`${indent}  if (__val == null || __val === false) { ${nodeRef}.removeAttribute('${ab.attr}'); }`);
+      lines.push(`${indent}  else { ${nodeRef}.setAttribute('${ab.attr}', __val); }`);
+      lines.push(`${indent}});`);
+    }
+  }
+
+  // Model bindings
+  for (const mb of (innerFor.modelBindings || [])) {
+    const nodeRef = pathExpr(mb.path, 'innerNode');
+    lines.push(`${indent}__effect(() => {`);
+    if (mb.prop === 'checked' && mb.radioValue !== null) {
+      lines.push(`${indent}  ${nodeRef}.checked = (this._${mb.signal}() === '${mb.radioValue}');`);
+    } else if (mb.prop === 'checked') {
+      lines.push(`${indent}  ${nodeRef}.checked = !!this._${mb.signal}();`);
+    } else {
+      lines.push(`${indent}  ${nodeRef}.value = this._${mb.signal}() ?? '';`);
+    }
+    lines.push(`${indent}});`);
+    if (mb.prop === 'checked' && mb.radioValue === null) {
+      lines.push(`${indent}${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.checked); });`);
+    } else if (mb.coerce) {
+      lines.push(`${indent}${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(Number(e.target.value)); });`);
+    } else {
+      lines.push(`${indent}${nodeRef}.addEventListener('${mb.event}', (e) => { this._${mb.signal}(e.target.value); });`);
+    }
+  }
 }
 
 /**

package/lib/tree-walker.js

@@ -369,10 +369,19 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   const { document } = parseHTML(`<div id="__branchRoot">${html}</div>`);
   const branchRoot = document.getElementById('__branchRoot');
 
-  // Use walkTree on the branch root to discover bindings/events
+  // Process nested structural directives FIRST (before walkTree modifies the DOM).
+  // This is critical because walkTree clears textContent of elements with sole
+  // {{interpolation}} children, which would destroy content needed by
+  // processForBlocks/processIfChains when they clone nested elements for their
+  // own walkBranch calls.
+  const forBlocks = processForBlocks(branchRoot, [], signalNames, computedNames, propNames);
+  const ifBlocks = processIfChains(branchRoot, [], signalNames, computedNames, propNames);
+
+  // Now run walkTree on the remaining DOM (nested directive elements have been
+  // replaced with comment nodes, so walkTree won't process their contents).
   const result = walkTree(branchRoot, signalNames, computedNames, propNames);
 
-  // Capture the processed HTML AFTER walkTree has modified the DOM
+  // Capture the processed HTML AFTER all processing
   const processedHtml = branchRoot.innerHTML;
 
   // Strip the first path segment from all paths since at runtime
@@ -392,6 +401,17 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
   stripFirstSegment(result.slots);
   stripFirstSegment(result.childComponents);
 
+  // Strip first path segment from nested forBlock/ifBlock anchor paths
+  function stripFirstAnchorSegment(items) {
+    for (const item of items) {
+      if (item.anchorPath && item.anchorPath.length > 0 && item.anchorPath[0].startsWith('childNodes[')) {
+        item.anchorPath = item.anchorPath.slice(1);
+      }
+    }
+  }
+  stripFirstAnchorSegment(forBlocks);
+  stripFirstAnchorSegment(ifBlocks);
+
   return {
     bindings: result.bindings,
     events: result.events,
@@ -400,6 +420,8 @@ export function walkBranch(html, signalNames, computedNames, propNames) {
     modelBindings: result.modelBindings,
     slots: result.slots,
     childComponents: result.childComponents,
+    forBlocks,
+    ifBlocks,
     processedHtml,
   };
 }
@@ -763,7 +785,7 @@ export function processForBlocks(parent, parentPath, signalNames, computedNames,
         const templateHtml = clone.outerHTML;
 
         // Process internal bindings/events via partial walk
-        const { bindings, events, showBindings, attrBindings, modelBindings, slots, childComponents: forChildComponents, processedHtml } = walkBranch(templateHtml, signalNames, computedNames, propNames);
+        const { bindings, events, showBindings, attrBindings, modelBindings, slots, childComponents: forChildComponents, forBlocks: nestedForBlocks, ifBlocks: nestedIfBlocks, processedHtml } = walkBranch(templateHtml, signalNames, computedNames, propNames);
 
         // Replace the original element with a comment node <!-- each -->
         const doc = node.ownerDocument;
@@ -792,6 +814,8 @@ export function processForBlocks(parent, parentPath, signalNames, computedNames,
           modelBindings,
           slots,
           childComponents: forChildComponents,
+          forBlocks: nestedForBlocks,
+          ifBlocks: nestedIfBlocks,
         });
       } else {
         // Recurse into non-each elements to find nested each

package/lib/types.js

@@ -153,6 +153,8 @@
  * @property {AttrBinding[]} attrBindings — :attr bindings within item
  * @property {ModelBinding[]} modelBindings — model bindings within item
  * @property {SlotBinding[]} slots — slot bindings within item
+ * @property {ForBlock[]} [forBlocks] — Nested each directives within item
+ * @property {IfBlock[]} [ifBlocks] — Nested if/else-if/else chains within item
  */
 
 /**

package/package.json

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