Convert LayerCake.svelte lib to Svelte 5

[rgieseke]

As discussed in #329

[rgieseke]

On build I get

src/lib/LayerCake.svelte:204:28 This reference only captures the initial value of `yReverseValue`. Did you mean to reference it inside a closure instead?
https://svelte.dev/e/state_referenced_locally
202:   const _rNice = writable(rNice);
203:   const _xReverse = writable(xReverse);
204:   const _yReverse = writable(yReverseValue);
                                               ^
205:   const _zReverse = writable(zReverse);
206:   const _rReverse = writable(rReverse);

[rgieseke]

Maybe we can handle yReverseValue differently and then just use the derived store.

[mhkeller]

I've never liked how the LayerCake component has all of this code for x, y, z and r even if the user hasn't defined those. It would be nice if things were more dynamic where it looked at whether those accessors were set and then created properties as a result. I'm not sure if this will work with Svelte's reactivity but just putting it out there.

[mhkeller]

Maybe we can handle yReverseValue differently and then just use the derived store.

Ya that makes sense.

[rgieseke]

It would be nice if things were more dynamic where it looked at whether those accessors were set and then created properties as a result. I'm not sure if this will work with Svelte's reactivity but just putting it out there.

Not sure if it's possible to do everything without stores, but with or without stores maybe it's possible to be more dynamic with the context. You wrote earlier that it likely would look like chart.x etc. since it's not possibly anymore to destructure a context keys. Maybe that's an advantage for being more flexible.

[mhkeller]

We should pick this back up. If we keep stores, then we probably can't have it be more dynamic but I'd have to look into it. I had originally thought stores were going away but I think they aren't? If they remain, then can keep our destructured props from the layercake context. There is some new stuff around createContext that maybe would be helpful such as adding type hints?

[rgieseke]

Yes, the createContext seems quite useful!

[rgieseke]

Here is an attempt to convert the LayerCake component without stores to Svelte 5.

It seems to be the recommended way, from https://svelte.dev/docs/kit/state-management#Using-state-and-stores-with-context

You also use stores from svelte/store for this, but when using Svelte 5 it is recommended to make use of universal reactivity instead.

I think it makes the LayerCake component simpler to understand and for a user it might be easier to understand a LayerCake component without the 'magic' that comes from importing a store from a context and then using it pre-fixed with a $.

The basic approach I used is to store original prop values or derived variables (_d) in an object with getters so that they can be accessed in child components.

The import in a child component is then

const { data, xGet, yGet, xScale, yScale } = $derived(getLayerCakeContext());

for using them as data instead of $data.

Alternatively, one could them import them as context, c, or chart

const context = getLayerCakeContext()

for using them as context.data.

It would be a breaking change but updating user's components could likely be done with search and replace or a migration script.

[rgieseke]

For the shared context I used a context.ts file which seemed easier to write but it of course has lots of room for improvements. I think internally it's probably fine to use TypeScript? I saw you used types.d.ts in https://github.com/mhkeller/layercake-annotations - did that work well for you?

I think it would be nice to keep the downloadable components with JSDoc so that they can be dropped in any project.