feat(deps): update ESLint and Stylelint configurations, add support for Angular 16+, and improve builder options

Author: krema

.eslintrc.json

@@ -13,7 +13,7 @@ jobs:
   build:
     strategy:
       matrix:
-        angular-version: [9, 10, 11, 12, 13, 14, 15]
+        angular-version: [16,17,18,19,20]
         os: [ubuntu-latest, windows-latest]
 
     runs-on: ${{ matrix.os }}
@@ -31,7 +31,7 @@ jobs:
     - name: 🏗 Setup node version
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 22
         cache: 'pnpm'
     - run: |
            pnpm install --frozen-lockfile

.github/workflows/integration-test.yml

@@ -23,7 +23,7 @@ jobs:
     - name: 🏗 Setup node version
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 22
         cache: 'pnpm'
 
     - name: 🏗 Install dependencies

.github/workflows/unit-test.yml

@@ -1,4 +1,3 @@
-
 # Angular ESLint + Stylelint Linter
 
 [![npm version](https://badge.fury.io/js/@krema%2Fangular-eslint-stylelint-builder.svg)](https://badge.fury.io/js/@krema%2Fangular-eslint-stylelint-builder) ![node workflow](https://github.com/krema/angular-eslint-stylelint-builder/actions/workflows/integration-test.yml/badge.svg) ![node workflow](https://github.com/krema/angular-eslint-stylelint-builder/actions/workflows/unit-test.yml/badge.svg) ![angular versions](https://img.shields.io/badge/angular-v9--v15-%2523DD0031.svg?flat-square&logo=angular&labelColor=ff0000&color=grey)
@@ -160,41 +159,22 @@ You can configure the following options:
     <td colspan="5"><b>File Enumeration:</b></td>
   </tr>
   <tr>
-    <td>eslintIgnorePath</td>
-    <td></td>
+    <td>eslintIgnorePatterns</td>
+    <td>[]</td>
     <td>
-      A path to a file containing patterns describing files to ignore instead of
-      $CWD/.eslintignore
+      Array of glob patterns describing files to ignore (replaces <code>eslintIgnorePath</code> and <code>.eslintignore</code> in ESLint 9+)
     </td>
     <td></td>
     <td>eslint</td>
   </tr>
   <tr>
-    <td>stylelintIgnorePath</td>
-    <td></td>
-    <td>
-      A path to a file containing patterns describing files to ignore instead of
-      $CWD/.stylelintignore
-    </td>
-    <td></td>
-    <td>stylelint</td>
-  </tr>
-  <tr>
-    <td>eslintRulesDir</td>
+    <td>stylelintIgnorePatterns</td>
     <td>[]</td>
     <td>
-      This option allows you to specify another directory from which to load
-      rules files
+      Array of glob patterns describing files to ignore (replaces <code>stylelintIgnorePath</code> and <code>.stylelintignore</code> in Stylelint 16+)
     </td>
     <td></td>
-    <td>eslint</td>
-  </tr>
-  <tr>
-    <td>eslintResolvePluginsRelativeTo</td>
-    <td></td>
-    <td>Changes the folder where plugins are resolved from</td>
-    <td></td>
-    <td>eslint</td>
+    <td>stylelint</td>
   </tr>
   <tr>
     <td colspan="5"><b>Output:</b></td>

README.md

@@ -0,0 +1,62 @@
+import js from "@eslint/js";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import importPlugin from "eslint-plugin-import";
+import prettierPlugin from "eslint-plugin-prettier";
+import unusedImportsPlugin from "eslint-plugin-unused-imports";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: [
+          "tsconfig.json",
+          "tsconfig.lib.json",
+          "tsconfig.spec.json"
+        ],
+        createDefaultProgram: false,
+        ecmaVersion: 2022,
+        sourceType: "module"
+      },
+      globals: {
+        NodeJS: "readonly",
+        describe: "readonly",
+        it: "readonly",
+        beforeEach: "readonly",
+        afterEach: "readonly",
+        expect: "readonly",
+        jest: "readonly",
+        console: "readonly",
+        process: "readonly"
+      }
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      "unused-imports": unusedImportsPlugin,
+      "prettier": prettierPlugin,
+      "import": importPlugin
+    },
+    rules: {
+      "prettier/prettier": "error",
+      "@typescript-eslint/consistent-type-imports": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "_"
+        }
+      ],
+      "@typescript-eslint/array-type": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "no-else-return": "error",
+      "semi": ["error", "always"]
+    },
+    settings: {
+      "import/resolver": {
+        typescript: {}
+      }
+    }
+  }
+];

eslint.config.js

@@ -1,4 +1,5 @@
 import { toArray, map } from 'rxjs/operators';
