search

LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
191 stars 11 forks source link

Beta release with Svelte 5 runes #216

Closed moonlitgrace closed 4 months ago

moonlitgrace commented 6 months ago

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

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

theashraf commented 6 months ago

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 commented 6 months ago

@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 commented 5 months ago

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

Antoine-lb commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

fixed in dotlottie-svelte@v0.3.8