Skip to content

Commit

Permalink
feat: preview mode add keyboard shortcuts (#12968)
Browse files Browse the repository at this point in the history
Co-authored-by: bluwy <[email protected]>
  • Loading branch information
btea and bluwy authored Jun 29, 2023
1 parent d444bfe commit 126e93e
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 13 deletions.
2 changes: 2 additions & 0 deletions packages/vite/src/node/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,7 @@ cli
},
)

// preview
cli
.command('preview [root]', 'locally preview production build')
.option('--host [host]', `[string] specify hostname`)
Expand Down Expand Up @@ -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}`),
Expand Down
70 changes: 57 additions & 13 deletions packages/vite/src/node/shortcuts.ts
Original file line number Diff line number Diff line change
@@ -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 ') +
Expand All @@ -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
}

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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()
}
},
},
]

0 comments on commit 126e93e

Please sign in to comment.