+import { lastValueFrom } from 'rxjs';
 
 import { Architect } from '@angular-devkit/architect';
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
@@ -48,12 +49,14 @@ describe('Lint', () => {
       '@krema/angular-eslint-stylelint-builder:lint',
       {
         eslintFilePatterns: ['src/**/*.ts'],
+        eslintConfig: 'eslint.config.js',
         stylelintFilePatterns: ['src/**/*.css'],
+        stylelintConfig: 'stylelint.config.js',
       },
       { logger: logger }
     );
-    const loggerPromise = logger
-      .pipe(
+    const loggerPromise = lastValueFrom(
+      logger.pipe(
         toArray(),
         map(messages =>
           messages.map(y => {
@@ -62,7 +65,7 @@ describe('Lint', () => {
           })
         )
       )
-      .toPromise();
+    );
 
     // The "result" member (of type BuilderOutput) is the next output.
     await run.result;
@@ -127,13 +130,15 @@ describe('Lint', () => {
       '@krema/angular-eslint-stylelint-builder:lint',
       {
         eslintFilePatterns: ['src/**/*.ts'],
-        stylelintFilePatterns: ['src/**/*.css'],
+        eslintConfig: 'eslint.config.js',
         fix: true,
+        stylelintFilePatterns: ['src/**/*.css'],
+        stylelintConfig: 'stylelint.config.js',
       },
       { logger }
     );
-    const loggerPromise = logger
-      .pipe(
+    const loggerPromise = lastValueFrom(
+      logger.pipe(
         toArray(),
         map(messages =>
           messages.map(y => {
@@ -142,7 +147,7 @@ describe('Lint', () => {
           })
         )
       )
-      .toPromise();
+    );
 
     await run.result;
     await run.stop();
@@ -189,4 +194,37 @@ describe('Lint', () => {
       },
     ]);
   });
+
+  it('ignores files matching eslintIgnorePatterns and stylelintIgnorePatterns', async () => {
+    const run = await architect.scheduleBuilder(
+      '@krema/angular-eslint-stylelint-builder:lint',
+      {
+        eslintFilePatterns: ['src/**/*.ts'],
+        stylelintFilePatterns: ['src/**/*.css'],
+        eslintIgnorePatterns: ['**/file.ts'],
+        stylelintIgnorePatterns: ['**/file.css'],
+        stylelintConfig: 'stylelint.config.js',
+      },
+      { logger }
+    );
+    const loggerPromise = lastValueFrom(
+      logger.pipe(
+        toArray(),
+        map(messages =>
+          messages.map(y => {
+            return { level: y.level, message: y.message };
+          })
+        )
+      )
+    );
+
+    await run.result;
+    await run.stop();
+    logger.complete();
+
+    // The output should not mention file.ts or file.css
+    const output = JSON.stringify(await loggerPromise);
+    expect(output).not.toContain('file.ts');
+    expect(output).not.toContain('file.css');
+  });
 });

lib/builder/src/builder.spec.ts

@@ -6,7 +6,7 @@ import { createESlintInstance } from './eslint/eslint-linter';
 import { report } from './eslint/reporter';
 
 export async function builder(options: Schema, context: BuilderContext): Promise<BuilderOutput> {
-  const projectName = context?.target?.project || '<???>';
+  const projectName = context?.target?.project ?? '<???>';
   const printInfo = options.format && !options.silent;
 
   if (printInfo) {

lib/builder/src/builder.ts

@@ -35,7 +35,6 @@ export async function createESlintInstance(workspaceRoot: string, options: Schem
   const configPath = options.eslintConfig ? resolve(workspaceRoot, options.eslintConfig) : undefined;
 
   const eslintOptions: ESLint.Options = {
-    // Removed: useEslintrc, ignorePath, resolvePluginsRelativeTo, rulePaths
     overrideConfigFile: configPath,
     fix: !!options.fix,
     cache: !!options.eslintCache,
@@ -49,6 +48,7 @@ export async function createESlintInstance(workspaceRoot: string, options: Schem
      * a project and therefore doesn't necessarily have matching files, for example.
      */
     errorOnUnmatchedPattern: false,
+    ignorePatterns: options.eslintIgnorePatterns ?? [],
   };
 
   const projectESLint = await loadESLint();

lib/builder/src/eslint/eslint-linter.ts

@@ -31,7 +31,7 @@ export async function report(
    * "no results" case differently.
    */
   const formatter = await eslintInstance.loadFormatter(options.format);
-  const formattedResults = formatter.format(finalLintResults.lintResults);
+  const formattedResults = await formatter.format(finalLintResults.lintResults);
   const printInfo = options.format && !options.silent;
   const maxWarnings = options.maxWarnings;
   const reportOnlyErrors = options.quiet;

lib/builder/src/eslint/reporter.ts

@@ -1,6 +1,6 @@
 import type { JsonObject } from '@angular-devkit/core';
 
-export type BuilderOptions = typeof Schema & JsonObject;
+export type BuilderOptions = Schema & JsonObject;
 
 export interface Schema {
   eslintFilePatterns: string[];
@@ -14,10 +14,8 @@ export interface Schema {
   eslintCacheLocation: string | null;
   stylelintCacheLocation: string | null;
   eslintCacheStrategy: 'content' | 'metadata' | null;
-  eslintIgnorePath: string | null;
-  stylelintIgnorePath: string | null;
-  eslintRulesDir: string[];
-  eslintResolvePluginsRelativeTo: string | null;
+  eslintIgnorePatterns?: string[];
+  stylelintIgnorePatterns?: string[];
   outputFile: string | null;
   format: Formatter;
   silent: boolean;