SolidJS•11mo ago

Store for binary tree object

How should i use store to dynamically render content from my binary tree?

class Node<T> {
  left: Node<T> | null;
  right: Node<T> | null;
  value: T | null;

  append(node: Node<T>){...}
  remove(){...}
}

class Node<T> {
  left: Node<T> | null;
  right: Node<T> | null;
  value: T | null;

  append(node: Node<T>){...}
  remove(){...}
}

I plan to have different components/jsx-elements as value. I prefer not to edit the append function, by for example, call the setter given by createStore(). Perhaps I should look more into createEffect? I've been looking at the API and tutorial but I'm not sure how to start. Other examples and links are appreciated

5 Replies

TorHammare•11mo ago

Hmm, Also the append function may also alter other elements in the tree, like making the tree balanced. Resulting in the rendered view may look completely different.

caseybaggz•11mo ago

I would adjust the store so you could utilize the Match component which will be a better design than storing a component within a state-based store.

TorHammare•11mo ago

Match component..? Do you have a link to some documentation?

caseybaggz•11mo ago

@torhammare so, I think you might want to use something like Dynamic, but either way - both are control flow components: https://www.solidjs.com/tutorial/flow_dynamic?solved

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

TorHammare•11mo ago

Ah I got the first rendering done using show. The issue is to update the rendering when the tree updates.

const WindowTile = (props) => (
  <Show when={props.node.left && props.node.right} fallback={
    props.node.value
  }>
    <WindowTile node={props.node.left} />
    <WindowTile node={props.node.right} />
  </Show>
);

const WindowTile = (props) => (
  <Show when={props.node.left && props.node.right} fallback={
    props.node.value
  }>
    <WindowTile node={props.node.left} />
    <WindowTile node={props.node.right} />
  </Show>
);

Gaming

Programming

Store for binary tree object