feat: preview mode add keyboard shortcuts

[btea]

Description

Add o and q shortcut keys for preview mode.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[ArnaudBarre]

Hi! Thanks for PR, we will discuss if we want to go forward with this feature in a coming meeting

[ArnaudBarre]

We would like to include in Vite 4.4! I can take care of this refactor if you don't have time at the moment.

[ArnaudBarre]

Let's factorise this code a bit with something like that:

type CLIShortcut<Server> = {
  key: string
  description: string
  action: (server: Server) => void
}

function bindShortcuts<Server>(server: Server, shortcuts: CLIShortcut<Server>[]): void {
  // almost exactly this code below
}

export function bindPreviewShortcuts(server: PreviewServer): void {
  bindShortcuts(server, previewShortcuts)
}

type PreviewShortcut = CLIShortcut<PreviewServer>

And then rename the other usage in this file to add a dev prefix

[btea]

We would like to include in Vite 4.4! I can take care of this refactor if you don't have time at the moment.

It would be really nice if you could refactor it.

[ArnaudBarre]

Change my mind, there is also the close function that differs.
Given that both are in the same file, I don't think other things will diverge. Factorisation starts at 3 they said.

We could also review the usage of setRawMode as suggested by @bluwy

[deot]

When i use createServer(Node API), expect to use keyboard shortcuts. can it export?

node/index.ts

export { bindShortcuts, bindPreviewShortcuts } from './shortcuts'

• example

import { createServer, bindShortcuts } from 'vite'

...
const server = await createServer(...);
await server.listen();
bindShortcuts(server)

[bluwy]

@deot That sounds like something we can expose, but I don't think this is the right place to request for it. I'd suggest opening a feature request, or a PR directly.

---

@ArnaudBarre I wanted to merge this, but there's too many duplicated parts for me 😅 I went ahead and refactored it. Appreciate if you can review it again.