Beta release with Svelte 5 runes

[moonlitgrace]

Overview

Refactor svelte component with svelte 5 runes. its showing error while running app in runes mode.

✘ [ERROR] node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:4:0 Cannot use `export let` in runes mode — use `$props()` instead [plugin vite-plugin-svelte:optimize-svelte]

Type

• [ ] New feature
• [X] Changes to existing features

Motivation

What inspired this feature request? What problems were you facing, or what else makes you think this should be included?

Since svelte apps are migrating to its version 5, releasing a beta version with runes support would be better.

Labels

• [ ] Add the Type: Feature Request label to this issue.

[theashraf]

Thank you, @moonlitgrace, for your suggestion. Currently, Svelte v5 is not yet stable, and we plan to refactor from v4 to v5 only after it has been stabilized, based on the recommendation from the Svelte team here

Since Svelte v5 and v4 are backward compatible (without the runes mode enabled), we could disable the runes mode for the DotLottie svelte component. This would provide an easy transition without the need for a refactor or a beta release

If you're interested, we would appreciate your contribution to update the dotlottie-svelte component to support this setup

[moonlitgrace]

@theashraf Thank you for the explanation, hope things are going well there.

Since Svelte v5 and v4 are backward compatible (without the runes mode enabled), we could disable the runes mode for the DotLottie svelte component

Yep thats right, but our app was running on runes mode, so yea that showed up, obviously. disabling runes mode for component only is another good idea (so that I can again run my app on runes mode yeey! ^_^)

If you're interested, we would appreciate your contribution to update the dotlottie-svelte component to support this setup

Yes I'm interested, I'll send a PR right away.

[theashraf]

This issue has been resolved in @lottiefiles/dotlottie-svelte@0.3.0

[Antoine-lb]

Hello 👋 After installing @lottiefiles/dotlottie-svelte 0.3.7 is giving me a runes error. I'm on Svelte 4 so I don't have them, how can I disable runes? Thanks

[abegehr]

I'm also experiencing an issue on Svelte 4 with 0.3.7 (I also tried 0.3.6 and 0.3.5 without luck).

Stack trace:

app dev: 16:38:15 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:
app dev: Error: Build failed with 1 error:
app dev: ../node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16 <svelte:options> unknown attribute 'runes'
app dev:     at failureErrorWithLog ($DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)
app dev:     at $DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:945:25
app dev:     at $DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1353:9
app dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
app dev:   Hint:
app dev:     Make sure your promises all have an `await` or a `.catch()` handler.
app dev:   Error reference:
app dev:     https://docs.astro.build/en/reference/errors/unhandled-rejection/
app dev:   Stack trace:
app dev:     at $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16
app dev:     [...] See full stack trace in the browser, or rerun with --verbose.

The error seems to be Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16 (see here).

So the change introduced in 0.3.0 seems to break support for Svelte 4 (specifically, I'm on 4.2.18). Downgrading to package version 0.2.0 makes the error go away.

[Antoine-lb]

I'm also experiencing an issue on Svelte 4 with 0.3.7 (I also tried 0.3.6 and 0.3.5 without luck).

Stack trace:

app dev: 16:38:15 [ERROR] [UnhandledRejection] Astro detected an unhandled rejection. Here's the stack trace:

app dev: Error: Build failed with 1 error:

app dev: ../node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte:1:16 <svelte:options> unknown attribute 'runes'

app dev:     at failureErrorWithLog ($DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1472:15)

app dev:     at $DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:945:25

app dev:     at $DIR/node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1353:9

app dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

app dev:   Hint:

app dev:     Make sure your promises all have an `await` or a `.catch()` handler.

app dev:   Error reference:

app dev:     https://docs.astro.build/en/reference/errors/unhandled-rejection/

app dev:   Stack trace:

app dev:     at $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte: ERROR: [plugin: vite-plugin-svelte:optimize-svelte] $DIR/node_modules/.pnpm/@lottiefiles+dotlottie-svelte@0.3.7_svelte@4.2.18/node_modules/@lottiefiles/dotlottie-svelte/dist/Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16

app dev:     [...] See full stack trace in the browser, or rerun with --verbose.

The error seems to be Dotlottie.svelte <svelte:options> unknown attribute 'runes':1:16 (see here).

So the change introduced in 0.3.0 seems to break support for Svelte 4 (specifically, I'm on 4.2.18). Downgrading to package version 0.2.0 makes the error go away.

I down graded to v0.2.0 and it works

[dummdidumm]

The PR that added the option should be reverted. In general, when using Svelte 5 together with component libraries one should not set the runes compiler option, and instead opt in to runes mode by using runes in components. That solves OP's issue (this Library did nothing wrong so to speak).

[theashraf]

@dummdidumm makes sense, enabling/disabling the runes mode in v5 should be the responsibility of the consumer of DotLottieSvelte

The PR that added the option should be reverted. In general, when using Svelte 5 together with component libraries one should not set the runes compiler option, and instead opt in to runes mode by using runes in components. That solves OP's issue (this Library did nothing wrong so to speak).

[theashraf]

Thanks @Antoine-lb @abegehr, I've reverted the runes attribute in the DotLottieSvelte component.

@moonlitgrace You can disable the runes mode only in your application. We're reverting this change as it causes compatibility issues for Svelte v4 users.

[theashraf]

fixed in dotlottie-svelte@v0.3.8