feat: preview mode add keyboard shortcuts

packages/vite/src/node/cli.ts

@@ -8,7 +8,7 @@ import type { ServerOptions } from './server'
 import type { LogLevel } from './logger'
 import { createLogger } from './logger'
 import { VERSION } from './constants'
-import { bindShortcuts } from './shortcuts'
+import { bindPreviewShortcuts, bindShortcuts } from './shortcuts'
 import { resolveConfig } from '.'
 
 const cli = cac('vite')
@@ -291,6 +291,7 @@ cli
     },
   )
 
+// preview
 cli
   .command('preview [root]', 'locally preview production build')
   .option('--host [host]', `[string] specify hostname`)
@@ -332,6 +333,7 @@ cli
           },
         })
         server.printUrls()
+        bindPreviewShortcuts(server)
       } catch (e) {
         createLogger(options.logLevel).error(
           colors.red(`error when starting preview server:\n${e.stack}`),

packages/vite/src/node/shortcuts.ts

@@ -1,6 +1,8 @@
 import colors from 'picocolors'
 import type { ViteDevServer } from './server'
 import { isDefined } from './utils'
+import type { PreviewServer } from './preview'
+import { openBrowser } from './server/openBrowser'
 
 export type BindShortcutsOptions = {
   /**
@@ -119,3 +121,83 @@ const BASE_SHORTCUTS: CLIShortcut[] = [
     },
   },
 ]
+
+type PreviewShortcuts = {
+  key: string
+  description: string
+  action: (server: PreviewServer) => void
+}
+
+export function bindPreviewShortcuts(server: PreviewServer): void {
+  if (!server.httpServer || !process.stdin.isTTY || process.env.CI) {
+    return
+  }
+  server.config.logger.info(
+    colors.dim(colors.green('  ➜')) +
+      colors.dim('  press ') +
+      colors.bold('h') +
+      colors.dim(' to show help'),
+  )
+  let actionRunning = false
+  const onInput = async (input: string) => {
+    // ctrl+c or ctrl+d
+    if (input === '\x03' || input === '\x04') {
+      try {
+        server.httpServer.close()
+      } finally {
+        process.exit(1)
+      }
+    }
+    if (actionRunning) return
+    if (input === 'h') {
+      server.config.logger.info(
+        [
+          '',
+          colors.bold('  Shortcuts'),
+          ...previewShortcuts.map(
+            (shortcut) =>
+              colors.dim('  press ') +
+              colors.bold(shortcut.key) +
+              colors.dim(` to ${shortcut.description}`),
+          ),
+        ].join('\n'),
+      )
+    }
+
+    const shortcut = previewShortcuts.find((shortcut) => shortcut.key === input)
+    if (!shortcut) return
+    actionRunning = true
+    shortcut.action(server)
+    actionRunning = false
+  }
+
+  process.stdin.setRawMode(true)
+
+  process.stdin.on('data', onInput).setEncoding('utf8').resume()
+
+  server.httpServer.on('close', () => {
+    process.stdin.off('data', onInput).pause()
+  })
+}
+
+const previewShortcuts: PreviewShortcuts[] = [
+  {
+    key: 'o',
+    description: 'open in browser',
+    action(server) {
+      const url = server.resolvedUrls.local[0]
+      openBrowser(url, true, server.config.logger)
+    },
+  },
+  {
+    key: 'q',
+    description: 'quit',
+    action(server) {
+      try {
+        server.httpServer.close()
+      } finally {
+        process.exit()
+      }
+    },
+  },
+]