This is really cool! JSX should have this feature!

Was wondering is there 1 more piece of information lost with using JSX compared to tagged templates, the ability to know the top createElement | h caller (root node) ?

Or is this less of an issue by using a wrapper function?

Related issue https://github.com/developit/htm/issues/143

This MR does the following:

• it uses a __token props instead of creating template tags, dropping the need to double invoke outer most templates when unique template references are needed (the token can be used as WeakMap key)
• it doesn't need copy/paste code from the original jsx transform plugin, so it doesn't duplicate code or need extra maintenance anymore
• it avoids duplicated interpolations for both props and outer most containers

This PR can be reviewed commit-by-commit, to more easily understand what's going on.

1. Transform JSX elements in bottom-up order When transforming an element, its contents are converted to the arguments of the call expression and thus JSXExpressionContainer nodes are unwrapped. If we transform the AST while traversing it in top-down order (where the top is Program), the JSXExpressionContainer visitor will not find the JSXExpressionContainer nodes because they have been removed at the step before. Instead, we can transform the AST while traversing it in the opposite order: first we transform JSXExpressionContainers, and then their outer JSXElements/JSXFragments. This is similar to how it's done in the JSX transform: https://github.com/babel/babel/blob/0b0f083c777bf59b197467b973d6418325c5ddd7/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts#L284

2. Transform in Program visitor to avoid relying on plugins order Since now this plugin transforms JSX elements in the same visitor as the main JSX plugin, users would be responsible of making sure that this plugin is listed before the JSX one in their config, so that it visits those nodes first. We can avoid this configuration burden by running our transform when visiting Program, so that it always happens before that the main JSX plugins traverses the JSX nodes.

3. Avoid double interoplation wrap Transforming during the bottom-up traversal has a problem: since Babel requeues replaced nodes (so that they can be re-transformed by other plugins), we traverse JSXExpressionContainers twice:

   • First traversal, we go down to the leaves and visit the JSXExpressionContainer nodes
   • While going up, Babel transforms top-level fragments/elements, and they are requeued
   • Since they have been requeued, Babel re-traverses them, visiting again the JSXExpressionContainer nodes

   We can avoid wrapping then twice in React.interpolation by keeping track of what we already wrapped.