Canvas infinite loop issue (Svelte 3/4)

[techniq]

Creating this issue mostly to document, as this workaround has been used in the docs for a while.

---

There is a known Svelte 3/4 reactivity issue with $: as documented by LayerCake (see issue)

It also sounds like this is fixed in Svelte 5

For Svelte 3/4 (and until LayerCake updates to Svelte 5 / runes), the workaround is to use separate <Canvas> instances, for example:

<Chart geo={...}>
  <Canvas>
    <GeoPath geojson={states} class="stroke-surface-content" />
  </Canvas>

  <Canvas>
    <GeoPath geojson={counties} class="stroke-surface-content/20" />
  </Canvas>
</Chart>

[mhkeller]

It will be interesting to see what the best Svelte 5 pattern is for this.