Benedict Posts - Answer Overflow

Benedict

•Created by Benedict on 3/18/2025 in #support

Making a custom graph reactive

I am building a custom rendering graph which then gets serialized and rebuilt in a web worker. I would like to keep the graph logic as decoupled from Solid as possible so I could easily reuse it outside of SolidJS. The graph is composed of nodes which have some options that can be changed. I'm using SolidJS for rendering a UI for these options so that they can be passed to the rendering graph later. The graph itself already has an internal update function that can be bubbled up. Basically what I want to achieve is that whenever a graph node is changed (usually through the solid component), the component triggers a full rerender of the control component. I know I'm losing fine grained reactivity here, but that's fine for my usecase. Does anyone have any ideas on how to achieve that? Here's some pseudocode to make it clearer (don't worry about any errors here)

class Node {
  properties: Property[]
  disabled: bool
  setProperty(...){this.#update()}
  setDisabled(v){this.disabled = v; this.#update()}
  #updateListeners = Listener[]
  #update() {this.#updateListeners.forEach(l => l())}
  addUpdateListener(f) {this.#updateListeners.push(f);}
}

const RenderNodeOptions = (props) => {
  // How do I trigger a rerender here?
  return <button on:click={() => props.node.setDisabled(!disabled)}>Toggle Disabled</button> // Some more code for the other properties
}

class Node {
  properties: Property[]
  disabled: bool
  setProperty(...){this.#update()}
  setDisabled(v){this.disabled = v; this.#update()}
  #updateListeners = Listener[]
  #update() {this.#updateListeners.forEach(l => l())}
  addUpdateListener(f) {this.#updateListeners.push(f);}
}

const RenderNodeOptions = (props) => {
  // How do I trigger a rerender here?
  return <button on:click={() => props.node.setDisabled(!disabled)}>Toggle Disabled</button> // Some more code for the other properties
}

Maybe I'm also overcomplicating this and there is a much easier way to do this?

8 replies

Gaming

Programming