refactor(shortcuts)!: tweak shortcuts api (#14749)

Author: bluwy

packages/vite/src/node/cli.ts

@@ -5,6 +5,7 @@ import { cac } from 'cac'
 import colors from 'picocolors'
 import type { BuildOptions } from './build'
 import type { ServerOptions } from './server'
+import type { CLIShortcut } from './shortcuts'
 import type { LogLevel } from './logger'
 import { createLogger } from './logger'
 import { VERSION } from './constants'
@@ -192,34 +193,33 @@ cli
       )
 
       server.printUrls()
-      server.bindCLIShortcuts({
-        print: true,
-        customShortcuts: [
-          profileSession && {
-            key: 'p',
-            description: 'start/stop the profiler',
-            async action(server) {
-              if (profileSession) {
-                await stopProfiler(server.config.logger.info)
-              } else {
-                const inspector = await import('node:inspector').then(
-                  (r) => r.default,
-                )
-                await new Promise<void>((res) => {
-                  profileSession = new inspector.Session()
-                  profileSession.connect()
-                  profileSession.post('Profiler.enable', () => {
-                    profileSession!.post('Profiler.start', () => {
-                      server.config.logger.info('Profiler started')
-                      res()
-                    })
+      const customShortcuts: CLIShortcut<typeof server>[] = []
+      if (profileSession) {
+        customShortcuts.push({
+          key: 'p',
+          description: 'start/stop the profiler',
+          async action(server) {
+            if (profileSession) {
+              await stopProfiler(server.config.logger.info)
+            } else {
+              const inspector = await import('node:inspector').then(
+                (r) => r.default,
+              )
+              await new Promise<void>((res) => {
+                profileSession = new inspector.Session()
+                profileSession.connect()
+                profileSession.post('Profiler.enable', () => {
+                  profileSession!.post('Profiler.start', () => {
+                    server.config.logger.info('Profiler started')
+                    res()
                   })
                 })
-              }
-            },
+              })
+            }
           },
-        ],
-      })
+        })
+      }
+      server.bindCLIShortcuts({ print: true, customShortcuts })
     } catch (e) {
       const logger = createLogger(options.logLevel)
       logger.error(colors.red(`error when starting dev server:\n${e.stack}`), {

packages/vite/src/node/shortcuts.ts

@@ -1,16 +1,19 @@
 import readline from 'node:readline'
 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 BindCLIShortcutsOptions<Server = ViteDevServer | PreviewServer> = {
   /**
-   * Print a one line hint to the terminal.
+   * Print a one-line shortcuts "help" hint to the terminal
    */
   print?: boolean
-  customShortcuts?: (CLIShortcut<Server> | undefined | null)[]
+  /**
+   * Custom shortcuts to run when a key is pressed. These shortcuts take priority
+   * over the default shortcuts if they have the same keys (except the `h` key).
+   */
+  customShortcuts?: CLIShortcut<Server>[]
 }
 
 export type CLIShortcut<Server = ViteDevServer | PreviewServer> = {
@@ -43,7 +46,6 @@ export function bindCLIShortcuts<Server extends ViteDevServer | PreviewServer>(
   }
 
   const shortcuts = (opts?.customShortcuts ?? [])
-    .filter(isDefined)
     // @ts-expect-error passing the right types, but typescript can't detect it
     .concat(isDev ? BASE_DEV_SHORTCUTS : BASE_PREVIEW_SHORTCUTS)
 
@@ -53,18 +55,21 @@ export function bindCLIShortcuts<Server extends ViteDevServer | PreviewServer>(
     if (actionRunning) return
 
     if (input === 'h') {
-      server.config.logger.info(
-        [
-          '',
-          colors.bold('  Shortcuts'),
-          ...shortcuts.map(
-            (shortcut) =>
-              colors.dim('  press ') +
-              colors.bold(`${shortcut.key} + enter`) +
-              colors.dim(` to ${shortcut.description}`),
-          ),
-        ].join('\n'),
-      )
+      const loggedKeys = new Set<string>()
+      server.config.logger.info('\n  Shortcuts')
+
+      for (const shortcut of shortcuts) {
+        if (loggedKeys.has(shortcut.key)) continue
+        loggedKeys.add(shortcut.key)
+
+        server.config.logger.info(
+          colors.dim('  press ') +
+            colors.bold(`${shortcut.key} + enter`) +
+            colors.dim(` to ${shortcut.description}`),
+        )
+      }
+
+      return
     }
 
     const shortcut = shortcuts.find((shortcut) => shortcut.key === input)