SolidJS•8mo ago

Is this (completely 🫣) illegal in Solid world?

what is the best primitives/library to use when dealing with deep nested structure? the data I'm dealing with looks like a graph with nodes and leaves. every nodes/leaves has a component that should update his data that should stay reactive. pretty hard to explain the context 😅 I was thinking about using a createStore (globally or within a context)

14 Replies

binajmenOP•8mo ago

in the end I will build the UI based on the graph representation using recursivity

binajmenOP•8mo ago

the closer think that would work a bit the same is a dynamic filter with nested conditions

Alex Lohr•8mo ago

createStore should be fine. If you encounter errors because of recursive links onto the same object, use a getter to reference the original location.

binajmenOP•8mo ago

ok ok I think i will just try and see what I expect is to have the parent informed when children (and sub-children, etc) change their values so that a node can just udate his level do you believe using a context is necessary? I guess if I only need this store one at a time it is not

Alex Lohr•8mo ago

what I expect is to have the parent informed when children (and sub-children, etc) change their values

This is not how Solid's fine-grained reactivity works. However, you can use one of our community primitives to facilitate deep tracking.

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

Alex Lohr•8mo ago

You can use a global store if you only need one in your app.

binajmenOP•8mo ago

What about this? https://playground.solidjs.com/anonymous/e00fba2f-7c2a-48c9-818e-ccc61596613f

import { For } from "solid-js";
import { render } from "solid-js/web";
import { createStore } from "solid-js/store";

type Level = {
  value: number;
  sub?: Array<Level>;
};

function Level(props: { store: Level }) {
  const [local, setLocal] = createStore<Level>(props.store);

  setTimeout(() => setLocal("value", (value) => value + 10), 2000);

  return (
    <>
      <pre>local: {local.value}</pre>
      <For each={local.sub}>{(sub) => <Level store={sub} />}</For>
    </>
  );
}

function Main() {
  const [store, _] = createStore<Level>({
    value: 1,
    sub: [
      { value: 2, sub: [{ value: 3 }, { value: 4 }] },
      { value: 5, sub: [{ value: 6 }, { value: 7 }] },
    ],
  });

  return (
    <div>
      <pre>store: {JSON.stringify(store, null, 2)}</pre>
      <Level store={store} />
    </div>
  );
}

render(() => <Main />, document.getElementById("app")!);

import { For } from "solid-js";
import { render } from "solid-js/web";
import { createStore } from "solid-js/store";

type Level = {
  value: number;
  sub?: Array<Level>;
};

function Level(props: { store: Level }) {
  const [local, setLocal] = createStore<Level>(props.store);

  setTimeout(() => setLocal("value", (value) => value + 10), 2000);

  return (
    <>
      <pre>local: {local.value}</pre>
      <For each={local.sub}>{(sub) => <Level store={sub} />}</For>
    </>
  );
}

function Main() {
  const [store, _] = createStore<Level>({
    value: 1,
    sub: [
      { value: 2, sub: [{ value: 3 }, { value: 4 }] },
      { value: 5, sub: [{ value: 6 }, { value: 7 }] },
    ],
  });

  return (
    <div>
      <pre>store: {JSON.stringify(store, null, 2)}</pre>
      <Level store={store} />
    </div>
  );
}

render(() => <Main />, document.getElementById("app")!);

yes I understand this is against the principle of unidirectional flow my other solution would be to flatten the hierarchy in a second structure that I would use to update the nodes but if I can use the recursive trick by exploring the graph like in the example below, that would be nice altough it feels a little bit hacky ^^

Alex Lohr•8mo ago

You can create reactivity made to order with solid using our trigger directive: https://github.com/solidjs-community/solid-primitives/tree/main/packages/trigger

GitHub

solid-primitives/packages/trigger at main · solidjs-community/solid...

A library of high-quality primitives that extend SolidJS reactivity. - solidjs-community/solid-primitives

Alex Lohr•8mo ago

You could even just define triggers for the nodes you want to track as setters.

binajmenOP•8mo ago

I'm unsure how that would work as I don't fully get the purpose of the lib but I'll have a look, thanks 🙂

Alex Lohr•8mo ago

Trigger basically allows you to trigger reactivity for whatever. For example, if you wanted to trigger an effect on all image.onload events, you could set up a trigger that is called inside a global capturing onload-Event that checks if the target is an img tag.

binajmenOP•8mo ago

mmh I feel I would completely cheat on Solid with this one 😂 I keep this in mind, thank you for your help

Alex Lohr•8mo ago

Our reactive Map and Set primitives use this a lot. And stores also use a similar mechanism to track the leaves.

binajmenOP•8mo ago

oh then I can feel less guilty. still not sure how I will implement the whole thing but I appreciate the guidance

Gaming

Programming

Is this (completely 🫣) illegal in Solid world?