Hmr Api
The Farm HMR API is compatible with Vite's HMR API.
Farm exports its HMR API via the special import.meta.hot object(compatible with Vite):
Required Conditional Guard
HMR only works for development mode, make sure to guard HMR API usage with a conditional block:
IntelliSense for TypeScript
The same as Vite, Farm provides type definitions for import.meta.hot in @farmfe/core/client.d.ts. You can create an env.d.ts in the src directory so TypeScript picks up the type definitions:
hot.accept()
For a self-accepted module, use import.meta.hot.accept():
hot.accept(cb)
If you want to update the module status based on exports of updated module, you can use import.meta.hot.accept(cb):
Arguments of cb is the exports of updated module, you can do updates based on it.
hot.accept(deps, cb)
A module can also accept updates from direct dependencies without reloading itself.
Accept single dependency:
Accept multiple dependencies:
hot.dispose(cb)
A self-accepting module or a module that expects to be accepted by others can use hot.dispose to clean-up any persistent side effects created by its updated copy:
hot.prune(cb)
Register a callback that will call when the module is no longer imported on the page. Compared to hot.dispose, this can be used if the source code cleans up side-effects by itself on updates and you only need to clean-up when it's removed from the page. Farm currently uses this for .css imports(the same as Vite).
hot.data
The import.meta.hot.data object is persisted across different instances of the same updated module. It can be used to pass on information from a previous version of the module to the next one.
hot.invalidate(message?: string)
A self-accepting module may realize during runtime that it can't handle a HMR update, and so the update needs to be forcefully propagated to importers. By calling import.meta.hot.invalidate(), the HMR server will invalidate the importers of the caller, as if the caller wasn't self-accepting. This will log a message both in the browser console and in the terminal. You can pass a message to give some context on why the invalidation happened.
Note that you should always call import.meta.hot.accept even if you plan to call invalidate immediately afterwards, or else the HMR client won't listen for future changes to the self-accepting module. To communicate your intent clearly, we recommend calling invalidate within the accept callback like so:
hot.on(event, cb)
The same as Vite, see Vite hot.on
hot.off(event, cb)
Remove callback from the event listeners
hot.send(event, data)
Send message from HMR client to dev server:
Receive message on dev server:
