fix(dev): handle keyboard input before dev server is up + running

capture/lib/frames.spec.ts

@@ -2,6 +2,7 @@ import type { Chunk } from './pty.ts'
 
 import { describe, expect, it } from 'vitest'
 import { buildFingerprint } from './frames.ts'
+import { resolveRules, scrubLine } from './scrub.ts'
 
 /**
  * How each progress display we record repaints. They disagree, and reading only
@@ -57,3 +58,63 @@ describe('capture fingerprint', () => {
     })
   }
 })
+
+describe('scrubbing a right-aligned tag', () => {
+  const TAG = 'nitro'
+  const WIDTH = 96
+
+  /** One consola line as it would be rendered for a given real duration. */
+  function rendered(duration: string): string {
+    const message = `✔ Nuxt Nitro server built in ${duration}`
+    return message + ' '.repeat(WIDTH - message.length - TAG.length) + TAG
+  }
+
+  function scrub(duration: string): string {
+    const line = rendered(duration)
+    const styles = Array.from({ length: line.length }).fill(undefined) as never
+    return scrubLine(line, styles, resolveRules(['timings'])).line
+  }
+
+  it('should put the tag in the same column however long the duration was', () => {
+    const durations = ['1085 ms', '986 ms', '9 ms', '42 ms', '1.2 s']
+    const scrubbed = durations.map(scrub)
+
+    for (const line of scrubbed) {
+      expect(line).toBe(scrubbed[0])
+      expect(line).toHaveLength(WIDTH)
+    }
+  })
+
+  it('should leave indentation and gaps inside a message alone', () => {
+    const untagged = [
+      '   config 1085 ms · modules 42 ms',
+      '●  Nuxt 1085 ms and more',
+      '  ➜ DevTools: 1085 ms',
+      '  Ready in 1085 ms  → http://localhost:3000/',
+    ]
+
+    for (const content of untagged) {
+      const line = content.padEnd(WIDTH)
+      const styles = Array.from({ length: line.length }).fill(undefined) as never
+
+      expect(scrubLine(line, styles, resolveRules(['timings'])).line.trimEnd())
+        .toBe(content.replaceAll('1085 ms', '42 ms'))
+    }
+  })
+
+  it('should keep the styles aligned with the re-padded line', () => {
+    const line = rendered('1085 ms')
+    const styles = Array.from({ length: line.length }, (_, index) => index) as never
+    const result = scrubLine(line, styles, resolveRules(['timings']))
+
+    expect(result.styles).toHaveLength(result.line.length)
+  })
+
+  it('should leave a line without padding alone', () => {
+    expect(scrub('42 ms').trimEnd()).not.toBe('')
+    const plain = '✔ Vite client built in 1085 ms'
+    const styles = Array.from({ length: plain.length }).fill(undefined) as never
+
+    expect(scrubLine(plain, styles, resolveRules(['timings'])).line).toBe('✔ Vite client built in 42 ms')
+  })
+})

capture/lib/scrub.ts

@@ -121,7 +121,41 @@ export function scrubLine(line: string, styles: Style[], rules: ScrubRule[]): {
       currentStyles = next.styles
     }
   }
