Is there any plans to support custom renderers similar to React?

[user753]

In React it's possible to implement some simple api https://github.com/facebook/react/tree/master/packages/react-reconciler and render React to anything, for example three.js. Is it possible to do something like this with Solid?

[ryansolid]

Pontentially. That being said it only really matters as far as native elements. Solid's reactivity is granular and its "rendering" are side effects. So if someone just never put a lower case JSX tag in their code we don't need to import DOM API's. I've helped people make Canvas renderers (closed source, unfortunately), and I could see Solid being used today as is on other platforms. The compiler doesn't need import anything specific from solid-js/web. If you start the app from createRoot instead of render there is no need for DOM involved.

So I see some ability to make this generalizable as far as having custom runtime. It would likely require me to add one more additional transform, the same way I have DOM/SSR. But if someone wanted to experiment with just using Components today they could. It's really only the native elements(lowercase) that would require this.

Since we don't use a VDOM and diff, it's unclear that the view reconciling part of the code has any value anyway. I was looking at the React reconciler you linked, and there is all this insertElementBefore etc.. and I think that only matters if the underly system has that sort of representation. Ie.. layout that is based on ordered flow. A 3D renderer for example would have no need for that. I do see some places where maybe this makes sense but I think the approach with Solid might end up being rather different.

[user753]

But if someone wanted to experiment with just using Components today they could.

Is there any example for such approach? What should be returned from components if I cannot use native elements lowercase tags?

For example I have some object model for canvas

class Node {
    addChild(node: Node): void
    onClick: () => void
}
class Text extends Node {
     constructor(public text: string){}
}
const root = new Node()
const textNode = new Text("foo")
textNode.onClick = () => text.text = "bar"
root.addChild(text)

How can I create Node and Text component in Solid?
So I could do

const Root = () => {
	const [text, setText] = createSignal("foo");
	return <Node><Text onClick={() => setText("bar")} text={text()}/></Node>
};

[ryansolid]

The project I saw that did this used Context API. The elements more or less returned undefined. When they were created they'd add the right information into the Context, and when they were destroyed they'd remove it. I think something like this:

function Node(props) {
  const { addChild, removeChild } = useNodeContext();
  const n = new NodeNode();
  const ctx = {
    addChild: n.addChild,
    removeChild: n.removeChild
  }
  addChild(n);
  onCleanup(() => removeChild(n));
  return <NodeProvider value={ctx}>{props.children}</NodeProvider>;
}

function Text(props) {
  const { addChild, removeChild } = useNodeContext();
  const n = new TextNode(props.text);
  n.onClick = props.onClick;
  createEffect(() => n.text = props.text);
  addChild(n);
  onCleanup(() => removeChild(n));
  return;
}

I'm missing the null checks around context(ie if there exists no context), and the context provider/consumer implementation, and any other info passed parent to child but that's a general idea. Does that make sense? Basically no need to reconcile anything.

[user753]

Does that make sense?

Yes, looks great, thanks. What do you think about performance? How much overhead does solid add? Or it shouldn't be noticeable?