S
SolidJS•3w ago
Benedict

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?
6 Replies
bigmistqke
bigmistqke•3w ago
you could have a const signal = toSignal(() => props.node)utility maybe?
bigmistqke
bigmistqke•3w ago
there is also a built-in utility called from
from - SolidDocs
Documentation for SolidJS, the signals-powered UI framework
bigmistqke
bigmistqke•3w ago
it's for signalifying Observables and your Node sounds pretty Observably
Benedict
BenedictOP•3w ago
Thanks, after some massaging I ended up with this working code! 
    subscribe(fn: (v: typeof this) => void) {
        this.#subscribers.add(fn);
        return () => {
            this.#subscribers.delete(fn);
        }
    }
    /** Convenience method that wraps from() */
    signal() {
        return from(this, this);
    }
    subscribe(fn: (v: typeof this) => void) {
        this.#subscribers.add(fn);
        return () => {
            this.#subscribers.delete(fn);
        }
    }
    /** Convenience method that wraps from() */
    signal() {
        return from(this, this);
    }
peerreynders
peerreynders•3w ago
There really is no need to couple the class interface to Solid for the infinitesimal gain in convenience. Just make it a helper function 
function withAccessor(node: Node) {  
  return from((set) => {
   const remove = node.addUpdateListener(set);
   return remove;
  });
}
function withAccessor(node: Node) {  
  return from((set) => {
   const remove = node.addUpdateListener(set);
   return remove;
  });
}
Also unless absolutely performance critical listeners are often managed with Sets: 
class Node {
  #updateListeners = new Set<Listener>();
  #update() {
    for(const l of this.#updateListeners)
    (l) => l();
  }
  addUpdateListener(f) {
    this.#updateListeners.add(f);
    return () =>  this.#updateListeners.delete(f);
  }
}
class Node {
  #updateListeners = new Set<Listener>();
  #update() {
    for(const l of this.#updateListeners)
    (l) => l();
  }
  addUpdateListener(f) {
    this.#updateListeners.add(f);
    return () =>  this.#updateListeners.delete(f);
  }
}
or 
class Node {
  #updateListeners = new Set<Listener>();
  #update() {
    for (const l of this.#updateListeners) (l) => l();
  }
  addUpdateListener(f) {
    this.#updateListeners.add(f);
  }
  removeUpdateListener(f) {
    this.#updateListeners.delete(f);
  }
}
class Node {
  #updateListeners = new Set<Listener>();
  #update() {
    for (const l of this.#updateListeners) (l) => l();
  }
  addUpdateListener(f) {
    this.#updateListeners.add(f);
  }
  removeUpdateListener(f) {
    this.#updateListeners.delete(f);
  }
}
Benedict
BenedictOP•3w ago
Thanks for the advice, I'll try to replicate that code. Also about the set, I was using that internally already but didn't include it in the pseudocode above for ease of writing. Good advice though!

Did you find this page helpful?