Improved HMR #3138
Improved HMR #3138
Conversation
🦋 Changeset detectedLatest commit: 4f993ae The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
pkg: astro
| const parser = new DOMParser(); | ||
| import.meta.hot.on('astro:update', async ({ file }) => { |
There was a problem hiding this comment.
Custom HMR events are gone! Everything is handled by Vite now.
| if (hasAstroUpdate) { | ||
| return updatePage() | ||
| } |
There was a problem hiding this comment.
If an .astro file has been updated, we trigger our custom HMR here. This is the same event as before, just handled through Vite's built-in logic.
| // Bugfix: sometimes style URLs get normalized and end with `lang.css=` | ||
| // These will cause full reloads, so filter them out here | ||
| const mods = ctx.modules.filter(m => !m.url.endsWith('=')); |
There was a problem hiding this comment.
This was an edge case that was causing full reloads when they weren't called for. Sometimes ?astro&type=astro&index=0&lang.css files would be duplicated in the module graph but represented as ?astro=&type=astro&index=0&lang.css= which would trigger a full reload. We're removing these from the hot update handler since they're always irrelevant.
| // Bugfix: sometimes style URLs get normalized and end with `lang.css=` | ||
| // These will cause full reloads, so filter them out here | ||
| const mods = ctx.modules.filter(m => !m.url.endsWith('=')); | ||
| const isSelfAccepting = mods.every(m => m.isSelfAccepting || m.url.endsWith('.svelte')); |
There was a problem hiding this comment.
Check all modules for isSelfAccepting, not just the file that triggered HMR. For some reason Svelte files aren't marked as self-accepting, but they are.
| // HACK: extract dependencies from metadata until compiler static extraction handles them | ||
| const metadata = transformResult.code.split('$$createMetadata(')[1].split('});\n')[0] | ||
| const pattern = /specifier:\s*'([^']*)'/g; | ||
| const deps = new Set(); | ||
| let match; | ||
| while (match = pattern.exec(metadata)?.[1]) { | ||
| deps.add(match); | ||
| } | ||
| // // import.meta.hot.accept(["${id}", "${Array.from(deps).join('","')}"], (...mods) => mods); | ||
| // We need to be self-accepting, AND | ||
| // we need an explicity array of deps to track changes for SSR-only components | ||
| SUFFIX += `\nif (import.meta.hot) { | ||
| import.meta.hot.accept(mod => mod); | ||
| }`; |
There was a problem hiding this comment.
Rather than trigger HMR for only updates to this Astro file, we want to catch HMR updates for any dependencies. This is a bit hacky and could be cleaned up in the compiler, but it works for now.
* WIP: improved HMR * fix(hmr): improve hmr filtering to avoid full reloads * chore: add changeset
Changes
vite:beforeUpdateevent instead.vite-plugin-astroTesting
Still looking into HMR tests
Docs
Bugfixes only