chore: make nuxt-init spinner frames deterministic (#1497)

Author: danielroe

capture/README.md

@@ -46,6 +46,8 @@ Each SVG is scrubbed of ports, LAN addresses, home and temporary directories, an
 
 `nuxt module search` is recorded against `capture/fixture-data/modules.json` instead of the live `api.nuxt.com`. You can refresh the fixture when the docs should show newer modules.
 
+`capture/lib/fetch-stub.mjs` also applies a latency floor (`CAPTURE_FETCH_LATENCY`) where a scenario asks for one, so a request cannot outrun the spinner covering it and leave the recording without one.
+
 `nuxt-dev-install-module` stubs everything the auto-install flow reaches for: the modules DB and the npm registry are answered from `capture/fixture-data/`, and `capture/fixture-data/fake-npm/` shadows `npm` on `PATH` to fake the install itself, so the recording needs no network and the fixture app is restored afterwards.
 
 ## Before and after comparisons

capture/captures.config.ts

@@ -254,6 +254,10 @@ export const captures: Capture[] = [
     animated: true,
     rows: 24,
     scrub: DEFAULT_SCRUB,
+    env: {
+      NODE_OPTIONS: `--import=${new URL('lib/fetch-stub.mjs', import.meta.url).href}`,
+      CAPTURE_FETCH_LATENCY: '250',
+    },
     async drive({ session }) {
       await session.waitFor(/Which template/, 60_000)
       await session.wait(1200)

capture/lib/fetch-stub.mjs

@@ -4,21 +4,32 @@
 //
 // CAPTURE_FETCH_STUBS is a JSON object mapping a URL prefix to the absolute
 // path of a JSON file served as the response body.
+//
+// CAPTURE_FETCH_LATENCY is a floor, in milliseconds, on how long every request
+// takes. A prompt spinner is only ever drawn from its 80ms repaint timer, so a
+// request that resolves sooner than that leaves no trace in the recording at
+// all: the floor keeps the spinner on screen whatever the link is doing.
 
 import { readFileSync } from 'node:fs'
 
 const stubs = Object.entries(JSON.parse(process.env.CAPTURE_FETCH_STUBS ?? '{}'))
+const latency = Number(process.env.CAPTURE_FETCH_LATENCY ?? 0)
 const realFetch = globalThis.fetch
 
 globalThis.fetch = async (input, init) => {
   const url = typeof input === 'string' ? input : input.url ?? String(input)
+  const settled = latency > 0 ? new Promise(resolve => setTimeout(resolve, latency)) : undefined
   for (const [prefix, file] of stubs) {
     if (url.startsWith(prefix)) {
-      return new Response(readFileSync(file, 'utf8'), {
+      const body = readFileSync(file, 'utf8')
+      await settled
+      return new Response(body, {
         status: 200,
         headers: { 'content-type': 'application/json' },
       })
     }
   }
-  return realFetch(input, init)
+  const response = await realFetch(input, init)
+  await settled
+  return response
 }

capture/lib/scrub.ts

@@ -81,6 +81,10 @@ const RULES: Record<string, ScrubRule> = {
     steps: [
       { pattern: /[⠙⠹⠸⠼⠴⠦⠧⠇⠏]/g, replacement: () => '⠋' },
       { pattern: /[◒◓◑]/g, replacement: () => '◐' },
+      // A prompt spinner also animates a trailing run of up to three dots, so
+      // how many of them a recording caught is a function of how long the work
+      // took. The message itself is what identifies the line.
+      { pattern: /^(\s*◐\s.*?)\.{1,3}(\s*)$/g, replacement: match => match[1]! + match[2]! },
     ],
   },
   qr: {

capture/output/nuxt-init.svg

@@ -1,4 +1,4 @@
-styles: 5e2e229d1874e510
+styles: e4d222f3658202ee
         .d$b.
        i$$A$$L  .d$b
      .$$F` `$$L.$$A$$.

capture/output/nuxt-init.txt

@@ -123,6 +123,19 @@ async function ensureDevServer(): Promise<void> {
   await devServer.wait(1500)
 }
 
+/**
+ * A capture's `NODE_OPTIONS` adds to the ambient value rather than replacing
+ * it: scenarios use it to preload a loader, while the environment may already
+ * carry options the recorded CLI needs to reach the network at all (proxy
+ * support, TLS roots) or to run at all (heap limits).
+ */
+function captureEnv(capture: Capture): Record<string, string> | undefined {
+  if (!capture.env?.NODE_OPTIONS || !process.env.NODE_OPTIONS) {
+    return capture.env
+  }
+  return { ...capture.env, NODE_OPTIONS: `${process.env.NODE_OPTIONS} ${capture.env.NODE_OPTIONS}` }
+}
+
 async function runCapture(capture: Capture): Promise<void> {
   const columns = capture.columns ?? Number(values.columns)
   const rows = capture.rows ?? 24
@@ -142,7 +155,7 @@ async function runCapture(capture: Capture): Promise<void> {
     cwd,
     columns,
     rows,
-    env: capture.env,
+    env: captureEnv(capture),
   })
 
   // Whatever happens, the session must not outlive its capture: a leaked dev