eslint-config-beslogic 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,14 +1,32 @@
 # Changelog
 
-## 2.0.1
+## Unreleased
+
+- Bumped the following minimum versions:
+  - `@angular-eslint/eslint-plugin@>=16.2`
+  - `@angular-eslint/eslint-plugin-template@>=16.2`
+  - `@angular-eslint/template-parser@>=16.2`
+  - `@typescript-eslint/eslint-plugin@^6.2`
+  - `eslint-plugin-jest@^27.2.3`
+  - `eslint-plugin-unused-imports@^3.0`
+  - Assuming `node>=16`, `typescript>=4.5` and `@angular/compiler>=16.2.5`
+  - This should speedup config parsing that had to check for specific versions
+- Made `eslint-plugin-total-functions` optional due to its extra-strictness and it had to be
+  explicitly specified anyway due to version resolution issues.
+- Added link to changelog in README
+- Improved detection of installed peer dependencies' version number to be more accurate and faster
+
+## 2.0.2
 
 - Disabled the following rules in Storybook stories:
   - `@angular-eslint/component-max-inline-declarations`
   - `angular-file-naming/component-filename-suffix`
-- Clarified that `beslogic/storybook` preset should be added to Angular project as well.
+- Fixed rule to detect using public non-readonly arrow function properties in Components and Directives with Storybook
+- Clarified that `beslogic/storybook` preset should be added to Angular project as well
 
 ## 2.0.0
 
 - Created CHANGELOG.md
 - Changed the maximum line length from `120` to `100`
-- Split language-specific `editor.defaultFormatter` to work around <https://github.com/microsoft/vscode/issues/168411>
+- Split language-specific `editor.defaultFormatter` to work around
+  <https://github.com/microsoft/vscode/issues/168411>

package/README.md

@@ -2,7 +2,9 @@
 
 ## Installation and usage
 
