Skip to content

Commit

Permalink
[ci] format
Browse files Browse the repository at this point in the history
  • Loading branch information
matthewp authored and astrobot-houston committed Aug 2, 2023
1 parent 41afb84 commit 6806629
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 19 deletions.
34 changes: 20 additions & 14 deletions packages/astro/components/ViewTransitions.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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}"]`);
}
Expand All @@ -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.
Expand All @@ -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);
}
Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/astro/e2e/view-transitions.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand Down
9 changes: 6 additions & 3 deletions packages/astro/src/runtime/server/hydration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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];
}
});
Expand Down

0 comments on commit 6806629

Please sign in to comment.