Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-17 23:11:29 -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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,35 +5,38 @@ 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) {
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}`);
}
async function idle() {
const cb = async () => {
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`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
const hydrate = await getHydrateCallback();
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
};
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
};
if ('requestIdleCallback' in window) {
(window as any).requestIdleCallback(cb);
} else {
setTimeout(cb, 200);
if ('requestIdleCallback' in window) {
(window as any).requestIdleCallback(cb);
} else {
setTimeout(cb, 200);
}
window.addEventListener('astro:locationchange', idle, { once: true })
}
idle();
}

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

@ -4,29 +4,31 @@ 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`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
window.addEventListener('astro:locationchange', load, { once: true })
}
//const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null;
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
load();
}

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

@ -4,38 +4,41 @@ 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`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
};
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
};
if (options.value) {
const mql = matchMedia(options.value);
if (mql.matches) {
cb();
} else {
mql.addEventListener('change', cb, { once: true });
if (options.value) {
const mql = matchMedia(options.value);
if (mql.matches) {
cb();
} else {
mql.addEventListener('change', cb, { once: true });
}
}
window.addEventListener('astro:locationchange', media, { once: true })
}
media();
}

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

@ -3,28 +3,31 @@ 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`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
const hydrate = await getHydrateCallback();
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
window.addEventListener('astro:locationchange', only, { once: true })
}
only()
}

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

@ -6,46 +6,54 @@ 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`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
// If there is no child fragment, check to see if there is a template.
// This happens if children were passed but the client component did not render any.
let template = roots[0].querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
} else if (fragment) {
innerHTML = fragment.innerHTML;
}
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
};
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
root.removeAttribute('ssr');
}
};
const 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`
if (io) {
io.disconnect();
cb();
break; // break loop on first match
}
});
for (const root of roots) {
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
io.observe(child);
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`
io.disconnect();
cb();
break; // break loop on first match
}
});
for (const root of roots) {
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
io.observe(child);
}
}
window.addEventListener('astro:locationchange', visible, { once: true })
}
visible();
}