Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-24 23:21:57 -05:00
Code Issues Activity

fix: update hydration for SPA mode

Browse source
This commit is contained in:
Nate Moore 2022-03-26 05:20:04 -05:00
parent 51daacfabd
commit 192c3fffc6
5 changed files with 147 additions and 128 deletions
packages/astro/src/runtime/client
idle.tsload.tsmedia.tsonly.tsvisible.ts

11
packages/astro/src/runtime/client/idle.ts
View file

@ -5,11 +5,10 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* (or after a short delay, if `requestIdleCallback`) isn't supported
*/
export default async function onIdle(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
async function idle() {
const cb = async () => {
const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
if (roots.length === 0) {
throw new Error(`Unable to find the root for the component ${options.name}`);
}
const roots = document.querySelectorAll(`astro-root[ssr][uid="${astroId}"]`);
if (roots.length === 0) return;
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
@ -28,6 +27,7 @@ export default async function onIdle(astroId: string, options: HydrateOptions, g
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
};
@ -36,4 +36,7 @@ export default async function onIdle(astroId: string, options: HydrateOptions, g
} else {
setTimeout(cb, 200);
}
window.addEventListener('astro:locationchange', idle, { once: true })
}
idle();
}

14
packages/astro/src/runtime/client/load.ts
View file

@ -4,10 +4,9 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* Hydrate this component immediately
*/
export default async function onLoad(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
if (roots.length === 0) {
throw new Error(`Unable to find the root for the component ${options.name}`);
}
async function load() {
const roots = document.querySelectorAll(`astro-root[ssr][uid="${astroId}"]`);
if (roots.length === 0) return;
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
@ -23,10 +22,13 @@ export default async function onLoad(astroId: string, options: HydrateOptions, g
innerHTML = fragment.innerHTML;
}
//const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null;
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
window.addEventListener('astro:locationchange', load, { once: true })
}
load();
}

11
packages/astro/src/runtime/client/media.ts
View file

@ -4,10 +4,9 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* Hydrate this component when a matching media query is found
*/
export default async function onMedia(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
if (roots.length === 0) {
throw new Error(`Unable to find the root for the component ${options.name}`);
}
async function media() {
const roots = document.querySelectorAll(`astro-root[ssr][uid="${astroId}"]`);
if (roots.length === 0) return;
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
@ -27,6 +26,7 @@ export default async function onMedia(astroId: string, options: HydrateOptions,
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
};
@ -38,4 +38,7 @@ export default async function onMedia(astroId: string, options: HydrateOptions,
mql.addEventListener('change', cb, { once: true });
}
}
window.addEventListener('astro:locationchange', media, { once: true })
}
media();
}

13
packages/astro/src/runtime/client/only.ts
View file

@ -3,11 +3,10 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
/**
* Hydrate this component immediately
*/
export default async function onLoad(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
if (roots.length === 0) {
throw new Error(`Unable to find the root for the component ${options.name}`);
}
export default async function onOnly(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
async function only() {
const roots = document.querySelectorAll(`astro-root[ssr][uid="${astroId}"]`);
if (roots.length === 0) return;
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
@ -26,5 +25,9 @@ export default async function onLoad(astroId: string, options: HydrateOptions, g
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
window.addEventListener('astro:locationchange', only, { once: true })
}
only()
}

18
packages/astro/src/runtime/client/visible.ts
View file

@ -6,10 +6,10 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* which doesn't work with IntersectionObserver
*/
export default async function onVisible(astroId: string, options: HydrateOptions, getHydrateCallback: GetHydrateCallback) {
const roots = document.querySelectorAll(`astro-root[uid="${astroId}"]`);
if (roots.length === 0) {
throw new Error(`Unable to find the root for the component ${options.name}`);
}
let io: IntersectionObserver;
async function visible() {
const roots = document.querySelectorAll(`astro-root[ssr][uid="${astroId}"]`);
if (roots.length === 0) return;
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
@ -29,10 +29,15 @@ export default async function onVisible(astroId: string, options: HydrateOptions
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
};
const io = new IntersectionObserver((entries) => {
if (io) {
io.disconnect();
}
io = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-root`
@ -48,4 +53,7 @@ export default async function onVisible(astroId: string, options: HydrateOptions
io.observe(child);
}
}
window.addEventListener('astro:locationchange', visible, { once: true })
}
visible();
}