michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes View transition styles being missing when component used multiple times (#8710)

Browse source
This commit is contained in:
Matthew Phillips 2023-10-02 08:51:53 -04:00 committed by GitHub
parent a067c2a2c7
commit 4c2bec681b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 53 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/wet-numbers-serve.md Normal file
View file

@ -0,0 +1,6 @@
---
'@astrojs/markdoc': patch
'astro': patch
---
Fixes View transition styles being missing when component used multiple times

2
packages/astro/src/@types/astro.ts
View file

@ -2209,7 +2209,7 @@ export interface SSRMetadata {
hasRenderedHead: boolean; hasRenderedHead: boolean;
headInTree: boolean; headInTree: boolean;
extraHead: string[]; extraHead: string[];
propagators: Map<AstroComponentFactory, AstroComponentInstance>; propagators: Set<AstroComponentInstance>;
} }
/* Preview server stuff */ /* Preview server stuff */

2
packages/astro/src/core/render/result.ts
View file

@ -224,7 +224,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
hasDirectives: new Set(), hasDirectives: new Set(),
headInTree: false, headInTree: false,
extraHead: [], extraHead: [],
propagators: new Map(), propagators: new Set(),
}, },
}; };

4
packages/astro/src/runtime/server/render/astro/instance.ts
View file

@ -82,8 +82,8 @@ export function createAstroComponentInstance(
) { ) {
validateComponentProps(props, displayName); validateComponentProps(props, displayName);
const instance = new AstroComponentInstance(result, props, slots, factory); const instance = new AstroComponentInstance(result, props, slots, factory);
if (isAPropagatingComponent(result, factory) && !result._metadata.propagators.has(factory)) { if (isAPropagatingComponent(result, factory)) {
result._metadata.propagators.set(factory, instance); result._metadata.propagators.add(instance);
} }
return instance; return instance;
} }

4
packages/astro/test/fixtures/view-transitions/src/components/Wait.astro vendored Normal file
View file

@ -0,0 +1,4 @@
---
await new Promise(resolve => setTimeout(resolve, 10));
---
<pre transition:name="animate">{Astro.props.num}</pre>

13
packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro vendored Normal file
View file

@ -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>

25
packages/astro/test/view-transitions.test.js Normal file
View file

@ -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);
});
});

3
packages/integrations/markdoc/components/TreeNode.ts
View file

@ -92,8 +92,7 @@ export const ComponentNode = createComponent({
// `result.propagators` has been moved to `result._metadata.propagators` // `result.propagators` has been moved to `result._metadata.propagators`
// TODO: remove this fallback in the next markdoc integration major // TODO: remove this fallback in the next markdoc integration major
const propagators = result._metadata.propagators || result.propagators; const propagators = result._metadata.propagators || result.propagators;
propagators.set( propagators.add(
{},
{ {
init() { init() {
return headAndContent; return headAndContent;