Fix #193: clickable docs code samples on Svelte 5

[ekzhang]

This fixes #193. It looks like Svelte 5 slightly changes how reactivity works with $: on the data prop on a SvelteKit route.

I added if (slug !== data.slug) so that the page content will still update on a navigation to a different frontend page. But this prevents the component from having active stuck to be the first code file on the page.

[rgieseke]

How about doing this?

export let data;
$: slug = data.slug;
$: content = data.content;
$: active = data.active;

It's also three lines but more explicit.

I think the double destructuring might have come after this Sveltekit 2 change:
sveltejs/kit#5774 (comment)

With Svelte 4 the page navigation seems to work even without the first declaration. Not sure if this was necessary for the Layer Cake site (I found this discussion https://twitter.com/geoffrich_/status/1564297325002227713) but this doesn't affect the not working destructuring with Svelte 5.

[ekzhang]

Nice! Yeah, that makes sense — thanks for explaining the cause. :)

[mhkeller]

Thanks @ekzhang for flagging this so quickly and @rgieseke for having an encyclopedic knowledge of Svelte 2 commits! That Twitter discussion was what prompted that style and I think my logic was to cover my bases.

[mhkeller]

Hm I'm getting this error when I navigate to a component page:

[ekzhang]

Sorry — Yeah, this seems to be a because the reactive declaration content.hasjsDoctable renders before the reactive handler $. It works when I add the let again. I didn't try it on the components page.

[rgieseke]

having an encyclopedic knowledge of Svelte 2 commits!

Haha - I did quite a bit of searching to figure out what these commands meant!

Could have been the automatic tool or the recommendation during one of the Sveltekit updates.

In the Twitter thread Rich Harris also wrote:

[...] the rule is 'only reactive statements can depend on reactive statements', and i think we should avoid promoting the pattern of destructuring data. it ends up being more code in 90% of cases, and obscures stuff (if i see data.foo in a component i can guess without further context that it comes from a load function, etc)

Twitter