diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2023-10-02 08:51:53 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-10-02 08:51:53 -0400 |
| commit | 4c2bec681b0752e7215b8a32bd2d44bf477adac1 (patch) | |
| tree | 9988d3452a81c772b7cf6d4fd56a8aa4450ab63a | |
| parent | a067c2a2c7fee6786e9cc8c50bc9aae645750f76 (diff) | |
| download | astro-4c2bec681b0752e7215b8a32bd2d44bf477adac1.tar.gz astro-4c2bec681b0752e7215b8a32bd2d44bf477adac1.tar.zst astro-4c2bec681b0752e7215b8a32bd2d44bf477adac1.zip | |
Fixes View transition styles being missing when component used multiple times (#8710)
Diffstat (limited to '')
8 files changed, 53 insertions, 6 deletions
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<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 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)); +--- +<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 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'; +--- +<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 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; |