Head propagation graph walking on new pages (#8646)

* Head propagation graph walking on new pages * Add changeset * Avoid the bang * Add TODOs about handling in resolveId
withastro · Sep 25, 2023 · 69fbf95 · 69fbf95
1 parent 306649c
commit 69fbf95
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 0 deletions.
diff --git a/.changeset/fifty-comics-cross.md b/.changeset/fifty-comics-cross.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix cases of head propagation not occuring in dev server
diff --git a/packages/astro/src/vite-plugin-head/index.ts b/packages/astro/src/vite-plugin-head/index.ts
@@ -45,19 +45,46 @@ export default function configHeadVitePlugin(): vite.Plugin {
 
 	return {
 		name: 'astro:head-metadata',
+		enforce: 'pre',
+		apply: 'serve',
 		configureServer(_server) {
 			server = _server;
 		},
+		resolveId(source, importer) {
+			if(importer) {
+				// Do propagation any time a new module is imported. This is because
+				// A module with propagation might be loaded before one of its parent pages
+				// is loaded, in which case that parent page won't have the in-tree and containsHead
+				// values. Walking up the tree in resolveId ensures that they do
+				return this.resolve(source, importer, { skipSelf: true }).then(result => {
+					if(result) {
+						let info = this.getModuleInfo(result.id);
+						const astro = info && getAstroMetadata(info);
+						if(astro) {
+							if(astro.propagation === 'self' || astro.propagation === 'in-tree') {
+								propagateMetadata.call(this, importer, 'propagation', 'in-tree');
+							}
+							if(astro.containsHead) {
+								propagateMetadata.call(this, importer, 'containsHead', true);
+							}
+						}
+					}
+					return result;
+				});
+			}
+    },
 		transform(source, id) {
 			if (!server) {
 				return;
 			}
 
+			// TODO This could probably be removed now that this is handled in resolveId
 			let info = this.getModuleInfo(id);
 			if (info && getAstroMetadata(info)?.containsHead) {
 				propagateMetadata.call(this, id, 'containsHead', true);
 			}
 
+			// TODO This could probably be removed now that this is handled in resolveId
 			if (info && getAstroMetadata(info)?.propagation === 'self') {
 				const mod = server.moduleGraph.getModuleById(id);
 				for (const parent of mod?.importers ?? []) {

diff --git a/packages/astro/test/fixtures/view-transitions/package.json b/packages/astro/test/fixtures/view-transitions/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/view-transitions",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/view-transitions/src/components/Animate.astro b/packages/astro/test/fixtures/view-transitions/src/components/Animate.astro
@@ -0,0 +1 @@
+<pre transition:name="animate"></pre>
diff --git a/packages/astro/test/fixtures/view-transitions/src/components/AnimateContainer.astro b/packages/astro/test/fixtures/view-transitions/src/components/AnimateContainer.astro
@@ -0,0 +1 @@
+<slot/>
diff --git a/packages/astro/test/fixtures/view-transitions/src/components/Animations.astro b/packages/astro/test/fixtures/view-transitions/src/components/Animations.astro
@@ -0,0 +1,4 @@
+---
+import Animate from './Animate.astro';
+---
+<Animate />
diff --git a/packages/astro/test/fixtures/view-transitions/src/pages/one.astro b/packages/astro/test/fixtures/view-transitions/src/pages/one.astro
@@ -0,0 +1,11 @@
+---
+import Animate from '../components/Animate.astro';
+---
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+	<Animate />
+</body>
+</html>
diff --git a/packages/astro/test/fixtures/view-transitions/src/pages/two.astro b/packages/astro/test/fixtures/view-transitions/src/pages/two.astro
@@ -0,0 +1,15 @@
+---
+
+import AnimateContainer from '../components/AnimateContainer.astro';
+import Animations from '../components/Animations.astro';
+---
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+	<AnimateContainer>
+		<Animations />
+	</AnimateContainer>
+</body>
+</html>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml