@lms5400/eslint-plugin-rsx 1.0.0 → 1.0.2

package/README.md

@@ -57,8 +57,6 @@ import reactHooks from "eslint-plugin-react-hooks";
 import rsx from "@lms5400/eslint-plugin-rsx";
 
 export default [
-  js.configs.recommended,
-
   // ----------------------------------------
   // React JSX / TSX files
   // ----------------------------------------
@@ -93,9 +91,10 @@ export default [
       },
     },
     rules: {
-      "rsx/no-react-hooks": "error",
-      "rsx/no-use-ref": "warn",
-      "rsx/require-ctx-destructure": "error",
+      // Base JS rules
+      ...js.configs.recommended,
+      // RSX rules
+      ...rsx.configs.recommended
     },
   },
 ];
@@ -135,7 +134,6 @@ Add the following to your workspace settings.
   "eslint.validate": [
     "javascript",
     "javascriptreact",
-    "rsx"
   ],
   "files.associations": {
     "*.rsx": "javascriptreact"
@@ -175,6 +173,8 @@ Expected:
 | `rsx/no-react-hooks` | Disallow React hooks in RSX |
 | `rsx/no-use-ref` | Disallow `useRef` |
 | `rsx/require-ctx-destructure` | Require RSX context destructuring |
+| `rsx/jsx-uses-vars` | Mark JSX components as used (prevents false-positive `no-unused-vars` errors) |
+
 
 ---
 

package/index.cjs

@@ -1,7 +1,21 @@
-module.exports = {
+const plugin = {
   rules: {
+    "jsx-uses-vars": require("./rules/jsx-uses-vars.cjs"),
     "no-react-hooks": require("./rules/no-react-hooks.cjs"),
     "no-use-ref": require("./rules/no-use-ref.cjs"),
     "require-ctx-destructure": require("./rules/require-ctx-destructure.cjs"),
   },
-};
+  configs: {},
+};
+
+plugin.configs.recommended = {
+  plugins: { rsx: plugin },
+  rules: {
+    "rsx/jsx-uses-vars": "error",
+    "rsx/no-react-hooks": "error",
+    "rsx/no-use-ref": "warn",
+    "rsx/require-ctx-destructure": "error",
+  },
+};
+
+module.exports = plugin;

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/LMS007/eslint-plugin-rsx.git"
   },
-  "version": "1.0.0",
+  "version": "1.0.2",
   "engines": {
     "node": ">=18"
   },

package/rules/jsx-uses-vars.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Mark variables used as JSX component names as used (prevents false-positive no-unused-vars errors)",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode ?? context.getSourceCode();
+
+    return {
+      JSXOpeningElement(node) {
+        const name = node.name;
+
+        // Handle simple identifiers like <Badge />
+        if (name.type === "JSXIdentifier") {
+          const tagName = name.name;
+
+          // Only mark PascalCase identifiers (components), not intrinsic elements like <div>
+          if (tagName[0] === tagName[0].toUpperCase() && tagName[0] !== tagName[0].toLowerCase()) {
+            sourceCode.markVariableAsUsed(tagName, node);
+          }
+        }
+
+        // Handle member expressions like <Foo.Bar />
+        if (name.type === "JSXMemberExpression") {
+          let current = name;
+          while (current.type === "JSXMemberExpression") {
+            current = current.object;
+          }
+          if (current.type === "JSXIdentifier") {
+            sourceCode.markVariableAsUsed(current.name, node);
+          }
+        }
+      },
+    };
+  },
+};