From 289c6f274bf5cf37ef08e9ed2f1cf7aae58a2327 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 08:47:09 -0500 Subject: [PATCH 1/8] Fix cssesc from breaking browser code --- .changeset/quick-bottles-march.md | 5 +++++ packages/astro/src/core/create-vite.ts | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/quick-bottles-march.md diff --git a/.changeset/quick-bottles-march.md b/.changeset/quick-bottles-march.md new file mode 100644 index 000000000000..d432d267d354 --- /dev/null +++ b/.changeset/quick-bottles-march.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Allow content collections to run in browser diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 662644fd3762..701d615afaa9 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -122,7 +122,11 @@ export async function createVite( `${srcDirPattern}pages/**/_*.{js,mjs,ts,mts}`, // Remaining JS/TS files prefixed with `_` (not endpoints) `${srcDirPattern}pages/**/_*/**/*.{js,mjs,ts,mts}`, // Remaining JS/TS files within directories prefixed with `_` (not endpoints) ], - exclude: ['astro', 'node-fetch'], + exclude: [ + 'astro:dev-toolbar', + 'astro/virtual-modules/prefetch.js', + 'node-fetch' + ], }, plugins: [ configAliasVitePlugin({ settings }), From b5ebf29b2d6f1214d8b63834f9fe9c9bc4bd32a9 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 09:00:53 -0500 Subject: [PATCH 2/8] Include specific thing instead --- packages/astro/src/core/create-vite.ts | 6 +----- packages/astro/src/transitions/vite-plugin-transitions.ts | 7 +++++++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 701d615afaa9..662644fd3762 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -122,11 +122,7 @@ export async function createVite( `${srcDirPattern}pages/**/_*.{js,mjs,ts,mts}`, // Remaining JS/TS files prefixed with `_` (not endpoints) `${srcDirPattern}pages/**/_*/**/*.{js,mjs,ts,mts}`, // Remaining JS/TS files within directories prefixed with `_` (not endpoints) ], - exclude: [ - 'astro:dev-toolbar', - 'astro/virtual-modules/prefetch.js', - 'node-fetch' - ], + exclude: ['astro', 'node-fetch'], }, plugins: [ configAliasVitePlugin({ settings }), diff --git a/packages/astro/src/transitions/vite-plugin-transitions.ts b/packages/astro/src/transitions/vite-plugin-transitions.ts index 16cb174baf44..d88c96f8919f 100644 --- a/packages/astro/src/transitions/vite-plugin-transitions.ts +++ b/packages/astro/src/transitions/vite-plugin-transitions.ts @@ -10,6 +10,13 @@ const resolvedVirtualClientModuleId = '\0' + virtualClientModuleId; export default function astroTransitions({ settings }: { settings: AstroSettings }): vite.Plugin { return { name: 'astro:transitions', + config() { + return { + optimizeDeps: { + include: ['astro > cssesc'], + }, + }; + }, async resolveId(id) { if (id === virtualModuleId) { return resolvedVirtualModuleId; From d8a2c6384976b392eb278aef302071bf4d687ec2 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 09:47:37 -0500 Subject: [PATCH 3/8] Update .changeset/quick-bottles-march.md Co-authored-by: Florian Lefebvre --- .changeset/quick-bottles-march.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/quick-bottles-march.md b/.changeset/quick-bottles-march.md index d432d267d354..d8dd924e96fc 100644 --- a/.changeset/quick-bottles-march.md +++ b/.changeset/quick-bottles-march.md @@ -2,4 +2,4 @@ "astro": patch --- -Allow content collections to run in browser +Fixes an issue related to content collections usage in browser context caused by `csssec` From e77cb1c8e5c5d1702d73e311a755edafb448088a Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 09:48:06 -0500 Subject: [PATCH 4/8] Fix ISR --- .changeset/cuddly-ads-fail.md | 5 +++++ packages/integrations/vercel/src/serverless/adapter.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/cuddly-ads-fail.md diff --git a/.changeset/cuddly-ads-fail.md b/.changeset/cuddly-ads-fail.md new file mode 100644 index 000000000000..77d18cc51e21 --- /dev/null +++ b/.changeset/cuddly-ads-fail.md @@ -0,0 +1,5 @@ +--- +"@astrojs/vercel": patch +--- + +Fix loading client-scripts in dev with ISR diff --git a/packages/integrations/vercel/src/serverless/adapter.ts b/packages/integrations/vercel/src/serverless/adapter.ts index 68897c6dc9b7..fa4c3fc0a251 100644 --- a/packages/integrations/vercel/src/serverless/adapter.ts +++ b/packages/integrations/vercel/src/serverless/adapter.ts @@ -294,9 +294,9 @@ export default function vercelServerless({ // we create a regex to emulate vercel's production behavior const exclude = exclude_.concat('/_image').map((ex) => new RegExp(escapeRegex(ex))); server.middlewares.use(function removeIsrParams(req, _, next) { - const { pathname } = new URL(`https://example.com${req.url}`); + const { pathname, search } = new URL(`https://example.com${req.url}`); if (exclude.some((ex) => ex.test(pathname))) return next(); - req.url = pathname; + req.url = pathname + search; return next(); }); } From 63f0efdbb84f6f5754244cf4e1f02fd666246b42 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 09:58:01 -0500 Subject: [PATCH 5/8] Remove query stripping altogether --- .../integrations/vercel/src/serverless/adapter.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/integrations/vercel/src/serverless/adapter.ts b/packages/integrations/vercel/src/serverless/adapter.ts index fa4c3fc0a251..db8f0c494a2e 100644 --- a/packages/integrations/vercel/src/serverless/adapter.ts +++ b/packages/integrations/vercel/src/serverless/adapter.ts @@ -287,20 +287,6 @@ export default function vercelServerless({ ); } }, - 'astro:server:setup'({ server }) { - // isr functions do not have access to search params, this middleware removes them for the dev mode - if (isr) { - const exclude_ = typeof isr === 'object' ? isr.exclude ?? [] : []; - // we create a regex to emulate vercel's production behavior - const exclude = exclude_.concat('/_image').map((ex) => new RegExp(escapeRegex(ex))); - server.middlewares.use(function removeIsrParams(req, _, next) { - const { pathname, search } = new URL(`https://example.com${req.url}`); - if (exclude.some((ex) => ex.test(pathname))) return next(); - req.url = pathname + search; - return next(); - }); - } - }, 'astro:build:ssr': async ({ entryPoints, middlewareEntryPoint }) => { _entryPoints = entryPoints; _middlewareEntryPoint = middlewareEntryPoint; From f251f781cfb9fb9645fc77472ffdad788da0cd8b Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 10:31:21 -0500 Subject: [PATCH 6/8] Warn on client usage --- .../content/vite-plugin-content-virtual-mod.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index 878e41e3535a..d2147487a7ff 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -41,10 +41,14 @@ export function astroContentVirtualModPlugin({ fs, }: AstroContentVirtualModPluginParams): Plugin { let IS_DEV = false; + let command: 'build' | 'serve'; const IS_SERVER = isServerLikeOutput(settings.config); return { name: 'astro-content-virtual-mod-plugin', enforce: 'pre', + config(_, { command: _command }) { + command = _command; + }, configResolved(config) { IS_DEV = config.mode === 'development'; }, @@ -61,13 +65,14 @@ export function astroContentVirtualModPlugin({ } } }, - async load(id) { + async load(id, args) { if (id === RESOLVED_VIRTUAL_MODULE_ID) { const lookupMap = await generateLookupMap({ settings, fs, }); - const code = await generateContentEntryFile({ settings, fs, lookupMap, IS_DEV, IS_SERVER }); + const isClient = !args?.ssr && command === 'serve'; + const code = await generateContentEntryFile({ settings, fs, lookupMap, IS_DEV, IS_SERVER, isClient }); return { code, @@ -102,12 +107,14 @@ export async function generateContentEntryFile({ lookupMap, IS_DEV, IS_SERVER, + isClient }: { settings: AstroSettings; fs: typeof nodeFs; lookupMap: ContentLookupMap; IS_DEV: boolean; IS_SERVER: boolean; + isClient: boolean; }) { const contentPaths = getContentPaths(settings.config); const relContentDir = rootRelativePath(settings.config.root, contentPaths.contentDir); @@ -143,13 +150,15 @@ export async function generateContentEntryFile({ renderEntryGlobResult = getStringifiedCollectionFromLookup('render', relContentDir, lookupMap); } - const virtualModContents = nodeFs + let virtualModContents = nodeFs .readFileSync(contentPaths.virtualModTemplate, 'utf-8') .replace('@@CONTENT_DIR@@', relContentDir) .replace("'@@CONTENT_ENTRY_GLOB_PATH@@'", contentEntryGlobResult) .replace("'@@DATA_ENTRY_GLOB_PATH@@'", dataEntryGlobResult) .replace("'@@RENDER_ENTRY_GLOB_PATH@@'", renderEntryGlobResult) - .replace('/* @@LOOKUP_MAP_ASSIGNMENT@@ */', `lookupMap = ${JSON.stringify(lookupMap)};`); + .replace('/* @@LOOKUP_MAP_ASSIGNMENT@@ */', `lookupMap = ${JSON.stringify(lookupMap)};`) + + isClient ? ` +console.warn('astro:content is only supported running server-side. Using it in the browser will lead to bloated bundles and slow down page load. In the future it will not be supported.');` : ''; return virtualModContents; } From 40deefad83a69b272a01a7c27d483290daeaf96f Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 10:42:53 -0500 Subject: [PATCH 7/8] Fix build --- .../astro/src/content/vite-plugin-content-virtual-mod.ts | 6 +----- packages/astro/src/core/build/plugins/plugin-content.ts | 1 + 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index d2147487a7ff..ce431dc7181d 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -41,14 +41,10 @@ export function astroContentVirtualModPlugin({ fs, }: AstroContentVirtualModPluginParams): Plugin { let IS_DEV = false; - let command: 'build' | 'serve'; const IS_SERVER = isServerLikeOutput(settings.config); return { name: 'astro-content-virtual-mod-plugin', enforce: 'pre', - config(_, { command: _command }) { - command = _command; - }, configResolved(config) { IS_DEV = config.mode === 'development'; }, @@ -71,7 +67,7 @@ export function astroContentVirtualModPlugin({ settings, fs, }); - const isClient = !args?.ssr && command === 'serve'; + const isClient = !args?.ssr; const code = await generateContentEntryFile({ settings, fs, lookupMap, IS_DEV, IS_SERVER, isClient }); return { diff --git a/packages/astro/src/core/build/plugins/plugin-content.ts b/packages/astro/src/core/build/plugins/plugin-content.ts index c28fa6904627..a3a8a376aa81 100644 --- a/packages/astro/src/core/build/plugins/plugin-content.ts +++ b/packages/astro/src/core/build/plugins/plugin-content.ts @@ -164,6 +164,7 @@ function vitePluginContent( lookupMap, IS_DEV: false, IS_SERVER: false, + isClient: false, }); this.emitFile({ type: 'prebuilt-chunk', From e16ffde8f4ada7997b7f9c56e4be843f39982d99 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Thu, 22 Feb 2024 10:51:07 -0500 Subject: [PATCH 8/8] oops --- packages/astro/src/content/vite-plugin-content-virtual-mod.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index ce431dc7181d..52f2d65f03a4 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -153,8 +153,8 @@ export async function generateContentEntryFile({ .replace("'@@DATA_ENTRY_GLOB_PATH@@'", dataEntryGlobResult) .replace("'@@RENDER_ENTRY_GLOB_PATH@@'", renderEntryGlobResult) .replace('/* @@LOOKUP_MAP_ASSIGNMENT@@ */', `lookupMap = ${JSON.stringify(lookupMap)};`) + - isClient ? ` -console.warn('astro:content is only supported running server-side. Using it in the browser will lead to bloated bundles and slow down page load. In the future it will not be supported.');` : ''; + (isClient ? ` +console.warn('astro:content is only supported running server-side. Using it in the browser will lead to bloated bundles and slow down page load. In the future it will not be supported.');` : ''); return virtualModContents; }