Storybook: docs are not regenerated on the fly in dev mode

[florian-sanders-cc]

Summary

There were actually two issues:

• vite was not picking up custom-elements.json file as a virtual file because the /dist/custom-elements.json file actually exists (sometimes at least),
• the CEM was not updated when a component was updated because the HMR was not aware of the relationship between the component file and the custom-elements.json virtual file/module.

Context

We've recently moved to vite & storybook > 7.0.

It looks like the generate-cem-vite-plugin does not work as it should. It generates the docs when launching storybook but it's not run when the doc of a component is updated (that is to say, when a component file is modified).

This seems to be related to HMR:

• the plugin is not run because the custom-elements.json file is not requested when HMR happens, only the component file. More precisely, it seems the browser requests the file and vite serves a cached version of the file because it's not supposed to have changed.
• the problem is the same whatever the lifecycle hook used by the plugin (transform / load).

We may need a way to hook into HMR when a component is updated and tell vite to consider the custom-elements.json module as "invalidated" :thinking:

For more info, see:

• https://vitejs.dev/guide/api-hmr.html
• https://vitejs.dev/guide/api-plugin.html#handlehotupdate