parser: JSXMemberExpression where property contains hyphens

[overlookmotel]

According to JSX spec, this is legal syntax: <Foo.bar-qux> (because bar-qux is a valid JSXIdentifier).

Currently Oxc transforms this to _jsx(Foo.bar-qux, {}):

https://oxc-project.github.io/oxc/playground/?code=3YCAAICRgICAgICAgICekQl4rrIkZg9c51vDD8rqZZS485A%2Ff3EUAIA%3D

We should transform it to _jsx(Foo["bar-qux"], {}) instead.

NB: Babel just errors out on this input, and SWC gets it wrong the same way we do, so this is not a high priority. But it's probably easier to do it now while we're already making loads of changes to how we handle JSX.

[Boshen]

TODO: React transform should throw the same babel error.

[overlookmotel]

Babel throws that error in parser. Babel REPL

I don't think Babel's behavior is correct because (as you pointed out yesterday) it's valid JSX. But it's undefined whether it's valid or not as React JSX.

So yes, we could raise an error in React transform, or we could accept it and transform it to _jsx(Foo["bar-qux"], {}).

[Boshen]

As it turns out, this is an undocumented syntax error, confirmed by babel, tsc and babel.

[Boshen]

This is now a syntax error in oxc:

  × Unexpected token
   ╭─[misc/fail/oxc-5355.jsx:1:6]
 1 │ <Foo.bar-baz />
   ·      ───────
   ╰────

[overlookmotel]

Brilliant! Thanks for solving it.