How to mount a component using vanilla Javascript?

[AlexErrant]

...while keeping reactivity, of course.

(See this discussion for why I want to use vanilla Javascript - basically trying to support plugins written in plain Javascript.)

I've tried a few ways, none of which have worked.

Setup:

const Comp: VoidComponent<{
  i: number // some reactive prop
  child: VoidComponent<{ i: number }> // some Solid component passed to Javascript that I'm trying to mount
}> = (props) => {
  const container = document.createElement("div")
  // insert attempted code from below here
  return container // this Node is mounted in a solid-app here: https://github.com/AlexErrant/solid-plugin/blob/56729963cc6b3dacc760e123a43e30d5ad46d55e/my-solid-project/src/App.tsx#LL35C16-L35C36
}
export default Comp

I don't mind importing VoidComponent from Solid because it's just a type definition (really just a function returning an Element/Node). Heck, I don't mind importing anything really from Solid, including:

Solid's render:

  const renderDiv = document.createElement("div")
  render(() => props.child({ i: props.i }), renderDiv)
  container.appendChild(renderDiv)

However, it fails to update when i changes.

Solid's Dynamic:

  // @ts-expect-error Dynamic is callable, contrary to the typescript definition. Calling it is probably breaking reactivity, but I don't know how else to attach it to the DOM.
  const dynamicNode = Dynamic({ component: props.child, i: props.i })() as Node
  container.appendChild(dynamicNode)

It also fails to update when i changes.

Solid's Portal:

  const portalDiv = document.createElement("div")
  Portal({
    mount: portalDiv,
    children: props.child({ i: props.i }),
  })
  container.appendChild(portalDiv)

It too fails to update when i changes.

Invoking the component

...and replacing the entire DOM sub-tree with createEffect. However, this loses all fine-grained updates:

  let componentDiv = document.createElement("div")
  createEffect(() => {
    componentDiv.replaceChildren(props.child({ i: props.i }) as Node)
  })
  container.appendChild(componentDiv)

I'm out of ideas on what else to try. Here's a minimal repo, here's the Typescript plugin attempting to use the above, and finally here's the Stackblitz demoing the lack of reactivity propagation. Note that if you want to play with the Stackblitz, you'll need to modify the tsScript.ts, as that's where the compiled Javascript is loaded from. You'll also need to pnpm build && pnpm serve due to an issue with Vite.

Edit: don't use the Stackblitz, I made a playground repro: https://playground.solidjs.com/anonymous/16aa5f90-9494-4f0e-ab9f-005fdf20429c

[atk]

You need to use createComponent from "solid-js" to retain reactivity, e.g.:

createComponent(Dynamic, { ... });

[AlexErrant]

Hm, I tried with a plain component:

const createPlainComponent = createComponent(props.child, { i: props.i })
container.appendChild(createPlainComponent as Node)

and with a Dynamic component:

  const createDynamicComp = createComponent(Dynamic, {
    component: props.child,
    i: props.i,
  })
  // @ts-expect-error Dynamic is callable, contrary to the typescript definition. Calling it is probably breaking reactivity, but I don't know how else to attach it to the DOM.
  container.appendChild(createDynamicComp() as Node)

but neither retained reactivity.

I also tried combining createEffect with Portal, but it too loses fine-grained reactivity:

  const portalEffectDiv = document.createElement("div")
  createEffect(() => {
    Portal({
      mount: portalEffectDiv,
      children: props.child({ i: props.i }),
    })
  })
  container.appendChild(portalEffectDiv)

Here's the commit. I'm open to more ideas - please don't feel compelled to try the (now fixed) Stackblitz yourself!

[AlexErrant]

Selecting this as the answer; details at the bottom of the page!

[atk]

Why are you avoiding render?

[atk]

I didn't see any attempt that uses render together with createComponent, very much like our testing-library does: https://github.com/solidjs/solid-testing-library/blob/main/src/index.ts#L87

[AlexErrant]

Unfortunately, I can't get render + createComponent to work. My naive impl:

  const renderDiv = document.createElement("div");
  render(() => {
    return createComponent(props.child, { i: props.i });
  }, renderDiv);
  container.appendChild(renderDiv);

