From 0462219612183b65867aaaef9fa538d89f201999 Mon Sep 17 00:00:00 2001 From: Arpan Patel Date: Thu, 14 Nov 2024 03:33:57 -0500 Subject: [PATCH 1/6] Fix script injection during build (#12392) Co-authored-by: Emanuele Stoppa --- .changeset/slimy-pets-lick.md | 5 +++ .../astro/src/core/build/plugins/index.ts | 2 +- .../build/plugins/plugin-hoisted-scripts.ts | 38 +++++++------------ .../src/to-inject.astro | 14 ++----- .../test/reuse-injected-entrypoint.test.js | 26 ++++++++++++- 5 files changed, 48 insertions(+), 37 deletions(-) create mode 100644 .changeset/slimy-pets-lick.md diff --git a/.changeset/slimy-pets-lick.md b/.changeset/slimy-pets-lick.md new file mode 100644 index 0000000000..31065a6b6d --- /dev/null +++ b/.changeset/slimy-pets-lick.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes an issue where scripts were not correctly injected during the build. The issue was triggered when there were injected routes with the same `entrypoint` and different `pattern` diff --git a/packages/astro/src/core/build/plugins/index.ts b/packages/astro/src/core/build/plugins/index.ts index 1ccb7c6c38..4d30303f8b 100644 --- a/packages/astro/src/core/build/plugins/index.ts +++ b/packages/astro/src/core/build/plugins/index.ts @@ -32,7 +32,7 @@ export function registerAllPlugins({ internals, options, register }: AstroBuildP if (options.settings.config.experimental.directRenderScript) { register(pluginScripts(internals)); } else { - register(pluginHoistedScripts(options, internals)); + register(pluginHoistedScripts(internals)); } register(pluginSSR(options, internals)); register(pluginSSRSplit(options, internals)); diff --git a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts index 7c37849093..93bf44681a 100644 --- a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts +++ b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts @@ -1,10 +1,7 @@ import type { BuildOptions, Rollup, Plugin as VitePlugin } from 'vite'; -import type { AstroSettings } from '../../../@types/astro.js'; -import { viteID } from '../../util.js'; import type { BuildInternals } from '../internal.js'; -import { getPageDataByViteID } from '../internal.js'; +import { getPageDatasByHoistedScriptId } from '../internal.js'; import type { AstroBuildPlugin } from '../plugin.js'; -import type { StaticBuildOptions } from '../types.js'; import { shouldInlineAsset } from './util.js'; function virtualHoistedEntry(id: string) { @@ -12,7 +9,6 @@ function virtualHoistedEntry(id: string) { } export function vitePluginHoistedScripts( - settings: AstroSettings, internals: BuildInternals, ): VitePlugin { let assetsInlineLimit: NonNullable; @@ -73,23 +69,18 @@ export function vitePluginHoistedScripts( shouldInlineAsset(output.code, output.fileName, assetsInlineLimit); let removeFromBundle = false; const facadeId = output.facadeModuleId!; - const pages = internals.hoistedScriptIdToPagesMap.get(facadeId)!; - for (const pathname of pages) { - const vid = viteID(new URL('.' + pathname, settings.config.root)); - const pageInfo = getPageDataByViteID(internals, vid); - if (pageInfo) { - if (canBeInlined) { - pageInfo.hoistedScript = { - type: 'inline', - value: output.code, - }; - removeFromBundle = true; - } else { - pageInfo.hoistedScript = { - type: 'external', - value: id, - }; - } + for (const pageData of getPageDatasByHoistedScriptId(internals, facadeId)) { + if (canBeInlined) { + pageData.hoistedScript = { + type: 'inline', + value: output.code, + }; + removeFromBundle = true; + } else { + pageData.hoistedScript = { + type: 'external', + value: id, + }; } } @@ -103,7 +94,6 @@ export function vitePluginHoistedScripts( } export function pluginHoistedScripts( - options: StaticBuildOptions, internals: BuildInternals, ): AstroBuildPlugin { return { @@ -111,7 +101,7 @@ export function pluginHoistedScripts( hooks: { 'build:before': () => { return { - vitePlugin: vitePluginHoistedScripts(options.settings, internals), + vitePlugin: vitePluginHoistedScripts(internals), }; }, }, diff --git a/packages/astro/test/fixtures/reuse-injected-entrypoint/src/to-inject.astro b/packages/astro/test/fixtures/reuse-injected-entrypoint/src/to-inject.astro index 13d5bac25d..c8cc21da04 100644 --- a/packages/astro/test/fixtures/reuse-injected-entrypoint/src/to-inject.astro +++ b/packages/astro/test/fixtures/reuse-injected-entrypoint/src/to-inject.astro @@ -1,12 +1,6 @@ --- --- - - - - - Routing - - -

to-inject.astro

- - \ No newline at end of file +

to-inject.astro

+ diff --git a/packages/astro/test/reuse-injected-entrypoint.test.js b/packages/astro/test/reuse-injected-entrypoint.test.js index 10b8e528f8..72e90dbde9 100644 --- a/packages/astro/test/reuse-injected-entrypoint.test.js +++ b/packages/astro/test/reuse-injected-entrypoint.test.js @@ -13,11 +13,13 @@ const routes = [ description: 'matches /injected-a to to-inject.astro', url: '/injected-a', h1: 'to-inject.astro', + scriptContent: 'console.log("to-inject.astro");', }, { description: 'matches /injected-b to to-inject.astro', url: '/injected-b', h1: 'to-inject.astro', + scriptContent: 'console.log("to-inject.astro");', }, { description: 'matches /dynamic-a/id-1 to [id].astro', @@ -60,7 +62,7 @@ describe('Reuse injected entrypoint', () => { await fixture.build(); }); - routes.forEach(({ description, url, fourOhFour, h1, p, htmlMatch }) => { + routes.forEach(({ description, url, fourOhFour, h1, p, htmlMatch, scriptContent }) => { const isEndpoint = htmlMatch && !h1 && !p; it(description, async () => { @@ -85,6 +87,15 @@ describe('Reuse injected entrypoint', () => { if (htmlMatch) { assert.equal(html, htmlMatch); } + + if (scriptContent) { + const scriptTags = $('script[type="module"]').toArray(); + const scriptFound = scriptTags.some((script) => { + const scriptText = $(script).text(); + return scriptText.includes(scriptContent.trim()); + }); + assert(scriptFound, `Expected script content to be injected in SSG ${url}`); + } }); }); }); @@ -105,7 +116,7 @@ describe('Reuse injected entrypoint', () => { await devServer.stop(); }); - routes.forEach(({ description, url, fourOhFour, h1, p, htmlMatch }) => { + routes.forEach(({ description, url, fourOhFour, h1, p, htmlMatch, scriptContent }) => { // checks URLs as written above it(description, async () => { const html = await fixture.fetch(url).then((res) => res.text()); @@ -127,6 +138,17 @@ describe('Reuse injected entrypoint', () => { if (htmlMatch) { assert.equal(html, htmlMatch); } + + if (scriptContent) { + const scriptTags = $('script[type="module"]').toArray(); + const scriptFound = scriptTags.some((script) => { + const scriptSrc = $(script).attr('src'); + return ( + scriptSrc && scriptSrc.includes('/to-inject.astro?astro&type=script&index=0&lang.ts') + ); + }); + assert(scriptFound, `Expected script content to be injected in dev ${url}`); + } }); }); }); From bdc0890061533466da19660ff83a331a3136f6c4 Mon Sep 17 00:00:00 2001 From: Arpan Patel Date: Thu, 14 Nov 2024 08:34:43 +0000 Subject: [PATCH 2/6] [ci] format --- .../src/core/build/plugins/plugin-hoisted-scripts.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts index 93bf44681a..e442c74637 100644 --- a/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts +++ b/packages/astro/src/core/build/plugins/plugin-hoisted-scripts.ts @@ -8,9 +8,7 @@ function virtualHoistedEntry(id: string) { return id.startsWith('/astro/hoisted.js?q='); } -export function vitePluginHoistedScripts( - internals: BuildInternals, -): VitePlugin { +export function vitePluginHoistedScripts(internals: BuildInternals): VitePlugin { let assetsInlineLimit: NonNullable; return { @@ -93,9 +91,7 @@ export function vitePluginHoistedScripts( }; } -export function pluginHoistedScripts( - internals: BuildInternals, -): AstroBuildPlugin { +export function pluginHoistedScripts(internals: BuildInternals): AstroBuildPlugin { return { targets: ['client'], hooks: { From 9fc2ab8cc848739a21bfa3f754e9bec4926dc034 Mon Sep 17 00:00:00 2001 From: Jacob Jenkins Date: Thu, 14 Nov 2024 15:31:51 +0000 Subject: [PATCH 3/6] Update to svelte 5 (#12364) Co-authored-by: bluwy --- .changeset/five-dolls-smash.md | 20 ++ .changeset/tasty-coats-repair.md | 5 + examples/framework-multiple/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 15 +- examples/framework-svelte/package.json | 2 +- .../src/components/Counter.svelte | 15 +- examples/ssr/package.json | 2 +- examples/ssr/src/components/AddToCart.svelte | 5 +- examples/ssr/src/components/Cart.svelte | 4 +- .../e2e/fixtures/client-only/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../astro/e2e/fixtures/errors/package.json | 2 +- .../svelte/SvelteRuntimeError.svelte | 2 +- .../fixtures/multiple-frameworks/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 10 +- .../fixtures/nested-in-preact/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../e2e/fixtures/nested-in-react/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../e2e/fixtures/nested-in-solid/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../fixtures/nested-in-svelte/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../e2e/fixtures/nested-in-vue/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../fixtures/nested-recursive/package.json | 2 +- .../components/svelte/SvelteCounter.svelte | 11 +- .../fixtures/svelte-component/package.json | 2 +- .../src/components/Counter.svelte | 17 +- .../src/components/Stuff.svelte | 4 +- .../src/components/SvelteComponent.svelte | 2 +- .../src/components/ToggleSlots.svelte | 4 +- .../fixtures/view-transitions/package.json | 8 +- .../src/components/SvelteCounter.svelte | 10 +- .../astro/test/fixtures/0-css/package.json | 2 +- .../test/fixtures/0-css/svelte.config.mjs | 5 + .../alias-tsconfig-baseurl-only/package.json | 2 +- .../test/fixtures/alias-tsconfig/package.json | 2 +- .../astro/test/fixtures/alias/package.json | 2 +- .../test/fixtures/astro-children/package.json | 2 +- .../src/components/Component.svelte | 6 +- .../fixtures/astro-client-only/package.json | 2 +- .../src/components/PersistentCounter.svelte | 8 +- .../PersistentCounterStandalone.svelte | 8 +- .../test/fixtures/astro-dynamic/package.json | 2 +- .../src/components/PersistentCounter.svelte | 8 +- .../src/components/SvelteCounter.svelte | 10 +- .../fixtures/astro-markdown/astro.config.mjs | 6 +- .../test/fixtures/astro-markdown/package.json | 1 - .../src/components/Counter.svelte | 5 - .../fixtures/astro-slots-nested/package.json | 2 +- .../component-library-shared/Counter.svelte | 9 +- .../fixtures/component-library/package.json | 2 +- .../css-dangling-references/package.json | 2 +- .../src/components/Wrapper.svelte | 3 +- .../astro/test/fixtures/fetch/package.json | 2 +- packages/astro/test/fixtures/jsx/package.json | 2 +- .../jsx/src/components/SvelteCounter.svelte | 6 +- .../astro/test/fixtures/postcss/package.json | 2 +- .../server-islands/hybrid/package.json | 2 +- .../fixtures/server-islands/ssr/package.json | 2 +- .../test/fixtures/slots-svelte/package.json | 2 +- .../src/components/Counter.svelte | 8 +- .../fixtures/svelte-component/package.json | 2 +- .../src/components/TypeScript.svelte | 2 +- .../vue-with-multi-renderer/package.json | 2 +- packages/astro/test/postcss.test.js | 6 +- packages/integrations/solid/src/server.ts | 4 + packages/integrations/svelte/client-v5.js | 60 ----- packages/integrations/svelte/client.js | 125 --------- packages/integrations/svelte/client.svelte.js | 79 ++++++ packages/integrations/svelte/package.json | 18 +- packages/integrations/svelte/server-v5.d.ts | 2 - packages/integrations/svelte/server-v5.js | 57 ---- packages/integrations/svelte/server.js | 48 +++- packages/integrations/svelte/src/index.ts | 99 +------ pnpm-lock.yaml | 252 +++++++++--------- 77 files changed, 459 insertions(+), 636 deletions(-) create mode 100644 .changeset/five-dolls-smash.md create mode 100644 .changeset/tasty-coats-repair.md create mode 100644 packages/astro/test/fixtures/0-css/svelte.config.mjs delete mode 100644 packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte delete mode 100644 packages/integrations/svelte/client-v5.js delete mode 100644 packages/integrations/svelte/client.js create mode 100644 packages/integrations/svelte/client.svelte.js delete mode 100644 packages/integrations/svelte/server-v5.d.ts delete mode 100644 packages/integrations/svelte/server-v5.js diff --git a/.changeset/five-dolls-smash.md b/.changeset/five-dolls-smash.md new file mode 100644 index 0000000000..ad5e83fd9a --- /dev/null +++ b/.changeset/five-dolls-smash.md @@ -0,0 +1,20 @@ +--- +'@astrojs/svelte': major +--- + +Adds support for Svelte 5. Svelte 3 and 4 are no longer supported. + +The integration will now also no longer add `vitePreprocess()` by default if a preprocessor is not set up in `svelte.config.js`. It is recommended to set up the Svelte config manually so that features like IDE completion and syntax highlighting work properly. + +If you're using SCSS, Stylus, etc in your Svelte component style tags, make sure that the preprocessor is also set up in `svelte.config.js`. For example: + +```js +// svelte.config.js +import { vitePreprocess } from '@astrojs/svelte'; + +export default { + preprocess: vitePreprocess(), +}; +``` + +Refer to the [Svelte 5 migration guide](https://svelte.dev/docs/svelte/v5-migration-guide) and [`@sveltejs/vite-plugin-svelte` changelog](https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#400) for details of their respective breaking changes. diff --git a/.changeset/tasty-coats-repair.md b/.changeset/tasty-coats-repair.md new file mode 100644 index 0000000000..10b97e1c3d --- /dev/null +++ b/.changeset/tasty-coats-repair.md @@ -0,0 +1,5 @@ +--- +'@astrojs/solid-js': patch +--- + +Handles checking Svelte 5 component functions to avoid processing them as Solid components diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 1e63e02479..fa0af0805e 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -23,7 +23,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "solid-js": "^1.9.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte index 01e58574a6..641312ae1b 100644 --- a/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte +++ b/examples/framework-multiple/src/components/svelte/SvelteCounter.svelte @@ -2,7 +2,14 @@ A counter written with Svelte -->
- +
{count}
- +
- + {@render children?.()}
diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 9c1adf7cf9..779267dd64 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -13,6 +13,6 @@ "dependencies": { "@astrojs/svelte": "^5.7.3", "astro": "^4.16.12", - "svelte": "^4.2.19" + "svelte": "^5.1.16" } } diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte index 1353736aaa..a11538645e 100644 --- a/examples/framework-svelte/src/components/Counter.svelte +++ b/examples/framework-svelte/src/components/Counter.svelte @@ -1,5 +1,12 @@
- +
{count}
- +
- + {@render children?.()}
- diff --git a/examples/ssr/src/components/Cart.svelte b/examples/ssr/src/components/Cart.svelte index 74db0bc794..5d4b7d2510 100644 --- a/examples/ssr/src/components/Cart.svelte +++ b/examples/ssr/src/components/Cart.svelte @@ -1,5 +1,5 @@
- +
{ count }
- +
- + {@render children?.()}
diff --git a/packages/astro/e2e/fixtures/errors/package.json b/packages/astro/e2e/fixtures/errors/package.json index 3730d61f1b..77c4067785 100644 --- a/packages/astro/e2e/fixtures/errors/package.json +++ b/packages/astro/e2e/fixtures/errors/package.json @@ -14,7 +14,7 @@ "react-dom": "^18.3.1", "sass": "^1.80.6", "solid-js": "^1.9.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte index 54dbab6a75..69d62a884f 100644 --- a/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte +++ b/packages/astro/e2e/fixtures/errors/src/components/svelte/SvelteRuntimeError.svelte @@ -1,5 +1,5 @@
- +
{ count }
- +
- + {@render children?.()}
- +
{ count }
- +
diff --git a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte index c851a42f86..cb2d514964 100644 --- a/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte +++ b/packages/astro/test/fixtures/astro-client-only/src/components/PersistentCounterStandalone.svelte @@ -1,8 +1,8 @@
- +
{ count }
- +
\ No newline at end of file diff --git a/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte b/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte index 8d6b3f5e16..d4972b7f92 100644 --- a/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte +++ b/packages/astro/test/fixtures/astro-dynamic/src/components/SvelteCounter.svelte @@ -1,7 +1,7 @@
- +
{ count }
- +
- + {@render children?.()}
diff --git a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs index ac3f1ab643..201ce52f26 100644 --- a/packages/astro/test/fixtures/astro-markdown/astro.config.mjs +++ b/packages/astro/test/fixtures/astro-markdown/astro.config.mjs @@ -1,8 +1,6 @@ -import svelte from "@astrojs/svelte"; -import { defineConfig } from 'astro/config'; +import { defineConfig } from "astro/config"; // https://astro.build/config export default defineConfig({ - integrations: [svelte()], - site: 'https://astro.build/', + site: "https://astro.build/", }); diff --git a/packages/astro/test/fixtures/astro-markdown/package.json b/packages/astro/test/fixtures/astro-markdown/package.json index c1903a941e..9fe9dae012 100644 --- a/packages/astro/test/fixtures/astro-markdown/package.json +++ b/packages/astro/test/fixtures/astro-markdown/package.json @@ -3,7 +3,6 @@ "version": "0.0.0", "private": true, "dependencies": { - "@astrojs/svelte": "workspace:*", "astro": "workspace:*" } } diff --git a/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte b/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte deleted file mode 100644 index 4e91b26596..0000000000 --- a/packages/astro/test/fixtures/astro-markdown/src/components/Counter.svelte +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/astro/test/fixtures/astro-slots-nested/package.json b/packages/astro/test/fixtures/astro-slots-nested/package.json index 114e369d6c..6d541872ec 100644 --- a/packages/astro/test/fixtures/astro-slots-nested/package.json +++ b/packages/astro/test/fixtures/astro-slots-nested/package.json @@ -13,7 +13,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "solid-js": "^1.9.3", - "svelte": "^4.2.19", + "svelte": "^5.1.16", "vue": "^3.5.12" } } diff --git a/packages/astro/test/fixtures/component-library-shared/Counter.svelte b/packages/astro/test/fixtures/component-library-shared/Counter.svelte index 2f4c073390..0ca9f08b0d 100644 --- a/packages/astro/test/fixtures/component-library-shared/Counter.svelte +++ b/packages/astro/test/fixtures/component-library-shared/Counter.svelte @@ -1,5 +1,6 @@
- +
{ count }
- +
- + {@render children?.()}