@trackunit/eslint-plugin-trackunit 0.6.114 → 0.6.115

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 0.6.115 (2026-08-19)
+
+### 🧱 Updated Dependencies
+
+- Updated css-classname-utils to 0.0.18
+- Updated shared-utils to 1.16.18
+
 ## 0.6.114 (2026-08-18)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -65,7 +65,7 @@ All custom rules are enabled automatically through the presets under the `@track
 | `@trackunit/require-component-prop-contracts`          | —        | —        | Requires public component props to satisfy configured prop/interface contracts.            |
 | `@trackunit/require-list-item-virtualization-props`    | —        | —        | Requires `VirtualizationListItemProps` on list items inside `<List>`.                      |
 | `@trackunit/one-component-per-file`                    | error    | —        | Enforces at most one exported React component per file. `exportedOnly: false` restricts to one total. |
-| `@trackunit/component-name-matches-filename`           | warn     | —        | Enforces that exported React component names match the filename (e.g. `Foo` in `Foo.tsx`). |
+| `@trackunit/component-name-matches-filename`           | error    | —        | Enforces that exported React component names match the filename (e.g. `Foo` in `Foo.tsx`). |
 
 ### Testing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/eslint-plugin-trackunit",
-  "version": "0.6.114",
+  "version": "0.6.115",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": "https://github.com/Trackunit/manager",
   "engines": {
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@nx/eslint-plugin": "23.1.0",
-    "@trackunit/css-classname-utils": "0.0.17",
+    "@trackunit/css-classname-utils": "0.0.18",
     "@typescript-eslint/eslint-plugin": "8.58.1",
     "@typescript-eslint/utils": "8.58.1",
     "eslint-config-prettier": "^10.1.8",

package/src/lib/config/fragments/react-rules.js

@@ -120,7 +120,7 @@ exports.reactCustomRules = {
     "@trackunit/prefer-field-components": "error",
     "@trackunit/one-component-per-file": "error",
     "@trackunit/component-name-matches-filename": [
-        "warn",
+        "error",
         {
             allowedMismatches: [
                 // i18next convention: every library's translation.tsx exports a `Trans` wrapper

package/src/lib/rules/component-name-matches-filename/component-name-matches-filename.d.ts

@@ -6,6 +6,10 @@
  *
  * Anonymous default exports are skipped (no name to compare).
  * `index.*` files are skipped (they are entry-point re-export files, not component files).
+ * Files with a secondary extension (`Foo.variants.tsx`, `Foo.demo.tsx`) are skipped — their
+ * basename is not a valid identifier, so no export name could ever match it.
+ * Modules that neither render JSX nor import React are skipped — they hold no components,
+ * so a PascalCase export there is a plain function (an Nx generator, an Express handler, …).
  *
  * When combined with `one-component-per-file`, these two rules together fully enforce
  * the "one named component per file" convention.

package/src/lib/rules/component-name-matches-filename/component-name-matches-filename.js

@@ -7,6 +7,10 @@
  *
  * Anonymous default exports are skipped (no name to compare).
  * `index.*` files are skipped (they are entry-point re-export files, not component files).
+ * Files with a secondary extension (`Foo.variants.tsx`, `Foo.demo.tsx`) are skipped — their
+ * basename is not a valid identifier, so no export name could ever match it.
+ * Modules that neither render JSX nor import React are skipped — they hold no components,
+ * so a PascalCase export there is a plain function (an Nx generator, an Express handler, …).
  *
  * When combined with `one-component-per-file`, these two rules together fully enforce
  * the "one named component per file" convention.
@@ -27,13 +31,16 @@ const minimatch_1 = require("minimatch");
 const path_1 = tslib_1.__importDefault(require("path"));
 const component_utils_1 = require("../../utils/component-utils");
 const createRule = utils_1.ESLintUtils.RuleCreator(name => `https://github.com/trackunit/manager/blob/main/libs/eslint/plugin-trackunit/src/lib/rules/${name}/${name}.ts`);
+/** `react`, `react-dom`, `react/jsx-runtime`, `react-dom/client`, … */
+const REACT_MODULE_PATTERN = /^react(-dom)?(\/.+)?$/;
 exports.componentNameMatchesFilename = createRule({
     name: "component-name-matches-filename",
     meta: {
         type: "suggestion",
         docs: {
             description: "Enforce that exported React component names match the filename they live in. " +
-                "index.* files and anonymous default exports are exempt.",
+                "index.* files, files with a secondary extension, modules without React, and " +
+                "anonymous default exports are exempt.",
         },
         messages: {
             componentNameMismatch: "Component '{{name}}' should match the filename. " + "Rename it to '{{expected}}' or move it to its own file.",
@@ -74,6 +81,11 @@ exports.componentNameMatchesFilename = createRule({
         const basename = path_1.default.basename(filename, path_1.default.extname(filename));
         if (basename === "index" || basename === "<input>")
             return {};
+        // Role files keep their secondary extension in the basename (`Foo.variants`, `Foo.demo`),
+        // which no identifier can match. The primary segment names the subject the file relates
+        // to, not the symbol it exports, so there is nothing to enforce here.
+        if (basename.includes("."))
+            return {};
         // Normalize kebab-case and snake_case filenames to PascalCase.
         // e.g. `current-weather-status` → `CurrentWeatherStatus`, `app` → `App`.
         const expectedName = basename
@@ -81,12 +93,28 @@ exports.componentNameMatchesFilename = createRule({
             .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
             .join("");
         const tracker = (0, component_utils_1.createComponentFileTracker)();
+        // A PascalCase export only means "component" in a module that actually uses React.
+        // Elsewhere it is a plain function that happens to be capitalized.
+        let usesReact = false;
         return {
+            ImportDeclaration(node) {
+                if (REACT_MODULE_PATTERN.test(node.source.value)) {
+                    usesReact = true;
+                }
+            },
+            JSXElement() {
+                usesReact = true;
+            },
+            JSXFragment() {
+                usesReact = true;
+            },
             FunctionDeclaration: tracker.onFunctionDeclaration,
             VariableDeclarator: tracker.onVariableDeclarator,
             ExportNamedDeclaration: tracker.onExportNamedDeclaration,
             ExportDefaultDeclaration: tracker.onExportDefaultDeclaration,
             "Program:exit"() {
+                if (!usesReact)
+                    return;
                 for (const { name, node } of tracker.getExportedComponents()) {
                     if (name === null)
                         continue; // anonymous default exports are exempt