This doesn't update at all and gives a lint warning similar to the one in the above comment.

Things are better if I use the wrapper from the solid-testing-library code:

  const wrapper: Component<{ children: JSX.Element }> = (props) => (
    <div>Wrapper {props.children}</div>
  );
  const wrappedUi = () =>
    createComponent(wrapper, {
      get children() {
        return createComponent(props.child, { i: props.i });
        // return props.child({ i: props.i }); // I also tried this, but same problem
      },
    });
  const wrapperRenderDiv = document.createElement("div");
  render(wrappedUi, wrapperRenderDiv);
  container.appendChild(wrapperRenderDiv);

This has no lint warning and does update, but they aren't fine-grained updates; it updates the entire component's DOM.

New playground of just this attempt.

By the way, I really appreciate your help and ideas! This is a lot better than me going through the API documentation going "hmm, maybe this primitive?"

[atk]

I'll have a look later about those fine-grained updates.

[AlexErrant]

Additionally, I think the wrappedUi works because it uses JSX, which is something I want to avoid in a vanilla Javascript solution. When I remove the JSX from the wrapper...

const wrapper: Component<{ children: JSX.Element }> = (props) => props.children;

I get an eslint(solid/reactivity) warning on props.children, and reactivity fails to propagate.

I don't mind calling Solid functions, but requiring plugin authors to compile Solid JSX with a build step when they're writing plain ol' Javascript DOM manipulation isn't ideal.

[atk]

Just put the JSX in the playground and use the output.

[snnsnn]

Your intent is still not clear to me but here is an example that uses plain javascript both on the root and the leaf.

import {
  Component,
  JSXElement,
  createComponent,
  createEffect,
  createMemo,
  createRoot,
  createSignal,
  onCleanup,
} from 'solid-js';
import { render } from 'solid-js/web';

const Comp: Component<{ count: number }> = (props) => {
  let div = document.createElement('div');
  createEffect(() => {
    div.innerHTML = `Count: ` + props.count;
  });
  return div;
};

const App = () => {
  let dispose: () => void;
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount((p) => p + 1), 1000);

  onCleanup(() => {
    dispose && dispose();
  });

  const el = createRoot((disposer) => {
    dispose = disposer;
    return createMemo(() =>
      createComponent(Comp, {
        get count() {
          return count();
        },
      }),
    );
  }) as unknown as JSXElement;

  return <div>{el}</div>;
};

render(App, document.body);

[AlexErrant]

Sorry, but this isn't quite it either. The goal is to mount a Solid component using only Javascript. Yes, I can get a reactive signal down to the leaf, but that's not a Component, by Solid's definition:

export type Component<P = {}> = (props: P) => JSX.Element;

Basically, a Component is a function that returns a Node | ArrayElement | (string & {}) | number | boolean | null | undefined; in my examples I've been returning an HTMLDivElement (which satisfies Node) which I've called container.

I tweaked your code to pass a Solid component through to the leaf. Please let me know how you'd attach it to the DOM:

import {
  type VoidComponent,
  type Component,
  type JSX,
  createComponent,
  createEffect,
  createMemo,
  createRoot,
  createSignal,
  onCleanup,
} from "solid-js";
import { render } from "solid-js/web";

const ChildComp: VoidComponent<{ i: number }> = (props) => {
  return <div>Child Comp, *2 prop is {props.i * 2}</div>
}

const Comp: Component<{ count: number, child: VoidComponent<{ i: number }> }> = (props) => {
  let div = document.createElement("div");
  createEffect(() => {
    div.innerHTML = `Count: ` + props.count;
    // how do I attach props.child to the DOM here in a reactive way?
  });
  return div;
};

const App = () => {
  let dispose: () => void;
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount((p) => p + 1), 1000);

  onCleanup(() => {
    dispose && dispose();
  });

  const el = createRoot((disposer) => {
    dispose = disposer;
    let r = createMemo(() =>
      createComponent(Comp, {
        get count() {
          return count();
        },
        get child(){
          return ChildComp;
        }
      })
    );
    return r;
  }) as unknown as JSX.Element;

  return <div>{el}</div>;
};

