feat!: update to Angular v14 (#1004)

* feat!: update to Angular v14 * v14.0.0-alpha.0 * feat: use v14 stable of Angular * chore: update integration-test snapshots * chore: fix integration-test snapshots * v14.0.0-alpha.1 * chore: update integration test snapshots * chore: update integration test snapshots * fix: update dependency aria-query to v5 * fix: update dependency axobject-query to v3 * v14.0.0-alpha.2 * v14.0.0-alpha.3 * feat!: add original component filename to inline-template filename * feat!: drop node 12 support * feat: add ng update schematic for v14 * feat: use schematicCollections instead of defaultCollection * feat: add ng update migration for defaultCollection to schematicCollections change * feat: migrate from @typescript-eslint/experimental-utils to @typescript-eslint/utils * v14.0.0-alpha.4
angular-eslint · Jun 23, 2022 · 2a388e9 · 2a388e9
1 parent 6921945
commit 2a388e9
Show file tree

Hide file tree

Showing 76 changed files with 1,508 additions and 1,036 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -145,7 +145,7 @@ jobs:
       matrix:
         # Additionally supported node versions taken from:
         # https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3
-        node: ['^12.20.2', '^14.15.5']
+        node: ['^14.15.5']
     steps:
       - name: Set NX_RUN_GROUP based on the output of the create_nx_run_group job
         run: echo "NX_RUN_GROUP=${{ needs.create_nx_run_group.outputs.nx_run_group }}" >> $GITHUB_ENV
@@ -159,7 +159,7 @@ jobs:
         with:
           main-branch-name: master
 
-      - uses: actions/setup-node@v3
+      - uses: volta-cli/action@v1
         with:
           # The Node.js version to configure
           node-version: ${{ matrix.node }}

diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 
 <br>
 
-## Quick Start with Angular v12 and later
+## Quick Start
 
 1. Follow the latest **Getting Started** guide on https://angular.io/ in order to install the Angular CLI
 
@@ -45,46 +45,7 @@ You will also see that it added the following in your angular.json:
 
 ```json
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
-  }
-```
-
-Read the section on [Using ESLint by default when generating new Projects within your Workspace](#using-eslint-by-default-when-generating-new-projects-within-your-workspace) to understand why this is useful.
-
-<br>
-
-## Quick Start with Angular before v12
-
-1. Follow the latest **Getting Started** guide on https://angular.io/ in order to install the Angular CLI
-
-2. Create a new Angular CLI workspace in the normal way, optionally using any of the supported command line arguments and following the interactive prompts:
-
-```sh
-ng new # --maybe --some --other --flags --here
-```
-
-3. **Change directory into your new workspace** and then use the Angular CLI to add `@angular-eslint/schematics`:
-
-```sh
-ng add @angular-eslint/schematics
-```
-
-4. Before v12, the Angular CLI shipped with a TSLint setup, so you should run the conversion schematic to automatically convert your new project from TSLint to ESLint:
-
-```sh
-ng g @angular-eslint/schematics:convert-tslint-to-eslint --remove-tslint-if-no-more-tslint-targets --ignore-existing-tslint-config
-```
-
-NOTES:
-
-- We set `--remove-tslint-if-no-more-tslint-targets` so that we remove TSLint and Codelyzer from the workspace automatically.
-- We set `--ignore-existing-tslint-config` so that we jump straight to the up to date recommended ESLint setup, without converting the previous Angular CLI TSLint setup, which is unnecessary for brand new projects.
-
-If you stick to those exact commands above you will also see the following in your angular.json:
-
-```json
-  "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 ```
 
@@ -239,28 +200,28 @@ ng g @angular-eslint/schematics:app
 ng g @angular-eslint/schematics:lib
 ```
 
-Or, alternatively, if you don't want to have to remember to set that collection prefix in front of the `:` every time, you can set the default collection in your `angular.json` to be `@angular-eslint/schematics`.
+Or, alternatively, if you don't want to have to remember to set that collection prefix in front of the `:` every time, you can set the `schematicCollections` in your `angular.json` to start with `@angular-eslint/schematics`.
 
 You can either do that by hand by adjusting the JSON, or by running the following Angular CLI command:
 
 ```sh
-ng config cli.defaultCollection @angular-eslint/schematics
+ng config cli.schematicCollections "[\"@angular-eslint/schematics\"]"
 ```
 
 The final result in your `angular.json` will be something like this:
 
 ```json
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics"]
   }
 ```
 
 Now your generate commands can just be:
 
 ```sh
-# To generate a new Angular app in the workspace using ESLint (thanks to the defaultCollection set above)
+# To generate a new Angular app in the workspace using ESLint (thanks to the schematicCollections set above)
 ng g app
-# To generate a new Angular library in the workspace using ESLint (thanks to the defaultCollection set above)
+# To generate a new Angular library in the workspace using ESLint (thanks to the schematicCollections set above)
 ng g lib
 ```
 

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "13.5.0",
+  "version": "14.0.0-alpha.4",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "stream": true

diff --git a/package.json b/package.json
@@ -53,18 +53,18 @@
   "devDependencies": {
     "@actions/core": "1.9.0",
     "@actions/github": "5.0.3",
-    "@angular/cli": "13.3.1",
-    "@angular/compiler": "13.3.1",
+    "@angular/cli": "14.0.0",
+    "@angular/compiler": "14.0.0",
     "@commitlint/cli": "17.0.2",
     "@commitlint/config-conventional": "17.0.2",
     "@nrwl/devkit": "14.2.4",
     "@nrwl/jest": "14.2.4",
     "@nrwl/nx-cloud": "14.1.2",
     "@nrwl/workspace": "14.2.4",
-    "@schematics/angular": "13.3.1",
+    "@schematics/angular": "14.0.0",
     "@types/eslint": "8.4.3",
     "@types/eslint-scope": "3.7.3",
-    "@types/jest": "27.4.1",
+    "@types/jest": "28.1.1",
     "@types/node": "16.11.41",
     "@types/prettier": "2.6.3",
     "@typescript-eslint/eslint-plugin": "5.29.0",
@@ -74,8 +74,8 @@
     "eslint-config-prettier": "8.5.0",
     "execa": "5.1.1",
     "husky": "8.0.1",
-    "jest": "27.5.1",
-    "jest-preset-angular": "11.1.1",
+    "jest": "28.1.0",
+    "jest-preset-angular": "12.1.0",
     "json-schema-to-typescript": "10.1.5",
     "json-schema-traverse": "1.0.0",
     "lerna": "5.1.4",
@@ -88,7 +88,7 @@
     "strip-ansi": "6.0.1",
     "terser": "5.14.1",
     "tree-kill": "1.2.2",
-    "ts-jest": "27.1.4",
+    "ts-jest": "28.0.4",
     "ts-node": "10.8.1",
     "typescript": "4.7.4"
   }

diff --git a/packages/builder/package.json b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/builder",
-  "version": "13.5.0",
+  "version": "14.0.0-alpha.4",
   "description": "Angular CLI builder for ESLint",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/bundled-angular-compiler/package.json b/packages/bundled-angular-compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/bundled-angular-compiler",
-  "version": "13.5.0",
+  "version": "14.0.0-alpha.4",
   "description": "A CJS bundled version of @angular/compiler",
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/packages/bundled-angular-compiler/src/index.ts b/packages/bundled-angular-compiler/src/index.ts
@@ -1,6 +1,5 @@
 export * from '@angular/compiler';
-export type {
-  Comment,
-  Node as R3_Node,
-} from '@angular/compiler/src/render3/r3_ast';
-export type { Message } from '@angular/compiler/src/i18n/i18n_ast';
+
+import type { MessageBundle, ParsedTemplate } from '@angular/compiler';
+export type Comment = Required<ParsedTemplate>['commentNodes'][number];
+export type Message = ReturnType<MessageBundle['getMessages']>[number];
diff --git a/packages/eslint-plugin-template/package.json b/packages/eslint-plugin-template/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "13.5.0",
+  "version": "14.0.0-alpha.4",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,14 +17,14 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/bundled-angular-compiler": "13.5.0",
-    "@typescript-eslint/experimental-utils": "5.29.0",
-    "aria-query": "^4.2.2",
-    "axobject-query": "^2.2.0"
+    "@angular-eslint/bundled-angular-compiler": "14.0.0-alpha.4",
+    "@typescript-eslint/utils": "5.29.0",
+    "aria-query": "5.0.0",
+    "axobject-query": "3.0.1"
   },
   "devDependencies": {
-    "@angular-eslint/utils": "13.5.0",
-    "@types/aria-query": "4.2.2"
+    "@angular-eslint/utils": "14.0.0-alpha.4",
+    "@types/aria-query": "5.0.0"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0",

diff --git a/packages/eslint-plugin-template/src/processors.ts b/packages/eslint-plugin-template/src/processors.ts
@@ -1,3 +1,4 @@
+import { basename } from 'path';
 import ts from 'typescript';
 
 const rangeMap = new Map();
@@ -155,7 +156,8 @@ export function preprocessComponentFile(
         continue;
       }
 
-      const inlineTemplateTmpFilename = `inline-template-${++id}.component.html`;
+      const baseFilename = basename(filename);
+      const inlineTemplateTmpFilename = `inline-template-${baseFilename}-${++id}.component.html`;
 
       const start = templateProperty.initializer.getStart();
       const end = templateProperty.initializer.getEnd();
@@ -211,8 +213,7 @@ export function postprocessComponentFile(
       text: string;
     };
   }[][],
-  // We don't currently need the filename in our implementation, but keeping it for clarity regarding the postprocess() function signature
-  _filename: string,
+  filename: string,
 ): readonly unknown[] {
   const messagesFromComponentSource = multiDimensionalMessages[0];
   /**
@@ -236,34 +237,31 @@ export function postprocessComponentFile(
    */
   const res = [
     ...messagesFromComponentSource,
+    ...messagesFromAllInlineTemplateHTML.flatMap(
+      (messagesFromInlineTemplateHTML, i) => {
+        const baseFilename = basename(filename);
+        const inlineTemplateTmpFilename = `inline-template-${baseFilename}-${++i}.component.html`;
+        const rangeData = rangeMap.get(inlineTemplateTmpFilename);
+        if (!rangeData) {
+          return [];
+        }
 
-    // Ah, multi-dimensional arrays without .flat() ...
-    ...([] as unknown[]).concat(
-      ...messagesFromAllInlineTemplateHTML.map(
-        (messagesFromInlineTemplateHTML, i) => {
-          const inlineTemplateTmpFilename = `inline-template-${++i}.component.html`;
-          const rangeData = rangeMap.get(inlineTemplateTmpFilename);
-          if (!rangeData) {
-            return [];
-          }
+        return messagesFromInlineTemplateHTML.map((message) => {
+          message.line = message.line + rangeData.lineAndCharacter.start.line;
 
-          return messagesFromInlineTemplateHTML.map((message) => {
-            message.line = message.line + rangeData.lineAndCharacter.start.line;
-
-            message.endLine =
-              message.endLine + rangeData.lineAndCharacter.start.line;
-
-            if (message.fix) {
-              const startOffset = rangeData.range[0];
-              message.fix.range = [
-                startOffset + message.fix.range[0],
-                startOffset + message.fix.range[1],
-              ];
-            }
-            return message;
-          });
-        },
-      ),
+          message.endLine =
+            message.endLine + rangeData.lineAndCharacter.start.line;
+
+          if (message.fix) {
+            const startOffset = rangeData.range[0];
+            message.fix.range = [
+              startOffset + message.fix.range[0],
+              startOffset + message.fix.range[1],
+            ];
+          }
+          return message;
+        });
+      },
     ),
   ];
   return res;

diff --git a/packages/eslint-plugin-template/src/rules/eqeqeq.ts b/packages/eslint-plugin-template/src/rules/eqeqeq.ts
@@ -3,7 +3,7 @@ import {
   ASTWithSource,
   LiteralPrimitive,
 } from '@angular-eslint/bundled-angular-compiler';
-import type { TSESLint } from '@typescript-eslint/experimental-utils';
+import type { TSESLint } from '@typescript-eslint/utils';
 import {
   createESLintRule,
   ensureTemplateParser,

diff --git a/packages/eslint-plugin-template/src/rules/i18n.ts b/packages/eslint-plugin-template/src/rules/i18n.ts
@@ -12,7 +12,7 @@ import {
   TmplAstElement,
 } from '@angular-eslint/bundled-angular-compiler';
 import type { Message } from '@angular-eslint/bundled-angular-compiler';
-import type { TSESLint, TSESTree } from '@typescript-eslint/experimental-utils';
+import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
 import {
   createESLintRule,
   getTemplateParserServices,

diff --git a/packages/eslint-plugin-template/src/rules/mouse-events-have-key-events.ts b/packages/eslint-plugin-template/src/rules/mouse-events-have-key-events.ts
@@ -1,5 +1,5 @@
 import type { TmplAstElement } from '@angular-eslint/bundled-angular-compiler';
-import type { TSESLint } from '@typescript-eslint/experimental-utils';
+import type { TSESLint } from '@typescript-eslint/utils';
 import {
   createESLintRule,
   getTemplateParserServices,

diff --git a/packages/eslint-plugin-template/src/utils/create-eslint-rule.ts b/packages/eslint-plugin-template/src/utils/create-eslint-rule.ts
@@ -2,8 +2,8 @@ import type {
   ParseSourceSpan,
   TmplAstElement,
 } from '@angular-eslint/bundled-angular-compiler';
-import type { TSESLint, TSESTree } from '@typescript-eslint/experimental-utils';
-import { ESLintUtils } from '@typescript-eslint/experimental-utils';
+import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
+import { ESLintUtils } from '@typescript-eslint/utils';
 
 /**
  * We need to patch the RuleCreator in order to preserve the defaultOptions

diff --git a/packages/eslint-plugin-template/src/utils/get-nearest-node-from.ts b/packages/eslint-plugin-template/src/utils/get-nearest-node-from.ts
@@ -1,11 +1,13 @@
 import type {
   AST,
-  R3_Node as Node,
+  TmplAstNode,
 } from '@angular-eslint/bundled-angular-compiler';
-import type { TSESTree } from '@typescript-eslint/experimental-utils';
+import type { TSESTree } from '@typescript-eslint/utils';
 import { AST_NODE_TYPES } from '@typescript-eslint/types';
 
-type ASTOrNodeWithParent = (AST | Node) & { parent?: ASTOrNodeWithParent };
+type ASTOrNodeWithParent = (AST | TmplAstNode) & {
+  parent?: ASTOrNodeWithParent;
+};
 
 function isProgram(node: unknown): node is TSESTree.Program {
   return (node as { type?: string }).type === AST_NODE_TYPES.Program;

diff --git a/...in-template/src/utils/is-interactive-element/get-interactive-element-ax-object-schemas.ts b/...in-template/src/utils/is-interactive-element/get-interactive-element-ax-object-schemas.ts
@@ -27,7 +27,7 @@ export function getInteractiveElementAXObjectSchemas(): AXObjectSchema[] {
 
     // This will contain all schemas that are related to ARIA roles
     // listed in the above set `interactiveAXObjects`.
-    interactiveElementAXObjectSchemas = [...elementAXObjects].reduce<
+    interactiveElementAXObjectSchemas = [...elementAXObjects.entries()].reduce<
       AXObjectSchema[]
     >((accumulator, [elementSchema, AXObjectSet]) => {
       return accumulator.concat(

diff --git a/...-plugin-template/src/utils/is-interactive-element/get-interactive-element-role-schemas.ts b/...-plugin-template/src/utils/is-interactive-element/get-interactive-element-role-schemas.ts
@@ -10,7 +10,7 @@ let interactiveElementRoleSchemas: ARIARoleRelationConcept[] | null = null;
 export function getInteractiveElementRoleSchemas(): ARIARoleRelationConcept[] {
   if (interactiveElementRoleSchemas === null) {
     const roleKeys = [...roles.keys()];
-    const elementRoleEntries = [...elementRoles];
+    const elementRoleEntries = [...elementRoles.entries()];
 
     // This set will contain all possible values for the `role` attribute,
     // e.g. `button`, `navigation` or `presentation`.

diff --git a/...gin-template/src/utils/is-interactive-element/get-non-interactive-element-role-schemas.ts b/...gin-template/src/utils/is-interactive-element/get-non-interactive-element-role-schemas.ts
@@ -10,7 +10,7 @@ let nonInteractiveElementRoleSchemas: ARIARoleRelationConcept[] | null = null;
 export function getNonInteractiveElementRoleSchemas(): ARIARoleRelationConcept[] {
   if (nonInteractiveElementRoleSchemas === null) {
     const roleKeys = [...roles.keys()];
-    const elementRoleEntries = [...elementRoles];
+    const elementRoleEntries = [...elementRoles.entries()];
 
     const nonInteractiveRoles = new Set<ARIARoleDefintionKey>(
       roleKeys