fix(deps): update @sveltejs/vite-plugin-svelte to v6

[ocavue]

Changes

Updates @sveltejs/vite-plugin-svelte in package.json from v5 to v6

@sveltejs/vite-plugin-svelte@6.0.0 drops support for Node v18 and requires Node v20.19+. This is the same requirement as the upcoming astro v6.

Check this link for the full changelog of @sveltejs/vite-plugin-svelte@6.0.0:

Handle virtual modules IDs with \0

vite-plugin-svelte v5 used to use createFilter from rollup to match Svelte files. createFilter includes all IDs with \0 at createFilter.ts#L51. This ensures that all virtual modules with an ID starting with \0astro-entry: won't be matched.

vite-plugin-svelte v6 uses Vite's new object hook syntax for matching and simply matches all IDs ending with .svelte.

From vite-plugin-svelte's Changelog:

NOTE

The include logic has changed to files matching svelteConfig.include OR svelteConfig.extensions. Previously, only files matching both were loaded and transformed.

This change causes the following errors:

test at test/async-rendering.test.js:15:2
✖ build (1495.049839ms)
  [[vite-plugin-svelte:compile] [plugin vite-plugin-svelte:compile] astro-entry:/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte (1:9): astro-entry:/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte:1:9 Unexpected token
  https://svelte.dev/e/js_parse_error
  file: astro-entry:/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte:1:9
  
   1 |  export { default } from "/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte"
                 ^
  
  ] {
    name: 'RollupError',
    id: '\x00astro-entry:/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte',
    frame: ' 1 |  export { default } from "/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte"\n               ^',
    code: 'PLUGIN_ERROR',
    loc: { line: 1, column: 9, file: '\x00astro-entry:/home/runner/work/astro/astro/packages/integrations/svelte/test/fixtures/async-rendering/src/components/Counter.svelte' },
    pluginCode: 'js_parse_error',
    plugin: 'vite-plugin-svelte:compile',
    hook: 'transform',
    watchFiles: [ '/home/runner/work/astro/astro/packages/integrations/svelte/package.json' ]
  }

I fixed this issue by updating packages/astro/src/core/build/plugins/plugin-component-entry.ts and making sure the virtual module doesn't end with .svelte (it now ends with .svelte.js instead).

Update: fixed on the vite-plugin-svelte side.

Testing

Update some package.json files of the integration tests so that they will use the local build of @astrojs/svelte.

- "@astrojs/svelte": "^7.1.1",
+ "@astrojs/svelte": "workspace:*",

Docs

See changeset.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2a1104c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📝 Changeset Validation Results

❌ Changeset validation failed

Issues Found:

.changeset/soft-rings-attend.md

Issue with: 'Updates @sveltejs/vite-plugin-svelte to v6.'

❌ The description does not include sufficient migration guidance or breaking change details for a major update.

