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

Consolidate inline hydration scripts into one (#3244)

Browse source 
* Consolidate inline hydration scripts into one

* Adds changeset

* Update custom element test

* Provide a better name for tracking if we have added a hydration script
This commit is contained in:
Matthew Phillips 2022-05-03 09:07:16 -04:00 committed by GitHub
parent 4599f1fc94
commit 48a35e6042
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 152 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/eleven-toes-attack.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Consolidates hydration scripts into one

1
packages/astro/src/@types/astro.ts
View file

@ -1000,6 +1000,7 @@ export interface SSRElement {
export interface SSRMetadata {
renderers: SSRLoadedRenderer[];
pathname: string;
needsHydrationStyles: boolean;
}
export interface SSRResult {

1
packages/astro/src/core/render/result.ts
View file

@ -201,6 +201,7 @@ ${extra}`
_metadata: {
renderers,
pathname,
needsHydrationStyles: false
},
};

4
packages/astro/src/runtime/client/hmr.ts
View file

@ -7,9 +7,9 @@ if (import.meta.hot) {
const doc = parser.parseFromString(html, 'text/html');
// Match incoming islands to current state
for (const root of doc.querySelectorAll('astro-root')) {
for (const root of doc.querySelectorAll('astro-island')) {
const uid = root.getAttribute('uid');
const current = document.querySelector(`astro-root[uid="${uid}"]`);
const current = document.querySelector(`astro-island[uid="${uid}"]`);
if (current) {
root.innerHTML = current?.innerHTML;
}

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

@ -5,22 +5,17 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* (or after a short delay, if `requestIdleCallback`) isn't supported
*/
export default async function onIdle(
astroId: string,
root: HTMLElement,
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}`);
}
let innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
let fragment = root.querySelector(`astro-fragment`);
if (fragment == null && root.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]`);
let template = root.querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
@ -29,10 +24,7 @@ export default async function onIdle(
innerHTML = fragment.innerHTML;
}
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
hydrate(root, innerHTML);
};
if ('requestIdleCallback' in window) {

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

@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* Hydrate this component immediately
*/
export default async function onLoad(
astroId: string,
root: HTMLElement,
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 innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
let fragment = root.querySelector(`astro-fragment`);
if (fragment == null && root.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]`);
let template = root.querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
@ -27,10 +22,7 @@ export default async function onLoad(
innerHTML = fragment.innerHTML;
}
//const innerHTML = roots[0].querySelector(`astro-fragment`)?.innerHTML ?? null;
//const innerHTML = root.querySelector(`astro-fragment`)?.innerHTML ?? null;
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
hydrate(root, innerHTML);
}

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

@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* Hydrate this component when a matching media query is found
*/
export default async function onMedia(
astroId: string,
root: HTMLElement,
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 innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
let fragment = root.querySelector(`astro-fragment`);
if (fragment == null && root.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]`);
let template = root.querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
@ -29,9 +24,7 @@ export default async function onMedia(
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
hydrate(root, innerHTML);
};
if (options.value) {

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

@ -4,21 +4,16 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
* Hydrate this component immediately
*/
export default async function onLoad(
astroId: string,
root: HTMLElement,
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 innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
let fragment = root.querySelector(`astro-fragment`);
if (fragment == null && root.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]`);
let template = root.querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
@ -27,8 +22,5 @@ export default async function onLoad(
innerHTML = fragment.innerHTML;
}
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
hydrate(root, innerHTML);
}

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

@ -2,25 +2,20 @@ import type { GetHydrateCallback, HydrateOptions } from '../../@types/astro';
/**
* Hydrate this component when one of it's children becomes visible.
* We target the children because `astro-root` is set to `display: contents`
* We target the children because `astro-island` is set to `display: contents`
* which doesn't work with IntersectionObserver
*/
export default async function onVisible(
astroId: string,
root: HTMLElement,
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 innerHTML: string | null = null;
let fragment = roots[0].querySelector(`astro-fragment`);
if (fragment == null && roots[0].hasAttribute('tmpl')) {
let fragment = root.querySelector(`astro-fragment`);
if (fragment == null && root.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]`);
let template = root.querySelector(`template[data-astro-template]`);
if (template) {
innerHTML = template.innerHTML;
template.remove();
@ -31,25 +26,21 @@ export default async function onVisible(
const cb = async () => {
const hydrate = await getHydrateCallback();
for (const root of roots) {
hydrate(root, innerHTML);
}
hydrate(root, innerHTML);
};
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`
// As soon as we hydrate, disconnect this IntersectionObserver for every `astro-island`
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);
}
for (let i = 0; i < root.children.length; i++) {
const child = root.children[i];
io.observe(child);
}
}

