An opening tag name could contain a hypen - in web components. JSX support it as well as a valid jsx identifier.
An opening tag name can be a MemberExpression with dot notation like:
And, (Proposal) the bracket notation of member expression should be supported as well,
<MyComponents["Comment"] />
Why do I need this? This is because, a member expression should support for property which contains hypen:
<MyComponents.custom-tag />
But, the property custom-tag is not valid js identifier, it must be called with bracket notation.
<MyComponents["custom-tag"] />
In order to achieve this, just we need a property called computed in the interface JSXMemberExpression as the same mentality as the type of MemberExpression of estree. If computed is true, property can be a Literal as well.
interface JSXMemberExpression <: Expression {
type: "JSXMemberExpression";
object: JSXMemberExpression | JSXIdentifier;
- property: JSXIdentifier;
+ property: JSXIdentifier | Literal;
+ computed: boolean;
}