@barefootjs/jsx 0.33.2 → 0.33.3

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

@@ -2,6 +2,7 @@
  * Import detection and DOM import management.
  */
 
+import ts from 'typescript'
 import type { ComponentIR, IRNode } from '../types.ts'
 import { isClientBuiltinName } from '../builtins.ts'
 import { collectValueReferencedNames } from '../value-references.ts'
@@ -29,6 +30,9 @@ export const RUNTIME_IMPORT_CANDIDATES = [
   // the compiler-built HTML at the producer (renderChild / initChild props);
   // `escapeTextOrMarkup` unwraps it at the claim-plan-'markup' template slot.
   'bfMarkup', 'escapeTextOrMarkup',
+  // Nullish guard for a bare `{children}` passthrough splice (#2775) — the
+  // value is already-stringified markup, never escaped, just nullish-safe.
+  'markupOrEmpty',
   'qsa', 'qsaItem', 'qsaChildScope', 'qsaChildScopes', 'upsertChildItem', '__slot', '__bfSlot', '__bfText',
   // Claim-plan interpreter (slot unification A2/A3, spec/slot-unification.md)
   // — the "one claim mechanism" that replaced `patchSlotRange` and
@@ -148,6 +152,168 @@ export function makeValueUsageTest(generatedCode: string): (localName: string) =
   }
 }
 
+/**
+ * Render already-filtered-to-used specifier fragments for one import source
+ * into one or two legal import declaration lines. Shared by every call site
+ * that re-serializes an `ImportInfo`'s specifiers into client-JS import
+ * text — `collectExternalImports` below and the state-only-file client-JS
+ * path (`compiler.ts`'s single-component early return for a `.tsx` with no
+ * JSX return but exported `@client` module signals) — so the
+ * default/namespace handling lives in exactly one place.
+ *
+ * A default or namespace specifier needs its own import syntax
+ * (`import X from '...'` / `import * as X from '...'`), never the
+ * named-import braces a plain specifier gets — a plain `import { lock }
+ * from '...'` for a DEFAULT-imported `lock` compiles to a real, silently-
+ * wrong ESM import (no such named export) that only surfaces once a
+ * bundler actually resolves it (#2767 follow-up: a server component's own
+ * compiled init previously never reached a real Rollup graph, so this was
+ * unreachable until that gap closed).
+ *
+ * `import Default, { a, b } from '...'` is the only legal single-line
+ * pairing — a namespace specifier can't combine with named ones, but
+ * multiple import declarations for the same source are legal ESM, so a
+ * used namespace specifier always gets its own line.
+ */
+export function renderUsedImportLines(
+  source: string,
+  usedDefault: string | null,
+  usedNamespace: string | null,
+  usedNamed: string[],
+): string[] {
+  const lines: string[] = []
+  const defaultAndNamed = [
+    usedDefault,
+    usedNamed.length > 0 ? `{ ${usedNamed.join(', ')} }` : null,
+  ].filter((part): part is string => part !== null).join(', ')
+  if (defaultAndNamed) lines.push(`import ${defaultAndNamed} from '${source}'`)
+  if (usedNamespace) lines.push(`import * as ${usedNamespace} from '${source}'`)
+  return lines
+}
+
+/**
+ * Merge multiple sibling components' compiled client-JS blobs (one file
+ * with several `export function`s, e.g. `compileMultipleComponents`'s two
+ * `.client.js` outputs) into one conflict-free block.
+ *
+ * Real top-level `ImportDeclaration` statements are found via a
+ * `ts.createSourceFile` AST walk — never a text/regex line scan — so a
+ * string or template-literal VALUE that merely contains a line starting
+ * with `import ` (a docs component embedding a code sample, say) can never
+ * be torn out of its literal and hoisted into the imports block. This
+ * mirrors `combine-client-js.ts`'s `parseAndMerge`, the established
+ * precedent for exactly this shape of parse (see that file's docstring
+ * and issue #1702, the regression it exists to prevent) — CLAUDE.md
+ * requires it for "compiled client JS" specifically. Reaching a bundler
+ * for the FIRST time is precisely what a plain server component newly
+ * promoted to a Rollup entry by `needsClientEntry` (#2767) now does, so a
+ * line-based scan here carries real risk, not just a style violation.
+ *
+ * Differs from `parseAndMerge` in two ways required by this call site:
+ * (1) default and named specifiers from the same source fold into ONE
+ * declaration via `renderUsedImportLines`'s rule, rather than surviving
+ * as separate verbatim, exact-string-deduped lines — the fold is what
+ * prevents the duplicate-binding `SyntaxError` two sibling components can
+ * otherwise produce for a shared default import (#2767 follow-up); (2) an
+ * unresolved `@bf-child:` placeholder import is KEPT (deduped by exact
+ * text, same as any other side-effect import), never dropped — unlike
+ * `parseAndMerge`'s parent-child inlining case, this merge runs inside
+ * `compileMultipleComponents`, BEFORE `@barefootjs/vite`'s `resolveId`
+ * gets a chance to rewrite the placeholder into a real module reference.
+ *
+ * Returns the fully assembled `<imports>\n\n<code…>` block ready to use
+ * as a `.client.js` file's content.
+ */
+export function mergeCompiledClientJsImports(codeBlobs: string[]): string {
+  const sourceOrder: string[] = []
+  const namedBySource = new Map<string, Set<string>>()
+  const defaultBySource = new Map<string, string>()
+  const otherImports: string[] = []
+  const seenOther = new Set<string>()
+  const codeSections: string[] = []
+
+  const ensureSource = (source: string): Set<string> => {
+    if (!namedBySource.has(source)) {
+      namedBySource.set(source, new Set())
+      sourceOrder.push(source)
+    }
+    return namedBySource.get(source)!
+  }
+
+  for (const content of codeBlobs) {
+    const sourceFile = ts.createSourceFile(
+      'combine.js',
+      content,
+      ts.ScriptTarget.Latest,
+      /*setParentNodes*/ false,
+      ts.ScriptKind.JS,
+    )
+    const importSpans: Array<[number, number]> = []
+
+    for (const stmt of sourceFile.statements) {
+      if (!ts.isImportDeclaration(stmt)) continue
+      const start = stmt.getStart(sourceFile)
+      const end = stmt.getEnd()
+      importSpans.push([start, end])
+
+      const clause = stmt.importClause
+      const bindings = clause?.namedBindings
+      const specifier = ts.isStringLiteral(stmt.moduleSpecifier) ? stmt.moduleSpecifier.text : ''
+      const isNamespace = !!bindings && ts.isNamespaceImport(bindings)
+      const isNamed = !!bindings && ts.isNamedImports(bindings)
+
+      // A namespace binding (`import * as NS from '…'`, or a combined
+      // `import Default, * as NS from '…'`) is never folded — it always
+      // falls through to the verbatim-keep branch below, same as
+      // `parseAndMerge`'s. Checking `isNamespace` FIRST (not just `!isNamed`)
+      // matters for the combined-with-default shape specifically: a naive
+      // `clause?.name || isNamed` would route it into the fold branch below
+      // on the strength of the default clause alone and silently drop the
+      // namespace half, since only `isNamed` is read there. No current
+      // producer of `clientJs` output emits that combined shape
+      // (`renderUsedImportLines` always splits a used default+namespace
+      // pair into two separate lines), but the classification must stay
+      // correct independent of that invariant.
+      if (!isNamespace && (clause?.name || isNamed)) {
+        // Default and/or named specifiers — fold by source.
+        const set = ensureSource(specifier)
+        if (clause?.name && !defaultBySource.has(specifier)) {
+          defaultBySource.set(specifier, clause.name.text)
+        }
+        if (isNamed) {
+          for (const el of (bindings as ts.NamedImports).elements) {
+            set.add(el.propertyName ? `${el.propertyName.text} as ${el.name.text}` : el.name.text)
+          }
+        }
+      } else {
+        // Namespace or side-effect import (including an unresolved
+        // `@bf-child:` placeholder) — kept verbatim, deduped by exact text.
+        const stmtText = content.slice(start, end)
+        if (!seenOther.has(stmtText)) {
+          seenOther.add(stmtText)
+          otherImports.push(stmtText)
+        }
+      }
+    }
+
+    let code = ''
+    let cursor = 0
+    for (const [start, end] of importSpans) {
+      code += content.slice(cursor, start)
+      cursor = end
+    }
+    code += content.slice(cursor)
+    code = code.trim()
+    if (code) codeSections.push(code)
+  }
+
+  const mergedImports = sourceOrder.flatMap(source =>
+    renderUsedImportLines(source, defaultBySource.get(source) ?? null, null, [...namedBySource.get(source)!]),
+  )
+
+  return [...mergedImports, ...otherImports, '', ...codeSections].join('\n')
+}
+
 /**
  * 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
@@ -171,23 +337,30 @@ export function collectExternalImports(ir: ComponentIR, generatedCode: string, l
 
     // Check which specifiers are actually used in the generated code.
     // Skip component names — they are rendered via initChild(), not imported directly.
-    const usedSpecs: string[] = []
+    const usedNamed: string[] = []
+    let usedDefault: string | null = null
+    let usedNamespace: string | null = null
     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 (isUsedAsValue(localName)) {
-        usedSpecs.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
+      if (!isUsedAsValue(localName)) continue
+      if (spec.isDefault) {
+        usedDefault = localName
+      } else if (spec.isNamespace) {
+        usedNamespace = localName
+      } else {
+        usedNamed.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
       }
     }
 
-    if (usedSpecs.length > 0) {
+    if (usedDefault || usedNamespace || usedNamed.length > 0) {
       let source = imp.source
       if (ir.metadata.clientSignalImportSources?.has(source)) {
         source = source.replace(/\.tsx?$/, '') + '.client.js'
       }
-      importLines.push(`import { ${usedSpecs.join(', ')} } from '${source}'`)
+      importLines.push(...renderUsedImportLines(source, usedDefault, usedNamespace, usedNamed))
     }
   }
   return importLines

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

@@ -217,6 +217,11 @@ function needsClientJs(ctx: ClientJsContext): boolean {
     ctx.conditionalElements.length > 0 ||
     ctx.loopElements.length > 0 ||
     ctx.refElements.length > 0 ||
+    // An element forwarding the caller's leftover props needs `init` to
+    // run `applyRestAttrs` against it — that call is the ONLY thing that
+    // applies those attributes on a pure CSR mount, since neither template
+    // can carry a bag whose keys are unknown at compile time (#2754).
+    ctx.restAttrElements.length > 0 ||
     ctx.childInits.length > 0 ||
     ctx.reactiveAttrs.length > 0 ||
     ctx.clientOnlyElements.length > 0 ||

package/src/ir-to-client-js/prop-handling.ts

@@ -5,6 +5,7 @@
 import type { ParamInfo, SignalInfo } from '../types.ts'
 import type { ClientJsContext } from './types.ts'
 import type { BindingScope } from '../scope/binding-scope.ts'
+import { resolveRestSpreadOriginCore } from '../props-binding.ts'
 
 /**
  * Which of the component's two "forwards the caller's leftover props"
@@ -29,25 +30,13 @@ import type { BindingScope } from '../scope/binding-scope.ts'
  * `spreadAttrs({...})` call keyed by the alias name instead of the
  * runtime-visible one.
  *
- * Walks the chain hop by hop (not a precomputed set) so a multi-hop alias
- * (`const p2 = props; const p3 = p2`) resolves through every link; `visited`
- * guards a constant cycle (`const a = b; const b = a`) the same way
- * `free-refs.ts`'s `resolveConstantInitializerRefs` does. A constant whose
- * value isn't a bare identifier already on the chain (e.g. a real computed
- * object) stops the walk, so a genuinely different spread expression is
- * never mistaken for the rest object.
+ * The walk itself lives in `props-binding.ts`'s `resolveRestSpreadOriginCore`,
+ * shared with Phase 1's slot-id decision so both phases agree on which
+ * spreads forward the caller's leftover props (#2754). This wrapper only
+ * supplies the `ClientJsContext`-shaped inputs.
  */
 export function resolveRestSpreadOrigin(ctx: ClientJsContext, name: string): 'rest' | 'props' | null {
-  const byName = localConstantValues(ctx)
-  const visited = new Set<string>()
-  let current: string | undefined = name.trim()
-  while (current !== undefined && !visited.has(current)) {
-    if (ctx.restPropsName && current === ctx.restPropsName) return 'rest'
-    if (ctx.propsObjectName && current === ctx.propsObjectName) return 'props'
-    visited.add(current)
-    current = byName.get(current)?.trim()
-  }
-  return null
+  return resolveRestSpreadOriginCore(ctx, localConstantValues(ctx), name)
 }
 
 /**

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

@@ -25,6 +25,7 @@ import {
   loopEndMarker,
   loopItemMarker,
   toHTMLAttrName as toHtmlAttrName,
+  keyAttrName as sharedKeyAttrName,
 } from '@barefootjs/shared'
 
 export { DATA_KEY, DATA_KEY_PREFIX, DATA_BF_PH, BF_LOOP_START, BF_LOOP_END, loopStartMarker, loopEndMarker, loopItemMarker, toHtmlAttrName }
@@ -39,9 +40,36 @@ export const PROPS_PARAM = '_p'
  * Get the data-key attribute name for a given loop depth.
  * Outer loop (depth 0): 'data-key'
  * Nested loops (depth N): 'data-key-N'
+ *
+ * Re-exported from `@barefootjs/shared` (the single source of truth also
+ * used by `jsx-to-ir.ts`'s `IRElement.keyAttr` resolution) so existing
+ * imports of this module keep working.
  */