35
packages/astro/src/runtime/server/astro-island.ts Normal file
View file

@ -0,0 +1,35 @@
/*
customElements.define('astro-island', class extends HTMLElement {
async connectedCallback(){
const [ { default: setup } ] = await Promise.all([
import(this.getAttribute('directive-url')),
import(this.getAttribute('before-hydration-url'))
]);
const opts = JSON.parse(this.getAttribute('opts'));
setup(this, opts, async () => {
const propsStr = this.getAttribute('props');
const props = propsStr ? JSON.parse(propsStr) : {};
const rendererUrl = this.getAttribute('renderer-url');
const [
{ default: Component },
{ default: hydrate }
] = await Promise.all([
import(this.getAttribute('component-url')),
rendererUrl ? import(rendererUrl) : () => () => {}
]);
return (el, children) => hydrate(el)(Component, props, children);
});
}
});
*/
/**
* This is a minified version of the above. If you modify the above you need to
* copy/paste it into a .js file and then run:
* > node_modules/.bin/terser --mangle --compress -- file.js
*
* And copy/paste the result below
*/
export const islandScript = `customElements.define("astro-island",class extends HTMLElement{async connectedCallback(){const[{default:t}]=await Promise.all([import(this.getAttribute("directive-url")),import(this.getAttribute("before-hydration-url"))]);const e=JSON.parse(this.getAttribute("opts"));t(this,e,(async()=>{const t=this.getAttribute("props");const e=t?JSON.parse(t):{};const r=this.getAttribute("renderer-url");const[{default:s},{default:i}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]);return(t,r)=>i(t)(s,e,r)}))}});`;

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

@ -1,8 +1,10 @@
import type { AstroComponentMetadata, SSRLoadedRenderer } from '../../@types/astro';
import type { SSRElement, SSRResult } from '../../@types/astro';
import { hydrationSpecifier, serializeListValue } from './util.js';
import { escapeHTML } from './escape.js';
import serializeJavaScript from 'serialize-javascript';
// Serializes props passed into a component so that they can be reused during hydration.
// The value is any
export function serializeProps(value: any) {
@ -110,32 +112,29 @@ export async function generateHydrateScript(
);
}
let hydrationSource = ``;
hydrationSource += renderer.clientEntrypoint
? `const [{ ${
componentExport.value
}: Component }, { default: hydrate }] = await Promise.all([import("${await result.resolve(
componentUrl
)}"), import("${await result.resolve(renderer.clientEntrypoint)}")]);
return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children);
`
: `await import("${await result.resolve(componentUrl)}");
return () => {};
`;
// TODO: If we can figure out tree-shaking in the final SSR build, we could safely
// use BEFORE_HYDRATION_SCRIPT_ID instead of 'astro:scripts/before-hydration.js'.
const hydrationScript = {
props: { type: 'module', 'data-astro-component-hydration': true },
children: `import setup from '${await result.resolve(hydrationSpecifier(hydrate))}';
${`import '${await result.resolve('astro:scripts/before-hydration.js')}';`}
setup("${astroId}", {name:"${metadata.displayName}",${
metadata.hydrateArgs ? `value: ${JSON.stringify(metadata.hydrateArgs)}` : ''
}}, async () => {
${hydrationSource}
});
`,
const island: SSRElement = {
children: '',
props: {
// This is for HMR, probably can avoid it in prod
uid: astroId
}
};
return hydrationScript;
// Add component url
island.props['component-url'] = await result.resolve(componentUrl);
// Add renderer url
if(renderer.clientEntrypoint) {
island.props['renderer-url'] = await result.resolve(renderer.clientEntrypoint);
island.props['props'] = escapeHTML(serializeProps(props));
}
island.props['directive-url'] = await result.resolve(hydrationSpecifier(hydrate));
island.props['before-hydration-url'] = await result.resolve('astro:scripts/before-hydration.js');
island.props['opts'] = escapeHTML(JSON.stringify({
name: metadata.displayName,
value: metadata.hydrateArgs || ''
}))
return island;
}

42
packages/astro/src/runtime/server/index.ts
View file