-  return { line: currentLine, styles: currentStyles as Style[] }
+  const realigned = realign(currentLine, currentStyles, line.length)
+  return { line: realigned.line, styles: realigned.styles as Style[] }
+}
+
+/**
+ * Spaces holding a right-aligned tag against the end of the line. Anchoring to
+ * the end is what tells tag padding apart from indentation and from ordinary
+ * gaps inside a message, neither of which may be resized.
+ */
+const TAG_PADDING_RE = / {2,}(?=\S+$)/
+
+/**
+ * Restore a line to the width it was rendered at, by resizing the padding that
+ * holds a trailing tag against the right edge. Consola sizes that padding for
+ * the unscrubbed message, so without this the tag moves whenever a substitution
+ * changes the length of what precedes it.
+ */
+function realign(line: string, styles: (Style | undefined)[], width: number): { line: string, styles: (Style | undefined)[] } {
+  const delta = width - line.length
+  if (delta === 0) {
+    return { line, styles }
+  }
+  const padding = TAG_PADDING_RE.exec(line)
+  if (!padding || padding[0].length + delta < 2) {
+    return { line, styles }
+  }
+  const at = padding.index
+  return {
+    line: line.slice(0, at) + ' '.repeat(padding[0].length + delta) + line.slice(at + padding[0].length),
+    styles: [
+      ...styles.slice(0, at),
+      ...Array.from<Style | undefined>({ length: padding[0].length + delta }).fill(styles[at]),
+      ...styles.slice(at + padding[0].length),
+    ],
+  }
 }
 
 function applyStep(line: string, styles: (Style | undefined)[], step: ScrubStep): { line: string, styles: (Style | undefined)[] } {

capture/output/nuxt-module-search.txt

@@ -1,4 +1,4 @@
-styles: 49e3707b8798dab3
+styles: 4556dcc182c8f324
 │
 │ │                                                                                            │
 │ │                                                                                          │
@@ -10,7 +10,6 @@ styles: 49e3707b8798dab3
 │ │                         headless CMS.                                                  │
 │ │                         images.                                                        │
 │ │  Compatibility          nuxt: >=x.y.z                                                    │
-│ │  Compatibility          nuxt: >=x.y.z                                                   │
 │ │  Compatibility          nuxt: >=x.y.z                                                  │
 │ │  Compatibility          nuxt: >=x.y.z                                │
 │ │  Compatibility          nuxt: ^x.y.z || >=x.y.z                                            │

packages/nuxt-cli/src/commands/dev.ts

@@ -19,6 +19,7 @@ import { isReusePortSupported, parsePort } from '../dev/listen'
 import { ForkPool } from '../dev/pool'
 import { preflight } from '../dev/preflight'
 import { formatRestartReason } from '../dev/reason'
+import { deferShortcutContext } from '../dev/shortcut-context'
 import { SUPERVISOR_SHUTDOWN_TIMEOUT_MS } from '../dev/shutdown'
 import { formatTakeoverRefusal, takeOverDevServer } from '../dev/takeover'
 import { beginDevUI, setupDevUI } from '../dev/tui/controller'
@@ -231,6 +232,10 @@ const command = defineCommand({
       listenOverrides.showURL = false
     }
 
+    const { context: shortcutContext, attach: attachServer } = deferShortcutContext({ clearCaches })
+    const startingUI = ui ? await setupDevUI(shortcutContext, { ...uiOptions, enabled: true }) : undefined
+    setupSignalHandlers(() => shortcutContext.close())
+
     const started = await initialize({ cwd, args: ctx.args, handoverFrom: takeover.action === 'taken' ? takeover.pid : undefined }, {
       data: ctx.data,
       listenOverrides,
@@ -262,8 +267,8 @@ const command = defineCommand({
 
     // Disable forking when profiling to capture all activity in one process
     if (!ctx.args.fork || profiling) {
-      attachDevUI(await setupDevUI({ listener, close, onReady, clearCaches, restart: () => reload({ type: 'shortcut' }) }, { ...uiOptions, enabled: ui }))
-      setupSignalHandlers(close)
+      attachServer({ listener, close, onReady, restart: () => reload({ type: 'shortcut' }) })
+      attachDevUI(startingUI ?? await setupDevUI(shortcutContext, { ...uiOptions, enabled: ui }))
       return {
         listener,
         close,
@@ -273,7 +278,8 @@ const command = defineCommand({
     const pool = new ForkPool({
       rawArgs: ctx.rawArgs,
       poolSize: resolveForkPoolSize(),
-      listenOverrides,
+      // This process has already opened the browser; a fork taking over must not.
+      listenOverrides: { ...listenOverrides, open: false, openURL: undefined },
       inspect,
       pipeOutput: ui,
     })
@@ -290,7 +296,8 @@ const command = defineCommand({
       pool.startWarming()
     })
 
-    const devUI = attachDevUI(await setupDevUI({ listener, close: () => closeAll(), onReady, clearCaches, restart: () => restart({ type: 'shortcut' }) }, { ...uiOptions, enabled: ui }))
+    attachServer({ listener, close: () => closeAll(), onReady, restart: () => restart({ type: 'shortcut' }) })
+    const devUI = attachDevUI(startingUI ?? await setupDevUI(shortcutContext, { ...uiOptions, enabled: ui }))
     // Whatever is serving the app right now: this process, then each fork in turn.
     let closeCurrent = close
     let currentPid = process.pid
@@ -435,8 +442,6 @@ const command = defineCommand({
       await close()
     }
 
-    setupSignalHandlers(closeAll)
-
     return {
       close: closeAll,
     }

packages/nuxt-cli/src/dev/shortcut-context.ts

@@ -0,0 +1,68 @@
+import type { Listener } from './listen'
+
+export interface ShortcutContext {
+  /** The bound server, once there is one. */
+  listener?: Listener
+  close: () => Promise<void>
+  restart?: () => void | Promise<void>
+  /** Remove the caches that make the next start cold, naming what went. */
+  clearCaches?: () => Promise<string[]>
+  onReady: (callback: (address: string) => void) => void
+}
+
+/** What a started dev server contributes to a {@link ShortcutContext}. */
+interface ShortcutServer {
+  listener: Listener
+  close: () => Promise<void>
+  restart?: () => void | Promise<void>
+  onReady: (callback: (address: string) => void) => void
+}
+
+export interface DeferredShortcutContext {
+  context: ShortcutContext
+  attach: (server: ShortcutServer) => void
+}
+
+/**
+ * A context for shortcuts bound before the dev server exists, so the keyboard
+ * answers from the first frame. {@link ShortcutContext.listener} is undefined
+ * until {@link DeferredShortcutContext.attach}, and ready callbacks registered
+ * before then are forwarded to the server when it arrives.
+ */
+export function deferShortcutContext(options: Pick<ShortcutContext, 'clearCaches'> = {}): DeferredShortcutContext {
+  let server: ShortcutServer | undefined
+  let closing: Promise<void> | undefined
+  const pendingReady: Array<(address: string) => void> = []
+
+  return {
+    context: {
+      clearCaches: options.clearCaches,
+      get listener() {
+        return server?.listener
+      },
+      get restart() {
+        return server?.restart
+      },
+      close: () => closing ??= server?.close() ?? Promise.resolve(),
+      onReady: (callback) => {
+        if (server) {
+          server.onReady(callback)
+        }
+        else {
+          pendingReady.push(callback)
+        }
+      },
+    },
+    attach: (started) => {
+      // A shutdown started before this existed had nothing to close.
+      if (closing) {
+        closing = closing.then(() => started.close())
+        return
+      }
+      server = started
+      for (const callback of pendingReady.splice(0)) {
+        started.onReady(callback)
+      }
+    },
+  }
+}

packages/nuxt-cli/src/dev/shortcuts.ts

@@ -1,22 +1,16 @@
 import type { Listener } from './listen'
+import type { ShortcutContext } from './shortcut-context'
 
 import process from 'node:process'
 import { createInterface } from 'node:readline'
 
 import { styleText } from 'node:util'
 import { isCI, isTest } from 'std-env'
 
-import { restoreRawMode, withDirectStdout } from '../utils/console'
+import { guardReplayedInput, restoreRawMode, withDirectStdout } from '../utils/console'
 import { copyURL, openBrowser, printQRCode } from './listen'
 
-export interface ShortcutContext {
-  listener: Listener
-  close: () => Promise<void>
-  restart?: () => void | Promise<void>
-  /** Remove the caches that make the next start cold, naming what went. */
-  clearCaches?: () => Promise<string[]>
-  onReady: (callback: (address: string) => void) => void
-}
+export type { ShortcutContext } from './shortcut-context'
 
 interface ActionContext extends ShortcutContext {
   /** Stop reading shortcuts, so a quitting server does not keep stdin open. */
@@ -40,29 +34,33 @@ const shortcuts: Shortcut[] = [
   {
     keys: ['o', 'open'],
     description: 'open in browser',
-    action: context => openBrowser(context.listener.url),
+    isAvailable: context => !!context.listener,
+    action: context => context.listener && openBrowser(context.listener.url),
   },
   {
     keys: ['u', 'urls'],
     description: 'show server URLs',
-    action: context => context.listener.showURLs(),
+    isAvailable: context => !!context.listener,
+    action: context => context.listener?.showURLs(),
   },
   {
     keys: ['qr'],
     description: 'show a QR code for the server URL',
-    action: context => printQRCode(resolveShareableURL(context.listener), { showURL: true }),
+    isAvailable: context => !!context.listener,
+    action: context => context.listener && printQRCode(resolveShareableURL(context.listener), { showURL: true }),
   },
   {
     keys: ['copy'],
     description: 'copy the server URL to the clipboard',
-    action: context => copyURL(resolveShareableURL(context.listener)),
+    isAvailable: context => !!context.listener,
+    action: context => context.listener && copyURL(resolveShareableURL(context.listener)),
   },
   {
     keys: ['c', 'clear'],
     description: 'clear the console',
     action: async (context) => {
       await withDirectStdout(() => process.stdout.write('\u001B[2J\u001B[3J\u001B[H'))
-      context.listener.showURLs()
+      context.listener?.showURLs()
     },
   },
   {
@@ -146,7 +144,11 @@ export function setupShortcuts(context: ShortcutContext): void {
   restoreRawMode()
 
   const rl = createInterface({ input: process.stdin })
+  const isReplayedInput = guardReplayedInput()
   rl.on('line', async (line) => {
+    if (isReplayedInput()) {
+      return
+    }
     const input = line.trim().toLowerCase()
     const shortcut = availableShortcuts(context).find(({ keys }) => keys.includes(input))
     if (!shortcut) {