mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Fixes View transition styles being missing when component used multiple times (#8710)
This commit is contained in:
parent
a067c2a2c7
commit
4c2bec681b
8 changed files with 53 additions and 6 deletions
6
.changeset/wet-numbers-serve.md
Normal file
6
.changeset/wet-numbers-serve.md
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
'@astrojs/markdoc': patch
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fixes View transition styles being missing when component used multiple times
|
|
@ -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 */
|
||||||
|
|
|
@ -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(),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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
4
packages/astro/test/fixtures/view-transitions/src/components/Wait.astro
vendored
Normal 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
13
packages/astro/test/fixtures/view-transitions/src/pages/multiple.astro
vendored
Normal 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
25
packages/astro/test/view-transitions.test.js
Normal 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);
|
||||||
|
});
|
||||||
|
});
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue