Passing data around components via store on server side

[Madd0g]

I can't find the right combination of things to allow a store to be updated on the server-side.

I have 2 components.

Parent.svelte

<script lang="ts">
import { setContext } from "svelte";
import { writable } from "svelte/store";

let store = writable({
    options: [],
});
setContext('store', store);
</script>
<ul>
    {#each $store.options as option (option)}
        <li>{option}</li>
    {/each}
</ul>
<slot />

Child.svelte

<script lang="ts">
import { getContext } from "svelte";
let store = getContext<any>('store');
export let option;
$store.options[$store.options.length] = option;
</script>

then somewhere in my app

<Parent>
  <Child option="hello" />
  <Child option="world" />
</Parent>

this works, but list items only show up on the client-side, the ul is empty in the HTML sent from the server.

it works perfectly fine when the store is defined in a <script context="module">, but then it is shared across all instances of my parent component, which I don't want.

Is there a way of communicating between components in an easy way that works on the server?

EDIT: I built this following the mapbox example, if there's a better way of doing things like this, please let me know.

Thanks!

[benmccann]

Here's a comment that might help explain: #269 (comment)

[Madd0g]

that's disappointing, is there maybe a way of querying/finding the children from the parent?

[CaptainCodeman]

I'd maybe take a step back and consider why have all this complexity just to allow the data to be passed in using child components via a slot (where the child components don't actually render anything) instead of simply passing an array as a prop to the parent? It would achieve the same thing in a far simpler, more efficient way, and sidestep the SSR issue you are experiencing.

[Madd0g]

you are absolutely right of course. It is mostly nonsensical.

But, that markup is not typed by hand, it is created from a tree-like structure. It is possible to "bend" it to generate a different type of node, but I was hoping to leave that part alone.

Also, I feel like there should be a way of doing this -- passing data around components before they are "settled" and SSR'd.

[CaptainCodeman]

In that case it makes even less sense and seems more convoluted - if the list of Child components is already being generated dynamically from data then it could be just passed in.

I get the impression that what you really might be intending is for those Child components to output the <li>{option}</li> entries themselves. Maybe it's just a simplified example, 'cause that doesn't make a lot of sense to me either (without them being more complex / having more behavior)

[Madd0g]

this structure is generated from an AST, not directly from data. the AST it is represented as a tree (parent -> child), so I created the html as a tree too (for simplicity).

It is possible to write a more contrived AST->html generator, but I was hoping to avoid that after seeing the mapbox example I linked above, which does a very similar thing - keeps some data on the children and provides them to the parent component.