JSX is really a way to describe a hierarchy of deferred function calls independent of their callers. This could be tremendously useful in a number of different contexts, not just UI. What would a state machine look like if the states could be described in JSX? What would rx.js look like if this mechanism was available?
The current tooling makes experimenting with possible alternate use cases pretty awkward, and so basically no one is doing work in this area.
I believe that these changes, particularly the `jsx` and `jsxs` auto import, will make it even harder to separate JSX as a concept from React and React-like libraries. It'll make it harder to standardise JSX, which is frustrating as it's the most supported ECMAScript syntax extension by a long way.
My modest proposal is that a JSX element desugars to a call to a block scoped identifier called `jsx`, so I can do something like this:
import { jsx } from 'react';
import { elementCreator } from 'somelib';
const someFunction = () => {
const { jsx } = elementCreator();
return <iAmNotAReactElement />;
};
const MyReactComponent = () => <div>cool</div>;
Taking this alternative approach would give developers a widely supported syntax extension that could allow for some really innovative solutions. The current path is going to do the opposite.I understand that there are perf optimisations that React can do if they control all of this. But I feel like they're looking at this too narrowly, from only the perspective of UI. They have the power to open up a lot more opportunities.