diff --git a/.changeset/wet-numbers-serve.md b/.changeset/wet-numbers-serve.md new file mode 100644 index 000000000000..049251d76888 --- /dev/null +++ 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 index 109629428ca8..eab00891d261 100644 --- 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; + propagators: Set; } /* Preview server stuff */ diff --git a/packages/astro/src/core/render/result.ts b/packages/astro/src/core/render/result.ts index abfcb5e3e8e9..6f8ca930334c 100644 --- 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 index feae0e0e841e..0748cbbb3e95 100644 --- 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 new file mode 100644 index 000000000000..df29afcaaac2 --- /dev/null +++ b/packages/astro/test/fixtures/view-transitions/src/components/Wait.astro @@ -0,0 +1,4 @@ +--- +await new Promise(resolve => setTimeout(resolve, 10)); +--- +
{Astro.props.num}
diff --git a/packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro b/packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro new file mode 100644 index 000000000000..5c6c2059c9c0 --- /dev/null +++ b/packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro @@ -0,0 +1,13 @@ +--- +import Wait from '../components/Wait.astro'; +--- + + + Testing + + + {[1,2].map(num => ( + + ))} + + diff --git a/packages/astro/test/view-transitions.test.js b/packages/astro/test/view-transitions.test.js new file mode 100644 index 000000000000..d0c32b0dffd0 --- /dev/null +++ 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 index 31976c19d321..80940bc07195 100644 --- 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;