fix(onboard): confirm installs in nuxi's terminal, on devframe v1.2.6 (#1126)

Author: antfubot

packages/devtools-onboard/README.md

@@ -7,6 +7,8 @@ The entry point of [Nuxt DevTools](https://devtools.nuxt.com). It is a tiny Nuxt
 
 Nothing is injected outside `nuxt dev`.
 
+The dev server can be reachable from other devices, so each install from the button waits for you in the terminal that runs `nuxt dev`. In nuxi's interactive view, press `y`; in plain mode, type `yes` and press Enter. Anything else refuses, and so does no answer within 5 minutes. When the terminal cannot answer, for example after the dev server restarted under the interactive view, the install is refused and the panel shows the command to run yourself.
+
 ## Turning it off
 
 - `devtools: false` (or `devtools: { enabled: false }`) in `nuxt.config` disables both the button and DevTools.

packages/devtools-onboard/src/module.ts

@@ -1,8 +1,9 @@
 import type { NuxtOptions } from '@nuxt/schema'
 import { fileURLToPath } from 'node:url'
 import { createOnboarding } from '@devframes/hub-ui-onboard'
-import { defineNuxtModule, installModule, tryResolveModule } from '@nuxt/kit'
+import { defineNuxtModule, installModule, logger, tryResolveModule } from '@nuxt/kit'
 import { readPackageJSON } from 'pkg-types'
+import { confirmInTerminal } from './terminal-confirm'
 
 const DEVTOOLS = '@nuxt/devtools'
 const DEVTOOLS_NIGHTLY = `${DEVTOOLS}-nightly`
@@ -70,6 +71,11 @@ export default defineNuxtModule({
       messages: {
         restart: 'Installed. Restarting the dev server…',
       },
+      // Upstream's own question refuses at once under nuxi's TUI (DF9007).
+      onConfirm: ({ command }) => confirmInTerminal(command, {
+        ask: message => logger.box(message),
+        warn: message => logger.warn(message),
+      }),
       onInstalled() {
         // A Nuxt module only mounts during setup, so the dev server has to
         // start over. Delay past the install response so the panel can show

packages/devtools-onboard/src/terminal-confirm.ts

@@ -0,0 +1,48 @@
+import type { Buffer } from 'node:buffer'
+import type { Readable } from 'node:stream'
+import process from 'node:process'
+
+/** As long as `@devframes/hub-ui-onboard`'s own terminal question waits (DF9008). */
+const ANSWER_TIMEOUT = 5 * 60_000
+
+export interface Terminal {
+  input?: Readable & { isTTY?: boolean, isRaw?: boolean }
+  /** Shows the question; nuxi's TUI pins a boxed log as an ACTION line. */
+  ask: (message: string) => void
+  warn: (message: string) => void
+}
+
+/**
+ * The `y/N` question of `@devframes/hub-ui-onboard`, adapted to `nuxi dev`.
+ * Its TUI holds stdin in raw mode, so a single key answers and the question
+ * is boxed to stay visible. In plain mode nuxi's own `y` shortcut copies the
+ * URL, so the answer is `yes`. Like upstream it refuses without a terminal
+ * (nuxi's TUI gives the dev server's fork none) and after 5 minutes.
+ */
+export function confirmInTerminal(command: string[], { input = process.stdin, ask, warn }: Terminal): Promise<boolean> {
+  const run = `\`${command.join(' ')}\``
+  if (!input.isTTY) {
+    warn(`A browser asked to install Nuxt DevTools, but no terminal can confirm it, so it was refused. Run ${run} yourself.`)
+    return Promise.resolve(false)
+  }
+  const answerWith = input.isRaw ? 'Press y' : 'Type yes and press Enter'
+  ask(`${answerWith} to allow installing Nuxt DevTools; anything else refuses.\nThe browser asked to run ${run}. If you did not click Install, refuse it: another device can reach this dev server.`)
+
+  const flowing = input.readableFlowing
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      warn('Nobody allowed installing Nuxt DevTools within 5 minutes, so it was refused.')
+      answer(false)
+    }, ANSWER_TIMEOUT)
+    const onData = (chunk: Buffer | string) => answer(/^y(?:es)?$/i.test(String(chunk).trim()))
+    function answer(allowed: boolean) {
+      clearTimeout(timer)
+      input.off('data', onData)
+      // Leave the stream to the TUI or readline that read it before.
+      if (!flowing)
+        input.pause()
+      resolve(allowed)
+    }
+    input.on('data', onData)
+  })
+}

packages/devtools-onboard/test/module.test.ts

