From 335ec8599132e39ecac9e81082869d82b37c98fd Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Fri, 29 Sep 2023 17:05:42 -0400 Subject: [PATCH] Fixes View transition styles being missing when component used multiple times --- .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 +-- pnpm-lock.yaml | 25 ------------------- 9 files changed, 53 insertions(+), 31 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 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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d50453744c9..d41db780d94d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -149,16 +149,6 @@ importers: specifier: ^3.2.0 version: link:../../packages/astro - examples/deno: - dependencies: - astro: - specifier: ^3.2.0 - version: link:../../packages/astro - devDependencies: - '@astrojs/deno': - specifier: ^5.0.1 - version: 5.0.1(astro@packages+astro) - examples/framework-alpine: dependencies: '@astrojs/alpinejs': @@ -920,12 +910,6 @@ importers: specifier: workspace:* version: link:../../.. - packages/astro/e2e/fixtures/css-sourcemaps: - dependencies: - astro: - specifier: workspace:* - version: link:../../.. - packages/astro/e2e/fixtures/custom-client-directives: dependencies: '@astrojs/react': @@ -5224,15 +5208,6 @@ packages: resolution: {integrity: sha512-Mp+qrNhly+27bL/Zq8lGeUY+YrdoU0eDfIlAeGIPrzt0PnI/jGpvPUdCaugv4zbCrDkOUScFfcbeEiYumrdJnw==} dev: false - /@astrojs/deno@5.0.1(astro@packages+astro): - resolution: {integrity: sha512-nYztGqHqC+q3A9ynjj3gblAkO/ZylDwahjVTx+2DvZgX4U+BJU/gL5BZkNtL+P10opCKJi29NvvVFvk6jwZHmA==} - peerDependencies: - astro: '*' - dependencies: - astro: link:packages/astro - esbuild: 0.19.2 - dev: true - /@astrojs/language-server@2.3.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6): resolution: {integrity: sha512-NFSzszjR4+f0+fTUCuFKXrLWusJFqWvHMrIzHB0lXUE8dt3Dm1Ok9Emrdj3s3BvlguJz05MV9xSIz1puMvomtQ==} hasBin: true