feat: add no-namespace

packages/eslint-plugin-react/src/rules/no-namespace.md

@@ -0,0 +1,19 @@
+# @eslint-react/no-namespace
+
+Enforces the absence of a namespace in React elements, such as with `svg:circle`, as they are not supported in React.
+
+## Rule Details
+
+### ❌ Incorrect
+
+```jsx
+<ns:TestComponent />;
+<Ns:TestComponent />;
+```
+
+### ✅ Correct
+
+```jsx
+<TestComponent />;
+<testComponent />;
+```

packages/eslint-plugin-react/src/rules/no-namespace.spec.ts

@@ -0,0 +1,151 @@
+import { allValid } from "@eslint-react/shared";
+
+import RuleTester, { getFixturesRootDir } from "../../../../test/rule-tester";
+import rule, { RULE_NAME } from "./no-namespace";
+
+const rootDir = getFixturesRootDir();
+
+const ruleTester = new RuleTester({
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 2021,
+        sourceType: "module",
+        project: "./tsconfig.json",
+        tsconfigRootDir: rootDir,
+    },
+});
+
+ruleTester.run(RULE_NAME, rule, {
+    valid: [
+        ...allValid,
+        "<testcomponent />",
+        'React.createElement("testcomponent")',
+        "<testComponent />",
+        'React.createElement("testComponent")',
+        "<test_component />",
+        'React.createElement("test_component")',
+        "<TestComponent />",
+        'React.createElement("TestComponent")',
+        "<object.testcomponent />",
+        'React.createElement("object.testcomponent")',
+        "<object.testComponent />",
+        'React.createElement("object.testComponent")',
+        "<object.test_component />",
+        'React.createElement("object.test_component")',
+        "<object.TestComponent />",
+        'React.createElement("object.TestComponent")',
+        "<Object.testcomponent />",
+        'React.createElement("Object.testcomponent")',
+        "<Object.testComponent />",
+        'React.createElement("Object.testComponent")',
+        "<Object.test_component />",
+        'React.createElement("Object.test_component")',
+        "<Object.TestComponent />",
+        'React.createElement("Object.TestComponent")',
+        "React.createElement(null)",
+        "React.createElement(true)",
+        "React.createElement({})",
+    ],
+
+    invalid: [
+        {
+            code: "<ns:testcomponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("ns:testcomponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<ns:testComponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("ns:testComponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<ns:test_component />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("ns:test_component")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<ns:TestComponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("ns:TestComponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<Ns:testcomponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("Ns:testcomponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<Ns:testComponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("Ns:testComponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<Ns:test_component />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("Ns:test_component")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: "<Ns:TestComponent />",
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+        {
+            code: 'React.createElement("Ns:TestComponent")',
+            errors: [{
+                messageId: "NO_NAMESPACE",
+            }],
+        },
+    ],
+});

packages/eslint-plugin-react/src/rules/no-namespace.ts

@@ -0,0 +1,58 @@
+import { isCreateElement } from "@eslint-react/create-element";
+import { elementType } from "@eslint-react/jsx";
+import { createRule } from "@eslint-react/shared";
+import { AST_NODE_TYPES } from "@typescript-eslint/types";
+
+export const RULE_NAME = "no-namespace";
+
+type MessageID = "NO_NAMESPACE";
+
+export default createRule<[], MessageID>({
+    name: RULE_NAME,
+    meta: {
+        type: "problem",
+        docs: {
+            description: "enforce that namespaces are not used in React elements",
+        },
+        schema: [],
+        messages: {
+            NO_NAMESPACE: "React component {{name}} must not be in a namespace, as React does not support them",
+        },
+    },
+    defaultOptions: [],
+    create(context) {
+        return {
+            CallExpression(node) {
+                if (
+                    isCreateElement(node, context) && node.arguments.length > 0
+                    && node.arguments[0]?.type === AST_NODE_TYPES.Literal
+                ) {
+                    const name = node.arguments[0].value;
+                    if (typeof name !== "string" || !name.includes(":")) {
+                        return;
+                    }
+                    context.report({
+                        data: {
+                            name,
+                        },
+                        messageId: "NO_NAMESPACE",
+                        node,
+                    });
+                }
+            },
+            JSXOpeningElement(node) {
+                const name = elementType(node);
+                if (typeof name !== "string" || !name.includes(":")) {
+                    return;
+                }
+                context.report({
+                    data: {
+                        name,
+                    },
+                    messageId: "NO_NAMESPACE",
+                    node,
+                });
+            },
+        };
+    },
+});

packages/eslint-react-jsx/src/element-type.ts

@@ -0,0 +1,37 @@
+import { AST_NODE_TYPES, type TSESTree } from "@typescript-eslint/types";
+
+function resolveMemberExpressions(object: TSESTree.JSXTagNameExpression, property: TSESTree.JSXIdentifier): string {
+    if (object.type === AST_NODE_TYPES.JSXMemberExpression) {
+        return `${resolveMemberExpressions(object.object, object.property)}.${property.name}`;
+    }
+    if (object.type === AST_NODE_TYPES.JSXNamespacedName) {
+        return `${object.namespace.name}:${object.name.name}.${property.name}`;
+    }
+
+    return `${object.name}.${property.name}`;
+}
+
+/**
+ * Returns the tag name associated with a JSXOpeningElement.
+ * @param node The visited JSXOpeningElement node object.
+ * @returns The element's tag name.
+ */
+export function elementType(node: TSESTree.JSXOpeningElement | TSESTree.JSXOpeningFragment): string {
+    if (node.type === AST_NODE_TYPES.JSXOpeningFragment) {
+        return "<>";
+    }
+
+    const { name } = node;
+
+    if (name.type === AST_NODE_TYPES.JSXMemberExpression) {
+        const { object, property } = name;
+
+        return resolveMemberExpressions(object, property);
+    }
+
+    if (name.type === AST_NODE_TYPES.JSXNamespacedName) {
+        return `${name.namespace.name}:${name.name.name}`;
+    }
+
+    return name.name;
+}

packages/eslint-react-jsx/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./children";
+export * from "./element-type";
 export * from "./event-handler";
 export * from "./misc";
 export * from "./prop";