-export function keyAttrName(loopDepth: number): string {
-  return loopDepth > 0 ? `${DATA_KEY_PREFIX}${loopDepth}` : DATA_KEY
+export const keyAttrName = sharedKeyAttrName
+
+/**
+ * Build the trailing `, <bfId>, <keyAttrName>` arguments for a NESTED
+ * (`loopDepth > 0`) `mapArray(...)` call — `inner-loop.ts` / `loop-child-arm.ts`,
+ * the only two stringify sites whose loop can be nested (#2753 Shape B: the
+ * runtime otherwise has no way to know it isn't the outermost loop, and
+ * always stamped the plain `data-key` name).
+ *
+ * A depth-0 (or unkeyed) loop needs no change at all: `mapArray`'s own
+ * default (`BF_KEY`, `'data-key'`) is already correct there, and an unkeyed
+ * loop's runtime never stamps a key attribute regardless of the name — so
+ * this returns `bfIdArg` UNCHANGED, keeping every other call site (and every
+ * existing depth-0 call here) byte-identical.
+ *
+ * `bfIdArg` is the existing profiling-id suffix (e.g. `profileBindingId(...)`,
+ * either `''` or `, "<id>"`) already threaded through these two call sites —
+ * an empty one is widened to an explicit `, undefined` placeholder so the
+ * name lands in the right positional slot (`mapArray`'s 6th parameter is
+ * `bfId`, not `keyAttrName`).
+ */
+export function mapArrayKeyArgs(bfIdArg: string, keyed: boolean, loopDepth: number): string {
+  if (!keyed || loopDepth <= 0) return bfIdArg
+  const bfIdSlot = bfIdArg || ', undefined'
+  return `${bfIdSlot}, ${JSON.stringify(keyAttrName(loopDepth))}`
 }
 
 /**