@barefootjs/jsx 0.30.6 → 0.31.0

package/src/ir-to-client-js/prune-unused-prop-extractions.ts

@@ -0,0 +1,108 @@
+/**
+ * Final-pass removal of prop-extraction consts the emitted init body never
+ * reads (`const children = _p.children` and friends).
+ *
+ * `emitPropsExtraction` mirrors the component's destructuring for every
+ * prop the REFERENCE GRAPH marks as used — but the graph also counts
+ * template-only references (e.g. `{children}` rendered as SSR-adopted
+ * content), which the init body never touches. The stray binding is not
+ * just dead weight: props arrive as GETTERS over the parent's reactive
+ * state, and a slot-children getter (`get children() { return
+ * [createComponent('Checkbox', …)] }`) INSTANTIATES child components when
+ * read. An init that eagerly evaluates it creates a second, duplicate
+ * child instance next to the `upsertChild` wiring the compiler also
+ * emits — double event listeners, toggles that cancel themselves out.
+ * The legacy site pipeline masked this by registration order (children
+ * modules registered after the parent's init queued, so the queued init
+ * ran against an already-hydrated tree); Vite's ESM import order
+ * registers children first and made the eager read bite (#2537's
+ * migration surfaced it on site/ui's form-builder).
+ *
+ * Mirrors `resolveFinalImports`'s shape: a TS AST walk over the finished
+ * code (never a regex — see CLAUDE.md), span-based splicing, iterated to
+ * a fixpoint so an extraction referenced only by another pruned
+ * extraction's default expression is removed too.
+ *
+ * Known limits, both erring toward FALSE-KEEP (an extraction survives and
+ * the eager getter read stays), never false-prune:
+ * - The reference scan is whole-file and scope-unaware: any other
+ *   occurrence of the same identifier text as a value (a module-level
+ *   helper's parameter named `children`, a local in an unrelated closure)
+ *   keeps the extraction alive.
+ * - Splicing removes a statement's full leading trivia, so a comment an
+ *   emitter attached directly above a pruned extraction goes with it.
+ */
+import ts from 'typescript'
+import { collectValueReferencedNames } from '../value-references.ts'
+import { PROPS_PARAM } from './utils.ts'
+
+/** Is `stmt` a single-declarator `const X = _p.X…` prop extraction whose
+ * initializer is `_p.X` or `_p.X ?? <default>`? Returns the bound name, or
+ * null when the statement is anything else. */
+function propExtractionName(stmt: ts.Statement): string | null {
+  if (!ts.isVariableStatement(stmt)) return null
+  const decls = stmt.declarationList.declarations
+  if (decls.length !== 1) return null
+  const decl = decls[0]!
+  if (!ts.isIdentifier(decl.name) || !decl.initializer) return null
+
+  let core: ts.Expression = decl.initializer
+  if (
+    ts.isBinaryExpression(core) &&
+    core.operatorToken.kind === ts.SyntaxKind.QuestionQuestionToken
+  ) {
+    core = core.left
+  }
+  if (!ts.isPropertyAccessExpression(core)) return null
+  if (!ts.isIdentifier(core.expression) || core.expression.text !== PROPS_PARAM) return null
+  if (core.name.text !== decl.name.text) return null
+  return decl.name.text
+}
+
+/**
+ * Remove prop-extraction consts inside `init*` functions whose bound name
+ * is never referenced as a value anywhere else in `code`. Returns the code
+ * unchanged when nothing is prunable or the code doesn't parse.
+ */
+export function pruneUnusedPropExtractions(code: string): string {
+  for (let round = 0; round < 10; round++) {
+    const referenced = collectValueReferencedNames(code)
+    if (referenced === null) {
+      // Unlike resolveFinalImports' identical fallback (where a missed
+      // import fails the build loudly), skipping here silently re-opens
+      // the eager-getter double-instantiation this pass exists to prevent
+      // — so say so.
+      console.warn('[barefootjs] pruneUnusedPropExtractions: generated code did not parse; skipping prune')
+      return code
+    }
+
+    const sourceFile = ts.createSourceFile(
+      'generated.js',
+      code,
+      ts.ScriptTarget.Latest,
+      /*setParentNodes*/ false,
+      ts.ScriptKind.JS,
+    )
+
+    // Spans to delete, gathered per round; spliced back-to-front so
+    // earlier offsets stay valid.
+    const spans: Array<{ start: number; end: number }> = []
+    for (const stmt of sourceFile.statements) {
+      if (!ts.isFunctionDeclaration(stmt) || !stmt.name?.text.startsWith('init') || !stmt.body) continue
+      for (const inner of stmt.body.statements) {
+        const name = propExtractionName(inner)
+        if (name !== null && !referenced.has(name)) {
+          spans.push({ start: inner.getFullStart(), end: inner.getEnd() })
+        }
+      }
+    }
+
+    if (spans.length === 0) return code
+    let next = code
+    for (const { start, end } of spans.sort((a, b) => b.start - a.start)) {
+      next = next.slice(0, start) + next.slice(end)
+    }
+    code = next
+  }
+  return code
+}

package/src/types.ts

@@ -2225,6 +2225,31 @@ export interface CompileOptions {
    * byte-for-byte unchanged (SR8). Dev/profiling builds only.
    */
   profile?: boolean
+  /**
+   * Forwarded verbatim to `adapter.generate(..., { scriptAssets })` — see
+   * that field's docstring on `AdapterGenerateOptions` for the full
+   * precedence rules (`skipScriptRegistration` still wins; `[]` means "no
+   * scripts", distinct from `undefined`'s "use the adapter-computed path").
+   *
+   * This is plain resolved data (an ordered URL list), not a rewrite
+   * callback — the caller (chiefly `@barefootjs/vite`) has already done all
+   * the resolution (bundling, hashing, manifest lookup) before calling
+   * `compileJSX`; the compiler only threads the list through to the
+   * adapter unchanged.
+   */
+  scriptAssets?: string[]
+  /**
+   * Forwarded verbatim to `adapter.generate(..., { preloadAssets })` — see
+   * that field's docstring on `AdapterGenerateOptions` for the full
+   * precedence rules (`skipScriptRegistration` still wins; `[]` means
+   * "resolved, nothing to preload", distinct from `undefined`'s "no
+   * preload information").
+   *
+   * Same plain-resolved-data contract as `scriptAssets`: the caller
+   * (`@barefootjs/vite`) has already walked the manifest; the compiler
+   * only threads the list through unchanged.
+   */
+  preloadAssets?: string[]
 }
 
 export interface FileOutput {

package/src/value-references.ts

@@ -11,9 +11,10 @@
  * `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.
+ * `packages/cli`'s `detectStrippedReferences` (in the since-deleted
+ * `resolve-imports.ts`) used to share this classifier for its own
+ * dangling-reference scan; `collectExternalImports` is the remaining
+ * caller.
  */
 
 import ts from 'typescript'
@@ -27,10 +28,9 @@ import ts from 'typescript'
  * 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
+ * The current caller parses with `ts.ScriptKind.JS` —
+ * `collectValueReferencedNames` below.
+ * 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

package/dist/import-map.d.ts

@@ -1,56 +0,0 @@
-/**
- * Shared importmap-snippet renderer.
- *
- * `bf build` emits `barefoot-externals.json` (the `ExternalsManifest`) whenever
- * `externals` / `bundleEntries` are configured. Component adapters (Hono) read
- * that manifest at render time via a JSX component (`BfImportMap`). Template-
- * string adapters (Go html/template, Mojolicious EP) have no component layer, so
- * `bf build` instead emits a static `barefoot-importmap.html` for them to
- * `{{ template }}` / `%= include` into the page `<head>`.
- *
- * This module is the single source of truth for that snippet's HTML, so every
- * adapter's importmap injection point stays in sync. See issue #1644.
- */
-/**
- * The subset of `barefoot-externals.json` needed to render the importmap
- * snippet. All fields are optional so a partial or hand-written manifest
- * (e.g. a Hono `BfImportMap` `externals` prop) still type-checks. The strict
- * build-output `ExternalsManifest` is structurally assignable to this, so both
- * the CLI's emitted manifest and a hand-written one feed `renderImportMapHtml`.
- * This is the one shared manifest type for every importmap injection path.
- */
-export interface ImportMapManifest {
-    /** Entries for `<script type="importmap">`. */
-    importmap?: {
-        imports?: Record<string, string>;
-    };
-    /** URLs to emit as `<link rel="modulepreload">`. */
-    preloads?: string[];
-}
-/**
- * Shape of `barefoot-externals.json`, written by `bf build`. This is the build
- * output contract shared by the CLI (which writes it) and the adapters (which
- * consume it) — the all-required superset of {@link ImportMapManifest}.
- */
-export interface ExternalsManifest {
-    /** Entries for `<script type="importmap">`. */
-    importmap: {
-        imports: Record<string, string>;
-    };
-    /** URLs to emit as `<link rel="modulepreload">`. */
-    preloads: string[];
-    /** Package names to pass as `--external` to the user's bundler. */
-    externals: string[];
-}
-/**
- * Render the `<script type="importmap">` (plus `<link rel="modulepreload">`)
- * snippet from a parsed externals manifest. Fields are read defensively so a
- * partial or hand-written manifest still produces valid output.
- *
- * Inside the importmap JSON, each `<` is replaced with its JSON unicode escape
- * for code point U+003C so a URL containing `</script>` cannot break out of the
- * script element — the JSON parser decodes that escape back to `<`, keeping the
- * mapping value-identical.
- */
-export declare function renderImportMapHtml(manifest: ImportMapManifest): string;
-//# sourceMappingURL=import-map.d.ts.map

package/dist/import-map.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"import-map.d.ts","sourceRoot":"","sources":["../src/import-map.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,SAAS,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAA;IAChD,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,SAAS,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAA;IAC9C,oDAAoD;IACpD,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,mEAAmE;IACnE,SAAS,EAAE,MAAM,EAAE,CAAA;CACpB;AAOD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,CAavE"}

package/dist/import-map.js

@@ -1,18 +0,0 @@
-// src/import-map.ts
-function escapeHtmlAttr(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
-}
-function renderImportMapHtml(manifest) {
-  const imports = manifest.importmap?.imports ?? {};
-  const json = JSON.stringify({ imports }).replace(/</g, "\\u003c");
-  const lines = [`<script type="importmap">${json}</script>`];
-  for (const href of manifest.preloads ?? []) {
-    lines.push(`<link rel="modulepreload" href="${escapeHtmlAttr(href)}" crossorigin>`);
-  }
-  return lines.join(`
-`) + `
-`;
-}
-export {
-  renderImportMapHtml
-};

package/src/__tests__/import-map.test.ts

@@ -1,75 +0,0 @@
-/**
- * renderImportMapHtml tests
- *
- * The shared importmap-snippet renderer turns a parsed `barefoot-externals.json`
- * into the `<script type="importmap">` (+ `<link rel="modulepreload">`) HTML that
- * `bf build` emits as `barefoot-importmap.html` for template-string adapters
- * (issue #1644). This is the single source of truth for that snippet.
- */
-import { describe, test, expect } from 'bun:test'
-import { renderImportMapHtml } from '../import-map'
-
-function parseImportMap(html: string): Record<string, string> {
-  const match = html.match(/<script type="importmap">(.*?)<\/script>/s)
-  if (!match) throw new Error(`no importmap in: ${html}`)
-  // Decode the < escape the renderer applies before parsing.
-  return JSON.parse(match[1]).imports
-}
-
-describe('renderImportMapHtml', () => {
-  test('emits the manifest importmap imports verbatim', () => {
-    const html = renderImportMapHtml({
-      importmap: {
-        imports: {
-          '@barefootjs/client': '/components/barefoot.js',
-          '@barefootjs/client/runtime': '/components/barefoot.js',
-          zod: 'https://esm.sh/zod@4.4.3',
-        },
-      },
-      preloads: [],
-    })
-    expect(parseImportMap(html)).toEqual({
-      '@barefootjs/client': '/components/barefoot.js',
-      '@barefootjs/client/runtime': '/components/barefoot.js',
-      zod: 'https://esm.sh/zod@4.4.3',
-    })
-    expect(html).not.toContain('modulepreload')
-  })
-
-  test('emits modulepreload links with crossorigin for manifest preloads (#1648)', () => {
-    const html = renderImportMapHtml({
-      importmap: { imports: {} },
-      preloads: ['/components/form.js', 'https://esm.sh/zod@4.4.3'],
-    })
-    expect(html).toContain('<link rel="modulepreload" href="/components/form.js" crossorigin>')
-    expect(html).toContain('<link rel="modulepreload" href="https://esm.sh/zod@4.4.3" crossorigin>')
-  })
-
-  test('reads defensively from a partial manifest', () => {
-    expect(parseImportMap(renderImportMapHtml({}))).toEqual({})
-    expect(renderImportMapHtml({})).not.toContain('modulepreload')
-  })
-
-  test('ends with a trailing newline (template-include friendly)', () => {
-    expect(renderImportMapHtml({ importmap: { imports: {} } }).endsWith('\n')).toBe(true)
-  })
-
-  test('escapes < in the importmap JSON so a URL cannot break out of the script', () => {
-    const html = renderImportMapHtml({
-      importmap: { imports: { evil: 'https://x/</script><script>alert(1)</script>' } },
-    })
-    // The literal closing tag must not appear before the importmap's own.
-    const importmapClose = html.indexOf('</script>')
-    expect(html.slice(0, importmapClose)).not.toContain('</script>')
-    // But the value still round-trips through JSON.parse.
-    expect(parseImportMap(html).evil).toBe('https://x/</script><script>alert(1)</script>')
-  })
-
-  test('escapes double quotes and angle brackets in preload hrefs', () => {
-    const html = renderImportMapHtml({
-      preloads: ['/components/"onerror=alert(1).js'],
-    })
-    expect(html).not.toContain('"onerror=alert(1)')
-    expect(html).toContain('&quot;onerror=alert(1)')
-  })
-})

package/src/import-map.ts

@@ -1,72 +0,0 @@
-/**
- * Shared importmap-snippet renderer.
- *
- * `bf build` emits `barefoot-externals.json` (the `ExternalsManifest`) whenever
- * `externals` / `bundleEntries` are configured. Component adapters (Hono) read
- * that manifest at render time via a JSX component (`BfImportMap`). Template-
- * string adapters (Go html/template, Mojolicious EP) have no component layer, so
- * `bf build` instead emits a static `barefoot-importmap.html` for them to
- * `{{ template }}` / `%= include` into the page `<head>`.
- *
- * This module is the single source of truth for that snippet's HTML, so every
- * adapter's importmap injection point stays in sync. See issue #1644.
- */
-
-/**
- * The subset of `barefoot-externals.json` needed to render the importmap
- * snippet. All fields are optional so a partial or hand-written manifest
- * (e.g. a Hono `BfImportMap` `externals` prop) still type-checks. The strict
- * build-output `ExternalsManifest` is structurally assignable to this, so both
- * the CLI's emitted manifest and a hand-written one feed `renderImportMapHtml`.
- * This is the one shared manifest type for every importmap injection path.
- */
-export interface ImportMapManifest {
-  /** Entries for `<script type="importmap">`. */
-  importmap?: { imports?: Record<string, string> }
-  /** URLs to emit as `<link rel="modulepreload">`. */
-  preloads?: string[]
-}
-
-/**
- * Shape of `barefoot-externals.json`, written by `bf build`. This is the build
- * output contract shared by the CLI (which writes it) and the adapters (which
- * consume it) — the all-required superset of {@link ImportMapManifest}.
- */
-export interface ExternalsManifest {
-  /** Entries for `<script type="importmap">`. */
-  importmap: { imports: Record<string, string> }
-  /** URLs to emit as `<link rel="modulepreload">`. */
-  preloads: string[]
-  /** Package names to pass as `--external` to the user's bundler. */
-  externals: string[]
-}
-
-/** Escape a value for use inside a double-quoted HTML attribute. */
-function escapeHtmlAttr(value: string): string {
-  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
-}
-
-/**
- * Render the `<script type="importmap">` (plus `<link rel="modulepreload">`)
- * snippet from a parsed externals manifest. Fields are read defensively so a
- * partial or hand-written manifest still produces valid output.
- *
- * Inside the importmap JSON, each `<` is replaced with its JSON unicode escape
- * for code point U+003C so a URL containing `</script>` cannot break out of the
- * script element — the JSON parser decodes that escape back to `<`, keeping the
- * mapping value-identical.
- */
-export function renderImportMapHtml(manifest: ImportMapManifest): string {
-  const imports = manifest.importmap?.imports ?? {}
-  const json = JSON.stringify({ imports }).replace(/</g, '\\u003c')
-  const lines = [`<script type="importmap">${json}</script>`]
-  for (const href of manifest.preloads ?? []) {
-    // `crossorigin` is required so a cross-origin (CDN) preload's request
-    // matches the actual module `import` (always a CORS fetch); without it
-    // the browser discards the preload and re-fetches. Harmless for
-    // same-origin preloads, which use the same credentials mode either way.
-    // See issue #1648.
-    lines.push(`<link rel="modulepreload" href="${escapeHtmlAttr(href)}" crossorigin>`)
-  }
-  return lines.join('\n') + '\n'
-}