Use Solid instead of Preact?

[edemaine]

SolidJS's Babel plugin + server-side renderer uses string concatenation to turn JSX into strings. Advantages:

1. It should be much faster than Preact's virtual DOM + serialization (later parsed by xmldom).
2. It would avoid the need for cloning nodes when re-using them, which seems preferable.
3. You can mix JSX and string techniques as in (<line x1="5" y2="3"/>).replace(/<line/, '<line class="foo"').
4. Solid also makes <g innerHTML={svgString}/> easy, to mix JSX and strings in the other way. Preact needs dangerouslySetInnerHTML.
5. SVG Tiler's code gets simpler: no more detection of VDOM nodes and serialization for deduplication.

Alternatively, we could avoid xmldom parsing by using SolidJS's client-side renderer with fake DOM. This would probably be slightly faster (maybe should test). But then we'd lose advantages 2 and 3 above.

[diomidov]

I think 3 is a disadvantage (s/HTML/SVG/g). With preact you can be certain that your SVG is probably well-formed. I'd prefer to keep using virtual DOM unless there is a significant speed improvement.

[edemaine]

Heh, good point. I also came across some SVG Tiler mapping code that directly modifies nodes. Looks like it's adding a child to some VDOM after-the-fact.

However, back to SolidJS's client-side renderer with a fake DOM, let me ask you this: would you rather write Preact-style code like this to add a text child:

preact.cloneElement element, {},
   [...preact.toChildArray(element.props.children), text]

or standard DOM manipulation like this:

element = document.cloneElement element
element.appendChild document.createTextNode text
element

I'm actually not sure of the answer. Standard DOM manipulation is something I know pretty well, which is a nice advantage, but it's also annoyingly verbose. appendChild is the one nice helper here; everything else is uglier. So maybe we should just stick to Preact after all... On the other hand, standard DOM manipulation would work especially nicely in the browser.