Fixes View transition styles being missing when component used multip…

…le times (#8710)
withastro · Oct 2, 2023 · 4c2bec6 · 4c2bec6
1 parent a067c2a
commit 4c2bec6
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 6 deletions.
diff --git a/.changeset/wet-numbers-serve.md b/.changeset/wet-numbers-serve.md
@@ -0,0 +1,6 @@
+---
+'@astrojs/markdoc': patch
+'astro': patch
+---
+
+Fixes View transition styles being missing when component used multiple times
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -2209,7 +2209,7 @@ export interface SSRMetadata {
 	hasRenderedHead: boolean;
 	headInTree: boolean;
 	extraHead: string[];
-	propagators: Map<AstroComponentFactory, AstroComponentInstance>;
+	propagators: Set<AstroComponentInstance>;
 }
 
 /* Preview server stuff */

diff --git a/packages/astro/src/core/render/result.ts b/packages/astro/src/core/render/result.ts
@@ -224,7 +224,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
 			hasDirectives: new Set(),
 			headInTree: false,
 			extraHead: [],
-			propagators: new Map(),
+			propagators: new Set(),
 		},
 	};
 

diff --git a/packages/astro/src/runtime/server/render/astro/instance.ts b/packages/astro/src/runtime/server/render/astro/instance.ts
@@ -82,8 +82,8 @@ export function createAstroComponentInstance(
 ) {
 	validateComponentProps(props, displayName);
 	const instance = new AstroComponentInstance(result, props, slots, factory);
-	if (isAPropagatingComponent(result, factory) && !result._metadata.propagators.has(factory)) {
-		result._metadata.propagators.set(factory, instance);
+	if (isAPropagatingComponent(result, factory)) {
+		result._metadata.propagators.add(instance);
 	}
 	return instance;
 }

diff --git a/packages/astro/test/fixtures/view-transitions/src/components/Wait.astro b/packages/astro/test/fixtures/view-transitions/src/components/Wait.astro
@@ -0,0 +1,4 @@
+---
+await new Promise(resolve => setTimeout(resolve, 10));
+---
+<pre transition:name="animate">{Astro.props.num}</pre>
diff --git a/packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro b/packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro
@@ -0,0 +1,13 @@
+---
+import Wait from '../components/Wait.astro';
+---
+<html>
+<head>
+	<title>Testing</title>
+</head>
+<body>
+	{[1,2].map(num => (
+		<Wait num={num} />
+	))}
+</body>
+</html>
diff --git a/packages/astro/test/view-transitions.test.js b/packages/astro/test/view-transitions.test.js
@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('View Transitions styles', () => {
+	let fixture;
+	let devServer;
+
+	before(async () => {
+		fixture = await loadFixture({ root: './fixtures/view-transitions/' });
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	})
+
+	it('style tag added for each instance of the component', async () => {
+		let res = await fixture.fetch('/multiple');
+		let html = await res.text();
+		let $ = cheerio.load(html);
+
+		expect($('head style')).to.have.a.lengthOf(3);
+	});
+});
diff --git a/packages/integrations/markdoc/components/TreeNode.ts b/packages/integrations/markdoc/components/TreeNode.ts
@@ -92,8 +92,7 @@ export const ComponentNode = createComponent({
 			// `result.propagators` has been moved to `result._metadata.propagators`
 			// TODO: remove this fallback in the next markdoc integration major
 			const propagators = result._metadata.propagators || result.propagators;
-			propagators.set(
-				{},
+			propagators.add(
 				{
 					init() {
 						return headAndContent;