JSX: Add a way to specify children as not a part of props

[dfilatov]

Right now there's no way to specify what children representation is, except specifying ElementChildrenAttribute inside JSX namespace. It's heavily coupled with React representation for children which implies that children is a part of props. This makes impossible to enable type checking for children with implementations which store children separately, for instance https://github.com/dfilatov/vidom/wiki/Component-properties.
Probably it could be ElementChildrenProperty (like ElementAttributesProperty).

[dfilatov]

@DanielRosenwasser Daniel, sorry for bothering, but could you or someone from your great team comment this somehow?

[mhegazy]

related to #21699

[Jamesernator]

It would work similarly well if ElementChildrenAttribute could simply be defined as a symbol:

export const children = Symbol("children");

export namespace JSX {
    export class Element {
        /* ... */
    }

    export type PropsType = {
        [children]: string | Element | (Element | string)[];
        [attr: string]: string;
    }

    export type IntrinsicElements = Record<string, PropsType>;

    export type ElementType = keyof IntrinsicElements | ((props: any) => Element);

    export interface ElementAttributesProperty {
        props: {};
    }

    export interface ElementChildrenAttribute {
        [children]: {};
    }
}

export function jsx(name: string, props: PropsType): Element {}

// ----

const el = <div id="main">
    <p>Hello world</p>
    Goodbye world
</div>
// transpiles to
import { jsx, children } from "#jsx/jsx-runtime"
const el = jsx("div", { 
    id: "main", 
    [children]: [
        jsx("p", { [children]: "Hello world" }),
        "Goodbye world",
    ]
});