From 56530a86efb6ac62eecccb6403a35b495c75a9d3 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 3 Jun 2022 18:39:35 -0400 Subject: [PATCH 1/8] fix: generate client directive scripts from metadata --- packages/astro/src/core/render/dev/index.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts index ddde5029107c..0fec19b878d8 100644 --- a/packages/astro/src/core/render/dev/index.ts +++ b/packages/astro/src/core/render/dev/index.ts @@ -18,6 +18,7 @@ import { getStylesForURL } from './css.js'; import { injectTags } from './html.js'; import { isBuildingToSSR } from '../../util.js'; import { collectMdMetadata } from '../util.js'; +import { hydrationSpecifier } from '../../../runtime/server/util.js'; export interface SSROptions { /** an instance of the AstroConfig */ @@ -129,6 +130,17 @@ export async function render( }, children: '', }); + // generate client directive scripts to prevent `isSelfAccepting` issues during development + await Promise.all([...mod.$$metadata.hydrationDirectives].map(async (hydrationDirective) => { + const [, resolvedImport] = await viteServer.moduleGraph.resolveUrl(hydrationSpecifier(hydrationDirective)) + scripts.add({ + props: { + type: 'module', + src: resolvedImport, + }, + children: "", + }); + })) } // TODO: We should allow adding generic HTML elements to the head, not just scripts for (const script of astroConfig._ctx.scripts) { From 90b45821f0fefb01db94f60163ef4403c5093da2 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 3 Jun 2022 18:57:09 -0400 Subject: [PATCH 2/8] chore: changeset --- .changeset/long-spies-check.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/long-spies-check.md diff --git a/.changeset/long-spies-check.md b/.changeset/long-spies-check.md new file mode 100644 index 000000000000..4be15dd5fe80 --- /dev/null +++ b/.changeset/long-spies-check.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix isSelfAccepting errors when hydrating JSX components From 64a311aae35e24ca1bf9e15fdc568ce6b60866cd Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Sat, 4 Jun 2022 15:22:07 -0400 Subject: [PATCH 3/8] feat: add all runtime client scripts to optimized deps --- packages/astro/src/core/create-vite.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index a3feff5aa4b2..eec5ead9a6d0 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -4,8 +4,9 @@ import type { LogOptions } from './logger/core'; import { builtinModules } from 'module'; import { fileURLToPath } from 'url'; import fs from 'fs'; +import path from 'path'; +import glob from 'fast-glob'; import * as vite from 'vite'; -import { runHookServerSetup } from '../integrations/index.js'; import astroVitePlugin from '../vite-plugin-astro/index.js'; import astroViteServerPlugin from '../vite-plugin-astro-server/index.js'; import astroPostprocessVitePlugin from '../vite-plugin-astro-postprocess/index.js'; @@ -47,6 +48,8 @@ export async function createVite( commandConfig: ViteConfigWithSSR, { astroConfig, logging, mode }: CreateViteOptions ): Promise { + const clientRuntimeScripts = await glob(new URL('../runtime/client/*.js', import.meta.url).pathname); + const clientRuntimeFilePaths = clientRuntimeScripts.map(script => `astro/client/${path.basename(script)}`); // Scan for any third-party Astro packages. Vite needs these to be passed to `ssr.noExternal`. const astroPackages = await getAstroPackages(astroConfig); // Start with the Vite configuration that Astro core needs @@ -56,6 +59,7 @@ export async function createVite( logLevel: 'warn', // log warnings and errors only optimizeDeps: { entries: ['src/**/*'], // Try and scan a user’s project (won’t catch everything), + include: clientRuntimeFilePaths, exclude: ['node-fetch'], }, plugins: [ From 393ecac84e790a769292a147b7fcd50dea6cc97e Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Sat, 4 Jun 2022 15:50:14 -0400 Subject: [PATCH 4/8] fix: remove hmr.js from optimized deps (monorepo-specific issue) --- packages/astro/src/core/create-vite.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index eec5ead9a6d0..b25edf29d641 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -49,7 +49,11 @@ export async function createVite( { astroConfig, logging, mode }: CreateViteOptions ): Promise { const clientRuntimeScripts = await glob(new URL('../runtime/client/*.js', import.meta.url).pathname); - const clientRuntimeFilePaths = clientRuntimeScripts.map(script => `astro/client/${path.basename(script)}`); + const clientRuntimeFilePaths = clientRuntimeScripts + .map(script => `astro/client/${path.basename(script)}`) + // fixes duplicate dependency issue in monorepo when using astro: "workspace:*" + .filter(filePath => filePath !== 'astro/client/hmr.js'); + // Scan for any third-party Astro packages. Vite needs these to be passed to `ssr.noExternal`. const astroPackages = await getAstroPackages(astroConfig); // Start with the Vite configuration that Astro core needs From c118cae60c51f2491179a067c92ab4b67d91d2c7 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Sat, 4 Jun 2022 15:50:29 -0400 Subject: [PATCH 5/8] Revert "fix: generate client directive scripts from metadata" This reverts commit 56530a86efb6ac62eecccb6403a35b495c75a9d3. --- packages/astro/src/core/render/dev/index.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts index 0fec19b878d8..ddde5029107c 100644 --- a/packages/astro/src/core/render/dev/index.ts +++ b/packages/astro/src/core/render/dev/index.ts @@ -18,7 +18,6 @@ import { getStylesForURL } from './css.js'; import { injectTags } from './html.js'; import { isBuildingToSSR } from '../../util.js'; import { collectMdMetadata } from '../util.js'; -import { hydrationSpecifier } from '../../../runtime/server/util.js'; export interface SSROptions { /** an instance of the AstroConfig */ @@ -130,17 +129,6 @@ export async function render( }, children: '', }); - // generate client directive scripts to prevent `isSelfAccepting` issues during development - await Promise.all([...mod.$$metadata.hydrationDirectives].map(async (hydrationDirective) => { - const [, resolvedImport] = await viteServer.moduleGraph.resolveUrl(hydrationSpecifier(hydrationDirective)) - scripts.add({ - props: { - type: 'module', - src: resolvedImport, - }, - children: "", - }); - })) } // TODO: We should allow adding generic HTML elements to the head, not just scripts for (const script of astroConfig._ctx.scripts) { From 5b277e884892001eceb21b2d25b0bc9b54b84c7f Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Sat, 4 Jun 2022 16:03:08 -0400 Subject: [PATCH 6/8] refactor: move optimizedeps to dev only --- packages/astro/src/core/create-vite.ts | 9 --------- packages/astro/src/core/dev/index.ts | 12 ++++++++++++ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index b25edf29d641..f4c18a881b1d 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -4,8 +4,6 @@ import type { LogOptions } from './logger/core'; import { builtinModules } from 'module'; import { fileURLToPath } from 'url'; import fs from 'fs'; -import path from 'path'; -import glob from 'fast-glob'; import * as vite from 'vite'; import astroVitePlugin from '../vite-plugin-astro/index.js'; import astroViteServerPlugin from '../vite-plugin-astro-server/index.js'; @@ -48,12 +46,6 @@ export async function createVite( commandConfig: ViteConfigWithSSR, { astroConfig, logging, mode }: CreateViteOptions ): Promise { - const clientRuntimeScripts = await glob(new URL('../runtime/client/*.js', import.meta.url).pathname); - const clientRuntimeFilePaths = clientRuntimeScripts - .map(script => `astro/client/${path.basename(script)}`) - // fixes duplicate dependency issue in monorepo when using astro: "workspace:*" - .filter(filePath => filePath !== 'astro/client/hmr.js'); - // Scan for any third-party Astro packages. Vite needs these to be passed to `ssr.noExternal`. const astroPackages = await getAstroPackages(astroConfig); // Start with the Vite configuration that Astro core needs @@ -63,7 +55,6 @@ export async function createVite( logLevel: 'warn', // log warnings and errors only optimizeDeps: { entries: ['src/**/*'], // Try and scan a user’s project (won’t catch everything), - include: clientRuntimeFilePaths, exclude: ['node-fetch'], }, plugins: [ diff --git a/packages/astro/src/core/dev/index.ts b/packages/astro/src/core/dev/index.ts index 97be22abd662..6f57f5c8df0e 100644 --- a/packages/astro/src/core/dev/index.ts +++ b/packages/astro/src/core/dev/index.ts @@ -1,3 +1,5 @@ +import glob from 'fast-glob'; +import path from 'path'; import type { AddressInfo } from 'net'; import type { AstroTelemetry } from '@astrojs/telemetry'; import { performance } from 'perf_hooks'; @@ -33,10 +35,20 @@ export default async function dev(config: AstroConfig, options: DevOptions): Pro await options.telemetry.record([]); config = await runHookConfigSetup({ config, command: 'dev' }); const { host, port } = config.server; + + +const clientRuntimeScripts = await glob(new URL('../../runtime/client/*.js', import.meta.url).pathname); +const clientRuntimeFilePaths = clientRuntimeScripts +.map(script => `astro/client/${path.basename(script)}`) +// fixes duplicate dependency issue in monorepo when using astro: "workspace:*" +.filter(filePath => filePath !== 'astro/client/hmr.js'); const viteConfig = await createVite( { mode: 'development', server: { host }, + optimizeDeps: { + include: clientRuntimeFilePaths, + } }, { astroConfig: config, logging: options.logging, mode: 'dev' } ); From b2b772eea91afc784fe1ec0da09268336602e25a Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 6 Jun 2022 09:25:56 -0400 Subject: [PATCH 7/8] docs: add comment on why optimizdeps --- packages/astro/src/core/dev/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/astro/src/core/dev/index.ts b/packages/astro/src/core/dev/index.ts index 6f57f5c8df0e..afe8d844a535 100644 --- a/packages/astro/src/core/dev/index.ts +++ b/packages/astro/src/core/dev/index.ts @@ -36,12 +36,12 @@ export default async function dev(config: AstroConfig, options: DevOptions): Pro config = await runHookConfigSetup({ config, command: 'dev' }); const { host, port } = config.server; - -const clientRuntimeScripts = await glob(new URL('../../runtime/client/*.js', import.meta.url).pathname); -const clientRuntimeFilePaths = clientRuntimeScripts -.map(script => `astro/client/${path.basename(script)}`) -// fixes duplicate dependency issue in monorepo when using astro: "workspace:*" -.filter(filePath => filePath !== 'astro/client/hmr.js'); + // load client runtime scripts ahead-of-time to fix "isSelfAccepting" bug during HMR + const clientRuntimeScripts = await glob(new URL('../../runtime/client/*.js', import.meta.url).pathname); + const clientRuntimeFilePaths = clientRuntimeScripts + .map(script => `astro/client/${path.basename(script)}`) + // fixes duplicate dependency issue in monorepo when using astro: "workspace:*" + .filter(filePath => filePath !== 'astro/client/hmr.js'); const viteConfig = await createVite( { mode: 'development', From ffde61a830bf44bab6207745fe5001b59b0c5ba0 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 6 Jun 2022 09:27:23 -0400 Subject: [PATCH 8/8] nit: indentation --- packages/astro/src/core/dev/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/astro/src/core/dev/index.ts b/packages/astro/src/core/dev/index.ts index afe8d844a535..8a148d5ce610 100644 --- a/packages/astro/src/core/dev/index.ts +++ b/packages/astro/src/core/dev/index.ts @@ -39,9 +39,9 @@ export default async function dev(config: AstroConfig, options: DevOptions): Pro // load client runtime scripts ahead-of-time to fix "isSelfAccepting" bug during HMR const clientRuntimeScripts = await glob(new URL('../../runtime/client/*.js', import.meta.url).pathname); const clientRuntimeFilePaths = clientRuntimeScripts - .map(script => `astro/client/${path.basename(script)}`) - // fixes duplicate dependency issue in monorepo when using astro: "workspace:*" - .filter(filePath => filePath !== 'astro/client/hmr.js'); + .map(script => `astro/client/${path.basename(script)}`) + // fixes duplicate dependency issue in monorepo when using astro: "workspace:*" + .filter(filePath => filePath !== 'astro/client/hmr.js'); const viteConfig = await createVite( { mode: 'development',