From 4c2bec681b0752e7215b8a32bd2d44bf477adac1 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 2 Oct 2023 08:51:53 -0400 Subject: [PATCH] Fixes View transition styles being missing when component used multiple times (#8710) --- .changeset/wet-numbers-serve.md | 6 +++++ packages/astro/src/@types/astro.ts | 2 +- packages/astro/src/core/render/result.ts | 2 +- .../runtime/server/render/astro/instance.ts | 4 +-- .../src/components/Wait.astro | 4 +++ .../view-transitions/src/pages/multiple.astro | 13 ++++++++++ packages/astro/test/view-transitions.test.js | 25 +++++++++++++++++++ .../markdoc/components/TreeNode.ts | 3 +-- 8 files changed, 53 insertions(+), 6 deletions(-) create mode 100644 .changeset/wet-numbers-serve.md create mode 100644 packages/astro/test/fixtures/view-transitions/src/components/Wait.astro create mode 100644 packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro create mode 100644 packages/astro/test/view-transitions.test.js diff --git a/.changeset/wet-numbers-serve.md b/.changeset/wet-numbers-serve.md new file mode 100644 index 000000000..049251d76 --- /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 109629428..eab00891d 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 abfcb5e3e..6f8ca9303 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 feae0e0e8..0748cbbb3 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 000000000..df29afcaa --- /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 000000000..5c6c2059c --- /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 000000000..d0c32b0df --- /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 31976c19d..80940bc07 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;