SolidJS•3mo ago

How to mount a Solid component to a dom element?

I have a Solid app... ...that uses a vanilla-js library ...which gives me a <div> to do stuff with. (So this sandwich has 3 layers.) (Think of the vanilla-js library as like, CodeMirror or ag-grid or something. A complex UI lib which gives me ways to customize certain components.) How do I mount a Solid component to the vanilla-js's exposed <div>? I see two options: render(), and <Portal>. render's docs only really discuss it as the "browser entry point". However I feel like I should be able to use it for the above purpose too. (Yes, the vanilla-js library provides a "teardown" hook where I can call render's dispose.) There shouldn't be any problems with nested render calls, right? * https://www.solidjs.com/guides/rendering * https://docs.solidjs.com/reference/rendering/render Portal should work too, but I'm hoping to avoid it because I'm getting a "computations created outside a createRoot or render will never be disposed" warning and fixing that is causing a lot of boilerplate code.

8 Replies

AlexErrantOP•3mo ago

Yeah that detail could come into play depending on the vanilla-js lib details. Thanks for the explanation!

Madaxen86•3mo ago

What lib are you using?

Mango Juicy•3mo ago

There's a non-compiled version of Solid that can be direcly used in vanilla js, but the experience would't be great: https://www.solidjs.com/guides/getting-started#buildless-options Could work if all other options fail

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.

AlexErrantOP•3mo ago

Currently I'm working on using vanilla-js ag-grid (because the solid-js version is unmaintained) but I might be using render with DockView and/or CodeMirror too. (Though perhaps DockView should stick with Portals; I think there are drag-n-drop reasons why portals are better than render in that context; e.g. moving dom elements (summary/details) won't change their state. IDK haven't tried/tested much of anything yet.) https://github.com/lyonbot/solid-dockview

Madaxen86•3mo ago

Well, the very cool thing about Solid :solid: is that you don't need many wrappers. I've made this video a while ago: https://youtu.be/vD69VfQpbvE Here's a stackblitz in which I've implemented ag grid with just a few lines of code. https://stackblitz.com/edit/github-szw3fe?file=src%2Fcomponents%2FAGGrid.tsx

Martin Rapp

YouTube

How to integrate a Vanilla JS library into SolidJS.

Solid is missing an ecosystem? Well, unlike Svelte or React, Solid doesn't require wrapper libraries thanks to it's render once approach. In this video I show you how to integrate a simple. Please subscribe to @solid-dev Repo on Github: https://github.com/madaxen86/solid-tutorials/tree/master/vanilla-eco

AlexErrantOP•3mo ago

thanks for the links! I'm using ag-grid's "Cell Components", so using render with it looks something like this https://stackblitz.com/edit/github-szw3fe-8nmnfy?file=src%2Fcomponents%2FAGGrid.tsx

Madaxen86•3mo ago

Well you can just pass a simple Solid component as the custom cell renderer like

function MyButton() {
  const [local, setLocal] = createSignal(0);

  return (
    <div >
      <button
        class="border border-black m-1 p-1 rounded-lg"
        onClick={() => {
          setGlobal((x) => x + 1);
        }}
      >
        global {global()}++
      </button>
      <button
        class="border border-black m-1 p-1 rounded-lg"
        onClick={() => {
          setLocal((x) => x + 1);
        }}
      >
        local {local()}++
      </button>
    </div>
  );
}

function MyButton() {
  const [local, setLocal] = createSignal(0);

  return (
    <div >
      <button
        class="border border-black m-1 p-1 rounded-lg"
        onClick={() => {
          setGlobal((x) => x + 1);
        }}
      >
        global {global()}++
      </button>
      <button
        class="border border-black m-1 p-1 rounded-lg"
        onClick={() => {
          setLocal((x) => x + 1);
        }}
      >
        local {local()}++
      </button>
    </div>
  );
}

https://stackblitz.com/edit/github-szw3fe-hqhuqz?file=src%2Fcomponents%2FAGGrid.tsx It'll work just fine. Solid will handle reactivity and cleanUp. No need to implement the refresh and destroy, etc.

StackBlitz

Solid-start With Tailwindcss Example (forked) - StackBlitz

Run official live example code for Solid-start With Tailwindcss, created by Solidjs on StackBlitz

AlexErrantOP•3mo ago

HAH. You're so right. Thank you for deleting my entire question lol - classic X/Y problem. For any future searchers, ag-grid states "Instead of using a class component, it's possible to use a function for a Cell Component... The function should return back either a) a string of HTML or b) a DOM object." And Solid components return real dom objs! (I love deleting code.) Ahh, I think I have to use render; trying to use a fn component gets me the classic "computations created outside a createRoot or render will never be disposed"

Gaming

Programming

How to mount a Solid component to a dom element?