fix(cli): properly migrate svelte to v5 in the plugin example template

[takecchi]

Problem

Using the official CLI, I created a plugin following the steps below. However, when I ran the example app, the screen remained completely black with nothing displayed.

Steps to Reproduce

# Create the plugin
npx @tauri-apps/cli plugin new my-plugin  

# Build the plugin
cd tauri-plugin-my-plugin  
npm install  
npm run build 

# Run the example app
cd examples/tauri-app  
npm install  
npm run dev

After accessing http://localhost:1420/, the page fails to render correctly and shows a completely black screen.

Solution

I modified vite.config.js as follows to support Svelte 4:

Significance of This Change

With this fix, the plugin template generated by the official Tauri CLI will now work out of the box in Svelte 4 environments, preventing developers from running into issues at the initial setup stage.

[Legend-Master]

I think maybe we should migrate the svelte files in the template to v5 properly instead?

[takecchi]

I think maybe we should migrate the svelte files in the template to v5 properly instead?

@Legend-Master

I agree with you.
Sorry, but I'm not very experienced with Svelte and didn't have much time, so I made a change to vite.config.js as a quick workaround to ensure the example runs correctly.

I figured it's more important for plugin developers to not get stuck early on, at least for now.

I’m using AI to translate, so sorry if anything sounds strange grammatically.

[FabianLars]

I think maybe we should migrate the svelte files in the template to v5 properly instead?

The actual question should be why are we even using svelte in the template.

[github-actions]

Package Changes Through 2b575f0

There are 5 changes which include tauri-cli with minor, @tauri-apps/cli with minor, tauri-utils with minor, tauri with patch, tauri-plugin with minor

Planned Package Versions

The following package releases are the planned based on the context of changes in this pull request.

package	current	next
tauri-utils	2.6.0	2.7.0
tauri-bundler	2.5.2	2.5.3
tauri-runtime	2.7.1	2.7.2
tauri-runtime-wry	2.7.2	2.7.3
tauri-codegen	2.3.1	2.3.2
tauri-macros	2.3.2	2.3.3
tauri-plugin	2.3.1	2.4.0
tauri-build	2.3.1	2.3.2
tauri	2.7.0	2.7.1
@tauri-apps/cli	2.7.1	2.8.0
tauri-cli	2.7.1	2.8.0

Add another change file through the GitHub UI by following this link.

---

Read about change files or the docs at github.com/jbolda/covector

[Legend-Master]

The actual question should be why are we even using svelte in the template.

Honestly don't know 😂

I think maybe we should migrate the svelte files in the template to v5 properly instead?

@Legend-Master

I agree with you. Sorry, but I'm not very experienced with Svelte and didn't have much time, so I made a change to vite.config.js as a quick workaround to ensure the example runs correctly.

I figured it's more important for plugin developers to not get stuck early on, at least for now.

I’m using AI to translate, so sorry if anything sounds strange grammatically.

No worries, seems like there are not many files to update, did the update in eb6fe90

[Legend-Master]

@FabianLars do you prefer removing svelte from the template or just roll with the current change? (since I see a basic example template so I assume this is a more advanced example with frameworks)

[takecchi]

The actual question should be why are we even using svelte in the template.

Honestly don't know 😂

Yeah, honestly, I was wondering the same 😂
Personally, I prefer React, but I'm totally happy to follow the direction of the community.

@Legend-Master
Thanks a lot for taking care of the update so quickly!

Tauri is such an exciting project, and I'd love to contribute more.
If there's anything I can help with, feel free to let me know.

[takecchi]

This is unrelated to the content of this PR, but I noticed that the following commit introduced major updates to @sveltejs/vite-plugin-svelte and vite, and as a result, npm run tauri dev and npm run tauri build no longer work as expected.

commit: 24eb2b1

Steps to Reproduce

# Create the plugin
npx @tauri-apps/cli plugin new my-plugin  

# Build the plugin
cd tauri-plugin-my-plugin  
npm install  
npm run build 

# Run the example app
cd examples/tauri-app  
npm install  
npm run tauri build

Error

error when starting dev server:
TypeError: crypto.hash is not a function
    at getHash (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:2788:21)
    at getLockfileHash (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:11673:9)
    at getDepHash (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:11676:23)
    at initDepsOptimizerMetadata (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:11137:53)
    at createDepsOptimizer (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:34611:17)
    at new DevEnvironment (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:35375:109)
    at Object.defaultCreateClientDevEnvironment [as createEnvironment] (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:35794:9)
    at _createServer (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:28373:132)
    at async CAC.<anonymous> (file:///Users/takecchi/WebstormProjects/tauri-plugin-safe-area/examples/tauri-app/node_modules/.pnpm/vite@7.0.6/node_modules/vite/dist/node/cli.js:573:18)
 ELIFECYCLE  Command failed with exit code 1.
       Error The "beforeDevCommand" terminated with a non-zero status code.
 ELIFECYCLE  Command failed with exit code 1.

I originally opened this PR to make it easier for plugin developers to get started, so if possible, I'd like to help resolve this issue as well.

[Legend-Master]

That sounds like vitejs/vite#20287, are you on an older node version? Not sure what can we do in tauri except for downgrading the vite in templates which I kinda don't want

[FabianLars]

do you prefer removing svelte from the template or just roll with the current change? (since I see a basic example template so I assume this is a more advanced example with frameworks)

let's keep it for now. no need for hasty decisions here i think (not that we haven't already talked about svelte 100 times in the working group 🤣 )