Skip to content

feat: add off method to ViteHotContext (issue #14185)#14518

Merged
bluwy merged 3 commits intovitejs:mainfrom
vincer2040:removeListeners
Oct 11, 2023
Merged

feat: add off method to ViteHotContext (issue #14185)#14518
bluwy merged 3 commits intovitejs:mainfrom
vincer2040:removeListeners

Conversation

@vincer2040
Copy link
Contributor

@vincer2040 vincer2040 commented Oct 2, 2023

Description

This pr adds the ability to remove listeners added using import.meta.hot.on() as
requested in issue #14185

fix #14185

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.

Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The implementation looks great. Can we add a test for it around

vite/playground/hmr/hmr.ts

Lines 107 to 115 in 56c5f4f

import.meta.hot.on('custom:foo', ({ msg }) => {
text('.custom', msg)
})
// send custom event to server to calculate 1 + 2
import.meta.hot.send('custom:remote-add', { a: 1, b: 2 })
import.meta.hot.on('custom:remote-add-result', ({ result }) => {
text('.custom-communication', result)
})
and
test('plugin hmr handler + custom event', async () => {
const el = await page.$('.custom')
editFile('customFile.js', (code) => code.replace('custom', 'edited'))
await untilUpdated(() => el.textContent(), 'edited')
})
test('plugin client-server communication', async () => {
const el = await page.$('.custom-communication')
await untilUpdated(() => el.textContent(), '3')
})

(new test cases, but those are existing examples)

@bluwy bluwy added the p2-nice-to-have Not breaking anything but nice to have (priority) label Oct 3, 2023
bluwy
bluwy previously approved these changes Oct 5, 2023
Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you add off to the document?

// `InferCustomEventPayload` provides types for built-in Vite events
on<T extends string>(
event: T,
cb: (payload: InferCustomEventPayload<T>) => void,
): void

vite/docs/guide/api-hmr.md

Lines 167 to 183 in 6868480

## `hot.on(event, cb)`
Listen to an HMR event.
The following HMR events are dispatched by Vite automatically:
- `'vite:beforeUpdate'` when an update is about to be applied (e.g. a module will be replaced)
- `'vite:afterUpdate'` when an update has just been applied (e.g. a module has been replaced)
- `'vite:beforeFullReload'` when a full reload is about to occur
- `'vite:beforePrune'` when modules that are no longer needed are about to be pruned
- `'vite:invalidate'` when a module is invalidated with `import.meta.hot.invalidate()`
- `'vite:error'` when an error occurs (e.g. syntax error)
- `'vite:ws:disconnect'` when the WebSocket connection is lost
- `'vite:ws:connect'` when the WebSocket connection is (re-)established
Custom HMR events can also be sent from plugins. See [handleHotUpdate](./api-plugin#handlehotupdate) for more details.

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p2-nice-to-have Not breaking anything but nice to have (priority)

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

[HMR API] add the ability to remove listeners added using import.meta.hot.on()

4 participants