Guidance for plugin-owned runtimes and CSS HMR in full bundle mode

[skovhus]

We’re looking for documentation/guidance for plugin authors supporting Vite full bundle mode (experimental.bundledDev). Some plugins do more than transform modules. They also need:

• a plugin-owned client runtime
• plugin-owned dev assets such as virtual CSS
• custom HMR behavior to keep those assets in sync with JS updates

Concrete example: The Babel StyleX plugin is an example of a plugin that fails in full bundle mode. Same problem for the SWC StyleX Plugin.

I'm wondering what is the correct way for a plugin to provide its own runtime + CSS HMR flow in full bundle mode?

[sapphi-red]

The things listed should be available, so I guess there's other requirements:

• a plugin-owned client runtime
• plugin-owned dev assets such as virtual CSS

These can be a virtual module, or an external module served by a custom handler. Virtual modules will be managed in the Vite's HMR life-cycle, while an external module won't.

• custom HMR behavior to keep those assets in sync with JS updates

While handleHotUpdate hook is not supported yet, full bundle mode supports HMR events so that should work.

[skovhus]

While handleHotUpdate hook is not supported yet, full bundle mode supports HMR events so that should work.

I see both plugins use the handleHotUpdate hook. Could we log a warning if a plugin is using that and we are in FBM?

So is the workaround to implemeted HMR events instead?

https://github.com/facebook/stylex/blob/ef7d0c55893827bb266e3fa4a9de6007ce425f2d/packages/%40stylexjs/unplugin/src/vite.js#L132 and https://github.com/Dwlad90/stylex-swc-plugin/blob/d4f9a8a5c0071402204888fde57d8f680d17cf0c/packages/unplugin/src/index.ts#L482