💡 Suggestions:
• Provide explicit migration steps or user actions required due to the update:
• ```markdown
Removes the deprecated @sveltejs/vite-plugin-svelte API version v5. Update to v6 and follow the migration instructions detailed here: [Link].

**General Errors:**
- The changeset header lacks clarification on the update impact or provides migration guidance.

**General Suggestions:**
- Consider elaborating the description to specify the impacts of the update.

---
*📖 See [Astro's changeset guide](https://contribute.docs.astro.build/docs-for-code-changes/changesets/) for details.*

[ocavue]

The HMR testing is failing. It seems that vite-plugin-svelte requires Vite's environment API (see hot-update.js#L48 and hot-update.js#L102) for HMR.

It might be best for this PR to wait until #14306 is merged into next.

[Princesseuh]

Hello, #14306 has been merged. Would you be willing to update this PR for that? No worries if you do not have time or anything, we'll get to it eventually otherwise!

[github-actions]

⚠️ Package Trust Level Decreased

Caution

Decreased trust levels may indicate a higher risk of supply chain attacks. Please review these changes carefully.

📦 Package	🔒 Before	🔓 After
@cloudflare/kv-asset-handler	trusted-with-provenance	none
@cloudflare/unenv-preset	trusted-with-provenance	none
workerd	trusted-with-provenance	none
miniflare	trusted-with-provenance	none
youch	provenance	none
@cloudflare/workerd-darwin-64	trusted-with-provenance	none
@cloudflare/workerd-darwin-arm64	trusted-with-provenance	none
@cloudflare/workerd-linux-64	trusted-with-provenance	none
@cloudflare/workerd-linux-arm64	trusted-with-provenance	none
@cloudflare/workerd-windows-64	trusted-with-provenance	none
wrangler	trusted-with-provenance	none

[ocavue]

Hi @Princesseuh. I've merged the latest next branch.

There is an unresolved issue from the e2e tests. The HMR for svelte is broken. Here is a step-by-step reproduction to show this issue. I'm not sure how to fix it.

1. Start the e2e fixture

cd astro
pnpm run build
cd packages/astro/e2e/fixtures/svelte-component
./node_modules/.bin/astro dev

2. Open http://localhost:4321/
3. Update packages/astro/e2e/fixtures/svelte-component/src/components/Counter.svelte
4. Notice that I need to save twice to trigger the HMR.

astro-hmr1.mp4

[ocavue]

It looks like if I make applyToEnvironment in hot-update.js#L48 always return true, I can achieve the correct HMR update starting from the second changes. However, the first style change still doesn't appear.

astro-hmr2.mp4

@dominikg I would really appreciate any suggestions you might have to help debug this issue.

[dominikg]

for the virtual module ids please note that .svelte.js is also handled by vite-plugin-svelte, so anything that isn't svelte should have neither. I'll look into handling \0 tagged ids in our internal filter excludes though.

As for hmr, vite-plugin-svelte doesn't know if a .svelte component contributed to the ssr response and if you want to reload the page or not, it only provides updates for the client environment. In the past (i havn't checked in a while) this worked in astro for svelte components with :client directive.

[ocavue]

for the virtual module ids please note that .svelte.js is also handled by vite-plugin-svelte, so anything that isn't svelte should have neither. I'll look into handling \0 tagged ids in our internal filter excludes though.

I was considering that allowing vite-plugin-svelte to handle a few additional files is acceptable, but it would definitely be better to exclude \0 directly in vite-plugin-svelte. Thank you for your help!

[dominikg]

zero-tagged ids are excluded in vite-plugin-svelte@6.2.3

[dominikg]

heads up that there is going to be a new major of vite-plugin-svelte soon that will exclusively support vite8. If astro@6 plans to use vite8 you might want to wait on that.

[ocavue]

@dominikg It looks like this patch resolves the HMR issue. I included some analysis in the description of that PR. Do you think my thoughts make sense?

[ocavue]

heads up that there is going to be a new major of vite-plugin-svelte soon that will exclusively support vite8. If astro@6 plans to use vite8 you might want to wait on that.

I'm not part of the Astro team. From what I understand, the Astro team's goal is to release astro@6 with vite@7, and they will try to update to vite@8 in a minor version of astro once vite@8 is stable.

[ocavue]

@Princesseuh Hi! With the help of the maintainer of vite-plugin-svelte, I've resolved all the issues in this PR, and it should now be ready for review.

However, some CI tests are timing out, and I'm not sure whether they are related to the changes in this PR.

[Princesseuh]

I'll rerun the CI, but it's quite possible that it is related to this PR as the tests pass on main. Do they work locally for you?

[ocavue]

Yes, I can reproduce this issue locally. The integration test for @astrojs/cloudflare is stuck.

I can also confirm that the following updates in .../fixtures/with-svelte/package.json cause this issue.

{
  "name": "@test/astro-cloudflare-with-svelte",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@astrojs/cloudflare": "workspace:*",
-    "@astrojs/svelte": "^7.2.4",
+   "@astrojs/svelte": "workspace:*",
    "astro": "workspace:*",
    "svelte": "^5.46.1"
  }
}

In other words, this test issue is not related to upgrading @sveltejs/vite-plugin-svelte from v5 to v6.

I guess that's why only @test/astro-cloudflare-with-svelte wasn't using "@astrojs/svelte": "workspace:*" before.

I'll try to figure it out. If I fail, I will just remove the update in .../fixtures/with-svelte/package.json.

[ocavue]

All tests have passed now.

Two changes have been made:

1. Retry fixture.build() because of the error:

There is a new version of the pre-bundle for 
"/astro/packages/integrations/cloudflare/test/fixtures/with-svelte/node_modules/.vite/deps_ssr/svelte_server.js?v=9924cddf", 
a page reload is going to ask for it.

2. Pass forceExit option to node:test so that it won't hang after the tests are finished.

[Princesseuh]

I believe that pre-bundle error thing is an actual bug in the Cloudflare integration, so we shouldn't work around it, let me notify people who knows how that work!

[ematipico]

So I had a look a this PR. I added a Svelte component to the cloudflare fixture, and I'm seeing the following warnings:

09:44:55 [WARN] [vite] Unexpected Node.js imports for environment "ssr". Do you need to enable the "nodejs_compat" compatibility flag? Refer to https://developers.cloudflare.com/workers/runtime-apis/nodejs/ for more details.
 - "node:async_hooks" imported from "../../../../../../node_modules/.pnpm/svelte@5.46.3/node_modules/svelte/src/internal/server/render-context.js"
 - "node:async_hooks" imported from "node_modules/.vite/deps_ssr/chunk-SROFYTMD.js?v=91336514"
 - "node:crypto" imported from "../../../../../../node_modules/.pnpm/svelte@5.46.3/node_modules/svelte/src/internal/server/crypto.js"
 - "node:crypto" imported from "node_modules/.vite/deps_ssr/chunk-SROFYTMD.js?v=91336514"

It seems that some Svelte code is using Node.js APIs, while they shouldn't.

[ematipico]

I just pushed a change that should improve the environment configuration of our adapter. Unfortunately, we can't do much to avoid Node.js code from svelte source code, unless there's some vite trick I don't know about.

I agree with @Princesseuh that the pre-bundle bug is weird, and regardless of the configuration I tried, it doesn't change much.

[dominikg]

It seems that some Svelte code is using Node.js APIs, while they shouldn't.

node:crypto is used as a dynamic fallback here: https://github.com/sveltejs/svelte/blob/6d90b96e990d9dd45f55effb4431393c3e610937/packages/svelte/src/internal/server/crypto.js#L15

async_hooks is required for AsyncLocalStorage, used here: https://github.com/sveltejs/svelte/blob/6d90b96e990d9dd45f55effb4431393c3e610937/packages/svelte/src/internal/server/render-context.js#L73

note that both are used in server modules. Whatever is producing the warnings above needs to be updated or you have to check if for some reason you are bleeding svelte server code into client outputs.

[ematipico]

@dominikg the warnings are emitted by the Cloudflare vite plugin, which does static analysis of the code. Cloudflare doesn't support Node.js APIs out of the box, and it requires a flag in the wrangler.jsonc file. There's no server code shipped to the client.

[teemingc]

We should be able to enable just the node_als flag using the Cloudflare Vite plugin's programmatic config (we plan to do this in SvelteKit too). https://developers.cloudflare.com/workers/vite-plugin/reference/programmatic-configuration/

[florian-lefebvre]

What is missing to land this PR? Apologies, I didn't quite follow

[ematipico]

I think we can merge it. Users will need to add the Node.js flags in their wranger.json because the svelte server renderer uses some Node.js APIs. We can improve the DX later in another PR (automatically update the wrangler file)