@remix-run/test 0.0.0 → 0.2.0

package/src/app/client/entry.ts

@@ -0,0 +1,353 @@
+import { normalizeLine } from '../../lib/normalize.ts'
+import type { TestResult, TestResults } from '../../lib/reporters/results.ts'
+
+interface TestsSetup {
+  testPaths: string[]
+  baseDir: string
+}
+
+type FileResults = TestResults & { tests: Array<TestResult & { filePath: string }> }
+
+const STYLES = `
+.rt-container {
+  font-family: monospace;
+  padding: 16px;
+  max-width: 900px;
+}
+.rt-summary {
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+.rt-summary-row {
+  display: block;
+}
+.rt-info {
+  color: #0ea5e9;
+}
+.rt-indent {
+  margin-left: 16px;
+  margin-top: 4px;
+}
+.rt-suite-details {
+  margin-bottom: 8px;
+}
+.rt-suite-summary {
+  cursor: pointer;
+  padding: 2px 0;
+  user-select: none;
+}
+.rt-suite-icon {
+  margin-left: 6px;
+}
+.rt-test-item {
+  padding: 3px 18px;
+}
+.rt-test-duration {
+  color: #999;
+  font-size: 0.85em;
+}
+.rt-error-pre {
+  margin: 4px 0 4px 16px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #dc2626;
+  background: #fff5f5;
+  border-left: 3px solid #dc2626;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.rt-error-stack {
+  color: #999;
+  margin-top: 6px;
+}
+.rt-button {
+  margin-top: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.rt-stack-link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: #aaa;
+}
+.rt-passed {
+  color: #16a34a;
+}
+.rt-failed {
+  color: #dc2626;
+}
+.rt-muted {
+  color: #666;
+}
+.rt-todo {
+  color: #a16207;
+}
+`
+
+const styleEl = document.createElement('style')
+styleEl.textContent = STYLES
+document.head.appendChild(styleEl)
+
+const setupEl = document.getElementById('test-setup')
+if (!setupEl?.textContent) {
+  throw new Error('Test runner: missing #test-setup payload')
+}
+const setup = JSON.parse(setupEl.textContent) as TestsSetup
+const root = document.getElementById('test-root')
+if (!root) {
+  throw new Error('Test runner: missing #test-root mount point')
+}
+mountTests(root, setup)
+
+function mountTests(host: HTMLElement, setup: TestsSetup): void {
+  let startTime = performance.now()
+  let totals = { passed: 0, failed: 0, skipped: 0, todo: 0 }
+
+  let container = el('div', { id: 'test-status', className: 'rt-container' })
+  host.appendChild(container)
+
+  let summary = el('div', { className: 'rt-summary' })
+  container.appendChild(summary)
+
+  let testsRow = summaryRow()
+  let passRow = summaryRow()
+  let failRow = summaryRow()
+  let skippedRow = summaryRow()
+  let todoRow = summaryRow()
+  let durationRow = summaryRow()
+  summary.append(testsRow.el, passRow.el, failRow.el)
+
+  let suitesContainer = el('div')
+  container.appendChild(suitesContainer)
+
+  function renderSummary(done: boolean) {
+    let total = totals.passed + totals.failed + totals.skipped + totals.todo
+    testsRow.text(`tests ${total}`)
+    passRow.text(`pass ${totals.passed}`)
+    failRow.text(`fail ${totals.failed}`)
+    if (totals.skipped > 0) {
+      if (!skippedRow.el.parentNode) summary.appendChild(skippedRow.el)
+      skippedRow.text(`skipped ${totals.skipped}`)
+    }
+    if (totals.todo > 0) {
+      if (!todoRow.el.parentNode) summary.appendChild(todoRow.el)
+      todoRow.text(`todo ${totals.todo}`)
+    }
+    if (done) {
+      if (!durationRow.el.parentNode) summary.appendChild(durationRow.el)
+      durationRow.text(`duration_ms ${(performance.now() - startTime).toFixed(5)}`)
+    }
+  }
+
+  function appendFileSuites(fileResults: FileResults) {
+    let suiteMap = new Map<string, TestResult[]>()
+    for (let test of fileResults.tests) {
+      let suite = test.suiteName || 'Tests'
+      if (!suiteMap.has(suite)) suiteMap.set(suite, [])
+      suiteMap.get(suite)!.push(test)
+    }
+    for (let [suiteName, tests] of suiteMap) {
+      suitesContainer.appendChild(buildSuite(suiteName, tests, setup.baseDir))
+    }
+  }
+
+  function appendRerunButton() {
+    let button = el('button', { className: 'rt-button', textContent: 'Re-run' })
+    button.type = 'button'
+    button.addEventListener('click', () => window.location.reload())
+    container.appendChild(button)
+  }
+
+  renderSummary(false)
+
+  void (async () => {
+    for (let testFile of setup.testPaths) {
+      let fileResults = await runInIframe(testFile)
+      await fetch('/file-results', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(fileResults),
+      })
+      totals.passed += fileResults.passed
+      totals.failed += fileResults.failed
+      totals.skipped += fileResults.skipped
+      totals.todo += fileResults.todo
+      appendFileSuites(fileResults)
+      renderSummary(false)
+    }
+    renderSummary(true)
+    appendRerunButton()
+    ;(window as unknown as { __testsDone?: boolean }).__testsDone = true
+  })()
+}
+
+function runInIframe(testFile: string): Promise<FileResults> {
+  return new Promise((resolve) => {
+    let iframe = document.createElement('iframe')
+    iframe.src = `/iframe?file=${encodeURIComponent(testFile)}`
+    document.body.appendChild(iframe)
+
+    function onMessage(event: MessageEvent) {
+      if (event.source !== iframe.contentWindow) return
+      window.removeEventListener('message', onMessage)
+      // Hide instead of remove so when coverage is enabled the iframe remains attached
+      // so V8 retains its scripts and Playwright can collect coverage at run end.
+      iframe.style.display = 'none'
+      if (event.data.type === 'test-results') {
+        let { passed, failed, skipped, todo, tests } = event.data.results as TestResults
+        resolve({
+          passed,
+          failed,
+          skipped,
+          todo,
+          tests: tests.map((t) => ({ ...t, filePath: testFile })),
+        })
+      } else {
+        let { message, stack } = event.data.error
+        resolve({
+          passed: 0,
+          failed: 1,
+          skipped: 0,
+          todo: 0,
+          tests: [
+            {
+              name: '',
+              suiteName: testFile,
+              filePath: testFile,
+              status: 'failed',
+              error: { message, stack },
+              duration: 0,
+            },
+          ],
+        })
+      }
+    }
+
+    window.addEventListener('message', onMessage)
+  })
+}
+
+function buildSuite(suiteName: string, tests: TestResult[], baseDir: string): HTMLElement {
+  let suiteFailed = tests.some((t) => t.status === 'failed')
+  let suiteAllSkipped = tests.every((t) => t.status === 'skipped')
+  let suiteAllTodo = tests.every((t) => t.status === 'todo')
+  let stateClass = suiteFailed
+    ? 'rt-failed'
+    : suiteAllSkipped
+      ? 'rt-muted'
+      : suiteAllTodo
+        ? 'rt-todo'
+        : 'rt-passed'
+  let icon = suiteFailed ? '✗' : suiteAllSkipped ? '↓' : suiteAllTodo ? '…' : '✓'
+  let suffix = suiteAllSkipped ? ' # skipped' : suiteAllTodo ? ' # todo' : ''
+
+  let details = el('details', { className: 'rt-suite-details' })
+  if (suiteFailed) details.open = true
+
+  let summary = el('summary', { className: `rt-suite-summary ${stateClass}` })
+  summary.appendChild(
+    el('span', { className: 'rt-suite-icon', textContent: `${icon} ${suiteName}${suffix}` }),
+  )
+  details.appendChild(summary)
+
+  let body = el('div', { className: 'rt-indent' })
+  for (let test of tests) {
+    let item = buildTestItem(test, baseDir)
+    if (item) body.appendChild(el('div', { className: 'rt-test-item' }, item))
+  }
+  details.appendChild(body)
+  return details
+}
+
+function buildTestItem(test: TestResult, baseDir: string): HTMLElement | null {
+  if (test.status === 'passed') {
+    let row = el('div', { className: 'rt-passed' })
+    row.append(`✓ ${test.name} `)
+    row.appendChild(
+      el('span', {
+        className: 'rt-test-duration',
+        textContent: `(${test.duration.toFixed(2)}ms)`,
+      }),
+    )
+    return row
+  }
+  if (test.status === 'failed') {
+    let row = el('div', { className: 'rt-failed' })
+    row.append(`✗ ${test.name} `)
+    row.appendChild(
+      el('span', {
+        className: 'rt-test-duration',
+        textContent: `(${test.duration.toFixed(2)}ms)`,
+      }),
+    )
+    if (test.error) {
+      let pre = el('pre', { className: 'rt-error-pre' })
+      pre.append(test.error.message)
+      if (test.error.stack) {
+        let stackDiv = el('div', { className: 'rt-error-stack' })
+        stackDiv.appendChild(buildStack(test.error.stack, baseDir))
+        pre.appendChild(stackDiv)
+      }
+      row.appendChild(pre)
+    }
+    return row
+  }
+  if (test.status === 'skipped' && test.name) {
+    return el('div', { className: 'rt-muted', textContent: `↓ ${test.name} # skipped` })
+  }
+  if (test.status === 'todo' && test.name) {
+    return el('div', { className: 'rt-todo', textContent: `… ${test.name} # todo` })
+  }
+  return null
+}
+
+function buildStack(stack: string, baseDir: string): DocumentFragment {
+  let frameLocRe = /([^():\s][^():]*\.[jt]sx?):(\d+):(\d+)/
+  let frag = document.createDocumentFragment()
+  for (let raw of stack.split('\n')) {
+    let isTestModule = raw.includes('/@test/')
+    let line = normalizeLine(raw)
+    let match = isTestModule ? frameLocRe.exec(line) : null
+    let div = document.createElement('div')
+    if (match) {
+      let [full, file, row, col] = match
+      let abs = `${baseDir}/${file}`
+      let href = `vscode://file/${abs}:${row}:${col}`
+      div.append(line.slice(0, match.index))
+      let a = el('a', { className: 'rt-stack-link', textContent: full })
+      a.href = href
+      div.appendChild(a)
+      div.append(line.slice(match.index + full.length))
+    } else {
+      div.textContent = line
+    }
+    frag.appendChild(div)
+  }
+  return frag
+}
+
+function summaryRow() {
+  let row = el('span', { className: 'rt-summary-row' })
+  let icon = el('span', { className: 'rt-info', textContent: 'ℹ' })
+  let textNode = document.createTextNode('')
+  row.append(icon, ' ', textNode)
+  return {
+    el: row,
+    text(s: string) {
+      textNode.data = ' ' + s
+    },
+  }
+}
+
+function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  props?: { id?: string; className?: string; textContent?: string },
+  ...children: Array<Node | string>
+): HTMLElementTagNameMap[K] {
+  let node = document.createElement(tag)
+  if (props?.id) node.id = props.id
+  if (props?.className) node.className = props.className
+  if (props?.textContent != null) node.textContent = props.textContent
+  if (children.length) node.append(...children)
+  return node
+}