render(App, document.body);

To elaborate a bit on why I'm trying to do this, I'm writing an app in Solid that supports plugins. Plugins (ideally) shouldn't be in only Solid; they should also support plain Javascript. So assume I have a plugin written in Javascript that takes as an argument a Solid component. How would the Javascript-plugin attach that component to the DOM without the benefit of JSX?

In my playground link, Counter is the primary app, Plugin is the plain vanilla Javascript plugin (ideally without JSX), and ChildComp is the Solid component that Counter is passing to the Plugin for it to mount somewhere in its own DOM. Plugin returns a DOM element (with ChildComp in it somewhere) that Counter renders with <Dynamic>. Here's an HTML wireframe:

Counter defines ChildComp, which it passes to Plugin to render wherever it likes. I hope this makes sense!

[atk]

Did you make sure that the same instance of solid is used on all levels?

[snnsnn]

You know Comp is an actual component and it is reactive. I use imperative API because you were using it almost in all your examples.

import {
  Component,
  JSXElement,
  createComponent,
  createEffect,
  createMemo,
  createRoot,
  createSignal,
  onCleanup,
} from 'solid-js';
import { render } from 'solid-js/web';

const Comp: Component<{ count: number }> = (props) => {
  return (
    <div>
      <div>Count: {props.count}</div>
    </div>
  );
};

const App = () => {
  let dispose: () => void;
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount((p) => p + 1), 1000);

  onCleanup(() => {
    dispose && dispose();
  });

  const el = createRoot((disposer) => {
    dispose = disposer;
    return createComponent(Comp, {
      get count() {
        return count();
      },
    });
  });

  return <div>{el}</div>;
};

render(App, document.body);

// how do I attach props.child to the DOM here in a reactive way?

I don't get this, please refactor the code in way to achieve your purpose, we can fix the errors and work towards your goal.

Do you want to render props.children reactively?

import {
  Component,
  createComponent,
  createRoot,
  createSignal,
  onCleanup
} from 'solid-js';
import { render } from 'solid-js/web';

const Comp: Component<{ children: number }> = (props) => {
  return () => props.children;
};

const App = () => {
  let dispose: () => void;
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount((p) => p + 1), 1000);

  onCleanup(() => {
    dispose && dispose();
  });

  const el = createRoot((disposer) => {
    dispose = disposer;
    return createComponent(Comp, {
      get children() {
        return count();
      },
    });
  });

  return <div>{el}</div>;
};


render(App, document.body);

[snnsnn]

You don't need a separate root but it is just to show you how you can create one.

import {
  Component,
  createComponent,
  createSignal
} from 'solid-js';
import { render } from 'solid-js/web';

const Comp: Component<{ children: number }> = (props) => {
  return () => props.children;
};

const App = () => {
  const [count, setCount] = createSignal(0);
  setInterval(() => setCount((p) => p + 1), 1000);

  const el = createComponent(Comp, {
      get children() {
        return count();
      },
  });

  return <div>{el}</div>;
};

render(App, document.body);

[AlexErrant]

Okay, I think I figured it out, please no one try to grok my shitty technical writing. I'll post my solution in a bit, gotta step away to emotionally recover from my stupidity.

[AlexErrant]

Okay @atk's comment

Just put the JSX in the playground and use the output.

finally sank in. How about I write the Plugin in Solid, then look at the compiled output and go from there? So, a Solid plugin like

const Plugin: VoidComponent<{
  i: number;
  child: VoidComponent<{ i: number }>;
}> = (props) => {
  return <Dynamic component={props.child} i={props.i}/>;
};

looks like this in Javascript:

const Plugin = props => {
  return _$createComponent(Dynamic, {
    get component() {
      return props.child;
    },
    get i() {
      return props.i;
    }
  });
};

Which is exactly what @atk initially suggested. However, I implemented his suggestion like this

const createPlainComponent = createComponent(props.child, { i: props.i })
container.appendChild(createPlainComponent as Node)

...which is missing getters.

Lo and behold, when I update my repo's attempts to use getters, literally every attempt works, and all are fine-grained. 🤦

Thanks so much @atk for your help and patience!