snappy-prerender 2.6.0-rc.3 → 2.7.0

package/src/core/csp.js

@@ -0,0 +1,127 @@
+import { createHash } from 'node:crypto';
+import { parse, serialize } from 'parse5';
+
+// Types that execute as JavaScript. A script with any other type is data, not code.
+const EXECUTABLE_TYPES = new Set([
+  '',
+  'text/javascript',
+  'application/javascript',
+  'application/ecmascript',
+  'text/ecmascript',
+  'module',
+]);
+const CSP_MARKER = 'data-snappy-csp';
+
+/**
+ * Adds a hash-based Content-Security-Policy meta tag covering every inline script and
+ * style in the final document. A policy this function wrote on an earlier run is
+ * replaced; a policy the app wrote is kept untouched, so the prerenderer never merges
+ * two policies silently.
+ */
+export function applyCspHashes(html) {
+  const document = parse(html);
+  const head = findHead(document);
+  if (!head) return { html, hashedScripts: 0, hashedStyles: 0, existingPolicy: false };
+  removeGeneratedPolicy(head);
+  const existing = findPolicyMeta(head);
+  if (existing) return { html, hashedScripts: 0, hashedStyles: 0, existingPolicy: true };
+
+  const scriptHashes = [];
+  const styleHashes = [];
+  walk(document, (node) => {
+    if (node.tagName === 'script' && isExecutableInline(node)) {
+      scriptHashes.push(hashOf(textContent(node)));
+    }
+    if (node.tagName === 'style') {
+      styleHashes.push(hashOf(textContent(node)));
+    }
+  });
+
+  const directives = [
+    `script-src 'self'${hashList(scriptHashes)}`,
+    `style-src 'self'${hashList(styleHashes)}`,
+  ];
+  head.childNodes.unshift(metaNode(directives.join('; ')));
+  return {
+    html: serialize(document),
+    hashedScripts: scriptHashes.length,
+    hashedStyles: styleHashes.length,
+    existingPolicy: false,
+  };
+}
+
+// A script is executable inline code when it has no src and no data type.
+function isExecutableInline(node) {
+  if (attribute(node, 'src').length > 0) return false;
+  const type = attribute(node, 'type').trim().toLowerCase();
+  return EXECUTABLE_TYPES.has(type);
+}
+
+// Renders the hash list, deduplicated and in document order.
+function hashList(hashes) {
+  return [...new Set(hashes)].map((hash) => ` '${hash}'`).join('');
+}
+
+// Base64 SHA-256, the form a CSP hash source uses.
+function hashOf(text) {
+  return `sha256-${createHash('sha256').update(text).digest('base64')}`;
+}
+
+function findHead(document) {
+  const html = (document.childNodes ?? []).find((node) => node.tagName === 'html');
+  return (html?.childNodes ?? []).find((node) => node.tagName === 'head') ?? null;
+}
+
+function findPolicyMeta(head) {
+  return (head.childNodes ?? []).some(
+    (node) =>
+      node.tagName === 'meta' &&
+      attribute(node, 'http-equiv').toLowerCase() === 'content-security-policy' &&
+      !hasAttribute(node, CSP_MARKER),
+  );
+}
+
+// Removes the policy this prerenderer wrote on an earlier run, so it is recomputed against
+// the current document instead of being mistaken for an app-owned policy.
+function removeGeneratedPolicy(head) {
+  head.childNodes = (head.childNodes ?? []).filter(
+    (node) => !(node.tagName === 'meta' && hasAttribute(node, CSP_MARKER)),
+  );
+}
+
+function metaNode(content) {
+  return {
+    nodeName: 'meta',
+    tagName: 'meta',
+    attrs: [
+      { name: 'http-equiv', value: 'Content-Security-Policy' },
+      { name: 'content', value: content },
+      { name: CSP_MARKER, value: '' },
+    ],
+    namespaceURI: 'http://www.w3.org/1999/xhtml',
+    childNodes: [],
+    parentNode: null,
+  };
+}
+
+function walk(node, visit) {
+  visit(node);
+  for (const child of node.childNodes ?? []) walk(child, visit);
+}
+
+function textContent(node) {
+  let text = '';
+  for (const child of node.childNodes ?? []) {
+    if (child.nodeName === '#text') text += child.value;
+    else text += textContent(child);
+  }
+  return text;
+}
+
+function attribute(node, name) {
+  return node.attrs?.find((entry) => entry.name === name)?.value ?? '';
+}
+
+function hasAttribute(node, name) {
+  return Boolean(node.attrs?.some((entry) => entry.name === name));
+}

