babel-plugin-transform-react-jsx: adding "root" parameter to jsx and jsxs functions

[vyatkin0]

Some JSX elements require context from their parents to be rendered correctly. Examples are children of an SVG that requires namespaceURI from the parent or content of frontend routes that requires route parameters and so on.
In that case jsx function can't return rendered content immediately to provide it as a parameter to parent's jsx, instead it returns a function that can take context as a parameter and called by its parent as soon as a context is ready.

Example:

With markup

<svg xmlns='http://www.w3.org/2000/svg'><path d="M0 0"></path></svg>

path element can't be created correctly and passed to the svg immediately as a child Element object because it requires right namespaceURI which can be taken only from its parent svg.
So in this case jsx function for the path tag will return another function

(namespaceURI)=>document.createElementNS(namespaceURI, 'path');

Then an extra call of a result function is necessary to obtain a final Element object.
Such extra calls make a jsx source code not clean and the code looks like

const e = <svg xmlns='http://www.w3.org/2000/svg'><path d="M0 0"></path></svg>;
document.body.replaceChildren(e())

instead of a simple row

document.body.replaceChildren(<svg xmlns='http://www.w3.org/2000/svg'><path d="M0 0"></path></svg>);

My proposal is adding an extra parameter to the jsx function for the root (topmost) element of a jsx markup.
In such case custom jsx-runtime implementations can use this topmost call to prepare context and pass it to nested jsx calls and always return instance of the Element object. Thus rendered result for jsx above will looks like

jsx('svg', {children: jsx('path', {d: 'M0 0'})}, true)

I'm an author of a custom jsx-runtime and now I use a global context variable and setContext function as a workaround, but this solution is not good and robust.