feat: automatic HMR code (nuxt only)

[BobbieGoede]

This is a quick and dirty implementation of a plugin that automatically appends the HMR code to files that register a pinia store (nuxt only), this only works for very basic setups in this state.

This could be implemented using unplugin so that it works in vue projects (without nuxt) as well, in a separate repo if preferred.

Maybe this functionality was already considered, I couldn't find an old discussion or PR suggesting this 🤔

How it works

Given an example project has the following store:

// my-store.ts
export const myStore = defineStore('my-store', /* ... */)

The plugin checks if it contains defineStore and does not contain acceptHMRUpdate, then walks the top level nodes of the parsed code AST to find the export/variable declaration which uses the defineStore function. This code likely needs to be expanded to cover more use cases.

If an export/variable declaration is found, simply append the necessary HMR code:

// my-store.ts
export const myStore = defineStore('my-store', /* ... */)
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(myStore, import.meta.hot)
+  )
+}

[netlify]

✅ Deploy Preview for pinia-official canceled.

Name	Link
🔨 Latest commit	36f8a4b
🔍 Latest deploy log	https://app.netlify.com/sites/pinia-official/deploys/67e07dd45a16de00080f7d81