package/src/core/css-url.js

@@ -0,0 +1,34 @@
+const URL_TOKEN = /url\(\s*(['"]?)([^'")]+)\1\s*\)/gi;
+const NON_LOCAL = /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i;
+
+/**
+ * Rebases the relative url() values in a stylesheet against the stylesheet's own URL.
+ * Moving a sheet from /assets/app.css into a <style> element would otherwise resolve
+ * its fonts and images against the page URL, which differs on nested routes. Local
+ * URLs become root-relative so they work from any page depth.
+ */
+export function rewriteCssUrls(css, stylesheetUrl, pageOrigin) {
+  return css.replace(URL_TOKEN, (match, quote, value) => {
+    const target = value.trim();
+    if (target.length === 0 || NON_LOCAL.test(target)) return match;
+    let resolved;
+    try {
+      resolved = new URL(target, stylesheetUrl);
+    } catch {
+      return match;
+    }
+    const next =
+      resolved.origin === pageOrigin
+        ? `${resolved.pathname}${resolved.search}${resolved.hash}`
+        : resolved.href;
+    return `url(${quote}${next}${quote})`;
+  });
+}
+
+/**
+ * Reports whether a stylesheet uses @import. Inlining cannot preserve the rule's
+ * position in the cascade, so the caller leaves that sheet as a link instead.
+ */
+export function hasImportRule(css) {
+  return /@import\b/i.test(css);
+}

package/src/core/destination.js

@@ -7,9 +7,34 @@ import path from 'node:path';
  * HTML and the source directory stays untouched. An existing destination is reported
  * before it is overwritten, and entries that cannot be copied are counted.
  */
-export async function prepareDestination({ sourceDir, destination, log }) {
-  if (!destination || path.resolve(destination) === path.resolve(sourceDir)) {
-    return sourceDir;
+export async function prepareDestination({
+  sourceDir,
+  destination,
+  log,
+  cleanDestination = false,
+}) {
+  if (!destination) return path.resolve(sourceDir);
+  const source = path.resolve(sourceDir);
+  const target = path.resolve(destination);
+  if (target === source) return source;
+  if (target.startsWith(`${source}${path.sep}`)) {
+    throw new Error(
+      `destination cannot be inside sourceDir: ${target} is inside ${source}. Use a sibling directory.`,
+    );
+  }
+  if (cleanDestination) {
+    const sourceInsideTarget = path.relative(target, source);
+    if (
+      sourceInsideTarget.length > 0 &&
+      !sourceInsideTarget.startsWith('..') &&
+      !path.isAbsolute(sourceInsideTarget)
+    ) {
+      throw new Error(
+        `cleanDestination would delete sourceDir: ${source} is inside ${target}. Choose a destination outside the build output.`,
+      );
+    }
+    await fs.rm(target, { recursive: true, force: true });
+    log?.debug(`cleaned destination ${destination}`);
   }
   const existing = await fs.readdir(destination).catch(() => []);
   if (existing.length > 0) {

package/src/core/frameworks.js

@@ -0,0 +1,94 @@
+const REACT = (container) =>
+  Object.keys(container).some(
+    (key) => key.startsWith('__reactContainer') || key === '_reactRootContainer',
+  );
+const VUE = (container) =>
+  Boolean(
+    container.__vue_app__ ||
+      container.__vueParentComponent ||
+      container._vnode ||
+      container.__vue__,
+  );
+const PREACT = (container) =>
+  Boolean(
+    container.__k ||
+      container._children ||
+      container.firstElementChild?.__k ||
+      container.firstElementChild?._children,
+  );
+const SVELTE = (container) =>
+  Boolean(container.__svelte_meta || container.querySelector?.('[data-svelte-h]'));
+
+const DETECTORS = { react: REACT, vue: VUE, preact: PREACT, svelte: SVELTE };
+const AUTO_ORDER = ['react', 'vue', 'preact', 'svelte'];
+
+/**
+ * Detects the framework that mounted into a container from its DOM markers. This is
+ * observation only: no framework is imported or executed by the prerenderer.
+ */
+export function detectFramework(container, requested = 'auto') {
+  if (!container) return { name: null, mounted: false };
+  if (requested !== 'auto') {
+    return { name: requested, mounted: Boolean(DETECTORS[requested]?.(container)) };
+  }
+  const markers = {
+    react: REACT(container),
+    vue: VUE(container),
+    preact: PREACT(container),
+    svelte: SVELTE(container),
+  };
+  return frameworkFromMarkers(markers, requested);
+}
+
+/**
+ * Selects a framework from a plain marker map produced inside the page, where DOM
+ * object identity is not available to Node.
+ */
+export function frameworkFromMarkers(markers, requested = 'auto') {
+  if (requested !== 'auto') {
+    return { name: requested, mounted: markers?.[requested] === true };
+  }
+  for (const name of AUTO_ORDER) {
+    if (markers?.[name] === true) return { name, mounted: true };
+  }
+  return { name: null, mounted: false };
+}
+
+const COMMON_PATTERNS = [
+  /react\.dev\/errors\/(418|419|421|422|423|424|425)/i,
+  /Minified React error #(418|419|421|422|423|424|425)\b/i,
+];
+
+const FRAMEWORK_PATTERNS = {
+  react: [
+    ...COMMON_PATTERNS,
+    /hydrat/i,
+    /text content did not match/i,
+    /prop [`"].+?[`"] did not match/i,
+    /server-rendered HTML/i,
+    /did not expect server HTML/i,
+    /expected server HTML to contain/i,
+  ],
+  preact: [
+    ...COMMON_PATTERNS,
+    /hydrat/i,
+    /text content did not match/i,
+    /did not expect server HTML/i,
+  ],
+  vue: [/hydration (?:node|text|children) mismatch/i, /hydration-mismatch/i, /hydrat/i],
+  svelte: [/hydration_mismatch/i, /hydration failed/i],
+};
+
+/**
+ * Classifies a console or page error as a hydration failure for the detected framework.
+ * Patterns stay narrow so an unrelated application error is not treated as a build gate.
+ * With `auto`, every framework set is tried because the framework was not established.
+ */
+export function isHydrationError(message, framework = 'auto') {
+  const text = String(message);
+  const patterns =
+    framework === 'auto'
+      ? Object.values(FRAMEWORK_PATTERNS).flat()
+      : [...(FRAMEWORK_PATTERNS[framework] ?? [])];
+  return patterns.some((pattern) => pattern.test(text));
+}

package/src/core/hydration-diff.js

@@ -0,0 +1,93 @@
+import { parse } from 'parse5';
+
+const CONTAINER_IDS = new Set(['root', 'app', '__next']);
+const STABLE_ATTRIBUTES = ['id', 'class', 'href', 'src', 'type', 'role', 'name'];
+const MAX_NODES = 5000;
+const MAX_DEPTH = 20;
+
+/**
+ * Finds the first meaningful difference between the prerendered document and the live
+ * post-boot container. Bounded so a large app cannot turn verification into a memory
+ * problem.
+ */
+export function compareContainers(expectedHtml, liveHtml) {
+  const expected = containerOf(parse(expectedHtml));
+  const actual = containerOf(parse(liveHtml));
+  if (!expected || !actual) return null;
+  const state = { visited: 0 };
+  return diffNode(expected, actual, 'body', 0, state);
+}
+
+// Finds the app container in a parsed document, falling back to the body's first child.
+function containerOf(document) {
+  const html = (document.childNodes ?? []).find((node) => node.tagName === 'html');
+  const body = (html?.childNodes ?? []).find((node) => node.tagName === 'body');
+  if (!body) return null;
+  const container = (body.childNodes ?? []).find(
+    (node) => node.tagName && CONTAINER_IDS.has(attribute(node, 'id')),
+  );
+  return container ?? (body.childNodes ?? []).find((node) => node.tagName) ?? null;
+}
+
+// Compares one node pair and descends into the first differing child.
+function diffNode(expected, actual, path, depth, state) {
+  if (state.visited > MAX_NODES || depth > MAX_DEPTH) return null;
+  state.visited += 1;
+  const here = `${path}>${expected.tagName ?? expected.nodeName}`;
+  if (!actual || expected.tagName !== actual.tagName) {
+    return {
+      path,
+      kind: 'tag',
+      expected: expected.tagName ?? expected.nodeName,
+      actual: actual?.tagName ?? actual?.nodeName ?? null,
+    };
+  }
+  for (const name of STABLE_ATTRIBUTES) {
+    const left = attribute(expected, name);
+    const right = attribute(actual, name);
+    if (left !== right)
+      return { path: here, kind: 'attribute', name, expected: left, actual: right };
+  }
+  const expectedChildren = elementChildren(expected);
+  const actualChildren = elementChildren(actual);
+  for (let index = 0; index < expectedChildren.length; index += 1) {
+    const child = expectedChildren[index];
+    const other = actualChildren[index];
+    if (!other) {
+      return {
+        path: here,
+        kind: 'missing',
+        expected: child.tagName ?? child.nodeName,
+        actual: null,
+      };
+    }
+    const difference = diffNode(child, other, `${here}[${index}]`, depth + 1, state);
+    if (difference) return difference;
+  }
+  if (actualChildren.length > expectedChildren.length) {
+    const extra = actualChildren[expectedChildren.length];
+    return { path: here, kind: 'extra', expected: null, actual: extra.tagName ?? extra.nodeName };
+  }
+  const expectedText = directText(expected);
+  const actualText = directText(actual);
+  if (expectedText !== actualText) {
+    return { path: here, kind: 'text', expected: expectedText, actual: actualText };
+  }
+  return null;
+}
+
+function elementChildren(node) {
+  return (node.childNodes ?? []).filter((child) => child.tagName);
+}
+
+function directText(node) {
+  return (node.childNodes ?? [])
+    .filter((child) => child.nodeName === '#text')
+    .map((child) => child.value)
+    .join('')
+    .trim();
+}
+
+function attribute(node, name) {
+  return node.attrs?.find((entry) => entry.name === name)?.value ?? '';
+}

package/src/core/init.js

@@ -1,5 +1,8 @@
 import fs from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { DEFAULTS } from './config.js';
 import { normaliseRoute } from './routes.js';
 
 export const CONFIG_FILE = 'snappy.config.js';
@@ -13,6 +16,47 @@ const RUNNERS = [
   ['package-lock.json', 'npm'],
 ];
 
+// react-snap options whose name differs here, mapped to this package's option.
+const REACT_SNAP_RENAMED = {
+  source: 'sourceDir',
+  puppeteerArgs: 'browserArgs',
+  puppeteerIgnoreHTTPSErrors: 'ignoreHTTPSErrors',
+  skipThirdPartyRequests: 'blockThirdParty',
+  fixInsertRule: 'captureRuntimeStyles',
+  fixFormFields: 'captureFormState',
+  http2PushManifest: 'preloadManifest',
+};
+
+// react-snap options that keep their name and meaning.
+const REACT_SNAP_PASSTHROUGH = new Set([
+  'include',
+  'exclude',
+  'crawl',
+  'concurrency',
+  'timeout',
+  'waitFor',
+  'inlineCss',
+  'minifyHtml',
+  'minifyCss',
+  'cacheAjaxRequests',
+  'preconnectThirdParty',
+  'preloadImages',
+  'removeBlobs',
+  'removeStyleTags',
+  'removeScriptTags',
+  'asyncScriptTags',
+  'userAgent',
+  'viewport',
+  'saveAs',
+  'destination',
+]);
+
+// react-snap options that cannot be carried over, with the reason shown to the user.
+const REACT_SNAP_IGNORED = {
+  port: 'the prerenderer serves the build itself on an ephemeral port',
+  sourceMaps: 'react-snap declares it but never uses it',
+};
+
 /**
  * Reads what the project already says about itself: the framework that decides the build
  * directory, whether Vite is in use, which package runner it uses, and whether this package
@@ -23,12 +67,101 @@ export async function detectProjectDefaults(dir = process.cwd()) {
   const dependencies = { ...manifest?.dependencies, ...manifest?.devDependencies };
   const usesVite = Boolean(dependencies.vite) || (await anyExists(dir, VITE_CONFIGS));
   const usesCreateReactApp = Boolean(dependencies['react-scripts']) && !usesVite;
-  return {
-    sourceDir: usesCreateReactApp ? 'build' : 'dist',
+  const vite = usesVite ? await detectViteConfig(dir) : null;
+  const detected = {
+    sourceDir: vite?.sourceDir ?? (usesCreateReactApp ? 'build' : 'dist'),
+    base: vite?.base ?? homepageBase(manifest?.homepage) ?? '/',
     usesVite,
     runner: await detectRunner(dir),
     installed: PACKAGE_NAME in dependencies,
   };
+  const reactSnap = mapReactSnapOptions(manifest?.reactSnap);
+  if (reactSnap) detected.reactSnap = reactSnap;
+  return detected;
+}
+
+/**
+ * Maps a legacy react-snap block onto this package's options. The result lists what
+ * carried over, what was deliberately dropped and what was not recognised, so the
+ * wizard can explain the migration instead of guessing.
+ */
+export function mapReactSnapOptions(block) {
+  if (typeof block !== 'object' || block === null || Array.isArray(block)) return null;
+  const values = {};
+  const mapping = [];
+  const ignored = [];
+  const unknown = [];
+  for (const [key, value] of Object.entries(block)) {
+    if (Object.hasOwn(REACT_SNAP_IGNORED, key)) {
+      ignored.push({ key, reason: REACT_SNAP_IGNORED[key] });
+      continue;
+    }
+    const target = REACT_SNAP_RENAMED[key] ?? (REACT_SNAP_PASSTHROUGH.has(key) ? key : null);
+    if (target === null) {
+      unknown.push(key);
+      continue;
+    }
+    // JSON cannot carry functions or RegExp, but a hand-written manifest may.
+    if (!isSerialisable(value)) {
+      unknown.push(`${key} (unsupported value)`);
+      continue;
+    }
+    const mappedValue =
+      target === 'include' && typeof value === 'string' ? parseRouteList(value) : value;
+    values[target] = mappedValue;
+    mapping.push({ from: key, to: target, value: mappedValue });
+  }
+  return { values, mapping, ignored, unknown };
+}
+
+// Reports whether a value can be written into a JavaScript config file.
+function isSerialisable(value) {
+  if (value === null) return true;
+  if (['string', 'number', 'boolean'].includes(typeof value)) return true;
+  if (Array.isArray(value)) return value.every(isSerialisable);
+  if (typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
+    return Object.values(value).every(isSerialisable);
+  }
+  return false;
+}
+
+/**
+ * Reads the project's real Vite output directory and base when Vite can be resolved
+ * from that project. Falls back to the conventional defaults when the config is
+ * missing, imports an unavailable plugin, or Vite is not installed.
+ */
+async function detectViteConfig(dir) {
+  try {
+    const require = createRequire(path.join(dir, 'package.json'));
+    const entry = require.resolve('vite');
+    const { resolveConfig } = await import(pathToFileURL(entry).href);
+    const resolved = await resolveConfig({ root: dir, logLevel: 'silent' }, 'build');
+    const relative = path.relative(dir, resolved.build.outDir);
+    return {
+      sourceDir: relative.startsWith('..') ? resolved.build.outDir : relative || '.',
+      base: detectedBase(resolved.base),
+    };
+  } catch {
+    return null;
+  }
+}
+
+// Keeps a detected base usable by normaliseBase: only root-relative bases apply here.
+function detectedBase(base) {
+  if (typeof base !== 'string' || !base.startsWith('/') || base.startsWith('//')) return '/';
+  return base.endsWith('/') ? base : `${base}/`;
+}
+
+// Reads Create React App's homepage into a base path, ignoring absolute deployments
+// and values that are not a path.
+function homepageBase(homepage) {
+  if (typeof homepage !== 'string' || homepage.length === 0) return null;
+  try {
+    const url = new URL(homepage, 'https://example.invalid');
+    return url.pathname.endsWith('/') ? url.pathname : `${url.pathname}/`;
+  } catch {
+    return null;
+  }
 }
 
 /**
@@ -44,46 +177,74 @@ export function parseRouteList(input) {
   return routes.length > 0 ? routes : ['/'];
 }
 
+/**
+ * Turns the wizard's answers into the options object the generated config will export.
+ * Only values that change a default are included, and only options the resolver knows.
+ */
+export function configValuesFromAnswers(answers = {}) {
+  const values = { sourceDir: answers.sourceDir ?? 'dist' };
+  if (answers.base && answers.base !== '/') values.base = answers.base;
+  // A supplied include list acts as an allowlist, so writing the default would stop discovery.
+  const includeValue = answers.include ?? ['/'];
+  const include = parseRouteList(
+    Array.isArray(includeValue) ? includeValue.join(',') : includeValue,
+  );
+  const includeIsDefault = include.length === 1 && include[0] === '/';
+  if (!includeIsDefault) values.include = include;
+  if (answers.crawl === false) values.crawl = false;
+  if (answers.csp === 'strict' || answers.csp === 'hash') values.csp = answers.csp;
+  if (answers.externalScripts === true) values.externalScripts = true;
+  if (answers.criticalCssPreload !== undefined && answers.criticalCssPreload !== 'media') {
+    values.criticalCssPreload = answers.criticalCssPreload;
+  }
+
+  const metadata = METADATA_KEYS.filter((key) => answers[key]).map((key) => [key, answers[key]]);
+  if (metadata.length > 0) values.metadata = Object.fromEntries(metadata);
+
+  for (const [key, value] of Object.entries(answers.extraOptions ?? {})) {
+    if (!Object.hasOwn(DEFAULTS, key) || key === 'metadata') continue;
+    if (Object.hasOwn(values, key)) continue;
+    if (!isSerialisable(value)) continue;
+    values[key] = value;
+  }
+  return values;
+}
+
 /**
  * Renders the config file for the wizard's answers, writing only the options the answers
  * actually set so every line in the file does something.
  */
 export function renderConfigFile(answers = {}) {
+  const values = configValuesFromAnswers(answers);
   const lines = [
     '// Created by `snappy-prerender init`. Every option is documented in the snappy-prerender README.',
     'export default {',
-    `  sourceDir: ${quote(answers.sourceDir ?? 'dist')},`,
   ];
-  if (answers.base && answers.base !== '/') lines.push(`  base: ${quote(answers.base)},`);
-  // A supplied include list acts as an allowlist, so writing the default would stop discovery.
-  // It is only written when the answer actually narrows the set of routes.
-  const include = parseRouteList((answers.include ?? ['/']).join(','));
-  const includeIsDefault = include.length === 1 && include[0] === '/';
-  if (!includeIsDefault) lines.push(`  include: [${include.map(quote).join(', ')}],`);
-  if (answers.crawl === false) lines.push('  crawl: false,');
-  // The CSP dial and the parts it was tuned with, so a strict-CSP project keeps the choice.
-  if (answers.csp === 'strict') lines.push('  csp: "strict",');
-  if (answers.externalScripts === true) lines.push('  externalScripts: true,');
-  if (answers.criticalCssPreload !== undefined && answers.criticalCssPreload !== 'media') {
-    // A boolean stays a literal; a mode name is quoted.
-    const value =
-      typeof answers.criticalCssPreload === 'boolean'
-        ? String(answers.criticalCssPreload)
-        : quote(answers.criticalCssPreload);
-    lines.push(`  criticalCssPreload: ${value},`);
-  }
-
-  const metadata = METADATA_KEYS.filter((key) => answers[key]).map((key) => [key, answers[key]]);
-  if (metadata.length > 0) {
+  for (const [key, value] of Object.entries(values)) {
+    if (key !== 'metadata') {
+      lines.push(`  ${key}: ${serializeValue(value)},`);
+      continue;
+    }
     lines.push('  metadata: {');
-    for (const [key, value] of metadata) lines.push(`    ${key}: ${quote(value)},`);
+    for (const [metadataKey, metadataValue] of Object.entries(value)) {
+      lines.push(`    ${metadataKey}: ${serializeValue(metadataValue)},`);
+    }
     lines.push('  },');
   }
-
   lines.push('};', '');
   return lines.join('\n');
 }
 
+// Writes a JSON-compatible value as JavaScript source with a stable, readable shape.
+function serializeValue(value) {
+  if (Array.isArray(value)) return `[${value.map(serializeValue).join(', ')}]`;
+  if (value !== null && typeof value === 'object') {
+    const entries = Object.entries(value).map(([key, entry]) => `${key}: ${serializeValue(entry)}`);
+    return `{ ${entries.join(', ')} }`;
+  }
+  return JSON.stringify(value);
+}
+
 /**
  * Writes the config file into the project, refusing to replace an existing one unless the
  * caller asked for it, so a wizard run can never silently destroy hand-written settings.
@@ -97,11 +258,6 @@ export async function writeConfigFile({ dir, contents, force = false }) {
   return target;
 }
 
-// Quotes a string for the generated module.
-function quote(value) {
-  return JSON.stringify(String(value));
-}
-
 // Reads a JSON file, treating a missing or malformed file as absent.
 async function readJson(file) {
   try {