@ -11,6 +11,7 @@ import type {
import { escapeHTML, HTMLString, markHTMLString } from './escape.js';
import { extractDirectives, generateHydrateScript, serializeProps } from './hydration.js';
import { serializeListValue } from './util.js';
import { islandScript } from './astro-island.js';
export { markHTMLString, markHTMLString as unescapeHTML } from './escape.js';
export type { Metadata } from './metadata';
@ -24,6 +25,8 @@ const htmlEnumAttributes = /^(contenteditable|draggable|spellcheck|value)$/i;
// Note: SVG is case-sensitive!
const svgEnumAttributes = /^(autoReverse|externalResourcesRequired|focusable|preserveAlpha)$/i;
const resultsWithHydrationScript = new WeakSet<SSRResult>();
// INVESTIGATE:
// 2. Less anys when possible and make it well known when they are needed.
@ -308,20 +311,36 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
// Rather than appending this inline in the page, puts this into the `result.scripts` set that will be appended to the head.
// INVESTIGATE: This will likely be a problem in streaming because the `<head>` will be gone at this point.
result.scripts.add(
await generateHydrateScript(
{ renderer: renderer!, result, astroId, props },
metadata as Required<AstroComponentMetadata>
)
const island = await generateHydrateScript(
{ renderer: renderer!, result, astroId, props },
metadata as Required<AstroComponentMetadata>
);
result._metadata.needsHydrationStyles = true;
// Render a template if no fragment is provided.
const needsAstroTemplate = children && !/<\/?astro-fragment\>/.test(html);
const template = needsAstroTemplate ? `<template data-astro-template>${children}</template>` : '';
if(needsAstroTemplate) {
island.props.tmpl = '';
}
island.children = `${
html ?? ''
}${template}`;
// Add the astro-island definition only once. Since the SSRResult object
// is scoped to a page renderer we can use it as a key to know if the script
// has been rendered or not.
let script = '';
if(!resultsWithHydrationScript.has(result)) {
resultsWithHydrationScript.add(result);
script = `<script>${islandScript}</script>`;
}
return markHTMLString(
`<astro-root uid="${astroId}"${needsAstroTemplate ? ' tmpl' : ''}>${
html ?? ''
}${template}</astro-root>`
script +
renderElement('astro-island', island, false)
);
}
@ -546,13 +565,10 @@ export async function renderHead(result: SSRResult): Promise<string> {
const styles = Array.from(result.styles)
.filter(uniqueElements)
.map((style) => renderElement('style', style));
let needsHydrationStyles = false;
let needsHydrationStyles = result._metadata.needsHydrationStyles;
const scripts = Array.from(result.scripts)
.filter(uniqueElements)
.map((script, i) => {
if ('data-astro-component-hydration' in script.props) {
needsHydrationStyles = true;
}
return renderElement('script', {
...script,
props: { ...script.props, 'astro-script': result._metadata.pathname + '/script-' + i },
@ -562,7 +578,7 @@ export async function renderHead(result: SSRResult): Promise<string> {
styles.push(
renderElement('style', {
props: {},
children: 'astro-root, astro-fragment { display: contents; }',
children: 'astro-island, astro-fragment { display: contents; }',
})
);
}

2
packages/astro/test/0-css.test.js
View file

@ -56,7 +56,7 @@ describe('CSS', function () {
expect($('#passed-in').attr('class')).to.match(/outer astro-[A-Z0-9]+ astro-[A-Z0-9]+/);
});
it('Using hydrated components adds astro-root styles', async () => {
it('Using hydrated components adds astro-island styles', async () => {
const inline = $('style').html();
expect(inline).to.include('display: contents');
});

8
packages/astro/test/astro-client-only.test.js
View file

@ -16,13 +16,13 @@ describe('Client only components', () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
// test 1: <astro-root> is empty
expect($('astro-root').html()).to.equal('');
// test 1: <astro-island> is empty
expect($('astro-island').html()).to.equal('');
const $script = $('script');
const script = $script.html();
// test 2: svelte renderer is on the page
expect(/import\(".\/entry.*/g.test(script)).to.be.ok;
// Has the renderer URL for svelte
expect($('astro-island').attr('renderer-url').length).to.be.greaterThan(0);
});
it('Adds the CSS to the page', async () => {

16
packages/astro/test/astro-dynamic.test.js
View file

@ -16,27 +16,25 @@ describe('Dynamic components', () => {
const html = await fixture.readFile('/index.html');
const $ = cheerio.load(html);
expect($('script').length).to.eq(2);
expect($('script').length).to.eq(1);
});
it('Loads pages using client:media hydrator', async () => {
const root = new URL('http://example.com/media/index.html');
const html = await fixture.readFile('/media/index.html');
const $ = cheerio.load(html);
// test 1: static value rendered
expect($('script').length).to.equal(2); // One for each
expect($('script').length).to.equal(1); // One overall
});
it('Loads pages using client:only hydrator', async () => {
const html = await fixture.readFile('/client-only/index.html');
const $ = cheerio.load(html);
// test 1: <astro-root> is empty.
expect($('<astro-root>').html()).to.equal('');
// test 2: correct script is being loaded.
// because of bundling, we don't have access to the source import,
// only the bundled import.
expect($('script').html()).to.include(`import setup from '../entry`);
// test 1: <astro-island> is empty.
expect($('astro-island').html()).to.equal('');
// Has the directive URL
expect($('astro-island').attr('directive-url').length).to.be.greaterThan(0);
});
});

2
packages/astro/test/custom-elements.test.js
View file

@ -50,7 +50,7 @@ describe('Custom Elements', () => {
// Hydration
// test 3: Component and polyfill scripts bundled separately
expect($('script[type=module]')).to.have.lengthOf(1);
expect($('script')).to.have.lengthOf(2);
});
it('Custom elements not claimed by renderer are rendered as regular HTML', async () => {

6
packages/astro/test/react-component.test.js
View file

@ -42,11 +42,7 @@ describe('React Components', () => {
expect($('#pure')).to.have.lengthOf(1);
// test 8: Check number of islands
expect($('astro-root[uid]')).to.have.lengthOf(5);
// test 9: Check island deduplication
const uniqueRootUIDs = new Set($('astro-root').map((i, el) => $(el).attr('uid')));
expect(uniqueRootUIDs.size).to.equal(4);
expect($('astro-island')).to.have.lengthOf(5);
});
it('Can load Vue', async () => {

13
packages/astro/test/vue-component.test.js
View file

@ -27,18 +27,11 @@ describe('Vue component', () => {
// test 1: renders all components correctly
expect(allPreValues).to.deep.equal(['0', '1', '1', '1', '10', '100', '1000']);
// test 2: renders 3 <astro-root>s
expect($('astro-root')).to.have.lengthOf(6);
// test 2: renders 3 <astro-islands>s
expect($('astro-island')).to.have.lengthOf(6);
// test 3: all <astro-root>s have uid attributes
expect($('astro-root[uid]')).to.have.lengthOf(6);
// test 4: treats <my-button> as a custom element
// test 3: treats <my-button> as a custom element
expect($('my-button')).to.have.lengthOf(7);
// test 5: components with identical render output and props have been deduplicated
const uniqueRootUIDs = $('astro-root').map((i, el) => $(el).attr('uid'));
expect(new Set(uniqueRootUIDs).size).to.equal(5);
});
});

6
packages/markdown/remark/src/rehype-islands.ts
View file

@ -9,14 +9,14 @@ const visit = _visit as (
) => any;
// This fixes some confusing bugs coming from somewhere inside of our Markdown pipeline.
// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-root>
// `unist`/`remark`/`rehype` (not sure) often generate malformed HTML inside of <astro-island>
// For hydration to work properly, frameworks need the DOM to be the exact same on server/client.
// This reverts some "helpful corrections" that are applied to our perfectly valid HTML!
export default function rehypeIslands(): any {
return function (node: any): any {
return visit(node, 'element', (el) => {
// Bugs only happen inside of <astro-root> islands
if (el.tagName == 'astro-root') {
// Bugs only happen inside of <astro-island> islands
if (el.tagName == 'astro-island') {
visit(el, 'text', (child, index, parent) => {
if (child.type === 'text') {
// Sometimes comments can be trapped as text, which causes them to be escaped

6
packages/markdown/remark/src/remark-unwrap.ts
View file

@ -8,7 +8,7 @@ const visit = _visit as (
callback?: (node: any, index: number, parent: any) => any
) => any;
// Remove the wrapping paragraph for <astro-root> islands
// Remove the wrapping paragraph for <astro-island> islands
export default function remarkUnwrap() {
const astroRootNodes = new Set();
let insideAstroRoot = false;
@ -19,10 +19,10 @@ export default function remarkUnwrap() {
astroRootNodes.clear();
visit(tree, 'html', (node) => {
if (node.value.indexOf('<astro-root') > -1 && !insideAstroRoot) {
if (node.value.indexOf('<astro-island') > -1 && !insideAstroRoot) {
insideAstroRoot = true;
}
if (node.value.indexOf('</astro-root') > -1 && insideAstroRoot) {
if (node.value.indexOf('</astro-island') > -1 && insideAstroRoot) {
insideAstroRoot = false;
}
astroRootNodes.add(node);