search

dnass / svelte-canvas

🎨 Reactive canvas rendering with Svelte.
https://dnass.github.io/svelte-canvas/
ISC License
293 stars 13 forks source link

Compatibility with Svelte 5 and runes #62

Open mcharnet opened 5 hours ago

mcharnet commented 5 hours ago

Hello,

Thank you for this great library !

It was working great with svelte 4, but when I tried to bump, I encountered issues with reactivity. Indeed, the Layer's render function seems to be incompatible with the runes and not been re-evaluated if it contains a reactive variable.

Did you plan to make the library compatible ?

Thanks !

dnass commented 2 hours ago

This is caused by a breaking change in Svelte 5: using a reactive variable in a function definition does not trigger effects unless the function is called. Because of this, migrating layers by changing $: render = ... to let render = $derived(...) doesn't work.

I'm working on an update to the library that will address this, but it's not ready yet. In the meantime, there are a few possible workarounds:

  1. Use $derived.by as shown here.
  2. Keep using legacy Svelte 4 syntax for your render functions.
  3. Use the Canvas autoplay prop. This will cause the canvas to re-render on every frame, even when nothing has changed.
mcharnet commented 1 hour ago

Thank you for your quick reply !

Nice to read that you're on an update, and looking forward to seeing this ! In the meantime, I think I'll keep the Svelte 4 syntax for the render functions.