feat: add CLI keyboard shortcuts #9673

joelmukuthu · 2022-08-14T16:54:52Z

Description

This is a rebase of #6014 to resolve merge conflicts. It introduces stdin shortcuts for restarting the dev server, opening the server in browser and toggling HMR.

h - show all shortcuts
r - restart server
o - open in browser
m - toggle HMR on/off
q - quit

Additional context

N/A

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 Commit 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.

The shortcuts include: - [r] Restart the server (useful for third party config changes) - [o] Open the project in your default browser - [f] Clear the cache for optimized dependencies (then restart the server) Co-authored-by: HomyeeKing <HomyeeKing@gmail.com>

Press "h" to toggle HMR updates on/off. Useful when you hit a bug and don't want your code edits to refresh the browser (which would mean losing the error logs and app state).

aleclarson

Looks good at a cursory glance!

Note to other reviewer: I haven't tested this PR specifically. It's possible that other changes are needed to get each shortcut working as expected with the newest Vite version.

tony19 · 2022-08-15T00:24:43Z

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

+export async function resolveBrowserUrl(server: ViteDevServer): Promise<string> {
+  const options = server.config.server
+  const hostname = await resolveHostname(options.host)
+  const port = options.port || 3000


The actual port used is not necessarily options.port unless strict port is enabled.

But there's already an existing utility function that determines the current server URL with the correct port:

vite/packages/vite/src/node/utils.ts

Line 807 in e8b61bb

export async function resolveServerUrls(

The results of that function are stored in server.resolvedUrls:

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

Line 376 in afbb87d

server.resolvedUrls = await resolveServerUrls(

So, you could use server.resolvedUrls.local[] instead of resolving it here. I think you could just default to the first URL in the array.

Super, thanks!

tony19 · 2022-08-15T01:03:40Z

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

+  }
+
+  process.stdin
+    .on('data', onInput)


Nit: I noticed vitest listens to the keypress event instead of data and only sets raw mode for TTY. Should we do the same?

I'm all in for uniformity!

tony19 · 2022-08-15T01:11:47Z

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

+  },
+  {
+    key: 'f',
+    name: 'force restart',


The distinction between restart and force restart is unclear here IMO. The flag apparently forces the optimizer to re-bundle upon restarting the server. I think that should be reflected somehow in name here:

Suggested change

name: 'force restart',

name: 're-bundle dependencies and restart',

Sounds good to me!

@antfu @patak-dev Any opinion here?

I think we shouldn't expose this option. It is only needed if there is a bug in dependencies optimization re-bundling logic, that at this point is quite stable. I think it may end up confusing more users than helping them.

For posterity, I'd also suggest changing the key to some variation of "r" (maybe "R") if this option makes a comeback in the future.

patak-dev · 2022-08-15T15:42:05Z

Thanks for keeping this PR active @joelmukuthu. Looks like there is an error when running the CLI, would you check in your local clone that the test is passing?

About the exposed option, I don't know if we should expose all of them. Maybe there are some discussions I missed, but f seems to niche (see comment above), and I also have doubts about h. When would this option be used? If HMR is working, I don't think it is needed. If there was an HMR bug, isn't a restart better? Could you expand on the use case for this one?

aleclarson · 2022-08-15T15:50:56Z

I also have doubts about h. When would this option be used?

I added this one. It's useful when you're step debugging a client-side issue and hot-reloading would cause you to lose your state. If we don't have this option, you have to stop the dev server instead. I'd be fine with opening a separate PR for this option in the future, though.

patak-dev · 2022-08-15T15:58:28Z

I also have doubts about h. When would this option be used?

I added this one. It's useful when you're step debugging a client-side issue and hot-reloading would cause you to lose your state. If we don't have this option, you have to stop the dev server instead. I'd be fine with opening a separate PR for this option in the future, though.

How does this debugging setup work? Is the idea that you would like to do changes to your files and they are big enough that you want to have intermediate save points while debugging purely in the client?
I'm ok with this, ya, it looks useful. Maybe we should add an explanation of when this is useful in the docs too. Let's see what others think about the option.

antfu · 2022-08-15T16:58:28Z

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

+   * 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


This should default to false for programmatic usages and only default to true in CLI

@antfu was this a docs-only change? Tbh I couldn't actually figure out where bindShortcuts was defaulted to true in the code. @aleclarson would you please point me in the right direction?

joelmukuthu · 2022-08-16T06:53:19Z

Thanks all for the reviews. I'll look into this within the next couple of days.

About the options, what I gather is that I should remove the f option.

Looks like there is an error when running the CLI, would you check in your local clone that the test is passing?

Will do!

patak-dev · 2022-08-22T20:36:58Z

I tested on MacOS and it pressing a key doesn't seem to work. And I can't use also Cmd+C to exit.

About the shortcuts info, this is the current output for the CLI after this PR:

If we are going to show the shortcuts on the CLI, the > Shortcuts: line should look similar to the Network line. I think that we shouldn't show the shortcuts all the time though, we have a very clean CLI output and there will be a lot of people that aren't going to be using these shortcuts. We could follow Vitest here. It shows h for help and q for quit.

And when you press h, it then shows the options, so we can keep adding in the future without adding more noise to the CLI:

aleclarson · 2022-08-22T20:49:13Z

I tested on MacOS and it pressing a key doesn't seem to work. And I can't use also Cmd+C to exit.

This commit (6622560) should be reverted. There's no technical reason for it, and it likely causes the issue @patak-dev mentions above.

+1 for h and q keys

tony19 · 2022-08-22T22:38:25Z

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

+    process.stdin.setRawMode(true)
+  }
+
+  process.stdin.on('keypress', keypressHandler).setEncoding('utf8').resume()


@patak-dev @aleclarson The keys aren't detected in this changeset because of this...

The keypress event requires readline.emitKeypressEvents(process.stdin) beforehand.

I think the reason Vitest uses this instead of just the data event is because its shortcuts include a prompt for changing the test pattern input, where it needs to pause keypress handling to properly receive the input. Since our shortcuts don't have any prompts, we probably don't need this. Sorry for having suggested this change in my original review.

joelmukuthu · 2022-08-28T14:15:31Z

Thanks for the reviews; ready for re-review.

joelmukuthu · 2022-09-20T10:11:29Z

Hi everyone, is there an update on this? Is there some way I can help to get this merged or reviewed?

PengBoUESTC · 2022-10-08T18:31:06Z

I think this function should be treat as a plugin ... this is a expand of vite server. @patak-dev @antfu

aleclarson · 2022-10-08T19:27:45Z

I think this function should be treat as a plugin ... this is a expand of vite server. @patak-dev @antfu

The dev server doesn't support CLI plugins, and it doesn't plan to (or at least, that's what I've inferred from previous discussions).

PengBoUESTC · 2022-10-09T01:38:31Z

I think this function should be treat as a plugin ... this is a expand of vite server. @patak-dev @antfu

The dev server doesn't support CLI plugins, and it doesn't plan to (or at least, that's what I've inferred from previous discussions).

emmm.. this PR wants to communicate with vite server by terminal after server start, maybe it can be realized as a plugin. because In vite plugin, we can get server instance and user config info.

ArnaudBarre · 2022-11-09T09:59:21Z

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

+  /**
+   * 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


Actually this is not called at all in programmatic usage. (like printURLs)

There is currently no option to disable print of server urls, I would do the same here.

If people want more complex use case, they can use the pragmatic usage.

ArnaudBarre · 2022-11-09T10:02:08Z

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

+   * Listen to `process.stdin` for pre-defined keyboard shortcuts, which are
+   * printed to the terminal by this method.


What can be useful for non standard custom usage is separating biding from help display with a little boolean flag on the method

ArnaudBarre · 2022-11-09T10:03:42Z

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

+      return process.kill(process.pid, 'SIGINT')
+    }
+
+    if (input === 'h') {


This can be itself a shortcut. This is common for CLI to print the help option in the help itself

ArnaudBarre · 2022-11-09T10:05:22Z

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

+export interface Shortcut {
+  key: string
+  description: string
+  action(server: ViteDevServer): void | Promise<void>
+}
+
+export const SHORTCUTS: Shortcut[] = [


Should this be exported?

ArnaudBarre · 2022-11-09T10:07:27Z

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

+      return
+    }
+
+    if (actionRunning) {


Nit: this should be the second check

ArnaudBarre · 2022-11-09T10:09:13Z

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

+       */
+      config.server.hmr = config.server.hmr !== true
+      config.logger.info(
+        colors.cyan(`  hmr ${config.server.hmr ? `enabled` : `disabled`}`)


I need to test but I think the two whitespaces at the beginning will look strange in the middle of Vite dev server logs

joelmukuthu · 2022-12-07T09:22:57Z

Closed in favour of #11228

aleclarson and others added 3 commits August 14, 2022 18:45

feat: add shortcut for toggling HMR updates

4bc43cb

Press "h" to toggle HMR updates on/off. Useful when you hit a bug and don't want your code edits to refresh the browser (which would mean losing the error logs and app state).

feat: add server.bindShortcuts method

881412e

joelmukuthu mentioned this pull request Aug 14, 2022

feat: add CLI keyboard shortcuts #6014

Closed

4 tasks

joelmukuthu changed the title ~~feat: add CLI keyboard shortcuts~~ Draft: feat: add CLI keyboard shortcuts Aug 14, 2022

joelmukuthu added 2 commits August 14, 2022 19:03

fix: fix browser-url resolution

1f81b03

fix: update logging from chalk to picocolors

ef66f78

aleclarson previously approved these changes Aug 14, 2022

View reviewed changes

joelmukuthu changed the title ~~Draft: feat: add CLI keyboard shortcuts~~ feat: add CLI keyboard shortcuts Aug 14, 2022

tony19 reviewed Aug 15, 2022

View reviewed changes

aleclarson requested review from antfu and patak-dev August 15, 2022 14:30

antfu reviewed Aug 15, 2022

View reviewed changes

sapphi-red added the p2-nice-to-have Not breaking anything but nice to have (priority) label Aug 16, 2022

joelmukuthu added 2 commits August 22, 2022 13:53

chore: remove f STDIN action

7a5cf4c

refactor: re-use existing resolved server URLs

9a31b04

joelmukuthu dismissed aleclarson’s stale review via 4bbbc3f August 22, 2022 15:07

aleclarson previously approved these changes Aug 22, 2022

View reviewed changes

tony19 reviewed Aug 22, 2022

View reviewed changes

joelmukuthu added 3 commits August 28, 2022 14:06

fix: only set raw mode for TTY streams

90da6ff

fix: prevent simultaneous actions

7e61bf9

docs: indicate default value for bindShortcuts

abd78e0

joelmukuthu added 3 commits August 28, 2022 15:46

feat: add h as a help shortcut

e7214e3

feat: add q as a quit shortcut

5793000

fix: re-bind shortcuts after server restart

cdc3509

joelmukuthu dismissed aleclarson’s stale review via cdc3509 August 28, 2022 13:55

fix: ensure process exits on q

6a04472

joelmukuthu requested review from tony19, aleclarson and patak-dev and removed request for patak-dev, tony19 and aleclarson August 30, 2022 16:11

patak-dev mentioned this pull request Nov 9, 2022

feat(cli): build --profile #10719

Merged

ArnaudBarre reviewed Nov 9, 2022

View reviewed changes

ArnaudBarre mentioned this pull request Dec 6, 2022

feat: add CLI keyboard shortcuts #11228

Merged

joelmukuthu closed this Dec 7, 2022

joelmukuthu deleted the feat/shortcuts branch December 7, 2022 09:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add CLI keyboard shortcuts #9673

feat: add CLI keyboard shortcuts #9673

joelmukuthu commented Aug 14, 2022 •

edited

aleclarson left a comment

tony19 Aug 15, 2022 •

edited

joelmukuthu Aug 16, 2022

tony19 Aug 15, 2022

joelmukuthu Aug 16, 2022

tony19 Aug 15, 2022

aleclarson Aug 15, 2022

patak-dev Aug 15, 2022

joelmukuthu Aug 16, 2022

patak-dev commented Aug 15, 2022

aleclarson commented Aug 15, 2022

patak-dev commented Aug 15, 2022

antfu Aug 15, 2022

joelmukuthu Aug 22, 2022

joelmukuthu commented Aug 16, 2022 •

edited

patak-dev commented Aug 22, 2022

aleclarson commented Aug 22, 2022

tony19 Aug 22, 2022 •

edited

joelmukuthu commented Aug 28, 2022

joelmukuthu commented Sep 20, 2022

PengBoUESTC commented Oct 8, 2022

aleclarson commented Oct 8, 2022

PengBoUESTC commented Oct 9, 2022

ArnaudBarre Nov 9, 2022 •

edited

ArnaudBarre Nov 9, 2022 •

edited

ArnaudBarre Nov 9, 2022

ArnaudBarre Nov 9, 2022

ArnaudBarre Nov 9, 2022

ArnaudBarre Nov 9, 2022

joelmukuthu commented Dec 7, 2022

	name: 'force restart',
	name: 're-bundle dependencies and restart',

		* Listen to `process.stdin` for pre-defined keyboard shortcuts, which are
		* printed to the terminal by this method.

feat: add CLI keyboard shortcuts #9673

feat: add CLI keyboard shortcuts #9673

Conversation

joelmukuthu commented Aug 14, 2022 • edited

Description

Additional context

What is the purpose of this pull request?

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

aleclarson left a comment

Choose a reason for hiding this comment

tony19 Aug 15, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patak-dev commented Aug 15, 2022

aleclarson commented Aug 15, 2022

patak-dev commented Aug 15, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelmukuthu commented Aug 16, 2022 • edited

patak-dev commented Aug 22, 2022

aleclarson commented Aug 22, 2022

tony19 Aug 22, 2022 • edited

Choose a reason for hiding this comment

joelmukuthu commented Aug 28, 2022

joelmukuthu commented Sep 20, 2022

PengBoUESTC commented Oct 8, 2022

aleclarson commented Oct 8, 2022

PengBoUESTC commented Oct 9, 2022

ArnaudBarre Nov 9, 2022 • edited

Choose a reason for hiding this comment

ArnaudBarre Nov 9, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelmukuthu commented Dec 7, 2022

joelmukuthu commented Aug 14, 2022 •

edited

tony19 Aug 15, 2022 •

edited

joelmukuthu commented Aug 16, 2022 •

edited

tony19 Aug 22, 2022 •

edited

ArnaudBarre Nov 9, 2022 •

edited

ArnaudBarre Nov 9, 2022 •

edited