The returned types of a component should be re-thinked.

[thejimmylin]

For now the component and JSX related type aliases are like:

/**
 * Component type aliases.
 */
type Component = (props: JsxProps) => Renderable;
type Renderable = JsxNode | NestedArray<JsxNode>;

/**
 * JSX type aliases.
 */
type JsxNode = JsxElement | string;
type JsxElement = { tag: string | Component; props: JsxProps };
type JsxAttrs = { [key: string | symbol]: any };
type JsxProps = JsxAttrs & { children: Array<JsxNode> };

The problem is that the returned type of a component is complicated, which makes the later process of JSX/Fiber/DOM elements complicated, too. If the types of a component could be simpler, it may help a lot.

Also, the fragment should be considered, too.

[thejimmylin]

The problems

The returned type of a component could be JsxNode | NestedArray<JsxNode> for now. This is difficult to understand for both of the users and developers of this library. If it can be just JsxNode | Array<JsxNode> or even JsxNode, it will be great.

Why it needs to be like this for now?

Why NestedArray<JsxNode> need to be in the returned type of a component?

• Because the "react way" to do a v-for is like this:

  <ul>{posts.map(post => <li>{post.title}</li>)}</ul>

  Then it get converted to createJsxElement("ul", null, posts.map(post => <li>{post.title}</li>)).

Reference:

• Spec proposal: extending the language to allow spreading children react/jsx#57
• https://github.com/alangpierce/sucrase
• https://github.com/calebmer/vulture/blob/next/packages/vulture/src/jsx/jsx.ts
• Add JSX spread children babel/babylon#42