Ensure before-hydration is only loaded when used (#4768)
* Ensure before-hydration is only loaded when used * client fix + changeset
This commit is contained in:
parent
798d36f349
commit
9a59e24e02
14 changed files with 240 additions and 11 deletions
5
.changeset/fluffy-eyes-boil.md
Normal file
5
.changeset/fluffy-eyes-boil.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
nsure before-hydration is only loaded when used
|
|
@ -159,9 +159,15 @@ export class App {
|
||||||
throw new Error(`Unable to resolve [${specifier}]`);
|
throw new Error(`Unable to resolve [${specifier}]`);
|
||||||
}
|
}
|
||||||
const bundlePath = manifest.entryModules[specifier];
|
const bundlePath = manifest.entryModules[specifier];
|
||||||
return bundlePath.startsWith('data:')
|
switch(true) {
|
||||||
? bundlePath
|
case bundlePath.startsWith('data:'):
|
||||||
: prependForwardSlash(joinPaths(manifest.base, bundlePath));
|
case bundlePath.length === 0: {
|
||||||
|
return bundlePath;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return prependForwardSlash(joinPaths(manifest.base, bundlePath));
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
route: routeData,
|
route: routeData,
|
||||||
routeCache: this.#routeCache,
|
routeCache: this.#routeCache,
|
||||||
|
|
|
@ -370,11 +370,8 @@ async function generatePath(
|
||||||
if (typeof hashedFilePath !== 'string') {
|
if (typeof hashedFilePath !== 'string') {
|
||||||
// If no "astro:scripts/before-hydration.js" script exists in the build,
|
// If no "astro:scripts/before-hydration.js" script exists in the build,
|
||||||
// then we can assume that no before-hydration scripts are needed.
|
// then we can assume that no before-hydration scripts are needed.
|
||||||
// Return this as placeholder, which will be ignored by the browser.
|
|
||||||
// TODO: In the future, we hope to run this entire script through Vite,
|
|
||||||
// removing the need to maintain our own custom Vite-mimic resolve logic.
|
|
||||||
if (specifier === BEFORE_HYDRATION_SCRIPT_ID) {
|
if (specifier === BEFORE_HYDRATION_SCRIPT_ID) {
|
||||||
return 'data:text/javascript;charset=utf-8,//[no before-hydration script]';
|
return '';
|
||||||
}
|
}
|
||||||
throw new Error(`Cannot find the built path for ${specifier}`);
|
throw new Error(`Cannot find the built path for ${specifier}`);
|
||||||
}
|
}
|
||||||
|
|
|
@ -152,8 +152,8 @@ function buildManifest(
|
||||||
|
|
||||||
// HACK! Patch this special one.
|
// HACK! Patch this special one.
|
||||||
if (!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) {
|
if (!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) {
|
||||||
entryModules[BEFORE_HYDRATION_SCRIPT_ID] =
|
// Set this to an empty string so that the runtime knows not to try and load this.
|
||||||
'data:text/javascript;charset=utf-8,//[no before-hydration script]';
|
entryModules[BEFORE_HYDRATION_SCRIPT_ID] = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
const ssrManifest: SerializedSSRManifest = {
|
const ssrManifest: SerializedSSRManifest = {
|
||||||
|
|
|
@ -56,7 +56,10 @@ declare const Astro: {
|
||||||
}
|
}
|
||||||
async childrenConnectedCallback() {
|
async childrenConnectedCallback() {
|
||||||
window.addEventListener('astro:hydrate', this.hydrate);
|
window.addEventListener('astro:hydrate', this.hydrate);
|
||||||
await import(this.getAttribute('before-hydration-url')!);
|
let beforeHydrationUrl = this.getAttribute('before-hydration-url');
|
||||||
|
if(beforeHydrationUrl) {
|
||||||
|
await import(beforeHydrationUrl);
|
||||||
|
}
|
||||||
this.start();
|
this.start();
|
||||||
}
|
}
|
||||||
start() {
|
start() {
|
||||||
|
|
|
@ -151,7 +151,10 @@ export async function generateHydrateScript(
|
||||||
|
|
||||||
island.props['ssr'] = '';
|
island.props['ssr'] = '';
|
||||||
island.props['client'] = hydrate;
|
island.props['client'] = hydrate;
|
||||||
island.props['before-hydration-url'] = await result.resolve('astro:scripts/before-hydration.js');
|
let beforeHydrationUrl = await result.resolve('astro:scripts/before-hydration.js');
|
||||||
|
if(beforeHydrationUrl.length) {
|
||||||
|
island.props['before-hydration-url'] = beforeHydrationUrl;
|
||||||
|
}
|
||||||
island.props['opts'] = escapeHTML(
|
island.props['opts'] = escapeHTML(
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
name: metadata.displayName,
|
name: metadata.displayName,
|
||||||
|
|
175
packages/astro/test/before-hydration.test.js
Normal file
175
packages/astro/test/before-hydration.test.js
Normal file
|
@ -0,0 +1,175 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import * as cheerio from 'cheerio';
|
||||||
|
import { loadFixture } from './test-utils.js';
|
||||||
|
import { preact } from './fixtures/before-hydration/deps.mjs';
|
||||||
|
import testAdapter from './test-adapter.js';
|
||||||
|
|
||||||
|
describe('Astro Scripts before-hydration', () => {
|
||||||
|
describe('SSG', () => {
|
||||||
|
describe('Is used by an integration', () => {
|
||||||
|
/** @type {import('./test-utils').Fixture} */
|
||||||
|
let fixture;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/before-hydration/',
|
||||||
|
integrations: [
|
||||||
|
preact(),
|
||||||
|
{
|
||||||
|
name: '@test/before-hydration',
|
||||||
|
hooks: {
|
||||||
|
'astro:config:setup'({ injectScript }) {
|
||||||
|
injectScript('before-hydration', `import '/src/scripts/global.js';`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Development', () => {
|
||||||
|
/** @type {import('./test-utils').DevServer} */
|
||||||
|
let devServer;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
devServer = await fixture.startDevServer();
|
||||||
|
});
|
||||||
|
|
||||||
|
after(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Is included in the astro-island', async () => {
|
||||||
|
let res = await fixture.fetch('/');
|
||||||
|
let html = await res.text();
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Build', () => {
|
||||||
|
before(async () => {
|
||||||
|
await fixture.build();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Is included in the astro-island', async () => {
|
||||||
|
let html = await fixture.readFile('/index.html')
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Is not used by an integration', () => {
|
||||||
|
/** @type {import('./test-utils').Fixture} */
|
||||||
|
let fixture;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/before-hydration/'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Development', () => {
|
||||||
|
/** @type {import('./test-utils').DevServer} */
|
||||||
|
let devServer;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
devServer = await fixture.startDevServer();
|
||||||
|
});
|
||||||
|
|
||||||
|
after(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Does include before-hydration-url on the astro-island', async () => {
|
||||||
|
let res = await fixture.fetch('/');
|
||||||
|
let html = await res.text();
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Build', () => {
|
||||||
|
before(async () => {
|
||||||
|
await fixture.build();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Does not include before-hydration-url on the astro-island', async () => {
|
||||||
|
let html = await fixture.readFile('/index.html');
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('SSR', () => {
|
||||||
|
describe('Is used by an integration', () => {
|
||||||
|
/** @type {import('./test-utils').Fixture} */
|
||||||
|
let fixture;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/before-hydration/',
|
||||||
|
output: 'server',
|
||||||
|
adapter: testAdapter(),
|
||||||
|
integrations: [
|
||||||
|
preact(),
|
||||||
|
{
|
||||||
|
name: '@test/before-hydration',
|
||||||
|
hooks: {
|
||||||
|
'astro:config:setup'({ injectScript }) {
|
||||||
|
injectScript('before-hydration', `import '/src/scripts/global.js';`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Prod', () => {
|
||||||
|
before(async () => {
|
||||||
|
await fixture.build();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Is included in the astro-island', async () => {
|
||||||
|
let app = await fixture.loadTestAdapterApp();
|
||||||
|
let request = new Request('http://example.com/');
|
||||||
|
let response = await app.render(request);
|
||||||
|
let html = await response.text();
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Is not used by an integration', () => {
|
||||||
|
/** @type {import('./test-utils').Fixture} */
|
||||||
|
let fixture;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({
|
||||||
|
root: './fixtures/before-hydration/',
|
||||||
|
output: 'server',
|
||||||
|
adapter: testAdapter(),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Build', () => {
|
||||||
|
before(async () => {
|
||||||
|
await fixture.build();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Does not include before-hydration-url on the astro-island', async () => {
|
||||||
|
let app = await fixture.loadTestAdapterApp();
|
||||||
|
let request = new Request('http://example.com/');
|
||||||
|
let response = await app.render(request);
|
||||||
|
let html = await response.text();
|
||||||
|
let $ = cheerio.load(html);
|
||||||
|
expect($('astro-island[before-hydration-url]')).has.a.lengthOf(0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
6
packages/astro/test/fixtures/before-hydration/astro.config.mjs
vendored
Normal file
6
packages/astro/test/fixtures/before-hydration/astro.config.mjs
vendored
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import preact from '@astrojs/preact';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
integrations: [preact()]
|
||||||
|
});
|
1
packages/astro/test/fixtures/before-hydration/deps.mjs
vendored
Normal file
1
packages/astro/test/fixtures/before-hydration/deps.mjs
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export { default as preact } from '@astrojs/preact';
|
7
packages/astro/test/fixtures/before-hydration/package.json
vendored
Normal file
7
packages/astro/test/fixtures/before-hydration/package.json
vendored
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"name": "@test/before-hydration",
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "workspace:*",
|
||||||
|
"@astrojs/preact": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
6
packages/astro/test/fixtures/before-hydration/src/components/SomeComponent.jsx
vendored
Normal file
6
packages/astro/test/fixtures/before-hydration/src/components/SomeComponent.jsx
vendored
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
export default function() {
|
||||||
|
return (
|
||||||
|
<div>Testing</div>
|
||||||
|
);
|
||||||
|
}
|
11
packages/astro/test/fixtures/before-hydration/src/pages/index.astro
vendored
Normal file
11
packages/astro/test/fixtures/before-hydration/src/pages/index.astro
vendored
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
import SomeComponent from '../components/SomeComponent';
|
||||||
|
---
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Testing</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<SomeComponent client:idle />
|
||||||
|
</body>
|
||||||
|
</html>
|
1
packages/astro/test/fixtures/before-hydration/src/scripts/global.js
vendored
Normal file
1
packages/astro/test/fixtures/before-hydration/src/scripts/global.js
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
console.log('testing');
|
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
|
@ -1374,6 +1374,14 @@ importers:
|
||||||
dependencies:
|
dependencies:
|
||||||
astro: link:../../..
|
astro: link:../../..
|
||||||
|
|
||||||
|
packages/astro/test/fixtures/before-hydration:
|
||||||
|
specifiers:
|
||||||
|
'@astrojs/preact': workspace:*
|
||||||
|
astro: workspace:*
|
||||||
|
dependencies:
|
||||||
|
'@astrojs/preact': link:../../../../integrations/preact
|
||||||
|
astro: link:../../..
|
||||||
|
|
||||||
packages/astro/test/fixtures/client-address:
|
packages/astro/test/fixtures/client-address:
|
||||||
specifiers:
|
specifiers:
|
||||||
astro: workspace:*
|
astro: workspace:*
|
||||||
|
|
Loading…
Add table
Reference in a new issue