@barefootjs/vite 0.31.2 → 0.31.4

package/dist/index.js

@@ -1655,6 +1655,24 @@ function templatePartsToJsExpr(parts, opts) {
   return result;
 }
 
+// ../jsx/src/identifier-pattern.ts
+function withUnicodeFlag(flags) {
+  return flags.includes("u") ? flags : `${flags}u`;
+}
+function escapeIdentifierForRegex(name) {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var ID_BOUNDARY_BEFORE = "(?<![\\p{ID_Continue}$])";
+var ID_BOUNDARY_AFTER = "(?![\\p{ID_Continue}$])";
+function identifierPattern(name, flags = "") {
+  const esc = escapeIdentifierForRegex(name);
+  return new RegExp(`${ID_BOUNDARY_BEFORE}${esc}${ID_BOUNDARY_AFTER}`, withUnicodeFlag(flags));
+}
+function identifierCallPattern(name, flags = "") {
+  const esc = escapeIdentifierForRegex(name);
+  return new RegExp(`${ID_BOUNDARY_BEFORE}${esc}\\s*\\(`, withUnicodeFlag(flags));
+}
+
 // ../jsx/src/scanner/js-scanner.ts
 import ts2 from "typescript";
 function* iterateJsTokens(text, start = 0, end = text.length) {
@@ -2227,9 +2245,6 @@ function inferDefaultValue(type) {
     return "{}";
   return "undefined";
 }
-function escapeRegExp(s) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
 function freeIdsFromRefs(refs) {
   const out = new Set;
   if (!refs)
@@ -2357,16 +2372,16 @@ function wrapLoopParamAsAccessor(expr, paramName, bindings) {
   if (bindings && bindings.length > 0) {
     return rewriteLoopBindingRefs(expr, bindings, "__bfItem()");
   }
-  const re = new RegExp(`\\b${escapeRegExp(paramName)}\\b(?!\\s*\\()(?!-)`, "g");
-  return replaceInExprContexts(expr, re, `${paramName}()`);
+  const re = new RegExp(`${ID_BOUNDARY_BEFORE}${escapeIdentifierForRegex(paramName)}(?!\\s*\\()(?!-)${ID_BOUNDARY_AFTER}`, "gu");
+  return replaceInExprContexts(expr, re, () => `${paramName}()`);
 }
 function rewriteLoopBindingRefs(expr, bindings, accessor) {
   const byName = new Map;
   for (const b of bindings)
     byName.set(b.name, b);
   const preprocessed = expandShorthandBindings(expr, new Set(byName.keys()));
-  const alt = bindings.map((b) => escapeRegExp(b.name)).join("|");
-  const re = new RegExp(`\\b(${alt})\\b`, "g");
+  const alt = bindings.map((b) => escapeIdentifierForRegex(b.name)).join("|");
+  const re = new RegExp(`${ID_BOUNDARY_BEFORE}(${alt})${ID_BOUNDARY_AFTER}`, "gu");
   return replaceInExprContexts(preprocessed, re, (_m, name) => renderLoopBindingAccess(byName.get(name), accessor));
 }
 function expandShorthandBindings(expr, bindingNames) {
@@ -2633,7 +2648,7 @@ function stopAt(...kinds) {
 
 // ../jsx/src/ir-to-client-js/csr-substitute.ts
 import ts4 from "typescript";
-function csrSubstitute(value, env) {
+function csrSubstitute(value, env, enclosingScope) {
   if (!value || value.trim().length === 0) {
     return { rewritten: value, freeIdentifiers: new Set };
   }
@@ -2641,7 +2656,7 @@ function csrSubstitute(value, env) {
   let current = value;
   let lastFreeIdentifiers = new Set;
   for (let i = 0;i < maxIter; i++) {
-    const step = csrSubstituteOnce(current, env);
+    const step = csrSubstituteOnce(current, env, enclosingScope);
     lastFreeIdentifiers = step.freeIdentifiers;
     if (step.rewritten === current)
       break;
@@ -2649,7 +2664,7 @@ function csrSubstitute(value, env) {
   }
   return { rewritten: current, freeIdentifiers: lastFreeIdentifiers };
 }
-function csrSubstituteOnce(value, env) {
+function csrSubstituteOnce(value, env, enclosingScope) {
   if (!value || value.trim().length === 0) {
     return { rewritten: value, freeIdentifiers: new Set };
   }
@@ -2667,7 +2682,7 @@ function csrSubstituteOnce(value, env) {
       if (boundStack[i].has(name))
         return true;
     }
-    return false;
+    return enclosingScope?.isBound(name) ?? false;
   };
   const recordSubstitution = (start, end, sub) => {
     splices.push({ start: start - OFFSET, end: end - OFFSET, text: `(${sub.replacement})` });
@@ -2852,6 +2867,83 @@ function derivesScopeFromSlot(comp) {
   return comp.slotId != null && comp.loopItemRoot !== true;
 }
 
+// ../jsx/src/scope/binding-scope.ts
+class BindingScope {
+  frames;
+  static EMPTY = new BindingScope([]);
+  constructor(frames) {
+    this.frames = frames;
+  }
+  enterLoopRow(loop) {
+    const bindings = new Map;
+    if (loop.paramBindings && loop.paramBindings.length > 0) {
+      for (const b of loop.paramBindings)
+        bindings.set(b.name, { source: "destructure" });
+    } else {
+      bindings.set(loop.param, { source: "item" });
+    }
+    if (loop.index != null)
+      bindings.set(loop.index, { source: "index" });
+    for (const name of loop.preamble?.declaredNames ?? [])
+      bindings.set(name, { source: "preamble" });
+    const frame = { kind: "loop-row", bindings };
+    return new BindingScope([frame, ...this.frames]);
+  }
+  enterCallback(params) {
+    const bindings = new Map;
+    for (const name of params)
+      bindings.set(name, { source: "param" });
+    const frame = { kind: "callback", bindings };
+    return new BindingScope([frame, ...this.frames]);
+  }
+  isBound(name) {
+    for (const frame of this.frames) {
+      if (frame.bindings.has(name))
+        return true;
+    }
+    return false;
+  }
+  lookup(name) {
+    for (let depth = 0;depth < this.frames.length; depth++) {
+      const frame = this.frames[depth];
+      const binding = frame.bindings.get(name);
+      if (binding)
+        return { depth, frame, binding };
+    }
+    return null;
+  }
+  boundNames() {
+    if (this.boundNamesCache)
+      return this.boundNamesCache;
+    const names = new Set;
+    for (const frame of this.frames) {
+      for (const name of frame.bindings.keys())
+        names.add(name);
+    }
+    this.boundNamesCache = names;
+    return names;
+  }
+  boundNamesCache;
+  valueBoundNamesCache;
+  valueBoundNames() {
+    if (this.valueBoundNamesCache)
+      return this.valueBoundNamesCache;
+    const names = new Set;
+    for (const frame of this.frames) {
+      for (const [name, binding] of frame.bindings) {
+        if (binding.source === "item" || binding.source === "index" || binding.source === "destructure") {
+          names.add(name);
+        }
+      }
+    }
+    this.valueBoundNamesCache = names;
+    return names;
+  }
+  asShadowPredicate() {
+    return (name) => this.isBound(name);
+  }
+}
+
 // ../jsx/src/ir-to-client-js/html-template.ts
 function createStringProtector() {
   const strings = [];
@@ -4077,7 +4169,7 @@ function generateCsrTemplateWithOpts(node, opts) {
     const source = templateExpr ?? expr;
     if (!source)
       return source;
-    const { rewritten, freeIdentifiers: freeIdentifiers2 } = csrSubstitute(source, env);
+    const { rewritten, freeIdentifiers: freeIdentifiers2 } = csrSubstitute(source, env, opts.scope);
     if (unsafeLocalNames && unsafeLocalNames.size > 0 && setIntersects(freeIdentifiers2, unsafeLocalNames)) {
       return UNSAFE_TEMPLATE_EXPR;
     }
@@ -4219,15 +4311,8 @@ function generateCsrTemplateWithOpts(node, opts) {
       return `\${renderChild('${nameForRegistryRef(node.name)}', ${propsExpr}${keyArg || (slotArg ? ", undefined" : "")}${slotArg})}`;
     }
     case "loop": {
-      const boundHere = new Set(opts.loopBoundNames ?? []);
-      if (node.paramBindings && node.paramBindings.length > 0) {
-        for (const b of node.paramBindings)
-          boundHere.add(b.name);
-      } else if (!node.param.startsWith("[") && !node.param.startsWith("{")) {
-        boundHere.add(node.param);
-      }
-      if (node.index)
-        boundHere.add(node.index);
+      const childScope = (opts.scope ?? BindingScope.EMPTY).enterLoopRow(node);
+      const boundHere = childScope.boundNames();
       const childEnv = {
         ...env,
         substitutions: new Map([...env.substitutions].filter(([name]) => !boundHere.has(name)))
@@ -4236,7 +4321,7 @@ function generateCsrTemplateWithOpts(node, opts) {
         ...opts,
         loopDepth: loopDepth + 1,
         inHoistedChildren: false,
-        loopBoundNames: boundHere,
+        scope: childScope,
         csrEnv: childEnv
       });
       let childTemplate = node.children.map(recurseInLoopBody).join("");
@@ -5439,7 +5524,8 @@ function visit(node, ctx, targetComponentName, namedExports) {
   if (!ctx.componentNode) {
     collectAmbientGlobals(node, ctx);
   }
-  if (ts9.isVariableStatement(node) && !ctx.componentNode) {
+  const isDeclareStatement = ts9.isVariableStatement(node) && (node.modifiers?.some((m) => m.kind === ts9.SyntaxKind.DeclareKeyword) ?? false);
+  if (ts9.isVariableStatement(node) && !ctx.componentNode && !isDeclareStatement) {
     const isExported = node.modifiers?.some((m) => m.kind === ts9.SyntaxKind.ExportKeyword) ?? false;
     const isLet = (node.declarationList.flags & ts9.NodeFlags.Let) !== 0;
     const isModuleClientDirective = hasLeadingClientDirectiveOnStatement(node, ctx.sourceFile);
@@ -5452,7 +5538,7 @@ function visit(node, ctx, targetComponentName, namedExports) {
         }
         continue;
       }
-      if (ts9.isIdentifier(decl.name) && decl.initializer && !isArrowComponentFunction(decl)) {
+      if (ts9.isIdentifier(decl.name) && (decl.initializer || isLet) && !isArrowComponentFunction(decl)) {
         collectConstant(decl, ctx, true, isLet ? "let" : "const", isExported);
       }
     }
@@ -7023,6 +7109,7 @@ function collectConstant(node, ctx, _isModule, declarationKind = "const", isExpo
     value,
     parsed,
     typedValue: typedValue !== value ? typedValue : undefined,
+    typeAnnotation: node.type ? node.type.getText(ctx.sourceFile) : undefined,
     valueBranches,
     declarationKind,
     isExported,
@@ -8752,7 +8839,7 @@ function findReachableNames(primaryRefs, declarations) {
   const reachable = new Set;
   const queue = [];
   for (const name of allNames) {
-    if (new RegExp(`\\b${name}\\b`).test(primaryRefs)) {
+    if (identifierPattern(name).test(primaryRefs)) {
       reachable.add(name);
       queue.push(name);
     }
@@ -8761,7 +8848,7 @@ function findReachableNames(primaryRefs, declarations) {
     const current = queue.shift();
     const body = bodyMap.get(current) || "";
     for (const name of allNames) {
-      if (!reachable.has(name) && new RegExp(`\\b${name}\\b`).test(body)) {
+      if (!reachable.has(name) && identifierPattern(name).test(body)) {
         reachable.add(name);
         queue.push(name);
       }
@@ -9607,8 +9694,9 @@ function rewriteBarePropRefs2(text, expr, ctx) {
   let propNames = getDestructuredPropNames(ctx);
   if (!propNames)
     return dateLowered === text ? undefined : dateLowered;
-  if (ctx.loopParams.size > 0) {
-    const filtered = new Set([...propNames].filter((n) => !ctx.loopParams.has(n)));
+  const shadowingNames = ctx.scope.boundNames();
+  if (shadowingNames.size > 0) {
+    const filtered = new Set([...propNames].filter((n) => !shadowingNames.has(n)));
     if (filtered.size === 0)
       return dateLowered === text ? undefined : dateLowered;
     propNames = filtered;
@@ -9684,22 +9772,22 @@ function createTransformContext(analyzer) {
     spreadIdCounter: 0,
     isRoot: true,
     insideComponentChildren: false,
-    loopParams: new Set,
+    scope: BindingScope.EMPTY,
     loopDepth: 0,
     patterns: {
       signals: analyzer.signals.map((s) => ({
         getter: s.getter,
-        pattern: new RegExp(`\\b${s.getter}\\s*\\(`)
+        pattern: identifierCallPattern(s.getter)
       })),
       memos: analyzer.memos.map((m) => ({
         name: m.name,
-        pattern: new RegExp(`\\b${m.name}\\s*\\(`)
+        pattern: identifierCallPattern(m.name)
       })),
-      props: analyzer.propsParams.filter((p) => p.name !== "children").map((p) => ({ name: p.name, pattern: new RegExp(`\\b${p.name}\\b`) })),
+      props: analyzer.propsParams.filter((p) => p.name !== "children").map((p) => ({ name: p.name, pattern: identifierPattern(p.name) })),
       constants: analyzer.localConstants.map((c) => ({
         name: c.name,
         value: c.value,
-        pattern: new RegExp(`\\b${c.name}\\b`)
+        pattern: identifierPattern(c.name)
       }))
     },
     getJS(node) {
@@ -9761,7 +9849,8 @@ function generateSpreadSlotId(ctx) {
   return `Spread_${ctx.spreadIdCounter++}`;
 }
 function makeBindingEnv(ctx) {
-  const loopKey = ctx.loopParams.size === 0 ? "" : Array.from(ctx.loopParams).sort().join("\x00");
+  const boundNames = ctx.scope.valueBoundNames();
+  const loopKey = boundNames.size === 0 ? "" : Array.from(boundNames).sort().join("\x00");
   if (ctx._bindingEnv && ctx._bindingEnvLoopKey === loopKey) {
     return ctx._bindingEnv;
   }
@@ -9776,7 +9865,7 @@ function makeBindingEnv(ctx) {
     localFunctions: a.localFunctions,
     imports: a.imports,
     ambientGlobals: a.ambientGlobals,
-    loopParams: new Set(ctx.loopParams),
+    loopParams: boundNames,
     checker: a.checker
   };
   ctx._bindingEnv = env;
@@ -10469,7 +10558,8 @@ function transformExpressionInner(expr, ctx, node, isClientOnly) {
     freeRefs
   };
   const reactive = isReactiveExpression(exprText, ctx, expr) || isReactiveOrigin(origin);
-  const refsLoopParam = ctx.loopParams.size > 0 && Array.from(ctx.loopParams).some((p) => new RegExp(`\\b${p}\\b`).test(exprText));
+  const scopeValueNames = ctx.scope.valueBoundNames();
+  const refsLoopParam = scopeValueNames.size > 0 && Array.from(scopeValueNames).some((p) => identifierPattern(p).test(exprText));
   const callsReactive = exprCallsReactiveGetters(expr, ctx);
   const hasCalls = exprHasFunctionCalls(expr);
   const needsSlot = reactive || isClientOnly || refsLoopParam || callsReactive || hasCalls;
@@ -10504,7 +10594,7 @@ function transformJsxFunctionCall(callExpr, jsxFunc, ctx, _isClientOnly) {
   const substitutedGetJS = (node) => {
     let text = baseGetJS(node);
     for (const [paramName, argExpr] of substitutions) {
-      text = text.replace(new RegExp(`\\b${paramName}\\b`, "g"), argExpr);
+      text = text.replace(identifierPattern(paramName, "g"), () => argExpr);
     }
     return text;
   };
@@ -10546,7 +10636,7 @@ function transformMultiReturnJsxFunctionCall(callExpr, info, ctx) {
   const substitutedGetJS = (node) => {
     let text = baseGetJS(node);
     for (const [paramName, argExpr] of substitutions) {
-      text = text.replace(new RegExp(`\\b${paramName}\\b`, "g"), argExpr);
+      text = text.replace(identifierPattern(paramName, "g"), () => argExpr);
     }
     return text;
   };
@@ -11557,7 +11647,7 @@ function extractItemConditionalKey(cond) {
   return a ?? b;
 }
 function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
-  const isNested = ctx.loopParams.size > 0;
+  const isNested = ctx.scope.valueBoundNames().size > 0;
   const diagCountAtEntry = ctx.analyzer.errors.length;
   const depth = ctx.loopDepth;
   const propAccess = node.expression;
@@ -11716,14 +11806,8 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         indexType = secondParam.type.getText(ctx.sourceFile);
       }
     }
-    if (paramBindings) {
-      for (const b of paramBindings)
-        ctx.loopParams.add(b.name);
-    } else {
-      ctx.loopParams.add(param);
-    }
-    if (index)
-      ctx.loopParams.add(index);
+    const savedScope = ctx.scope;
+    ctx.scope = ctx.scope.enterLoopRow({ param, index, paramBindings });
     ctx.loopDepth++;
     const tryTransformRenderableBody = (expr) => {
       if (!ts12.isBinaryExpression(expr))
@@ -11784,6 +11868,24 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         }
       }
       const returnStmt = children.length === 0 ? body.statements.find((s) => ts12.isReturnStatement(s) && s.expression != null) : undefined;
+      let rowScopeBeforePreamble = null;
+      if (returnStmt) {
+        const preambleNames = new Set;
+        for (const stmt of body.statements) {
+          if (stmt === returnStmt)
+            break;
+          collectPreambleDeclaredNames(stmt, preambleNames);
+        }
+        if (preambleNames.size > 0) {
+          rowScopeBeforePreamble = ctx.scope;
+          ctx.scope = savedScope.enterLoopRow({
+            param,
+            index,
+            paramBindings,
+            preamble: { declaredNames: [...preambleNames] }
+          });
+        }
+      }
       if (returnStmt && returnStmt.expression) {
         let returnExpr = returnStmt.expression;
         while (ts12.isParenthesizedExpression(returnExpr)) {
@@ -11853,6 +11955,9 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
           }
         }
       }
+      if (rowScopeBeforePreamble) {
+        ctx.scope = rowScopeBeforePreamble;
+      }
       if (method === "flatMap" && children.length === 0 && !flatMapProjectionCall(body)) {
         flatMapCallback = buildFlatMapCallback(callback, body, ctx);
       }
@@ -11881,14 +11986,7 @@ function transformMapCall(node, ctx, isClientOnly = false, method = "map") {
         }
       }));
     }
-    if (paramBindings) {
-      for (const b of paramBindings)
-        ctx.loopParams.delete(b.name);
-    } else {
-      ctx.loopParams.delete(param);
-    }
-    if (index)
-      ctx.loopParams.delete(index);
+    ctx.scope = savedScope;
     ctx.loopDepth--;
   }
   if (children.length === 0 && !flatMapCallback) {
@@ -12635,7 +12733,7 @@ function parseTemplateLiteral(expr, ctx) {
 }
 function tryResolveTemplateSpanFromConst(expr, ctx) {
   if (ts12.isIdentifier(expr)) {
-    if (ctx.loopParams.has(expr.text))
+    if (ctx.scope.isBound(expr.text))
       return null;
     const constInfo = findLocalConst(expr.text, ctx.analyzer);
     if (!constInfo)
@@ -12651,7 +12749,7 @@ function tryResolveTemplateSpanFromConst(expr, ctx) {
   if (ts12.isElementAccessExpression(expr)) {
     if (!ts12.isIdentifier(expr.expression))
       return null;
-    if (ctx.loopParams.has(expr.expression.text))
+    if (ctx.scope.isBound(expr.expression.text))
       return null;
     const constInfo = findLocalConst(expr.expression.text, ctx.analyzer);
     if (!constInfo)
@@ -12730,7 +12828,7 @@ function hasDynamicTagBinding(name, sourceFile) {
   return found;
 }
 function tryResolveIdentifierAsTemplateLiteral(ident, ctx) {
-  if (ctx.loopParams.has(ident.text))
+  if (ctx.scope.isBound(ident.text))
     return null;
   const constInfo = findLocalConst(ident.text, ctx.analyzer);
   if (!constInfo)
@@ -13079,10 +13177,11 @@ function isSignalOrMemoArray(array, ctx) {
   return false;
 }
 function referencesLoopParam(expr, ctx) {
-  if (ctx.loopParams.size === 0)
+  const boundNames = ctx.scope.valueBoundNames();
+  if (boundNames.size === 0)
     return false;
-  for (const p of ctx.loopParams) {
-    if (new RegExp(`\\b${p}\\b`).test(expr))
+  for (const p of boundNames) {
+    if (identifierPattern(p).test(expr))
       return true;
   }
   return false;
@@ -13161,9 +13260,10 @@ function hasReactiveAttributes(attrs, ctx) {
     if (isSignalOrMemoReference(valueToCheck, ctx) || isPropsReference(valueToCheck, ctx)) {
       return true;
     }
-    if (ctx.loopParams.size > 0) {
-      for (const p of ctx.loopParams) {
-        if (new RegExp(`\\b${p}\\b`).test(valueToCheck))
+    const scopeValueNames = ctx.scope.valueBoundNames();
+    if (scopeValueNames.size > 0) {
+      for (const p of scopeValueNames) {
+        if (identifierPattern(p).test(valueToCheck))
           return true;
       }
     }
@@ -13369,18 +13469,22 @@ function buildIfStatementChain(analyzer, ctx, opts) {
 }
 
 // ../jsx/src/ir-to-client-js/prop-handling.ts
-function expandDynamicPropValue(value, ctx) {
+function expandDynamicPropValue(value, ctx, scope) {
   const trimmedValue = value.trim();
+  if (scope?.isBound(trimmedValue))
+    return value;
   const constant = ctx.localConstants.find((c) => c.name === trimmedValue);
   if (constant && constant.value) {
     return constant.value;
   }
   return value;
 }
-function expandConstantForReactivity(expr, ctx, originalFreeIds) {
+function expandConstantForReactivity(expr, ctx, originalFreeIds, scope) {
   if (ctx.propsObjectName)
     return { expr, freeIds: originalFreeIds };
   const trimmedValue = expr.trim();
+  if (scope?.isBound(trimmedValue))
+    return { expr, freeIds: originalFreeIds };
   const constant = ctx.localConstants.find((c) => c.name === trimmedValue);
   if (constant && constant.value) {
     return { expr: constant.value, freeIds: constant.freeIdentifiers };
@@ -13416,6 +13520,16 @@ function getControlledPropName(signal, propsParams, propsObjectName = null) {
 }
 
 // ../jsx/src/ir-to-client-js/reactivity.ts
+function buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex) {
+  if (!loopParam)
+    return;
+  return BindingScope.EMPTY.enterLoopRow({
+    param: loopParam,
+    paramBindings: loopParamBindings,
+    index: loopIndex,
+    preamble: preambleNames && preambleNames.size > 0 ? { declaredNames: [...preambleNames] } : undefined
+  });
+}
 function decideWrapFromAstFlags(node) {
   if (node.origin && isReactiveOrigin(node.origin)) {
     return { wrap: true, reason: "proven-reactive" };
@@ -13444,12 +13558,12 @@ function decideWrapForChildProp(expandedValue, ctx, prop) {
 }
 function needsEffectWrapper(expr, ctx, freeIdentifiers2) {
   for (const signal of ctx.signals) {
-    if (new RegExp(`\\b${signal.getter}\\s*\\(`).test(expr)) {
+    if (identifierCallPattern(signal.getter).test(expr)) {
       return true;
     }
   }
   for (const memo of ctx.memos) {
-    if (new RegExp(`\\b${memo.name}\\s*\\(`).test(expr)) {
+    if (identifierCallPattern(memo.name).test(expr)) {
       return true;
     }
   }
@@ -13639,8 +13753,9 @@ function traverseForComponents(node, components, skipConditionals = false) {
     }
   });
 }
-function collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, stopAtReactiveConditionals = false) {
+function collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, stopAtReactiveConditionals = false, preambleNames, loopIndex) {
   const texts = [];
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex);
   walkIR(node, false, {
     ...stopAt("loop", "async", "ifStatement"),
     expression: ({ node: n, scope: insideConditional }) => {
@@ -13649,7 +13764,7 @@ function collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings,
       if (n.preambleRegion)
         return;
       const originFreeIds = freeIdsFromRefs(n.origin?.freeRefs);
-      const expanded = expandConstantForReactivity(n.expr, ctx, originFreeIds);
+      const expanded = expandConstantForReactivity(n.expr, ctx, originFreeIds, scope);
       const reactive = classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== "none" || decideWrapFromAstFlags(n).wrap;
       if (!reactive)
         return;
@@ -13673,8 +13788,9 @@ function anyNameIn(names, set) {
       return true;
   return false;
 }
-function collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, stopAtReactiveConditionals = false, preambleNames) {
+function collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, stopAtReactiveConditionals = false, preambleNames, loopIndex) {
   const attrs = [];
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex);
   traverseElements(node, (el) => {
     if (el.slotId) {
       for (const attr of el.attrs) {
@@ -13687,7 +13803,7 @@ function collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings,
         const valueStr = attrValueToString(attr.value);
         if (!valueStr)
           continue;
-        const expanded = expandConstantForReactivity(valueStr, ctx, attr.freeIdentifiers);
+        const expanded = expandConstantForReactivity(valueStr, ctx, attr.freeIdentifiers, scope);
         const readsPreamble = preambleNames !== undefined && preambleNames.size > 0 && anyNameIn(expanded.freeIds ?? extractFreeIdentifiersFromText(expanded.expr), preambleNames);
         const reactive = classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind !== "none" || readsPreamble || attr.callsReactiveGetters || attr.hasFunctionCalls;
         if (!attr.clientOnly && !reactive)
@@ -13992,13 +14108,13 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
         const emitDepth = fixedDepth ?? scope.depth + 1;
         const loopParamsForTemplate = outerLoopParam ? [outerLoopParam, { param: n.param, bindings: n.paramBindings }] : undefined;
         const template = n.children.map((c) => irToPlaceholderTemplate(c, undefined, emitDepth, loopParamsForTemplate)).join("");
-        const refsOuter = outerLoopParam ? new RegExp(`\\b${outerLoopParam}\\b`).test(n.array) : false;
+        const refsOuter = outerLoopParam ? identifierPattern(outerLoopParam).test(n.array) : false;
         const bindings = emptyLoopChildBindings();
         const innerPreambleNames = preambleNamesOf(n);
         if (ctx) {
           for (const child of n.children) {
-            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings));
-            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames));
+            bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
+            bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, n.param, n.paramBindings, false, innerPreambleNames, n.index));
             bindings.refs.push(...collectLoopChildRefs(child));
           }
         }
@@ -14025,7 +14141,7 @@ function collectInnerLoops(nodes, siblingOffsets, outerLoopParam, ctx, options)
             bindings.events.push(...collectLoopChildEventsWithNesting(child));
           }
           if (ctx) {
-            bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings));
+            bindings.conditionals.push(...collectLoopChildConditionals({ type: "fragment", children: n.children, loc: n.loc }, ctx, siblingOffsets, n.param, n.paramBindings, innerPreambleNames, n.index));
           }
         }
         result.push({
@@ -14221,7 +14337,7 @@ function collectElements(node, ctx, siblingOffsets, insideConditional = false) {
         return;
       const projectionInner = l.method === "flatMap" && l.children.length === 1 && l.children[0].type === "loop" ? l.children[0] : undefined;
       const childHandlers = [];
-      const bindings = projectionInner ? emptyLoopChildBindings() : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings, preambleNamesOf(l));
+      const bindings = projectionInner ? emptyLoopChildBindings() : collectLoopChildBindings(l.children, ctx, siblingOffsets, l.param, l.paramBindings, preambleNamesOf(l), l.index);
       if (!projectionInner) {
         for (const child of l.children) {
           childHandlers.push(...collectEventHandlersFromIR(child));
@@ -14476,7 +14592,7 @@ function collectBranchLoops(node, ctx, siblingOffsets) {
       } else {
         childTemplate = n.children.map((c) => irToHtmlTemplate(c, undefined, 0, branchLoopParamSpec)).join("");
       }
-      const branchBindings = ctx && !projectionInner ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings, preambleNamesOf(n)) : emptyLoopChildBindings();
+      const branchBindings = ctx && !projectionInner ? collectLoopChildBindings(n.children, ctx, siblingOffsets, n.param, n.paramBindings, preambleNamesOf(n), n.index) : emptyLoopChildBindings();
       loops.push({
         kind: "branch",
         array: n.array,
@@ -14562,19 +14678,20 @@ function preambleNamesOf(loop) {
   const declared = loop.preamble?.declaredNames;
   return declared && declared.length > 0 ? new Set(declared) : undefined;
 }
-function collectLoopChildBindings(children, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames) {
+function collectLoopChildBindings(children, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex) {
   const bindings = emptyLoopChildBindings();
   for (const child of children) {
     bindings.events.push(...collectLoopChildEventsWithNesting(child));
-    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true, preambleNames));
-    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true));
+    bindings.reactiveAttrs.push(...collectLoopChildReactiveAttrs(child, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex));
+    bindings.reactiveTexts.push(...collectLoopChildReactiveTexts(child, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex));
     bindings.refs.push(...collectLoopChildRefs(child));
-    bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings));
+    bindings.conditionals.push(...collectLoopChildConditionals(child, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex));
   }
   return bindings;
 }
-function collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings) {
+function collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex) {
   const conditionals = [];
+  const scope = buildLoopRowScope(loopParam, loopParamBindings, preambleNames, loopIndex);
   const refsAnyBindingViaFreeIds = (freeIds) => {
     if (loopParamBindings && loopParamBindings.length > 0) {
       for (const b of loopParamBindings) {
@@ -14594,7 +14711,7 @@ function collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loop
       const refsLoopParamInSource = refsAnyBindingViaFreeIds(sourceFreeIds);
       if (!n.reactive && !refsLoopParamInSource)
         return;
-      const expanded = expandConstantForReactivity(n.condition, ctx, sourceFreeIds);
+      const expanded = expandConstantForReactivity(n.condition, ctx, sourceFreeIds, scope);
       if (classifyReactivity(expanded.expr, ctx, loopParam, loopParamBindings, expanded.freeIds).kind === "none")
         return;
       const loopParamsForCond = loopParam ? [{ param: loopParam, bindings: loopParamBindings }] : undefined;
@@ -14605,23 +14722,23 @@ function collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loop
         condition: expanded.expr,
         whenTrueHtml,
         whenFalseHtml,
-        whenTrue: summarizeLoopChildBranch(n.whenTrue, ctx, siblingOffsets, loopParam, loopParamBindings),
-        whenFalse: summarizeLoopChildBranch(n.whenFalse, ctx, siblingOffsets, loopParam, loopParamBindings),
+        whenTrue: summarizeLoopChildBranch(n.whenTrue, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
+        whenFalse: summarizeLoopChildBranch(n.whenFalse, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
         ...expanded.freeIds !== undefined && { conditionFreeIdentifiers: expanded.freeIds }
       });
     }
   });
   return conditionals;
 }
-function summarizeLoopChildBranch(node, ctx, siblingOffsets, loopParam, loopParamBindings) {
+function summarizeLoopChildBranch(node, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex) {
   const inner = collectInnerLoops([node], siblingOffsets, loopParam, ctx, branchInnerLoopOptions);
   return {
     childComponents: collectConditionalBranchChildComponents(node),
     innerLoops: inner.length > 0 ? inner : undefined,
-    conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings),
+    conditionals: collectLoopChildConditionals(node, ctx, siblingOffsets, loopParam, loopParamBindings, preambleNames, loopIndex),
     events: collectConditionalBranchEvents(node),
-    reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true),
-    reactiveTexts: node.type === "expression" && node.hasFunctionCalls ? [] : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true)
+    reactiveAttrs: collectLoopChildReactiveAttrs(node, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex),
+    reactiveTexts: node.type === "expression" && node.hasFunctionCalls ? [] : collectLoopChildReactiveTexts(node, ctx, loopParam, loopParamBindings, true, preambleNames, loopIndex)
   };
 }
 
@@ -15193,7 +15310,7 @@ var MODULE_CONSTANTS_PLACEHOLDER = "/* __MODULE_LEVEL_CONSTANTS__ */";
 function detectUsedImports(code) {
   const used = new Set;
   for (const name of RUNTIME_IMPORT_CANDIDATES) {
-    if (new RegExp(`\\b${name}\\s*\\(`).test(code)) {
+    if (identifierCallPattern(name).test(code)) {
       used.add(name);
     }
   }
@@ -15594,7 +15711,7 @@ function containsAnyIdentifier(node, names) {
 function scanRefsByName(text, bindings) {
   const result = new Map;
   for (const name of bindings.keys()) {
-    const re = new RegExp(`\\b${name}\\b`);
+    const re = identifierPattern(name);
     if (re.test(text))
       result.set(name, []);
   }
@@ -18262,7 +18379,7 @@ function buildStaticArrayDelegationPlan(elem, profileComponentName) {
 function buildKeyedOrIndexLookup(args) {
   const hasBindings = (args.paramBindings?.length ?? 0) > 0;
   if (args.key !== null) {
-    const keyWithItem = hasBindings ? substituteLoopBindings(args.key, args.paramBindings, "item") : args.key.replace(new RegExp(`\\b${args.param}\\b`, "g"), "item");
+    const keyWithItem = hasBindings ? substituteLoopBindings(args.key, args.paramBindings, "item") : args.key.replace(identifierPattern(args.param, "g"), "item");
     return {
       kind: "keyed",
       arrayExpr: args.array,
@@ -20468,7 +20585,7 @@ function emitKeyedLookup(ls, ev, handlerCall, lookup) {
   }
   for (const nested of ev.nestedLoops) {
     const rawKey = nested.key ?? "";
-    const innerKeyExpr = nested.paramBindings && nested.paramBindings.length > 0 ? substituteLoopBindings(rawKey, nested.paramBindings, "item") : rawKey.replace(new RegExp(`\\b${nested.param}\\b`, "g"), "item");
+    const innerKeyExpr = nested.paramBindings && nested.paramBindings.length > 0 ? substituteLoopBindings(rawKey, nested.paramBindings, "item") : rawKey.replace(identifierPattern(nested.param, "g"), "item");
     const outerRef = hasBindings ? "__bfLoopItem" : param;
     ls.push(`      const ${nested.param} = ${outerRef} && ${nested.array}.find(item => String(${innerKeyExpr}) === innerKey${nested.depth})`);
   }
@@ -21162,7 +21279,7 @@ function rewritePropsObjectRef(code, propsObjectName) {
   const srcPropsName = propsObjectName ?? "props";
   if (srcPropsName === PROPS_PARAM)
     return code;
-  if (!new RegExp(`\\b${srcPropsName}\\b`).test(code))
+  if (!identifierPattern(srcPropsName).test(code))
     return code;
   const sourceFile = ts19.createSourceFile("init-body.ts", code, ts19.ScriptTarget.Latest, true, ts19.ScriptKind.TS);
   const spans = [];
@@ -23572,7 +23689,7 @@ class JsxAdapter extends BaseAdapter {
         lines.push(`  const ${signal.getter} = () => ${initialValue}`);
       }
       if (signal.setter) {
-        const setterUsed = new RegExp(`\\b${signal.setter}\\b`).test(setterRefText);
+        const setterUsed = identifierPattern(signal.setter).test(setterRefText);
         if (setterUsed) {
           lines.push(`  const ${signal.setter} = (..._args: any[]) => {}`);
         }
@@ -23592,7 +23709,7 @@ class JsxAdapter extends BaseAdapter {
         continue;
       const keyword = constant.declarationKind ?? "const";
       if (!constant.value) {
-        const typeAnnotation = preserveTypes && constant.type ? `: ${constant.type.raw}` : "";
+        const typeAnnotation = preserveTypes && (constant.typeAnnotation ?? constant.type) ? `: ${constant.typeAnnotation ?? constant.type?.raw}` : "";
         lines.push(`  ${keyword} ${constant.name}${typeAnnotation}`);
         continue;
       }
@@ -23602,7 +23719,8 @@ class JsxAdapter extends BaseAdapter {
       if (!reachable.has(constant.name))
         continue;
       const constValue = preserveTypes ? constant.typedValue ?? constant.value : constant.value;
-      lines.push(`  ${keyword} ${constant.name} = ${constValue}`);
+      const letTypeAnnotation = preserveTypes && keyword === "let" && constant.typeAnnotation ? `: ${constant.typeAnnotation}` : "";
+      lines.push(`  ${keyword} ${constant.name}${letTypeAnnotation} = ${constValue}`);
     }
     for (const func of localFunctions) {
       if (moduleScopeNames.has(func.name))
@@ -23709,7 +23827,8 @@ class JsxAdapter extends BaseAdapter {
       const keyword = c.declarationKind ?? "const";
       const exportKw = c.isExported ? "export " : "";
       if (!c.value) {
-        entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}` });
+        const typeAnnotation = preserveTypes && (c.typeAnnotation ?? c.type) ? `: ${c.typeAnnotation ?? c.type?.raw}` : "";
+        entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}${typeAnnotation}` });
         continue;
       }
       const trimmed = c.value.trim();
@@ -23718,7 +23837,8 @@ class JsxAdapter extends BaseAdapter {
       if (c.isExported && /^createContext\b/.test(trimmed))
         continue;
       const value = preserveTypes ? c.typedValue ?? c.value : c.value;
-      entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name} = ${value}` });
+      const letTypeAnnotation = preserveTypes && keyword === "let" && c.typeAnnotation ? `: ${c.typeAnnotation}` : "";
+      entries.push({ line: c.loc.start.line, text: `${exportKw}${keyword} ${c.name}${letTypeAnnotation} = ${value}` });
     }
     for (const f of ir.metadata.localFunctions) {
       if (!f.isModule || !moduleNames.has(f.name))
@@ -23767,6 +23887,7 @@ class JsxAdapter extends BaseAdapter {
 }
 
 // ../jsx/src/adapters/template-imports.ts
+import ts25 from "typescript";
 var CLIENT_PACKAGE_SOURCES = new Set([
   "@barefootjs/client",
   "@barefootjs/client/runtime"
@@ -24156,11 +24277,11 @@ function registerBuiltinLoweringPlugins() {
     registerLoweringPlugin(plugin);
 }
 // ../jsx/src/combine-client-js.ts
-import ts25 from "typescript";
-// ../jsx/src/debug.ts
 import ts26 from "typescript";
-// ../jsx/src/profiler.ts
+// ../jsx/src/debug.ts
 import ts27 from "typescript";
+// ../jsx/src/profiler.ts
+import ts28 from "typescript";
 
 // ../jsx/src/index.ts
 registerBuiltinLoweringPlugins();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/vite",
-  "version": "0.31.2",
+  "version": "0.31.4",
   "description": "Vite plugin for BarefootJS: Vite/Rollup owns bundling, hashing, chunking, tree-shaking and minification of client assets, BarefootJS keeps only the JSX to (template, client JS) compile",
   "type": "module",
   "main": "./dist/index.js",
@@ -38,17 +38,17 @@
     "directory": "packages/vite"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.31.2"
+    "@barefootjs/shared": "0.31.4"
   },
   "peerDependencies": {
     "@barefootjs/jsx": ">=0.2.0",
     "vite": "^6.0.0"
   },
   "devDependencies": {
-    "@barefootjs/client": "0.31.2",
-    "@barefootjs/go-template": "0.31.2",
-    "@barefootjs/hono": "0.31.2",
-    "@barefootjs/jsx": "0.31.2",
+    "@barefootjs/client": "0.31.4",
+    "@barefootjs/go-template": "0.31.4",
+    "@barefootjs/hono": "0.31.4",
+    "@barefootjs/jsx": "0.31.4",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }

package/src/__tests__/dynamic-import-rewrite.test.ts

@@ -0,0 +1,92 @@
+/**
+ * Regression (#2588): a relative specifier inside a DYNAMIC `import()` must
+ * be re-anchored to the emitted template's directory, exactly like the
+ * static `import` statements `rewriteImportsForTemplate` already handles.
+ *
+ * Dynamic imports never reach `ir.metadata.templateImports` — they ride
+ * along inside declaration source text that the adapter re-emits verbatim
+ * (`generateModuleScopeDeclarations`' consts/functions, and a component
+ * body's local handlers). Before the fix they were emitted untouched, so a
+ * specifier written relative to `components/` still said `../lib/heavy`
+ * once the template landed in `app/dist/components/` — a path that does
+ * not exist. The backend bundler then hard-fails (`Could not resolve
+ * "../lib/heavy"`), so this is a build break, not a type-only defect.
+ *
+ * The fixture mirrors the layout that hits this in the wild (piconic-ai/koma):
+ * a `components` dir and a plain `lib` dir side by side, with templates
+ * emitted to a DEEPER directory — root-relative and template-relative only
+ * diverge when the two depths differ, so a flat layout would not reproduce.
+ * Lives under `packages/vite/` (not a system tmpdir) so `@barefootjs/client`
+ * resolves through the monorepo's real workspace symlinks — same reason
+ * `e2e-fixture`/`e2e-fixture-dev`/`e2e-fixture-relimport` do.
+ */
+import { describe, test, expect, afterAll } from 'bun:test'
+import { build } from 'vite'
+import { mkdtemp, rm, readFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { HonoAdapter } from '@barefootjs/hono/adapter'
+import { barefoot } from '../plugin.ts'
+
+const FIXTURE_ROOT = resolve(import.meta.dirname, '../../e2e-fixture-dynimport')
+const APP_ROOT = join(FIXTURE_ROOT, 'app')
+const COMPONENTS_DIR = join(FIXTURE_ROOT, 'components')
+
+// `app/dist/components/Lazy.tsx` → up three → the fixture root, where `lib/`
+// sits. The source says `../lib/heavy` from `components/`; the emitted
+// template has to say this instead.
+const REANCHORED = '../../../lib/heavy'
+
+describe('dynamic import() re-anchoring in emitted templates', () => {
+  let outDir: string
+  let templatesDir: string
+
+  afterAll(async () => {
+    await rm(outDir, { recursive: true, force: true })
+    await rm(join(APP_ROOT, 'dist'), { recursive: true, force: true })
+  })
+
+  test('re-anchors dynamic imports at module scope, in type position, and inside a component body', async () => {
+    outDir = await mkdtemp(join(tmpdir(), 'barefoot-vite-dynimport-dist-'))
+    templatesDir = join(APP_ROOT, 'dist/components')
+
+    await build({
+      configFile: false,
+      root: APP_ROOT,
+      base: '/static/',
+      logLevel: 'warn',
+      build: { outDir, emptyOutDir: true },
+      plugins: [
+        barefoot({
+          adapter: new HonoAdapter(),
+          components: [COMPONENTS_DIR],
+          templates: templatesDir,
+        }),
+      ],
+    })
+
+    const template = await readFile(join(templatesDir, 'Lazy.tsx'), 'utf8')
+
+    // Nothing anywhere may still carry the source-relative form. Asserted
+    // first and globally: a per-site check would pass while some fourth
+    // emission path silently leaked the old specifier.
+    expect(template).not.toContain("'../lib/heavy'")
+
+    // Module scope, TYPE position — `typeof import('…')` is an
+    // ImportTypeNode, a different AST node from the call expression below,
+    // and was missed independently.
+    expect(template).toContain(`typeof import('${REANCHORED}')`)
+
+    // Module scope, VALUE position — inside a re-emitted const's body.
+    expect(template).toContain(`modPromise = import('${REANCHORED}')`)
+
+    // Component scope — inside a local handler in the component body,
+    // which is emitted by a different code path than module declarations.
+    expect(template).toContain(`await import('${REANCHORED}')`)
+
+    // The re-anchored path must actually resolve on disk from the emitted
+    // template's own directory — the assertions above only pin the string.
+    const target = resolve(templatesDir, REANCHORED + '.ts')
+    expect(await readFile(target, 'utf8')).toContain('export function heavy')
+  }, 60_000)
+})