-Run `npm i  --save-dev eslint-config-beslogic eslint-plugin-total-functions`
+Run `npm i  --save-dev eslint-config-beslogic`\
+For extra strict TypeScript linting, you can also install [eslint-plugin-total-functions](https://www.npmjs.com/package/eslint-plugin-total-functions): `npm i --save-dev eslint-plugin-total-functions`\
+The installation will be automatically detected and configured.
 
 Depending on your needs, you will need to also install other peer dependencies for linting.
 
@@ -17,7 +19,7 @@ These are configuration files you'll have to update manually to best work with t
 
 ### `package.json`
 
-Add the following `scripts` and `engines`:
+Add the following `scripts`:
 
 ```json
 "scripts": {
@@ -25,11 +27,6 @@ Add the following `scripts` and `engines`:
   "lint": "dprint check && npm run eslint",
   "lint:fix": "dprint fmt && npm run eslint -- --fix"
 },
-"// node 16": "14 won't install peer deps properly + prefer EventTarget (only available node 16)",
-"engines": {
-  "node": ">=16",
-  "npm": ">=8"
-}
 ```
 
 ### Base `tsconfig.json`
@@ -110,10 +107,13 @@ Basic javascript configs, is extended by all other configs except `beslogic/type
 
 ### `beslogic/typescript`
 
-Basic TypeScript-specific configs and `TSX` support, is extended by all other TypeScript exclusive configs. To avoid rules conflicts, it does **not** already extend from `beslogic/javascript`. So you should extend from both in a pure TypeScript project. You may also need to specify `parserOptions.project`. ie: `"parserOptions": { "project": ["tsconfig.json"] },` and `"parser": "@typescript-eslint/parser"`.
+Basic TypeScript-specific configs and `TSX` support, is extended by all other TypeScript exclusive configs. To avoid rules conflicts, it does **not** already extend from `beslogic/javascript`. So you should extend from both in a pure TypeScript project. You may also need to specify `parserOptions.project`. ie: `"parserOptions": { "project": ["tsconfig.json"] },` and `"parser": "@typescript-eslint/parser"` if you reconfigure some rules yourself.
 
 For the linting to be fully effective, please make sure that your base `tsconfig.json` extends `eslint-config-beslogic/tsconfig.X.X.json` (see [Parallel configurations](#parallel-configurations)).
 
+For extra strict TypeScript linting, you can also install [eslint-plugin-total-functions](https://www.npmjs.com/package/eslint-plugin-total-functions): `npm i --save-dev eslint-plugin-total-functions`\
+The installation will be automatically detected and configured.
+
 ### `beslogic/node-js`
 
 Configurations for NodeJS backends.
@@ -131,7 +131,7 @@ Configurations for projects using RxJs. Already extends and `beslogic/typescript
 Add the following `devDependencies` to your `package.json`:
 
 ```shell
-npm install --save-dev eslint-plugin-rxjs eslint-plugin-total-functions
+npm install --save-dev eslint-plugin-rxjs
 ```
 
 ### `beslogic/react`
@@ -171,7 +171,7 @@ npm install --save-dev eslint-plugin-react-redux eslint-plugin-jsx-a11y eslint-p
 Add the following `devDependencies` to your `package.json`:
 
 ```shell
-npm install --save-dev eslint-plugin-mui eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-redux eslint-plugin-react-prefer-function-component eslint-plugin-total-functions
+npm install --save-dev eslint-plugin-mui eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-redux eslint-plugin-react-prefer-function-component
 ```
 
 ### `beslogic/angular`
@@ -184,7 +184,7 @@ If bundling with an npm package set `"strictMetadataEmit": true` under `angularC
 Add the following `devDependencies` to your `package.json`:
 
 ```shell
-npm install --save-dev @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser github:BesLogic/eslint-plugin-rxjs-angular#dist eslint-plugin-angular-file-naming eslint-plugin-total-functions
+npm install --save-dev @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser github:BesLogic/eslint-plugin-rxjs-angular#dist eslint-plugin-angular-file-naming
 ```
 
 ### `beslogic/storybook`
@@ -211,3 +211,7 @@ You must also extend the base configuration in a `dprint.json` file (see [Parall
 ### `beslogic/json-like`
 
 Enforces stylistic rules for JS objects to look like valid JSON objects.
+
+## Changelog
+
+You can view the changelog under the [Code Tab](https://www.npmjs.com/package/eslint-config-beslogic?activeTab=code), or at <https://socket.dev/npm/package/eslint-config-beslogic/files/latest/CHANGELOG.md>

package/angular.js

@@ -1,20 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright 2024 Beslogic Inc.
 
-const { getProjectModuleVersion, jestNoRestrictedSyntax } = require("./lib/utils")
+const { getModuleVersion, jestNoRestrictedSyntax } = require("./lib/utils")
 
-let angularEslintPluginVersion = 15
-try {
-  angularEslintPluginVersion = getProjectModuleVersion("@angular-eslint/eslint-plugin")
-} catch (error) {
-  console.warn(error)
-}
-let typescriptVersion = 4.3
-try {
-  typescriptVersion = getProjectModuleVersion("typescript")
-} catch (error) {
-  console.warn(error)
-}
+const angularEslintPluginVersion = getModuleVersion("@angular-eslint/eslint-plugin", 16.2)
 
 const javascriptConfig = require("./javascript")
 const typescriptConfig = require("./typescript")
@@ -33,28 +22,22 @@ const noRestrictedSyntax = [
     "message": "Don't use imports that ends in \"..\" or \"../\""
   },
   // From typescript configs, but allow on @Input()
-  angularEslintPluginVersion >= 16
-    ? {
-      "selector":
-        "PropertyDefinition[definite=true]:not(:has(Decorator[expression.callee.name=\"Input\"] Property[key.name=\"required\"][value.value=true]))",
-      "message":
-        "Forbidden non-null property assertion. https://typescript-eslint.io/rules/no-non-null-assertion . " +
-        "This is only allowed on required component @Input({ required:true }). https://angular.io/api/core/Input#required"
-    }
-    : {
-      "selector":
-        "PropertyDefinition[definite=true]:not(:has(Decorator[expression.callee.name=\"Input\"]))",
-      "message":
-        "Forbidden non-null property assertion. https://typescript-eslint.io/rules/no-non-null-assertion . " +
-        "This is only allowed on component @Input() restricted by its selector."
-    }
+  {
+    "selector":
+      "PropertyDefinition[definite=true]:not(:has(Decorator[expression.callee.name=\"Input\"] Property[key.name=\"required\"][value.value=true]))",
+    "message":
+      "Forbidden non-null property assertion. https://typescript-eslint.io/rules/no-non-null-assertion . " +
+      "This is only allowed on required component @Input({ required:true }). https://angular.io/api/core/Input#required"
+  }
 ]
 
-const typeDefinitionOverride = typescriptConfig.overrides?.find(override =>
-  override.files === "*.d.ts"
-)
+const typeDefinitionOverride = typescriptConfig
+  .overrides
+  ?.find(override => override.files === "*.d.ts")
 
-const preferArrowFunctionsConfig = javascriptConfig.rules?.["prefer-arrow/prefer-arrow-functions"]
+const preferArrowFunctionsConfig = javascriptConfig
+  .rules
+  ?.["prefer-arrow/prefer-arrow-functions"]
   ?.[1]
 const preventAbbreviationsConfig = {
   ...javascriptConfig.rules?.["unicorn/prevent-abbreviations"]?.[1]
@@ -158,9 +141,6 @@ module.exports = {
             ]
           }
         ],
-        // "@angular-eslint/template/prefer-ngsrc": angularEslintPluginVersion >= 16.2
-        //   ? "error"
-        //   : "off",
         // This constantly requires wrapping images in an additional div or knowing the exact display size.
         // Doesn't support relative sizing either, not sure if worth even trying to enforce.
         "@angular-eslint/template/prefer-ngsrc": "off",
@@ -183,6 +163,12 @@ module.exports = {
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "parserOptions": {
+        // TODO: Try "project": true https://typescript-eslint.io/blog/parser-options-project-true/
+        // This wouldn't work for tsconfig.spec.ts though
+        // https://typescript-eslint.io/blog/parser-options-project-true/#investigating-custom-tsconfig-names
+        // https://github.com/typescript-eslint/typescript-eslint/issues/7383#issuecomment-2073032501
+        // TODO: even better, try: https://typescript-eslint.io/packages/parser/#experimental_useprojectservice
+        // "EXPERIMENTAL_useProjectService": true,
         "project": [
           "tsconfig?(.*).json",
           "projects/*/tsconfig?(.*).json",
@@ -190,7 +176,7 @@ module.exports = {
         ],
         // TODO: Consider use a tsconfig.eslint.json instead
         // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/README.md#parseroptionscreatedefaultprogram
-        "createDefaultProgram": true,
+        "deprecated__createDefaultProgram": true,
         // Needed specifically for @typescript-eslint/consistent-type-imports
         "emitDecoratorMetadata": true
       },
@@ -289,8 +275,7 @@ module.exports = {
         ],
         // Incompatible with Angular's dependecy injection
         "@typescript-eslint/no-invalid-this": "off",
-        // Both redundant with Angular's dependecy injection
-        "@typescript-eslint/no-parameter-properties": "off",
+        // Redundant with Angular's dependecy injection
         "@typescript-eslint/parameter-properties": "off",
 
         /*
@@ -306,13 +291,11 @@ module.exports = {
         "@typescript-eslint/no-import-type-side-effects": "off",
         "@typescript-eslint/consistent-type-imports": [
           "error",
-          typescriptVersion < 4.5
-            ? {}
-            : {
-              // Sets the autofix to use `import { type A } from '...'` which works around the above mentionned issue
-              // This only affects autofixing to help devs not aware of this edge case, both styles are always allowed.
-              "fixStyle": "inline-type-imports" // Only available since typescript 4.5
-            }
+          {
+            // Sets the autofix to use `import { type A } from '...'` which works around the above mentionned issue
+            // This only affects autofixing to help devs not aware of this edge case, both styles are always allowed.
+            "fixStyle": "inline-type-imports"
+          }
         ],
 
         "unicorn/no-keyword-prefix": [

package/lib/utils.js

@@ -1,26 +1,29 @@
-const { readFileSync } = require("node:fs")
-const { join } = require("node:path")
+const getModuleVersion = (
+  /** @type {string} */ nodeModule,
+  /** @type {number} */ fallbackVersion
+) => {
+  try {
+    // eslint-disable-next-line n/global-require -- Dynamic loading
+    return Number.parseFloat(require(`${nodeModule}/package.json`).version)
+  } catch (error) {
+    console.warn(error)
 
-const getProjectModuleVersion = nodeModule => getOwnModuleVersion(`../${nodeModule}`)
-
-const getOwnModuleVersion = nodeModule =>
-  Number.parseFloat(
-    JSON.parse(
-      readFileSync(
-        join(__dirname, "..", `${nodeModule}/package.json`)
-      ).toString()
-    ).version
-  )
+    return fallbackVersion
+  }
+}
 
-const jestNoRestrictedSyntax = noRestrictedSyntax =>
+const jestNoRestrictedSyntax = (
+  /** @type {(string | number | { selector: string; })[]} */ noRestrictedSyntax
+) =>
   noRestrictedSyntax.filter(entry =>
+    typeof entry === "number" ||
     typeof entry === "string" ||
-    // Exclude from jest tests for compatibility with `jest/valid-describe-callback` and `jest/no-test-return-statement`
+    // Exclude from jest tests for compatibility with
+    // `jest/valid-describe-callback` and `jest/no-test-return-statement`
     !entry.selector.startsWith("ArrowFunctionExpression")
   )
 
 module.exports = {
-  getProjectModuleVersion,
-  getOwnModuleVersion,
+  getModuleVersion,
   jestNoRestrictedSyntax
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-beslogic",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "ESLint rules, plugins and configs used at Beslogic",
   "main": "index.js",
   "scripts": {
@@ -36,18 +36,11 @@
   ],
   "author": "Samuel Therrien <samuel.therrien@beslogic.com>",
   "license": "MIT",
-  "// node 16": "14 won't install peer deps properly + prefer EventTarget (only available node 16)",
-  "engines": {
-    "node": ">=16",
-    "npm": ">=8"
-  },
-  "// @babel/eslint-parser & eslint-plugin-sonarjs": "Bumped json5 to fix prototype Pollution in minimist <1.2.6",
-  "// eslint-plugin-total-functions": "Supported version is dictated by TypeScript and ESLint",
-  "// ||": "Support new rules in typescript-eslint/eslint-plugin, but eslint-plugin-total-functions is blocking",
+  "// @babel/eslint-parser": "Bumped json5 to fix prototype Pollution in minimist <1.2.6",
   "dependencies": {
     "@babel/eslint-parser": "^7.20.12",
     "@eslint-community/eslint-plugin-eslint-comments": "^4.1",
-    "@typescript-eslint/eslint-plugin": "^5.46 || ^6.2",
+    "@typescript-eslint/eslint-plugin": "^6.2",
     "confusing-browser-globals": "^1.0",
     "dprint": "^0.39.1",
     "eslint": "^8.28",
@@ -57,7 +50,7 @@
     "eslint-plugin-etc": "^2.0",
     "eslint-plugin-extra-rules": "^0.0.0-development",
     "eslint-plugin-import": "^2.27.3",
-    "eslint-plugin-jest": "^26.8.4 || ^27.2.3",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jest-formatting": "^3.1",
     "eslint-plugin-no-autofix": "^1.2",
     "eslint-plugin-no-relative-import-paths": "^1.5.3",
@@ -65,15 +58,16 @@
     "eslint-plugin-regexp": "^1.12",
     "eslint-plugin-simple-import-sort": ">=9.0",
     "eslint-plugin-sonarjs": "^0.20",
-    "eslint-plugin-total-functions": ">=5.0",
     "eslint-plugin-unicorn": "^46.0",
-    "eslint-plugin-unused-imports": "^2.0 || ^3.0",
+    "eslint-plugin-unused-imports": "^3.0",
     "patch-package": "^7.0.0"
   },
+  "// eslint-plugin-total-functions": "Supported version is dictated by TypeScript and ESLint",
+  "// (cont)": "Also made optional because of extra strictness",
   "optionalDependencies": {
-    "@angular-eslint/eslint-plugin": ">=13.5",
-    "@angular-eslint/eslint-plugin-template": ">=13.5",
-    "@angular-eslint/template-parser": ">=13.5",
+    "@angular-eslint/eslint-plugin": ">=16.2",
+    "@angular-eslint/eslint-plugin-template": ">=16.2",
+    "@angular-eslint/template-parser": ">=16.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-mui": "^0.1.1",
     "eslint-plugin-n": ">=14.0",
@@ -84,7 +78,8 @@
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-rxjs-angular": "github:BesLogic/eslint-plugin-rxjs-angular#dist",
     "eslint-plugin-storybook": "^0.6.10",
-    "eslint-plugin-testing-library": "^5.10.2"
+    "eslint-plugin-testing-library": "^5.10.2",
+    "eslint-plugin-total-functions": ">=5.0"
   },
   "devDependencies": {
     "@types/eslint": "^8.37.0",

package/storybook.js

@@ -19,9 +19,10 @@ module.exports = {
           ...noRestrictedSyntax,
           {
             "selector":
-              "ClassDeclaration:has(Decorator [name=\"Component\"]) ClassProperty > :function",
-            "message":
-              "Storybook needs Angular components' methods to be a Function Declaration or it'll be overriden by a string."
+              "ClassDeclaration:has(Decorator :matches([name=\"Component\"], [name=\"Directive\"])) PropertyDefinition[value.type=\"ArrowFunctionExpression\"]:not([accessibility=\"private\"]):not([readonly=true])",
+            "message": "Storybook will present arrow function properties as strings. " +
+              "Mark it as `private`, `readonly`, or use a function declaration. " +
+              "https://github.com/storybookjs/storybook/issues/27131"
           }
         ]
       }

package/typescript.js

@@ -3,7 +3,7 @@
 
 const javascriptConfig = require("./javascript")
 const { jestNoRestrictedSyntax } = require("./lib/utils")
-const { getProjectModuleVersion } = require("./lib/utils")
+const { getModuleVersion } = require("./lib/utils")
 
 const commaDangleDefault = "always-multiline"
 const noRestrictedSyntax = [
@@ -23,12 +23,7 @@ const paddingLineBetweenStatementsConfig = javascriptConfig
   ?.find(override => override.extends === "plugin:autofix/all")
   ?.rules?.["autofix/padding-line-between-statements"]
 
-let typescriptEslintVersion = 5
-try {
-  typescriptEslintVersion = getProjectModuleVersion("@typescript-eslint/eslint-plugin")
-} catch (error) {
-  console.warn(error)
-}
+const totalFunctionsVersion = getModuleVersion("eslint-plugin-total-functions", 0)
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
@@ -38,10 +33,14 @@ module.exports = {
         "*.ts",
         "*.tsx"
       ],
-      "plugins": ["total-functions"],
+      "plugins": totalFunctionsVersion
+        ? ["total-functions"]
+        : [],
       "extends": [
         "plugin:@typescript-eslint/all",
-        "plugin:total-functions/recommended",
+        ...totalFunctionsVersion
+          ? ["plugin:total-functions/recommended"]
+          : [],
         "plugin:etc/recommended",
         "plugin:import/typescript"
       ],
@@ -76,6 +75,12 @@ module.exports = {
       },
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
+        // TODO: Try "project": true https://typescript-eslint.io/blog/parser-options-project-true/
+        // This wouldn't work for tsconfig.spec.ts though
+        // https://typescript-eslint.io/blog/parser-options-project-true/#investigating-custom-tsconfig-names
+        // https://github.com/typescript-eslint/typescript-eslint/issues/7383#issuecomment-2073032501
+        // TODO: even better, try: https://typescript-eslint.io/packages/parser/#experimental_useprojectservice
+        // "EXPERIMENTAL_useProjectService": true,
         "project": ["tsconfig?(.*).json"],
         "sourceType": "module",
         "ecmaFeatures": {
@@ -118,7 +123,9 @@ module.exports = {
          *   - `inputEvent.target as Partial<HTMLInputElement>` <-- Oops!
          *   - `event.target as Partial<HTMLInputElement> | null` <-- Ok!
          */
-        "total-functions/no-unsafe-type-assertion": "warn",
+        "total-functions/no-unsafe-type-assertion": totalFunctionsVersion
+          ? "warn"
+          : "off",
         // False positives with external library
         // See https://github.com/microsoft/TypeScript/issues/13347 for a request to fix this at the language level
         "total-functions/no-unsafe-readonly-mutable-assignment": "off",
@@ -162,15 +169,13 @@ module.exports = {
          * Custom rules and @typescript-eslint/all overrides (https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/all.ts)
          * Automatically deactivates ESLint rules (configured below) that are taken care of by TypeScript (https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/src/configs/eslint-recommended.ts)
          */
-        "@typescript-eslint/class-methods-use-this": typescriptEslintVersion >= 6.2
-          ? [
-            "error",
-            {
-              "ignoreOverrideMethods": true,
-              "ignoreClassesThatImplementAnInterface": true
-            }
-          ]
-          : "off",
+        "@typescript-eslint/class-methods-use-this": [
+          "error",
+          {
+            "ignoreOverrideMethods": true,
+            "ignoreClassesThatImplementAnInterface": true
+          }
+        ],
         "@typescript-eslint/comma-dangle": [
           "error",
           commaDangleDefault
@@ -237,8 +242,6 @@ module.exports = {
             "ignoreArrowShorthand": true
           }
         ],
-        // Obsoleted by import/no-duplicates
-        "@typescript-eslint/no-duplicate-imports": "off",
         "@typescript-eslint/no-empty-interface": [
           "error",
           {