Canvas & Svelte 5 infinite effect loops

[cholwell]

All the examples in the docs use $:, if you want to use effect and also do something like $ctx.strokeStyle you get an infinite effect loop

If there is a way to do this properly it would be good to add it to the docs

[mhkeller]

Although the library itself is built with Svelte 5, it hasn't yet been updated to use runes. See here for more info: #156. The short version is this library is a collection of stores and will likely need a full rewrite using runes. The reason why that hasn't been done is a) if I migrate to runes, Svelte 4 loses support b) I haven't had the bandwidth. I was aiming for migrating it closer to when Svelte 6 came out and I'm guessing support for Svelte 3 and 4 features is dropped.

In terms of solving your immediate problem, there's a note in the docs about a related issue with infinite loops which may be relevant. See also #50

@techniq has done some cool stuff overhauling canvas support here techniq/layerchart#295 but I haven't yet had the chance to see how that approach would be relevant to layercake.

[techniq]

The solution for LayerChart was to implement a component registration system where each primitive component registers a render method and Canvas is responsible for (re)rendering as needed (when invalidate() is triggered). This was released in 0.70.0 and improved over subsequent releases. See also this Bluesky post for a breakdown. There was a lot of reactivity trickiness to nail down (such as creating an object Id for linearGradient objects) and managing context save/restore to enable Group transforming. I still need to solve ClipPath and a few other small issues.

LayerChart just released 0.90 which took this further and implemented an integrated offscreen hit canvas to enable mouse/pointer events (see related Bluesky post)