SolidJS•3w ago

Can I use Solid for rendering DOM elements under non-Solid parts of the website?

I'm using ProseMirror in one Solid component. ProseMirror takes a div, adds it's own children and populates it with it's own DOM elements. For simple elements it's OK, but for more complicated, interactive elements it'd be advantageous to use SolidJS. But how can I make Solid rendered/controlled DOM elements under a non-Solid part of the website? Can I call render() on a few (say <10) items in this unmanaged part of the website? What happens when those get deleted? Is Solid smart enough to recognise the element is being deleted and then call all the cleanup handles on it?

4 Replies

mdynnl•3w ago

you can render to any target anywhere in the DOM but solid has to be the sole manager of that node, it's unaware of anything that happens outside of the system also if you're using render, it's the responsibility of the caller to hook up the disposal to explain in this particular case, if ProseMirror doesn't interact with the node or its content in any way, it should be fine but you need to handle the disposal when ProseMirror removes the node

hyperknotOP•3w ago

ProseMirror seems to support an update function and a destroy function. I'm thinking about using it like this:

function createSolidNodeView(node, view, getPos) {
  // Create the DOM element
  const dom = document.createElement('div');
  
  // Render a Solid component into this element
  const dispose = render(() => <MyInteractiveComponent {...node.attrs} />, dom);
  
  // Return a ProseMirror NodeView
  return {
    dom,
    update(newNode) {
      // You'd need to handle updates here
      // This might require re-rendering the component
      return true;
    },
    destroy() {
      // Important: call dispose when the node is removed
      dispose();
    },
    // other NodeView properties as needed
  };
}

function createSolidNodeView(node, view, getPos) {
  // Create the DOM element
  const dom = document.createElement('div');
  
  // Render a Solid component into this element
  const dispose = render(() => <MyInteractiveComponent {...node.attrs} />, dom);
  
  // Return a ProseMirror NodeView
  return {
    dom,
    update(newNode) {
      // You'd need to handle updates here
      // This might require re-rendering the component
      return true;
    },
    destroy() {
      // Important: call dispose when the node is removed
      dispose();
    },
    // other NodeView properties as needed
  };
}

I guess the update might need some custom logic, but render and destroy seems to be straightforward.

mdynnl•3w ago

what does that update do exactly? from the surface, it looks as if it'd modify the node in its own way

hyperknotOP•3w ago

I don't yet know what it does. I guess by hooking into it and returning true I tell it not to modify it.

Gaming

Programming

Can I use Solid for rendering DOM elements under non-Solid parts of the website?

Did you find this page helpful?