feat: preview mode add keyboard shortcuts (#12968)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

Author: btea

packages/vite/src/node/cli.ts

@@ -303,6 +303,7 @@ cli
     },
   )
 
+// preview
 cli
   .command('preview [root]', 'locally preview production build')
   .option('--host [host]', `[string] specify hostname`)
@@ -344,6 +345,7 @@ cli
           },
         })
         server.printUrls()
+        bindShortcuts(server, { print: true })
       } catch (e) {
         createLogger(options.logLevel).error(
           colors.red(`error when starting preview server:\n${e.stack}`),

packages/vite/src/node/shortcuts.ts

@@ -1,31 +1,38 @@
 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 = {
+export type BindShortcutsOptions<Server = ViteDevServer | PreviewServer> = {
   /**
    * Print a one line hint to the terminal.
    */
   print?: boolean
-  customShortcuts?: (CLIShortcut | undefined | null)[]
+  customShortcuts?: (CLIShortcut<Server> | undefined | null)[]
 }
 
-export type CLIShortcut = {
+export type CLIShortcut<Server = ViteDevServer | PreviewServer> = {
   key: string
   description: string
-  action(server: ViteDevServer): void | Promise<void>
+  action(server: Server): void | Promise<void>
 }
 
-export function bindShortcuts(
-  server: ViteDevServer,
-  opts: BindShortcutsOptions,
+export function bindShortcuts<Server extends ViteDevServer | PreviewServer>(
+  server: Server,
+  opts?: BindShortcutsOptions<Server>,
 ): void {
   if (!server.httpServer || !process.stdin.isTTY || process.env.CI) {
     return
   }
-  server._shortcutsOptions = opts
 
-  if (opts.print) {
+  const isDev = isDevServer(server)
+
+  if (isDev) {
+    server._shortcutsOptions = opts
+  }
+
+  if (opts?.print) {
     server.config.logger.info(
       colors.dim(colors.green('  ➜')) +
         colors.dim('  press ') +
@@ -34,16 +41,25 @@ export function bindShortcuts(
     )
   }
 
-  const shortcuts = (opts.customShortcuts ?? [])
+  const shortcuts = (opts?.customShortcuts ?? [])
     .filter(isDefined)
-    .concat(BASE_SHORTCUTS)
+    // @ts-expect-error passing the right types, but typescript can't detect it
+    .concat(isDev ? BASE_DEV_SHORTCUTS : BASE_PREVIEW_SHORTCUTS)
 
   let actionRunning = false
 
   const onInput = async (input: string) => {
     // ctrl+c or ctrl+d
     if (input === '\x03' || input === '\x04') {
-      await server.close().finally(() => process.exit(1))
+      try {
+        if (isDev) {
+          await server.close()
+        } else {
+          server.httpServer.close()
+        }
+      } finally {
+        process.exit(1)
+      }
       return
     }
 
@@ -81,7 +97,13 @@ export function bindShortcuts(
   })
 }
 
-const BASE_SHORTCUTS: CLIShortcut[] = [
+function isDevServer(
+  server: ViteDevServer | PreviewServer,
+): server is ViteDevServer {
+  return 'pluginContainer' in server
+}
+
+const BASE_DEV_SHORTCUTS: CLIShortcut<ViteDevServer>[] = [
   {
     key: 'r',
     description: 'restart the server',
@@ -119,3 +141,25 @@ const BASE_SHORTCUTS: CLIShortcut[] = [
     },
   },
 ]
+
+const BASE_PREVIEW_SHORTCUTS: CLIShortcut<PreviewServer>[] = [
+  {
+    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()
+      }
+    },
+  },
+]