@barefootjs/jsx 0.4.0 → 0.5.0

package/dist/ir-to-client-js/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/utils.ts"],"names":[],"mappings":"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"}

package/dist/scanner/js-scanner.d.ts

@@ -39,6 +39,16 @@ export interface JsToken {
  * about brace depth, not classification).
  */
 export declare function iterateJsTokens(text: string, start?: number, end?: number): Generator<JsToken>;
+export declare function isTriviaKind(kind: ts.SyntaxKind): boolean;
+/**
+ * Whether `kind` is an identifier-like token — a plain identifier or any
+ * reserved/contextual keyword. Keywords lex to their own token kinds but
+ * still match the `[A-Za-z_$][\w$]*` shape the previous hand-rolled
+ * scanners treated as candidate identifier tokens, so consumers that want
+ * "every bare word in code context" (e.g. `tokenContainsIdent`) include
+ * them and compare the slice text themselves.
+ */
+export declare function isIdentifierLikeToken(kind: ts.SyntaxKind): boolean;
 type Replacement = string | ((substring: string, ...args: any[]) => string);
 /**
  * Apply `re` / `replacement` to `code`, but only in expression-context

package/dist/scanner/js-scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"js-scanner.d.ts","sourceRoot":"","sources":["../../src/scanner/js-scanner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,MAAM,WAAW,OAAO;IACtB,+FAA+F;IAC/F,IAAI,EAAE,EAAE,CAAC,UAAU,CAAA;IACnB,wGAAwG;IACxG,GAAG,EAAE,MAAM,CAAA;IACX,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAA;CACZ;AAED;;;;;;;;;;GAUG;AACH,wBAAiB,eAAe,CAC9B,IAAI,EAAE,MAAM,EACZ,KAAK,SAAI,EACT,GAAG,GAAE,MAAoB,GACxB,SAAS,CAAC,OAAO,CAAC,CA+DpB;AAwED,KAAK,WAAW,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,CAAA;AAE3E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,WAAW,GACvB,MAAM,CAuCR;AAaD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAuBxE;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAiF1E"}
+{"version":3,"file":"js-scanner.d.ts","sourceRoot":"","sources":["../../src/scanner/js-scanner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,MAAM,WAAW,OAAO;IACtB,+FAA+F;IAC/F,IAAI,EAAE,EAAE,CAAC,UAAU,CAAA;IACnB,wGAAwG;IACxG,GAAG,EAAE,MAAM,CAAA;IACX,0BAA0B;IAC1B,GAAG,EAAE,MAAM,CAAA;CACZ;AAED;;;;;;;;;;GAUG;AACH,wBAAiB,eAAe,CAC9B,IAAI,EAAE,MAAM,EACZ,KAAK,SAAI,EACT,GAAG,GAAE,MAAoB,GACxB,SAAS,CAAC,OAAO,CAAC,CA+DpB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,GAAG,OAAO,CASzD;AA6CD;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,GAAG,OAAO,CAKlE;AAkBD,KAAK,WAAW,GAAG,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,CAAA;AAE3E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,WAAW,GACvB,MAAM,CAuCR;AAaD;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAuBxE;AAKD;;;;;;;;;;GAUG;AACH,wBAAgB,4BAA4B,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAiF1E"}

package/dist/scanner/js-scanner.js

@@ -62,6 +62,9 @@ function canRegexStartHere(prev) {
       return true;
   }
 }
+function isIdentifierLikeToken(kind) {
+  return kind === ts.SyntaxKind.Identifier || kind >= ts.SyntaxKind.FirstKeyword && kind <= ts.SyntaxKind.LastKeyword;
+}
 function isOpaqueContentKind(kind) {
   return kind === ts.SyntaxKind.StringLiteral || kind === ts.SyntaxKind.NoSubstitutionTemplateLiteral || kind === ts.SyntaxKind.RegularExpressionLiteral || kind === ts.SyntaxKind.SingleLineCommentTrivia || kind === ts.SyntaxKind.MultiLineCommentTrivia;
 }
@@ -175,6 +178,8 @@ function findTopLevelTemplateLiterals(code) {
 export {
   replaceInExprContexts,
   iterateJsTokens,
+  isTriviaKind,
+  isIdentifierLikeToken,
   findTopLevelTemplateLiterals,
   findInterpolationEnd
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,6 +14,10 @@
       "types": "./dist/scanner/js-scanner.d.ts",
       "import": "./dist/scanner/js-scanner.js"
     },
+    "./import-map": {
+      "types": "./dist/import-map.d.ts",
+      "import": "./dist/import-map.js"
+    },
     "./jsx-runtime": {
       "types": "./src/jsx-runtime/index.d.ts"
     },
@@ -27,7 +31,7 @@
   ],
   "scripts": {
     "build": "bun run build:js && bun run build:types",
-    "build:js": "bun build ./src/index.ts ./src/scanner/js-scanner.ts --root ./src --outdir ./dist --format esm --external typescript --external @barefootjs/shared --external @barefootjs/client",
+    "build:js": "bun build ./src/index.ts ./src/scanner/js-scanner.ts ./src/import-map.ts --root ./src --outdir ./dist --format esm --external typescript --external @barefootjs/shared --external @barefootjs/client",
     "build:types": "tsgo --emitDeclarationOnly --outDir ./dist",
     "test": "bun test && bun run typecheck:tests",
     "typecheck:tests": "tsgo --noEmit -p __tests__/tsconfig.json",
@@ -49,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.4.0"
+    "@barefootjs/shared": "0.5.0"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/__snapshots__/doc-examples.test.ts.snap

@@ -474,7 +474,133 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L75 — (no label) 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L69 — ✅ Multi-key: sort by price, break ties by name 1`] = `
+"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.todo)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.item)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price - b.price || a.name.localeCompare(b.name)).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L74 — ✅ Relational ternary 1`] = `
+"import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
+
+export function initTodoItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.todo)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('TodoItem__b3c36eee', { init: initTodoItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.todo)}<!--/--></li>\` })
+export function TodoItem(_p, __bfKey) { return createComponent('TodoItem__b3c36eee', _p, __bfKey) }
+export function initItem(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const [_s0] = $t(__scope, 's0')
+
+  createEffect(() => {
+    const __val = String(_p.item)
+    if (_s0 && !__val?.__isSlot) _s0.nodeValue = String(__val ?? '')
+  })
+
+}
+
+hydrate('Item__b3c36eee', { init: initItem, template: (_p) => \`<li bf="s1"><!--bf:s0-->\${String(_p.item)}<!--/--></li>\` })
+export function Item(_p, __bfKey) { return createComponent('Item__b3c36eee', _p, __bfKey) }
+function initDashboard() {}
+
+hydrate('Dashboard__b3c36eee', { init: initDashboard, template: (_p) => \`<div>D</div>\` })
+export function Dashboard(_p, __bfKey) { return createComponent('Dashboard__b3c36eee', _p, __bfKey) }
+export function initExample(__scope, _p = {}) {
+  if (!__scope) return
+  const __scopeId = __scope.getAttribute('bf-s')
+
+  const children = _p.children
+  const [count, setCount] = createSignal(0)
+  const [isLoggedIn] = createSignal(false)
+  const [todos] = createSignal([])
+  const [items] = createSignal([])
+  const [filter] = createSignal('all')
+  const [accepted] = createSignal(false)
+  const [text, setText] = createSignal('')
+
+  const [_s1] = $(__scope, 's1')
+
+  mapArray(() => items().toSorted((a, b) => a.price > b.price ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+    if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
+    return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
+  }, 'l0')
+
+}
+
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).toSorted((a, b) => a.price > b.price ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
+`;
+
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L85 — (no label) 1`] = `
 "import { $, $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -536,7 +662,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div><button bf="s0"
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L121 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L131 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -599,7 +725,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L124 — ✅ Use /* @client */ 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L134 — ✅ Use /* @client */ 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate, updateClientMarker } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -660,7 +786,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L141 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L151 — ❌ BF101 on Go/Mojo; works on Hono 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -723,7 +849,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L144 — ✅ Use arrow functions for adapter portability 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L154 — ✅ Use arrow functions for adapter portability 1`] = `
 "import { $t, createComponent, createEffect, createSignal, hydrate } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -786,7 +912,7 @@ hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf:
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 
-exports[`docs/core/rendering/jsx-compatibility.md doc-examples L158 — ✅ Use /* @client */ 1`] = `
+exports[`docs/core/rendering/jsx-compatibility.md doc-examples L168 — ✅ Use /* @client */ 1`] = `
 "import { $, $t, createComponent, createEffect, createSignal, hydrate, initChild, mapArray, renderChild } from '@barefootjs/client/runtime'
 
 export function initTodoItem(__scope, _p = {}) {
@@ -838,14 +964,14 @@ export function initExample(__scope, _p = {}) {
 
   const [_s1] = $(__scope, 's1')
 
-  mapArray(() => items().sort((a, b) => a.name > b.name ? 1 : -1), _s1, (item) => String(item.id), (item, __idx, __existing) => {
+  mapArray(() => items().sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }), _s1, (item) => String(item.id), (item, __idx, __existing) => {
     if (__existing) { initChild('Item__b3c36eee', __existing, { get item() { return item() } }); return __existing }
     return createComponent('Item__b3c36eee', { get item() { return item() } }, item().id)
   }, 'l0')
 
 }
 
-hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => a.name > b.name ? 1 : -1).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
+hydrate('Example', { init: initExample, template: (_p) => \`<div bf="s1"><!--bf-loop:l0-->\${([]).sort((a, b) => { const an = a.name; return an > b.name ? 1 : -1 }).map((item) => \`\${renderChild('Item__b3c36eee', {item: item}, item.id)}\`).join('')}<!--bf-/loop:l0--></div>\` })
 export function Example(_p, __bfKey) { return createComponent('Example', _p, __bfKey) }"
 `;
 

package/src/__tests__/child-components-in-map.test.ts

@@ -729,4 +729,80 @@ describe('child components inside .map() (#344)', () => {
     expect(content).toContain('children[__idx]')
     expect(content).not.toContain('children[__idx + ')
   })
+
+  test('nested .map() with multiple inner components emits unique __compEl bindings (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <div key={it.id}>
+                    <SelectItem value={it.id}>{it.label}</SelectItem>
+                    <SelectIcon name={it.id} />
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const content = clientJs!.content
+
+    // Both inner-loop components must be initialised.
+    expect(content).toContain("initChild('SelectItem'")
+    expect(content).toContain("initChild('SelectIcon'")
+
+    // No re-declaration of `__compEl` in the shared inner-forEach scope:
+    // each comp must use a uniquely-suffixed binding.
+    expect(content).toContain('__compEl0')
+    expect(content).toContain('__compEl1')
+
+    // The bug threw "Identifier '__compEl' has already been declared" — the
+    // unsuffixed binding must not appear when multiple comps share a scope.
+    expect(content).not.toContain('const __compEl =')
+  })
+
+  test('nested .map() with a single inner component keeps the plain __compEl binding (#1664)', () => {
+    const source = `
+      'use client'
+
+      export function Picker() {
+        const GROUPS = [
+          { id: 'a', items: [{ id: 'x', label: 'X' }] },
+        ]
+        return (
+          <div>
+            {GROUPS.map(group => (
+              <div key={group.id}>
+                {group.items.map(it => (
+                  <SelectItem key={it.id} value={it.id}>{it.label}</SelectItem>
+                ))}
+              </div>
+            ))}
+          </div>
+        )
+      }
+    `
+    const result = compileJSX(source, 'Picker.tsx', { adapter })
+    expect(result.errors).toHaveLength(0)
+
+    const content = result.files.find(f => f.type === 'clientJs')!.content
+    expect(content).toContain("initChild('SelectItem'")
+    // Single comp keeps the unsuffixed name.
+    expect(content).toContain('const __compEl =')
+    expect(content).not.toContain('__compEl0')
+  })
 })

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

@@ -0,0 +1,75 @@
+/**
+ * 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)')
+  })
+})