Ensure before-hydration is only loaded when used (#4768)

* Ensure before-hydration is only loaded when used

* client fix + changeset

.changeset/fluffy-eyes-boil.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+nsure before-hydration is only loaded when used

packages/astro/src/core/app/index.ts

@@ -159,9 +159,15 @@ export class App {
  throw new Error(`Unable to resolve [${specifier}]`);
  }
  const bundlePath = manifest.entryModules[specifier];
- return bundlePath.startsWith('data:')
- ? bundlePath
- : prependForwardSlash(joinPaths(manifest.base, bundlePath));
+ switch(true) {
+ case bundlePath.startsWith('data:'):
+ case bundlePath.length === 0: {
+ return bundlePath;
+ }
+ default: {
+ return prependForwardSlash(joinPaths(manifest.base, bundlePath));
+ }
+ }
  },
  route: routeData,
  routeCache: this.#routeCache,

packages/astro/src/core/build/generate.ts

@@ -370,11 +370,8 @@ async function generatePath(
  if (typeof hashedFilePath !== 'string') {
  // If no "astro:scripts/before-hydration.js" script exists in the build,
  // 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) {
- return 'data:text/javascript;charset=utf-8,//[no before-hydration script]';
+ return '';
  }
  throw new Error(`Cannot find the built path for ${specifier}`);
  }

packages/astro/src/core/build/vite-plugin-ssr.ts

@@ -152,8 +152,8 @@ function buildManifest(
 
  // HACK! Patch this special one.
  if (!(BEFORE_HYDRATION_SCRIPT_ID in entryModules)) {
- entryModules[BEFORE_HYDRATION_SCRIPT_ID] =
-  'data:text/javascript;charset=utf-8,//[no before-hydration script]';
+ // Set this to an empty string so that the runtime knows not to try and load this.
+ entryModules[BEFORE_HYDRATION_SCRIPT_ID] = '';
  }
 
  const ssrManifest: SerializedSSRManifest = {

packages/astro/src/runtime/server/astro-island.ts

@@ -56,7 +56,10 @@ declare const Astro: {
  }
  async childrenConnectedCallback() {
  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();
  }
  start() {

packages/astro/src/runtime/server/hydration.ts

@@ -151,7 +151,10 @@ export async function generateHydrateScript(
 
  island.props['ssr'] = '';
  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(
  JSON.stringify({
  name: metadata.displayName,

packages/astro/test/before-hydration.test.js

@@ -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:https://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:https://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);
+ });
+ });
+ });
+ })
+});

packages/astro/test/fixtures/before-hydration/astro.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+export default defineConfig({
+ integrations: [preact()]
+});

packages/astro/test/fixtures/before-hydration/deps.mjs

@@ -0,0 +1 @@
+export { default as preact } from '@astrojs/preact';

packages/astro/test/fixtures/before-hydration/package.json

@@ -0,0 +1,7 @@
+{
+ "name": "@test/before-hydration",
+ "dependencies": {
+ "astro": "workspace:*",
+ "@astrojs/preact": "workspace:*"
+ }
+}

packages/astro/test/fixtures/before-hydration/src/components/SomeComponent.jsx

@@ -0,0 +1,6 @@
+
+export default function() {
+ return (
+ <div>Testing</div>
+ );
+}

packages/astro/test/fixtures/before-hydration/src/pages/index.astro

@@ -0,0 +1,11 @@
+---
+import SomeComponent from '../components/SomeComponent';
+---
+<html>
+ <head>
+ <title>Testing</title>
+ </head>
+ <body>
+ <SomeComponent client:idle />
+ </body>
+</html>

packages/astro/test/fixtures/before-hydration/src/scripts/global.js

@@ -0,0 +1 @@
+console.log('testing');