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)
+  )
+}

Summary by CodeRabbit

• Refactor
  • Automated Hot Module Replacement registration for stores. Store configurations no longer require manual HMR setup code; the system now automatically detects and registers stores for HMR support during development.

[netlify]

✅ Deploy Preview for pinia-official canceled.

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

[netlify]

✅ Deploy Preview for pinia-official canceled.

Name	Link
🔨 Latest commit	6b0ac78
🔍 Latest deploy log	https://app.netlify.com/projects/pinia-official/deploys/6909c5788daaee0008983328

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

📥 Commits

Reviewing files that changed from the base of the PR and between e1e9a7d and 6b0ac78.

📒 Files selected for processing (6)

• packages/nuxt/playground/pages/index.vue (1 hunks)
• packages/nuxt/playground/stores/counter.ts (1 hunks)
• packages/nuxt/playground/stores/nested/some-store.ts (0 hunks)
• packages/nuxt/playground/stores/with-skip-hydrate.ts (0 hunks)
• packages/nuxt/src/auto-hmr-plugin.ts (1 hunks)
• packages/nuxt/src/module.ts (2 hunks)

 ___________________________
< Loving your code to bits. >
 ---------------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting in your project's settings in CodeRabbit to enable early access features such as new models, tools, and more.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@pinia/nuxt@2954

npm i https://pkg.pr.new/pinia@2954

npm i https://pkg.pr.new/@pinia/testing@2954

commit: 8d6cf79

[codecov]

Codecov Report

❌ Patch coverage is 78.94737% with 12 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.84%. Comparing base (4865716) to head (8d6cf79).
⚠️ Report is 61 commits behind head on v3.

Files with missing lines	Patch %	Lines
packages/nuxt/src/auto-hmr-plugin.ts	77.35%	12 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##               v3    #2954      +/-   ##
==========================================
- Coverage   91.34%   90.84%   -0.50%     
==========================================
  Files          17       19       +2     
  Lines        1398     1672     +274     
  Branches      211      232      +21     
==========================================
+ Hits         1277     1519     +242     
- Misses        120      151      +31     
- Partials        1        2       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.