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

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

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

@ -22,7 +22,10 @@ interface ExtractedProps {
props: Record<string | number | symbol, any>; 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. // 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. // 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 => { transitionDirectivesToCopyOnIsland.forEach((name) => {
if(props[name]) { if (props[name]) {
island.props[name] = props[name]; island.props[name] = props[name];
} }
}); });