package/src/app/client/iframe.ts

@@ -0,0 +1,18 @@
+import { runTests } from '../../lib/executor.ts'
+
+const params = new URLSearchParams(location.search)
+const testFile = params.get('file')!
+
+try {
+  await import(testFile)
+  let results = await runTests()
+  window.parent.postMessage({ type: 'test-results', results }, '*')
+} catch (error: any) {
+  window.parent.postMessage(
+    {
+      type: 'test-error',
+      error: { message: error?.message ?? String(error), stack: error?.stack },
+    },
+    '*',
+  )
+}

package/src/app/server.ts

@@ -0,0 +1,336 @@
+import { init as initEsModuleLexer, parse as parseEsModule } from 'es-module-lexer'
+import MagicString from 'magic-string'
+import * as fsp from 'node:fs/promises'
+import * as http from 'node:http'
+import { createRequire } from 'node:module'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { SourceMapConsumer, SourceMapGenerator } from 'source-map-js'
+import { getBrowserTestRootDir, IS_RUNNING_FROM_SRC } from '../lib/config.ts'
+import { transformTypeScript } from '../lib/ts-transform.ts'
+
+export async function startServer(
+  browserFiles: string[],
+): Promise<{ server: http.Server; port: number }> {
+  let handle = createRequestHandler(browserFiles)
+  let port = 44101
+
+  let lastError: unknown
+  for (let i = 0; i < 5; i++) {
+    try {
+      let server = http.createServer((req, res) => {
+        handle(req, res).catch((error) => {
+          console.error(`[remix-test] Unhandled error for ${req.url}:`, error)
+          if (!res.headersSent) {
+            res.writeHead(500, { 'Content-Type': 'text/plain' })
+          }
+          if (!res.writableEnded) res.end()
+        })
+      })
+      await new Promise<void>((resolve, reject) => {
+        server.once('error', reject)
+        server.listen(port, () => {
+          server.removeListener('error', reject)
+          console.log(`Test server running on http://localhost:${port}`)
+          resolve()
+        })
+      })
+      return { server, port }
+    } catch (error: any) {
+      if (error.code !== 'EADDRINUSE') throw error
+      lastError = error
+      console.log(`Port ${port} is in use, trying another port...`)
+      port += 1
+    }
+  }
+
+  throw lastError
+}
+
+function createRequestHandler(
+  browserFiles: string[],
+): (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void> {
+  let rootDir = getBrowserTestRootDir()
+  let srcDir = IS_RUNNING_FROM_SRC
+    ? // Up one directory from src/app/
+      path.join(path.dirname(fileURLToPath(import.meta.url)), '..')
+    : // Directory of the published index.js file
+      path.dirname(fileURLToPath(import.meta.resolve('@remix-run/test')))
+  let clientDir = path.join(srcDir, 'app', 'client')
+  let scriptExt = IS_RUNNING_FROM_SRC ? 'ts' : 'js'
+  let entryUrl = filePathToUrl(path.join(clientDir, `entry.${scriptExt}`), rootDir)
+  let iframeUrl = filePathToUrl(path.join(clientDir, `iframe.${scriptExt}`), rootDir)
+  if (!entryUrl || !iframeUrl) {
+    throw new Error(`Harness scripts in ${clientDir} are outside rootDir ${rootDir}`)
+  }
+
+  let testPaths = browserFiles.map((f) => filePathToUrl(f, rootDir)!)
+
+  return async (req, res) => {
+    let url = new URL(req.url ?? '/', 'http://localhost')
+
+    if (req.method !== 'GET') {
+      sendText(res, 405, 'Method Not Allowed')
+      return
+    }
+
+    if (url.pathname === '/') {
+      let setupJson = JSON.stringify({ testPaths, baseDir: process.cwd() })
+      let body =
+        `<script type="application/json" id="test-setup">` +
+        `${escapeJsonForScript(setupJson)}` +
+        `</script>` +
+        `<div id="test-root"></div>` +
+        `<script type="module" src="${entryUrl}"></script>`
+      sendHtml(res, 'Tests', body)
+      return
+    }
+
+    if (url.pathname === '/iframe') {
+      let test = decodeURIComponent(url.searchParams.get('file') || '')
+      sendHtml(res, `Test: ${test}`, `<script type="module" src="${iframeUrl}"></script>`)
+      return
+    }
+
+    if (url.pathname.startsWith('/scripts/')) {
+      let filePath = urlPathToFilePath(url.pathname, rootDir)
+      if (filePath) {
+        try {
+          await serveScript(res, filePath, url.pathname, rootDir)
+          return
+        } catch (error) {
+          console.error(`[remix-test] Error serving ${url.pathname}:`, error)
+          sendText(res, 500, String(error))
+          return
+        }
+      }
+    }
+
+    sendText(res, 404, 'Not found')
+  }
+}
+
+function filePathToUrl(filePath: string, rootDir: string): string | null {
+  let rel = path.relative(rootDir, filePath)
+  if (rel.startsWith('..') || path.isAbsolute(rel)) return null
+  return '/scripts/' + rel.split(path.sep).join('/')
+}
+
+// `/scripts/<rel>` → `<rootDir>/<rel>` (URL space mirrors the filesystem
+// rooted at rootDir, with `..` segments rejected so requests can't escape).
+function urlPathToFilePath(urlPath: string, rootDir: string): string | null {
+  if (!urlPath.startsWith('/scripts/')) return null
+  let relative = urlPath.slice('/scripts/'.length)
+  if (!relative) return null
+  let filePath = path.resolve(rootDir, relative)
+  if (filePath !== rootDir && !filePath.startsWith(rootDir + path.sep)) return null
+  return filePath
+}
+
+const TS_EXTS = new Set(['.ts', '.tsx', '.mts', '.cts'])
+const JS_EXTS = new Set(['.js', '.mjs', '.cjs', '.jsx'])
+
+async function serveScript(
+  res: http.ServerResponse,
+  filePath: string,
+  urlPath: string,
+  rootDir: string,
+): Promise<void> {
+  let ext = path.extname(filePath)
+  let isTs = TS_EXTS.has(ext)
+  let isJs = JS_EXTS.has(ext)
+  if (!isTs && !isJs) {
+    sendText(res, 400, `Unsupported script extension "${ext}" for ${urlPath}`)
+    return
+  }
+
+  let source = await fsp.readFile(filePath, 'utf-8')
+  let code: string
+  if (isTs) {
+    try {
+      let result = await transformTypeScript(source, filePath)
+      code = result.code
+    } catch (error) {
+      let msg = error instanceof Error ? error.message : String(error)
+      console.error(`[remix-test] Failed to transform ${urlPath}: ${msg}`)
+      sendText(res, 500, msg)
+      return
+    }
+  } else {
+    code = source
+  }
+
+  try {
+    code = await rewriteImports(code, filePath, rootDir)
+  } catch (error) {
+    let msg = error instanceof Error ? error.message : String(error)
+    console.error(`[remix-test] Failed to rewrite imports for ${urlPath}: ${msg}`)
+    sendText(res, 500, msg)
+    return
+  }
+
+  res.writeHead(200, { 'Content-Type': 'application/javascript' })
+  res.end(code)
+}
+
+// Rewrite every import/export specifier in the (already-transformed) source so
+// it points at an absolute `/scripts/<rel>` URL the harness can serve. Bare
+// specifiers go through Node's resolver; relative specifiers resolve against
+// the importer file's directory. This keeps the URL space === filesystem
+// layout so harness scripts (under clientDir) and source files (anywhere
+// under rootDir) can import each other without URL-relative confusion.
+//
+// Uses es-module-lexer (purpose-built ESM scanner) + magic-string so that the
+// edits compose cleanly with the inline TS→JS source map from
+// transformTypeScript: the resulting inline map is a true rewrittenJS → TS
+// map, not just the original TS → JS map slapped on top of mutated bytes.
+async function rewriteImports(
+  code: string,
+  importerFile: string,
+  rootDir: string,
+): Promise<string> {
+  await initEsModuleLexer
+
+  let { code: codeNoMap, map: tsToJsMap } = extractInlineSourceMap(code)
+  let [imports] = parseEsModule(codeNoMap)
+  let s = new MagicString(codeNoMap)
+  let edited = false
+
+  for (let imp of imports) {
+    // n is the parsed specifier value (with escapes resolved); undefined when
+    // the dynamic import argument isn't a static string literal.
+    if (imp.n == null) continue
+    let url = resolveSpecifier(imp.n, importerFile, rootDir)
+    if (url == null || url === imp.n) continue
+    s.overwrite(imp.s, imp.e, url)
+    edited = true
+  }
+
+  if (!edited) return code
+
+  let rewrittenCode = s.toString()
+  let rewriteMap = JSON.parse(s.generateMap({ hires: true }).toString())
+
+  let finalMap = tsToJsMap ? composeSourceMaps(rewriteMap, tsToJsMap) : rewriteMap
+  let mapJson = JSON.stringify(finalMap)
+  let mapBase64 = Buffer.from(mapJson).toString('base64')
+  return `${rewrittenCode}\n//# sourceMappingURL=data:application/json;base64,${mapBase64}`
+}
+
+// Strip the trailing `//# sourceMappingURL=data:application/json;base64,...`
+// comment and decode the embedded JSON.
+function extractInlineSourceMap(code: string): { code: string; map: unknown | null } {
+  let re =
+    /\n?\/\/# sourceMappingURL=data:application\/json(?:;charset=[^;,]+)?[;,]base64,([A-Za-z0-9+/=]+)\s*$/
+  let match = code.match(re)
+  if (!match || match.index == null) return { code, map: null }
+  try {
+    let decoded = Buffer.from(match[1], 'base64').toString('utf-8')
+    return { code: code.slice(0, match.index), map: JSON.parse(decoded) }
+  } catch {
+    return { code, map: null }
+  }
+}
+
+// Compose two source maps so positions in `secondMap`'s generated code map all
+// the way back to `firstMap`'s original sources. `secondMap`'s "original" must
+// be in the same coordinate space as `firstMap`'s "generated" — i.e. for our
+// case the input to magic-string is the output of transformTypeScript.
+function composeSourceMaps(secondMap: unknown, firstMap: unknown): unknown {
+  let secondConsumer = new SourceMapConsumer(secondMap as any)
+  let firstConsumer = new SourceMapConsumer(firstMap as any)
+  let gen = new SourceMapGenerator()
+
+  secondConsumer.eachMapping((mapping) => {
+    if (mapping.originalLine == null || mapping.originalColumn == null) return
+    let original = firstConsumer.originalPositionFor({
+      line: mapping.originalLine,
+      column: mapping.originalColumn,
+    })
+    if (original.line == null || original.column == null || original.source == null) return
+    gen.addMapping({
+      generated: { line: mapping.generatedLine, column: mapping.generatedColumn },
+      original: { line: original.line, column: original.column },
+      source: original.source,
+      name: original.name ?? mapping.name ?? undefined,
+    })
+  })
+
+  for (let source of firstConsumer.sources) {
+    let content = firstConsumer.sourceContentFor(source, true)
+    if (content !== null) gen.setSourceContent(source, content)
+  }
+
+  return gen.toJSON()
+}
+
+function resolveSpecifier(spec: string, importerFile: string, rootDir: string): string | null {
+  if (
+    spec.startsWith('node:') ||
+    spec.startsWith('http:') ||
+    spec.startsWith('https:') ||
+    spec.startsWith('data:') ||
+    spec.startsWith('/scripts/')
+  ) {
+    return null
+  }
+
+  let resolvedPath: string
+  if (spec.startsWith('.') || spec.startsWith('/')) {
+    resolvedPath = path.resolve(path.dirname(importerFile), spec)
+  } else {
+    // Bare specifiers must be resolved from the importer's filesystem
+    // location, not this module's. `import.meta.resolve(spec, parent)` looks
+    // like the right tool but its `parent` argument is gated behind
+    // `--experimental-import-meta-resolve` through at least Node 24 —
+    // without the flag, the parent argument is silently ignored and
+    // resolution happens from `import.meta.url` of the calling module. That
+    // made bare specifiers only resolvable when they were direct deps of
+    // `@remix-run/test` itself (so `remix/assert` failed even when the
+    // importing package depended on `remix`). `createRequire` walks
+    // node_modules from the importer's actual location and has been stable
+    // since Node 12 with no flags.
+    try {
+      resolvedPath = createRequire(importerFile).resolve(spec)
+    } catch {
+      return null
+    }
+  }
+
+  return filePathToUrl(resolvedPath, rootDir)
+}
+
+function sendHtml(res: http.ServerResponse, title: string, body: string): void {
+  let doc =
+    `<!DOCTYPE html>` +
+    `<html>` +
+    `<head>` +
+    `<meta charset="utf-8">` +
+    `<title>${escapeHtml(title)}</title>` +
+    `</head>` +
+    `<body>${body}</body>` +
+    `</html>`
+  res.writeHead(200, { 'Content-Type': 'text/html' })
+  res.end(doc)
+}
+
+function sendText(res: http.ServerResponse, status: number, body: string): void {
+  res.writeHead(status, { 'Content-Type': 'text/plain' })
+  res.end(body)
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+// Prevent the embedded JSON from terminating the surrounding <script> element
+// or being interpreted as HTML. Only `</` needs escaping inside an
+// `application/json` block; the leading `<` is preserved as `<` in the
+// emitted JSON so JSON.parse round-trips it unchanged.
+function escapeJsonForScript(json: string): string {
+  return json.replace(/</g, '\\u003c')
+}