feat: add CLI keyboard shortcuts

packages/vite/src/node/cli.ts

@@ -117,6 +117,7 @@ cli
  )
 
  server.printUrls()
+ server.bindShortcuts()
  } catch (e) {
  createLogger(options.logLevel).error(
  colors.red(`error when starting dev server:\n${e.stack}`),

packages/vite/src/node/server/index.ts

@@ -70,6 +70,7 @@ import { openBrowser } from './openBrowser'
 import type { TransformOptions, TransformResult } from './transformRequest'
 import { transformRequest } from './transformRequest'
 import { searchForWorkspaceRoot } from './searchRoot'
+import { bindShortcuts } from './shortcuts'
 
 export { searchForWorkspaceRoot } from './searchRoot'
 
@@ -114,6 +115,13 @@ export interface ServerOptions extends CommonServerOptions {
  * in a future minor version without following semver
  */
  force?: boolean
+ /**
+ * Disable key bindings for the server by setting this to `false`. This can be
+ * useful if you need the `process.stdin` stream for another purpose.
+ *
+ * @default true in CLI, `false` in programmatic usage
+ */
+ bindShortcuts?: boolean
 }
 
 export interface ResolvedServerOptions extends ServerOptions {
@@ -255,6 +263,11 @@ export interface ViteDevServer {
  * @param forceOptimize - force the optimizer to re-bundle, same as --force cli flag
  */
  restart(forceOptimize?: boolean): Promise<void>
+ /**
+ * Listen to `process.stdin` for pre-defined keyboard shortcuts, which are
+ * printed to the terminal by this method.
+ */
+ bindShortcuts(): void
  /**
  * @internal
  */
@@ -421,6 +434,11 @@ export async function createServer(
  }
  return server._restartPromise
  },
+ bindShortcuts() {
+ if (serverConfig.bindShortcuts !== false) {
+ bindShortcuts(server)
+ }
+ },
 
  _ssrExternals: null,
  _restartPromise: null,

packages/vite/src/node/server/shortcuts.ts

@@ -0,0 +1,124 @@
+import colors from 'picocolors'
+import type { ViteDevServer } from '..'
+import { openBrowser } from './openBrowser'
+
+export function bindShortcuts(server: ViteDevServer): void {
+ if (!server.httpServer) return
+
+ const helpInfo =
+ colors.dim('press ') +
+ colors.reset(colors.bold('h')) +
+ colors.dim(' to show help')
+ const quitInfo =
+ colors.dim('press ') +
+ colors.reset(colors.bold('q')) +
+ colors.dim(' to quit')
+
+ server.config.logger.info(
+ colors.dim(` ${colors.green('➜')} ${helpInfo}, ${quitInfo}`)
+ )
+
+ let actionRunning = false
+
+ const onInput = async (input: string) => {
+ // ctrl+c or ctrl+d
+ if (input === '\x03' || input === '\x04') {
+ return process.kill(process.pid, 'SIGINT')
+ }
+
+ if (input === 'h') {
+ return server.config.logger.info(
+ SHORTCUTS.map(
+ (shortcut) =>
+ colors.dim(' press ') +
+ colors.reset(colors.bold(shortcut.key)) +
+ colors.dim(` to ${shortcut.description}`)
+ ).join('\n')
+ )
+ }
+
+ const shortcut = SHORTCUTS.find((shortcut) => shortcut.key === input)
+
+ if (!shortcut) {
+ return
+ }
+
+ if (actionRunning) {
+ return
+ }
+
+ actionRunning = true
+ await shortcut.action(server)
+ actionRunning = false
+ }
+
+ if (process.stdin.isTTY) {
+ process.stdin.setRawMode(true)
+ }
+
+ process.stdin.on('data', onInput).setEncoding('utf8').resume()
+
+ server.httpServer.on('close', () => {
+ process.stdin.off('data', onInput).pause()
+ })
+}
+
+export interface Shortcut {
+ key: string
+ description: string
+ action(server: ViteDevServer): void | Promise<void>
+}
+
+export const SHORTCUTS: Shortcut[] = [
+ {
+ key: 'r',
+ description: 'restart the server',
+ async action(server: ViteDevServer): Promise<void> {
+ await server.restart()
+ server.bindShortcuts()
+ }
+ },
+ {
+ key: 'o',
+ description: 'open in browser',
+ action(server: ViteDevServer): void {
+ const url = server.resolvedUrls?.local[0]
+
+ if (!url) {
+ return server.config.logger.warn(
+ colors.yellow(`cannot open in browser; no server URLs registered.`)
+ )
+ }
+
+ openBrowser(url, true, server.config.logger)
+ }
+ },
+ {
+ key: 'm',
+ description: 'toggle hmr on/off',
+ action({ config }: ViteDevServer): void {
+ /**
+ * Mutating the server config works because Vite reads from
+ * it on every file change, instead of caching its value.
+ *
+ * Since `undefined` is treated as `true`, we have to
+ * use `!== true` to flip the boolean value.
+ */
+ config.server.hmr = config.server.hmr !== true
+ config.logger.info(
+ colors.cyan(` hmr ${config.server.hmr ? `enabled` : `disabled`}`)
+ )
+ }
+ },
+ {
+ key: 'q',
+ description: 'quit',
+ async action(server: ViteDevServer): Promise<void> {
+ try {
+ await server.close()
+ } finally {
+ process.exit()
+ }
+ }
+ }
+]