[Proposal]: Resolve tag names from JSXOpeningElements instead of simply using the name as string

[SMotaal]

Proposal:

Resolve the literal name from the JSXOpeningTags and either pass them as strings or replace them with expressions to capture them from the current scope.

Problem:

The initial transform simple assumed that everything with a transformed JSX fragment is a string part except for JSXExpressions { … }, however, there are certain limitations in JSX for which this design might have actually overlooked:

  import MyElement from './my-element';
  const myElement = html`<${MyElement.tagName}>…`;

Rewriting it to be transformed using the current design would look like:

  import MyElement from './my-element';
  const myElement = html(<{MyElement.tagName}>…);

Which is invalid JSX.

Resolution:

• Resolving the literal tag can be delegated to any function along the chain to the actual factory.
• Tags can be actual object values (Class or Function) and can expose their own literal name.
• Interpolated literal tags might result in a smaller template cache footprint.
• Overall cleaner code:

  import MyElement from './my-element';
  const myElement = html(<MyElement>…);  // transformed: html`<${MyElement}>…`: