js-parser: Use JSXIdentifier instead of JSXReferenceIdentifier for HTMLish JSX element names
MODIFY
packages/@romejs/js-ast/jsx/JSXElement.ts
packages/@romejs/js-ast/jsx/JSXElement.ts
@@ -17,12 +17,17 @@ import {
JSXSpreadAttribute,
JSXAttribute,
AnyTypeArguments,
+ JSXIdentifier,
} from '../index';
import {createBuilder} from '../utils';
export type JSXElement = JSNodeBase & {
type: 'JSXElement';
- name: JSXReferenceIdentifier | JSXNamespacedName | JSXMemberExpression;
+ name:
+ | JSXReferenceIdentifier
+ | JSXIdentifier
+ | JSXNamespacedName
+ | JSXMemberExpression;
typeArguments?: AnyTypeArguments;
attributes: Array<JSXSpreadAttribute | JSXAttribute>;
selfClosing: boolean;

MODIFY
packages/@romejs/js-ast/jsx/JSXMemberExpression.ts
packages/@romejs/js-ast/jsx/JSXMemberExpression.ts
@@ -15,7 +15,11 @@ import {createBuilder} from '../utils';
export type JSXMemberExpression = JSNodeBase & {
type: 'JSXMemberExpression';
- object: JSXMemberExpression | JSXReferenceIdentifier | JSXNamespacedName;
+ object:
+ | JSXMemberExpression
+ | JSXIdentifier
+ | JSXReferenceIdentifier
+ | JSXNamespacedName;
property: JSXIdentifier;
};

MODIFY
packages/@romejs/js-compiler/transforms/compile/jsx.ts
packages/@romejs/js-compiler/transforms/compile/jsx.ts
@@ -47,10 +47,6 @@ import {
inheritLoc,
} from '@romejs/js-ast-utils';
-function isCompatTag(tagName: undefined | string): boolean {
- return tagName !== undefined ? /^[a-z]|-/.test(tagName) : false;
-}
-
function convertJSXIdentifier(
path: Path,
): MemberExpression | ThisExpression | StringLiteral | ReferenceIdentifier {
@@ -59,16 +55,16 @@ function convertJSXIdentifier(
if (node.type === 'JSXReferenceIdentifier') {
if (node.name === 'this') {
return thisExpression.create({});
- } else if (isValidIdentifierName(node.name)) {
+ } else {
return referenceIdentifier.create(
{
name: node.name,
},
node,
);
- } else {
- return stringLiteral.quick(node.name);
}
+ } else if (node.type === 'JSXIdentifier') {
+ return stringLiteral.quick(node.name);
} else if (node.type === 'JSXMemberExpression') {
let prop = convertJSXIdentifier(path.getChildPath('property'));
@@ -289,10 +285,6 @@ export default {
});
}
- if (type.type === 'ReferenceIdentifier' && isCompatTag(type.name)) {
- type = stringLiteral.quick(type.name);
- }
-
let attribs: AnyExpression;
if (node.attributes.length > 0) {
attribs = buildOpeningElementAttributes(node.attributes);

MODIFY
packages/@romejs/js-parser/parser/jsx.ts
packages/@romejs/js-parser/parser/jsx.ts
@@ -28,6 +28,12 @@ import {
parseStringLiteral,
} from './index';
import {PartialDiagnosticAdvice} from '@romejs/diagnostics';
+import {isValidIdentifierName} from '@romejs/js-ast-utils';
+
+// Indicates whether we should create a JSXIdentifier or a JSXReferenceIdentifier
+function isHTMLTagName(tagName: string): boolean {
+ return /^[a-z]|-/.test(tagName) && isValidIdentifierName(tagName);
+}
// Transforms JSX element name to string.
function getQualifiedJSXName(node: JSXElement['name'] | JSXIdentifier): string {
@@ -102,7 +108,10 @@ function parseJSXElementName(parser: JSParser): JSXElement['name'] {
const namespacedName = parseJSXNamespacedName(parser);
let node: JSXElement['name'];
- if (namespacedName.type === 'JSXIdentifier') {
+ if (
+ namespacedName.type === 'JSXIdentifier' &&
+ !isHTMLTagName(namespacedName.name)
+ ) {
node = {
...namespacedName,
type: 'JSXReferenceIdentifier',

js-parser: Use JSXIdentifier instead of JSXReferenceIdentifier for HTMLish JSX element names