diff --git a/.changeset/tasty-tigers-flow.md b/.changeset/tasty-tigers-flow.md
new file mode 100644
index 000000000..e7a67c8d0
--- /dev/null
+++ b/.changeset/tasty-tigers-flow.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add fine-grained HMR support for Astro files
diff --git a/packages/astro/package.json b/packages/astro/package.json
index a1f114ba8..2a09498ac 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -85,8 +85,8 @@
"htmlparser2": "^7.1.2",
"kleur": "^4.1.4",
"magic-string": "^0.25.7",
+ "micromorph": "^0.0.2",
"mime": "^3.0.0",
- "morphdom": "^2.6.1",
"parse5": "^6.0.1",
"path-to-regexp": "^6.2.0",
"postcss": "^8.3.8",
diff --git a/packages/astro/src/runtime/client/hmr.ts b/packages/astro/src/runtime/client/hmr.ts
index ca98ceeff..8bd8d3937 100644
--- a/packages/astro/src/runtime/client/hmr.ts
+++ b/packages/astro/src/runtime/client/hmr.ts
@@ -1,38 +1,20 @@
if (import.meta.hot) {
const parser = new DOMParser();
- import.meta.hot.on('astro:reload', async ({ html }: { html: string }) => {
- const { default: morphdom } = await import('morphdom');
+ import.meta.hot.on('astro:update', async ({ file }) => {
+ const { default: diff } = await import('micromorph');
+ // eslint-disable-next-line no-console
+ console.log(`[vite] hot updated: ${file}`);
+ const html = await fetch(`${window.location}`).then(res => res.text());
const doc = parser.parseFromString(html, 'text/html');
- morphdom(document.head, doc.head, {
- onBeforeElUpdated(fromEl, toEl) {
- // Do not update identical tags
- if (fromEl.isEqualNode(toEl)) {
- return false;
- }
-
- // Do not update or