Children as data? about solid

[ryansolid]

It won't convert a single expression to a Document Fragment. I do it to shortcut what I consider the common case. Originally I had the children as arrays but an array of nodes is less efficient as far as my benchmarking shows. I wondered about this precise case but since I had never actually hit it ever using React and the benefits for shortcutting the renderer beneficial I went that way. The main reason is I create nodes by cloning templates. An array would take an otherwise singular template and split it into multiple templates that'd all be cloned separately.

Consider:

<MyComponent>
  <div>Hello</div>
  <div>World</div>
</MyComponent>

With a change to get the single node effect I would need to write it as:

<MyComponent>{
  <>
    <div>Hello</div>
    <div>World</div>
  </>
}</MyComponent>

Whereas for the Data Array you can just currently write:

<MyComponent>{
  [1, 2, 3]
}</MyComponent>

I'm not sure there is any case that needs multiple expression children to pass data. It's sort of pure overhead.

It's quite possible the types are incorrect. I am yet to use the JSX types in a project and I made the change to the child operation around the same time the types were contributed. What should be happening is any single expression is left untouched to handle (passing data, render props etc) and anything with multiple children is made into a document fragment. That way children is always a single non-array value (unless you pass an array), that can be either used directly or appended to the DOM without further consideration.

[bluenote10]

👍 the single array argument example solves this use case in my opinion.

The only question is if fixing the types is actually possible. It might be part of the JSX language specs requiring that multiple arguments become an array. Even if it's not possible to fix the type it might be enough to just document it as a small deviation from the JSX specs (with a hint that type casts are required in TS).

[ryansolid]

We do set up our own types so maybe there is something to be done there?

https://github.com/ryansolid/babel-plugin-jsx-dom-expressions/blob/master/types/index.d.ts

Is it that these types only extend to Intrinsic Elements? And not Custom Elements? I guess this is my TypeScript issue of the week. Can't seem to go a week without finding some new fun surprise.

Help would be very much appreciated to know whether there is a TypeScript solution for this.

[ryansolid]

microsoft/TypeScript#30918 is sort of the opposite issue. Looks like TypeScript won't play ball. I've updated documentation. Seems like that is all I can do.