@@ -58,7 +58,8 @@ function onboardScripts(nuxt: Nuxt) {
 
 type Middleware = (req: IncomingMessage, res: ServerResponse, next: () => void) => void
 
-async function viteMiddlewareFetch(nuxt: Nuxt, path: string): Promise<Response> {
+/** Serves what the module mounts on the client Vite server; resolves to its origin. */
+async function serveViteMiddleware(nuxt: Nuxt): Promise<string> {
   const mounted: Middleware[] = []
   // Only `middlewares.use` is read; the rest of a real ViteDevServer is irrelevant here.
   const viteServer = { middlewares: { use: (fn: Middleware) => mounted.push(fn) } } as never
@@ -74,9 +75,11 @@ async function viteMiddlewareFetch(nuxt: Nuxt, path: string): Promise<Response>
   await new Promise<void>(resolve => server.listen(0, '127.0.0.1', resolve))
   cleanups.push(() => new Promise(resolve => server.close(() => resolve())))
   const { port } = server.address() as { port: number } // listening on a TCP port, never a pipe
-  return fetch(`http://127.0.0.1:${port}${path}`)
+  return `http://127.0.0.1:${port}`
 }
 
+const onboardStatus = (origin: string) => fetch(`${origin}/__devtools/__onboard/status`).then(r => r.json())
+
 describe('@nuxt/devtools-onboard', () => {
   it('does nothing when devtools are disabled', async () => {
     const nuxt = await bootNuxt({ devtools: false, modules: [onboardModule] })
@@ -101,14 +104,24 @@ describe('@nuxt/devtools-onboard', () => {
     expect(nuxt.options._requiredModules['@nuxt/devtools']).toBeUndefined()
     expect(onboardScripts(nuxt)).toHaveLength(1)
 
-    const status = await viteMiddlewareFetch(nuxt, '/__devtools/__onboard/status').then(r => r.json())
+    const status = await onboardStatus(await serveViteMiddleware(nuxt))
     expect(status.state).toBe('idle')
     // No lockfile in the fixture, so the package manager falls back to npm.
     expect(status.command.slice(0, 3)).toEqual(['npm', 'i', '-D'])
     expect(status.command[3]).toMatch(/^@nuxt\/devtools@\^4\./)
     expect(status.branding.productName).toBe('Nuxt DevTools')
   }, 60_000)
 
+  it('refuses to install when nobody can confirm it in the terminal', async () => {
+    const nuxt = await bootNuxt({ dev: true }, { withoutDevtools: true })
+    const origin = await serveViteMiddleware(nuxt)
+
+    // Vitest workers get a piped stdin, so no terminal can answer the question.
+    const install = await fetch(`${origin}/__devtools/__onboard/install`, { method: 'POST' })
+    expect(install.status).toBe(403)
+    expect((await onboardStatus(origin)).state).toBe('idle')
+  }, 60_000)
+
   it('stays out of the way outside nuxt dev when @nuxt/devtools is missing', async () => {
     const nuxt = await bootNuxt({ dev: false }, { withoutDevtools: true })
     expect(onboardScripts(nuxt)).toHaveLength(0)

packages/devtools-onboard/test/terminal-confirm.test.ts

@@ -0,0 +1,74 @@
+import { PassThrough } from 'node:stream'
+import { afterEach, expect, it, vi } from 'vitest'
+import { confirmInTerminal } from '../src/terminal-confirm'
+
+const COMMAND = ['npm', 'i', '-D', '@nuxt/devtools@^4.0.0']
+
+function terminal({ isTTY = true, isRaw = false } = {}) {
+  const asked: string[] = []
+  const warned: string[] = []
+  return {
+    input: Object.assign(new PassThrough(), { isTTY, isRaw }),
+    asked,
+    warned,
+    ask: (message: string) => asked.push(message),
+    warn: (message: string) => warned.push(message),
+  }
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+it.each([
+  // nuxi's TUI holds stdin in raw mode, so a single key answers
+  [true, 'y', true],
+  [true, 'Y', true],
+  [true, 'w', false],
+  [true, '\r', false],
+  // nuxi's plain mode reads lines
+  [false, 'yes\n', true],
+  [false, 'y\n', true],
+  [false, '\n', false],
+  [false, 'no\n', false],
+])('raw mode %s: answers %j with %s', async (isRaw, key, allowed) => {
+  const t = terminal({ isRaw })
+  const answer = confirmInTerminal(COMMAND, t)
+  expect(t.asked[0]).toMatch(isRaw ? /^Press y / : /^Type yes and press Enter /)
+  expect(t.asked[0]).toContain('npm i -D @nuxt/devtools@^4.0.0')
+
+  t.input.write(key)
+  expect(await answer).toBe(allowed)
+  expect(t.input.readableFlowing).toBe(false)
+})
+
+it('keeps the terminal flowing for the TUI that read it first', async () => {
+  const t = terminal({ isRaw: true })
+  const keys: string[] = []
+  t.input.on('data', chunk => keys.push(String(chunk)))
+
+  const answer = confirmInTerminal(COMMAND, t)
+  t.input.write('y')
+  expect(await answer).toBe(true)
+  expect(t.input.readableFlowing).toBe(true)
+  expect(keys).toEqual(['y'])
+})
+
+it('refuses at once without a terminal', async () => {
+  const t = terminal({ isTTY: false })
+  expect(await confirmInTerminal(COMMAND, t)).toBe(false)
+  expect(t.asked).toEqual([])
+  expect(t.warned[0]).toContain('npm i -D @nuxt/devtools@^4.0.0')
+})
+
+it('refuses when nobody answers within 5 minutes', async () => {
+  vi.useFakeTimers()
+  const t = terminal({ isRaw: true })
+  const answer = confirmInTerminal(COMMAND, t)
+
+  vi.advanceTimersByTime(5 * 60_000)
+  expect(await answer).toBe(false)
+  expect(t.warned).toHaveLength(1)
+  t.input.write('y')
+  expect(t.input.readableFlowing).toBe(false)
+})