@barefootjs/jsx 0.28.0 → 0.29.0

package/src/compiler.ts

@@ -18,7 +18,7 @@ import { stripClientBuiltinImports } from './builtins.ts'
 import { generateClientJs, generateClientJsWithSourceMap, analyzeClientNeeds } from './ir-to-client-js/index.ts'
 import { decideClientOnlyElision } from './ir-to-client-js/client-only-elision.ts'
 import { emitModuleLevelDeclarations } from './ir-to-client-js/emit-module-level.ts'
-import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode } from './ir-to-client-js/imports.ts'
+import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode, makeValueUsageTest } from './ir-to-client-js/imports.ts'
 import { setActiveComponentScope, computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { generateModuleExports, collectInlineExportedNames } from './module-exports.ts'
 import { applyCssLayerPrefix } from './css-layer-prefixer.ts'
@@ -583,6 +583,7 @@ export function compileJSX(
       // in the generated body (e.g. an initializer that calls an imported
       // helper: `createSignal(defaultValue())`).
       const externalImportLines: string[] = []
+      const isUsedAsValue = makeValueUsageTest(body)
       for (const imp of ctx.imports) {
         if (imp.isTypeOnly) continue
         if (imp.source === '@barefootjs/client' || imp.source === RUNTIME_MODULE) continue
@@ -591,7 +592,7 @@ export function compileJSX(
           continue
         }
         const used = imp.specifiers
-          .filter(s => !s.isDefault && !s.isNamespace && new RegExp(`\\b${s.alias || s.name}\\b`).test(body))
+          .filter(s => !s.isDefault && !s.isNamespace && !s.isTypeOnly && isUsedAsValue(s.alias || s.name))
           .map(s => s.alias ? `${s.name} as ${s.alias}` : s.name)
         if (used.length > 0) {
           externalImportLines.push(`import { ${used.join(', ')} } from '${imp.source}'`)
@@ -638,6 +639,9 @@ export function compileJSX(
       if (imp.isTypeOnly) continue
       if (!imp.source.startsWith('./') && !imp.source.startsWith('../')) continue
       for (const spec of imp.specifiers) {
+        // A type-only specifier must not force a `.client.js` source
+        // rewrite — it has no runtime binding (#2432).
+        if (spec.isTypeOnly) continue
         if (ctx.importedClientSignalNames.has(spec.alias ?? spec.name)) {
           sources.add(imp.source)
           break

package/src/errors.ts

@@ -53,6 +53,14 @@ export const ErrorCodes = {
   // or an undeclared component — fail loud with the import to add.
   BUILTIN_REQUIRES_IMPORT: 'BF054',
 
+  // A relative `.ts` module inlined into a client bundle (`resolveRelativeImports`'s
+  // top-level IIFE wrap) was asked for a name it does not export. The IIFE's
+  // `return { … }` has no binding for that name, so the reference throws
+  // `ReferenceError: <name> is not defined` at load — killing the page's
+  // client JS before hydrate. Fail the build instead of shipping the
+  // dangling reference (#2432).
+  INLINED_IMPORT_MISSING_EXPORT: 'BF055',
+
   // Init statement errors (BF052)
   UNDECLARED_INIT_STATEMENT_REFERENCE: 'BF052',
 
@@ -155,6 +163,9 @@ const errorMessages: Record<ErrorCode, string> = {
   [ErrorCodes.STRIPPED_CLIENT_IMPORT_REFERENCED]:
     "Import was stripped from the client bundle but its binding is still referenced. Client components ('use client' .tsx) are not callable as plain functions from imperative .ts modules — render them as JSX from a 'use client' parent instead. If the flagged name is a local shadow rather than the stripped import, please file an issue.",
 
+  [ErrorCodes.INLINED_IMPORT_MISSING_EXPORT]:
+    'An inlined relative import requests a name the target module does not export. The client bundle would throw ReferenceError at load.',
+
   [ErrorCodes.STAGE_REACTIVE_IN_TEMPLATE]:
     'Reactive binding (signal getter or memo) referenced from template scope. The template lambda runs at module scope without the reactive context, so the value cannot be evaluated at SSR. Wrap the JSX expression in /* @client */ to defer it to hydrate, or restructure so the template uses a prop or static value.',
 

package/src/index.ts

@@ -320,6 +320,10 @@ export {
 // Errors
 export { ErrorCodes, createError, formatError, generateCodeFrame } from './errors.ts'
 
+// Value-reference classifier (#2432) — shared "is this a real value use"
+// door for import-emission sites and the CLI's stripped-reference scan.
+export { isValueReferenceIdentifier, collectValueReferencedNames } from './value-references.ts'
+
 // Expression Parser
 export { parseExpression, tsNodeToParsedExpr, asCallbackMethodCall, CALLBACK_METHODS, sortComparatorFromArrow, serializeParsedExpr, freeVarsInBody, freeIdentifiers, materializeGetterCalls, isSupported, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, parseBlockBodyTolerant, foldBlockToExpr, predicateTernaryToLogical, containsHigherOrder, extractArrowBodyExpression, parseStyleObjectEntries, hasUnsafeStyleValue, parseProviderObjectLiteral, type ProviderObjectMember, type FoldBlockOptions } from './expression-parser.ts'
 export type { StyleObjectEntry } from './expression-parser.ts'

package/src/ir-to-client-js/control-flow/stringify/composite-loop.ts

@@ -119,6 +119,10 @@ export function stringifyCompositeLoop(lines: string[], plan: CompositeLoopPlan)
     bodyIsMultiRoot,
     indent: bodyIndent,
     singleRootLayout: 'multiline',
+    // Composite is exactly the variant that initialises something inside the
+    // row — nested components, inner loops, or both — so it is exactly the
+    // variant whose tail needs the row already connected.
+    mountRow: true,
   })
   emitComponentAndEventSetup(lines, bodyIndent, '__el', compsArr, eventsArr, loopParam, loopParamBindings, bodyIsMultiRoot)
   if (innerLoops.length > 0) {

package/src/ir-to-client-js/control-flow/stringify/template-parse.ts

@@ -251,9 +251,23 @@ export function emitLoopItemElementSetup(
     indent: string
     /** Single-root layout: 'inline' (plain / branch-plain) or 'multiline' (composite). */
     singleRootLayout: 'inline' | 'multiline'
+    /**
+     * Emit `mountRowRoot(__el)` on the FRESH branch, connecting the row at the
+     * mount point `mapArray` handed down before the body's tail runs.
+     *
+     * Only bodies that initialise something inside the row need it — the tail
+     * is where `useContext` would otherwise resolve against a detached element
+     * and fall through to the global last-writer-wins store. A row with no
+     * nested init has nothing to resolve, so plain loops leave this off and
+     * their emission (and the `mapArrayLazy` measurements) are untouched.
+     *
+     * Never on the hydration branch: that row came from SSR markup and is in
+     * the document already.
+     */
+    mountRow?: boolean
   },
 ): void {
-  const { template, bodyIsMultiRoot, indent, singleRootLayout } = opts
+  const { template, bodyIsMultiRoot, indent, singleRootLayout, mountRow } = opts
   const innerIndent = indent + '  '
   if (bodyIsMultiRoot) {
     lines.push(`${indent}let __el, __extras`)
@@ -264,17 +278,22 @@ export function emitLoopItemElementSetup(
       lines.push(ln)
     }
     lines.push(`${innerIndent}__el.__bfExtras = __extras`)
+    // After the stash: `mountRowRoot` attaches the primary, and an attached
+    // primary makes `itemRootElements`' sibling walk the first thing a lookup
+    // sees — it must find the stash already in place behind it.
+    if (mountRow) lines.push(`${innerIndent}mountRowRoot(__el)`)
     lines.push(`${indent}}`)
     return
   }
   if (singleRootLayout === 'inline') {
     const cloneExpr = emitTemplateCloneInline(template)
-    lines.push(`${indent}const __el = __existing ?? (() => { ${cloneExpr} })()`)
+    const clone = `__existing ?? (() => { ${cloneExpr} })()`
+    lines.push(`${indent}const __el = ${mountRow ? `__existing ?? mountRowRoot((() => { ${cloneExpr} })())` : clone}`)
     return
   }
-  lines.push(`${indent}const __el = __existing ?? (() => {`)
+  lines.push(`${indent}const __el = __existing ?? ${mountRow ? 'mountRowRoot(' : ''}(() => {`)
   for (const ln of emitTemplateCloneLines(template, innerIndent)) lines.push(ln)
-  lines.push(`${indent}})()`)
+  lines.push(`${indent}})()${mountRow ? ')' : ''}`)
 }
 
 /**

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

@@ -4,12 +4,18 @@
 
 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', 'mapArrayLazy', 'patchLeaf', 'createDisposableEffect',
   'createComponent', 'renderChild', 'registerComponent', 'registerTemplate', 'initChild', 'upsertChild',
+  // Connects a template-clone loop row before the body's tail runs, so a child
+  // that inits inside it resolves context against real ancestors rather than
+  // falling through to the global store. The clone-root counterpart of the
+  // mount point `createComponent` consumes for component-root rows.
+  'mountRowRoot',
   'createPortal',
   'provideContext', 'createContext', 'useContext',
   'forwardProps', 'applyRestAttrs', 'splitProps', 'spreadAttrs', 'styleToCss', 'escapeAttr', 'escapeText', 'escapeTextOrNode',
@@ -80,7 +86,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).
@@ -93,6 +102,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
@@ -101,6 +146,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
@@ -117,9 +163,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/value-references.ts

@@ -0,0 +1,130 @@
+/**
+ * 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.
+ *
+ * CONTRACT: this classifies identifier positions in **JavaScript** source.
+ * Both current callers parse with `ts.ScriptKind.JS` —
+ * `collectValueReferencedNames` below, and `detectStrippedReferences` in
+ * `packages/cli/src/lib/resolve-imports.ts`, which parses the assembled
+ * bundle. TypeScript-only positions are deliberately NOT handled: an
+ * identifier in a type position (`const x: Foo = …`, a
+ * `TypeReferenceNode`) is still reported as a value reference, and so are
+ * `interface` / `type` / `enum` declaration names. Do not point this at
+ * TypeScript source — it would over-report there.
+ *
+ * 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). For the import-emission caller
+ * (`makeValueUsageTest` in `ir-to-client-js/imports.ts`), over-counting is
+ * the safe direction — an extra import whose binding exists is harmless.
+ * It is NOT safe for the BF053 caller (`detectStrippedReferences`): there,
+ * an over-reported reference to a stripped binding is a false build
+ * error on legal code. That asymmetry is why every exclusion branch below
+ * matters — each one is a case that would otherwise misfire BF053.
+ */
+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
+  }
+  // Class field name (`class C { helper = 1 }`, including `static helper
+  // = 1`): the name is a member key, not a read. The `parent.name === id`
+  // guard is what preserves the computed case — in `class C { [helper] =
+  // 1 }` the name is a ComputedPropertyName, not `id` itself, so `helper`
+  // (inside the brackets) still falls through and counts as a reference.
+  if (ts.isPropertyDeclaration(parent) && parent.name === id) return false
+  // `new.target` / `import.meta`: `target`/`meta` sits in keyword
+  // position, not a binding.
+  if (ts.isMetaProperty(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
+}