@barefootjs/jsx 0.27.0 → 0.28.1

package/src/ir-to-client-js/imports.ts

@@ -4,11 +4,12 @@
 
 import type { ComponentIR, IRNode } from '../types.ts'
 import { isClientBuiltinName } from '../builtins.ts'
+import { collectValueReferencedNames } from '../value-references.ts'
 
 // All exports from @barefootjs/client/runtime that may be used in generated code
 export const RUNTIME_IMPORT_CANDIDATES = [
   'createSignal', 'createMemo', 'createEffect', 'onCleanup', 'onMount',
-  'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'patchLeaf', 'createDisposableEffect',
+  'hydrate', 'insert', 'getLoopChildren', 'getLoopNodes', 'mapArray', 'mapArrayAnchored', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
@@ -17,7 +18,13 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
   // — the "one claim mechanism" that replaced `patchSlotRange` and
   // `updateClientMarker` (both deleted) as the content-slot update door.
-  'claimSlots', 'lazySlots',
+  // `lazyClaimSlots` is the read-capable twin of `lazySlots` over the same
+  // claim — emitted only by lazy loops that seed an outer-involving TEXT
+  // binding by read-compare-write (§9.3(1)).
+  // `textOrNode` is the 'text' door's Node guard: a child-position value that
+  // turns out to be a live Node must reach the writer as a Node so the claim
+  // can promote to 'markup', never as `String(node)`.
+  'claimSlots', 'lazySlots', 'lazyClaimSlots', 'textOrNode',
   // Profile mode (#1690, SR3) — turn-boundary markers around event handlers.
   'beginTurn', 'endTurn',
   // Catalogued `Date` lowering (#2274/#2292) — the client counterpart to
@@ -74,7 +81,10 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
   for (const imp of ir.metadata.imports) {
     if (runtimeSources.has(imp.source) && !imp.isTypeOnly) {
       for (const spec of imp.specifiers) {
-        if (!spec.isDefault && !spec.isNamespace) {
+        // Per-specifier type-only (`import { createSignal, type Signal }
+        // from '@barefootjs/client'`) must not emit `Signal` from the
+        // runtime subpath, which does not export it (#2432).
+        if (!spec.isDefault && !spec.isNamespace && !spec.isTypeOnly) {
           // Compile-away built-ins (`<Async>` / `<Region>`) are lowered into
           // the template — never emit their import into the client bundle,
           // where it would be a phantom runtime import (#1915).
@@ -87,6 +97,42 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
   return userImports
 }
 
+/**
+ * Build the "is this local name used as a value in the generated code?"
+ * test used to decide which imported specifiers survive into the client
+ * bundle. Prefers a real value-reference set over the historical
+ * `\bname\b` text scan (#2432: an object key or string literal that
+ * merely spells an imported name used to emit a phantom import). Falls
+ * back to a substring scan when the generated text cannot be parsed
+ * cleanly — a partial parse would under-report references and DROP a
+ * needed import. The reference set is computed at most once per call.
+ *
+ * The fallback is a plain `includes()`, not a `\bname\b` regex: `\b` is
+ * defined over `[A-Za-z0-9_]`, so a `$`-prefixed name (`$fetch`, as
+ * exported by `ofetch`) or a non-ASCII local both sit outside a word
+ * boundary and would never match — silently dropping the import, the one
+ * failure direction this helper must never take. Worse, splicing
+ * `localName` straight into `new RegExp(...)` treated `$` as the
+ * end-of-input anchor, so `\b$fetch\b` couldn't match `$fetch` at all.
+ * `includes()` is deliberately COARSER than a word-boundary scan (it
+ * matches `helper` inside `helperFoo` too) — that's fine here: the
+ * fallback's only job is "never under-report", and over-keeping an
+ * import whose binding already exists is harmless, while dropping one is
+ * fatal.
+ */
+export function makeValueUsageTest(generatedCode: string): (localName: string) => boolean {
+  let referenced: Set<string> | null | undefined
+  return (localName: string) => {
+    if (referenced === undefined) {
+      referenced = collectValueReferencedNames(generatedCode)
+    }
+    if (referenced !== null) {
+      return referenced.has(localName)
+    }
+    return generatedCode.includes(localName)
+  }
+}
+
 /**
  * Collect external (non-DOM, non-component) imports that are used in generated code.
  * These are third-party libraries like @barefootjs/form, zod, etc. that need to be
@@ -95,6 +141,7 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
 export function collectExternalImports(ir: ComponentIR, generatedCode: string, localImportPrefixes?: string[]): string[] {
   const componentNames = collectComponentNames(ir.root)
   const importLines: string[] = []
+  const isUsedAsValue = makeValueUsageTest(generatedCode)
   for (const imp of ir.metadata.imports) {
     if (imp.isTypeOnly) continue
     if (imp.source === '@barefootjs/client' || imp.source === RUNTIME_MODULE) continue
@@ -111,9 +158,11 @@ export function collectExternalImports(ir: ComponentIR, generatedCode: string, l
     // Skip component names — they are rendered via initChild(), not imported directly.
     const usedSpecs: string[] = []
     for (const spec of imp.specifiers) {
+      // Per-specifier `import { type Foo }` has no value binding — #2432.
+      if (spec.isTypeOnly) continue
       const localName = spec.alias || spec.name
       if (componentNames.has(localName)) continue
-      if (new RegExp(`\\b${localName}\\b`).test(generatedCode)) {
+      if (isUsedAsValue(localName)) {
         usedSpecs.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
       }
     }

package/src/jsx-to-ir.ts

@@ -2707,7 +2707,24 @@ function transformConditionalBranch(
   const callsReactive = exprCallsReactiveGetters(node, ctx)
   const hasCalls = exprHasFunctionCalls(node)
   const reactive = isReactiveExpression(exprText, ctx, node) || isReactiveOrigin(branchOrigin)
-  const needsSlot = reactive || callsReactive
+  // A branch whose entire value is a bare loop-item read (`row.label`) sets
+  // neither `reactive` nor `callsReactive`: `render-item` is deliberately
+  // excluded from `REACTIVE_BINDING_KINDS` (types.ts) because per-item
+  // reactivity flows through the loop's own per-item signal accessor, not
+  // this origin-based classification, and there is no call to trip
+  // `callsReactive`/`hasCalls` either. Without a slotId here, a keyed loop
+  // row that changes value without its condition flipping has nothing for
+  // `collectLoopChildReactiveTexts` (ir-to-client-js/reactivity.ts) to
+  // attach an update effect to, and the branch is frozen at its
+  // mount-time value forever (the loop-branch-stale-text defect). Read the
+  // freeRefs this function already computed above — no new parse, and no
+  // regex re-scan of `exprText` (contrast the legacy `referencesLoopParam`
+  // used by the sibling `transformConditional`/`transformLogicalAnd`
+  // condition-side decisions, which token-matches the loop param name
+  // against expression TEXT and can false-match inside an unrelated string
+  // literal branch like `"this row is empty"`).
+  const refsLoopParam = branchOrigin.freeRefs?.some(r => r.kind === 'render-item') ?? false
+  const needsSlot = reactive || callsReactive || refsLoopParam
   const slotId = needsSlot ? generateSlotId(ctx) : null
   return {
     type: 'expression',

package/src/value-references.ts

@@ -0,0 +1,108 @@
+/**
+ * Single door for "is this identifier a VALUE reference in emitted JS".
+ *
+ * Replaces `\bname\b` text scans at the import-emission sites (#2432): a
+ * regex scan can't tell a genuine value reference (`paperColor({ ... })`)
+ * from an object key or string literal that merely spells an imported
+ * name (`{ Theme: 'テーマ' }`). That false match used to make
+ * `collectExternalImports` re-emit a per-specifier type-only import
+ * (`import { paperColor, type Theme } from '../lib/theme'`) as a VALUE
+ * import, which the CLI's relative-import inliner then placed in the IIFE's
+ * `return { … }` with no binding — `ReferenceError: Theme is not defined`
+ * at load, killing the whole page's client JS.
+ *
+ * `packages/cli`'s `detectStrippedReferences` (in `resolve-imports.ts`)
+ * shares the same classifier for its own dangling-reference scan, so the
+ * two "is this a real use" checks in the pipeline can never drift apart.
+ */
+
+import ts from 'typescript'
+
+/**
+ * Identifier-position classifier: returns `true` when `id` is being USED
+ * as a value, `false` when it's a declaration name, property key, member-
+ * access name, or other non-reference slot.
+ *
+ * A ShorthandPropertyAssignment (`{ Theme }`) intentionally counts as a
+ * reference — it reads the binding, it doesn't just spell its name.
+ *
+ * Caveat: this is a syntactic test, not a scope analysis. If a local
+ * function parameter happens to share a name with an imported binding,
+ * references inside that function's body will count as references to
+ * the import (false positive). Acceptable: over-counting a reference
+ * just means we keep an import we didn't strictly need, which is a
+ * strict improvement over the alternative failure direction (dropping a
+ * needed import and producing a `ReferenceError`).
+ */
+export function isValueReferenceIdentifier(id: ts.Identifier): boolean {
+  const parent = id.parent
+  if (!parent) return false
+  if (ts.isPropertyAccessExpression(parent) && parent.name === id) return false
+  if (ts.isPropertyAssignment(parent) && parent.name === id) return false
+  if (
+    (ts.isMethodDeclaration(parent) ||
+      ts.isGetAccessorDeclaration(parent) ||
+      ts.isSetAccessorDeclaration(parent)) &&
+    parent.name === id
+  ) {
+    return false
+  }
+  if (ts.isVariableDeclaration(parent) && parent.name === id) return false
+  if (ts.isFunctionDeclaration(parent) && parent.name === id) return false
+  if (ts.isFunctionExpression(parent) && parent.name === id) return false
+  if (ts.isClassDeclaration(parent) && parent.name === id) return false
+  if (ts.isClassExpression(parent) && parent.name === id) return false
+  if (ts.isParameter(parent) && parent.name === id) return false
+  if (ts.isBindingElement(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isLabeledStatement(parent) && parent.label === id) return false
+  if (ts.isBreakOrContinueStatement(parent) && parent.label === id) return false
+  // ImportSpecifier (`{ X }` or `{ X as Y }`) and ExportSpecifier have
+  // only `name`/`propertyName` as Identifier children — written as an
+  // explicit slot check for stylistic consistency with the other
+  // branches above.
+  if (ts.isImportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isExportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isImportClause(parent) && parent.name === id) return false
+  if (ts.isNamespaceImport(parent) && parent.name === id) return false
+  if (ts.isQualifiedName(parent) && parent.right === id) return false
+  return true
+}
+
+/**
+ * Parse `code` and collect the text of every identifier that is a VALUE
+ * reference per `isValueReferenceIdentifier`.
+ *
+ * Returns `null` when the text did not parse cleanly. `null` means
+ * "cannot answer" — callers MUST fall back to their previous (regex-scan)
+ * behaviour rather than treating it as an empty set. Narrowing on a
+ * partial parse would DROP a needed import, which is the failure
+ * direction we must never take (a phantom missing-import build failure
+ * is recoverable; a silently dead client bundle is not).
+ */
+export function collectValueReferencedNames(code: string): Set<string> | null {
+  let sourceFile: ts.SourceFile
+  try {
+    sourceFile = ts.createSourceFile(
+      'generated.js',
+      code,
+      ts.ScriptTarget.Latest,
+      /*setParentNodes*/ true,
+      ts.ScriptKind.JS,
+    )
+  } catch {
+    return null
+  }
+
+  const diagnostics = (sourceFile as unknown as { parseDiagnostics?: readonly unknown[] }).parseDiagnostics
+  if (diagnostics && diagnostics.length > 0) return null
+
+  const names = new Set<string>()
+  function visit(node: ts.Node): void {
+    if (ts.isIdentifier(node) && isValueReferenceIdentifier(node)) {
+      names.add(node.text)
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+  return names
+}