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

[ci] format

Browse source
This commit is contained in:
matthewp 2023-08-02 18:44:36 +00:00 committed by astrobot-houston
parent 41afb84057
commit 68066290df
3 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/astro/components/ViewTransitions.astro
View file

@ -93,10 +93,10 @@ const { fallback = 'animate' } = Astro.props as Props;
const persistedHeadElement = (el: Element): Element | null => {
const id = el.getAttribute(PERSIST_ATTR);
const newEl = id && doc.head.querySelector(`[${PERSIST_ATTR}="${id}"]`);
if(newEl) {
if (newEl) {
return newEl;
}
if(el.matches('link[rel=stylesheet]')) {
if (el.matches('link[rel=stylesheet]')) {
const href = el.getAttribute('href');
return doc.head.querySelector(`link[rel=stylesheet][href="${href}"]`);
}
@ -105,11 +105,11 @@ const { fallback = 'animate' } = Astro.props as Props;
const swap = () => {
// Swap head
for(const el of Array.from(document.head.children)) {
for (const el of Array.from(document.head.children)) {
const newEl = persistedHeadElement(el);
// If the element exists in the document already, remove it
// from the new document and leave the current node alone
if(newEl) {
if (newEl) {
newEl.remove();
} else {
// Otherwise remove the element in the head. It doesn't exist in the new page.
@ -122,16 +122,16 @@ const { fallback = 'animate' } = Astro.props as Props;
// Move over persist stuff in the body
const oldBody = document.body;
document.body.replaceWith(doc.body);
for(const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
for (const el of oldBody.querySelectorAll(`[${PERSIST_ATTR}]`)) {
const id = el.getAttribute(PERSIST_ATTR);
const newEl = document.querySelector(`[${PERSIST_ATTR}="${id}"]`);
if(newEl) {
if (newEl) {
// The element exists in the new page, replace it with the element
// from the old page so that state is preserved.
newEl.replaceWith(el);
}
}
if (state?.scrollY != null) {
scrollTo(0, state.scrollY);
}
@ -141,20 +141,26 @@ const { fallback = 'animate' } = Astro.props as Props;
// Wait on links to finish, to prevent FOUC
const links: Promise<any>[] = [];
for(const el of doc.querySelectorAll('head link[rel=stylesheet]')) {
for (const el of doc.querySelectorAll('head link[rel=stylesheet]')) {
// Do not preload links that are already on the page.
if(!document.querySelector(`[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`)) {
if (
!document.querySelector(
`[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]`
)
) {
const c = document.createElement('link');
c.setAttribute('rel', 'preload');
c.setAttribute('as', 'style');
c.setAttribute('href', el.getAttribute('href')!);
links.push(new Promise<any>(resolve => {
['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve));
document.head.append(c);
}));
links.push(
new Promise<any>((resolve) => {
['load', 'error'].forEach((evName) => c.addEventListener(evName, resolve));
document.head.append(c);
})
);
}
}
links.length && await Promise.all(links);
links.length && (await Promise.all(links));
if (fallback === 'animate') {
let isAnimating = false;

4
packages/astro/e2e/view-transitions.test.js
View file

@ -252,7 +252,7 @@ test.describe('View Transitions', () => {
const vid = page.locator('video[data-ready]');
await expect(vid).toBeVisible();
const firstTime = await page.evaluate(getTime);
// Navigate to page 2
await page.click('#click-two');
const p = page.locator('#video-two');
@ -270,7 +270,7 @@ test.describe('View Transitions', () => {
await page.click('.increment');
await expect(cnt).toHaveText('6');
// Navigate to page 2
await page.click('#click-two');
const p = page.locator('#island-two');

9
packages/astro/src/runtime/server/hydration.ts
View file

@ -22,7 +22,10 @@ interface ExtractedProps {
props: Record<string | number | symbol, any>;
}
const transitionDirectivesToCopyOnIsland = Object.freeze(['data-astro-transition-scope', 'data-astro-transition-persist']);
const transitionDirectivesToCopyOnIsland = Object.freeze([
'data-astro-transition-scope',
'data-astro-transition-persist',
]);
// Used to extract the directives, aka `client:load` information about a component.
// Finds these special props and removes them from what gets passed into the component.
@ -168,8 +171,8 @@ export async function generateHydrateScript(
})
);
transitionDirectivesToCopyOnIsland.forEach(name => {
if(props[name]) {
transitionDirectivesToCopyOnIsland.forEach((name) => {
if (props[name]) {
island.props[name] = props[name];
}
});