Merge branch 'main' into feat/template/interactive-supports-focus

.github/workflows/ci.yml

@@ -40,10 +40,10 @@ jobs:
           fetch-depth: 0
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
 
       - name: Install node and npm based on the volta config in our package.json
-        uses: volta-cli/action@v1
+        uses: volta-cli/action@v3
 
       - name: Get yarn cache directory path and node version for cache key and NX_CLOUD_ENV_NAME
         id: yarn-cache-dir-path
@@ -112,7 +112,7 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Install node and npm based on the volta config in our package.json
-        uses: volta-cli/action@v1
+        uses: volta-cli/action@v3
 
       - name: Get yarn cache directory path and node version for cache key
         id: yarn-cache-dir-path
@@ -153,9 +153,9 @@ jobs:
           fetch-depth: 0
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
 
-      - uses: volta-cli/action@v1
+      - uses: volta-cli/action@v3
         with:
           # The Node.js version to configure
           node-version: ${{ matrix.node }}
@@ -209,7 +209,7 @@ jobs:
       - run: git fetch --prune --unshallow
 
       - name: Install node and npm based on the volta config in our package.json
-        uses: volta-cli/action@v1
+        uses: volta-cli/action@v3
 
       - name: Get yarn cache directory path and node version for cache key
         id: yarn-cache-dir-path

.github/workflows/nx-migrate.yml

@@ -31,7 +31,7 @@ jobs:
           persist-credentials: false
 
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
 
       - name: Check if @nrwl/workspace was changed as part of the latest commit on the PR
         id: nrwl-workspace-package-check
@@ -59,6 +59,9 @@ jobs:
 
           npx nx migrate @nrwl/workspace@$NX_VERSION
 
+          # Update the version of nx packages specified in the builder package
+          NX_VERSION=$NX_VERSION npx ts-node --project ./tsconfig.tools.json ./tools/scripts/update-builder-nx-deps.ts
+
           # Sometimes Nx can require config formatting changes after a migrate command
           yarn --ignore-scripts
           npx nx format

.github/workflows/update-integration-tests-for-renovate.yml

@@ -33,6 +33,8 @@ jobs:
           declare -a packages=(
             "eslint"
             "@typescript-eslint/parser"
+            "@angular/cli"
+            "@schematics/angular"
           )
 
           for package in "${packages[@]}"

CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.1.0](https://github.com/angular-eslint/angular-eslint/compare/v14.0.4...v14.1.0) (2022-09-18)
+
+### Features
+
+- update dependency eslint to v8.23.1 ([#1137](https://github.com/angular-eslint/angular-eslint/issues/1137)) ([9c9f28b](https://github.com/angular-eslint/angular-eslint/commit/9c9f28b48300ea4893bc0021cb48404acb75ee1b))
+- update typescript-eslint packages to v5.37.0 ([#1138](https://github.com/angular-eslint/angular-eslint/issues/1138)) ([96435a8](https://github.com/angular-eslint/angular-eslint/commit/96435a881f40ca9a124c8f44009a6f656f31e1f2))
+
 ## [14.0.4](https://github.com/angular-eslint/angular-eslint/compare/v14.0.3...v14.0.4) (2022-09-08)
 
 ### Bug Fixes

README.md

@@ -402,19 +402,21 @@ Prettier is an awesome code formatter which can be used entirely independently o
 
 Some folks, however, like to apply prettier by using it inside of ESLint, using `eslint-plugin-prettier`. If this applies to you then you will want to read this section on how to apply it correctly for HTML templates. Make sure you read and fully understand the information above on the importance of `"overrides"` before reading this section.
 
-When using `eslint-plugin-prettier`, in order to get the full range of scenarios working, namely:
+If you choose to use `eslint-plugin-prettier`, **please ensure that you are using version 4.1.0 or later**, and apply the following configuration to ESLint and prettier:
 
-- ESLint + prettier together should work on Components with external templates
-- ESLint + prettier together should work on the external template HTML files themselves
-- ESLint + prettier together should work on Components with inline templates
+**.prettierrc**
 
-We need to use **two different overrides for HTML**: one which applies `@angular-eslint/template` rules, one which applies `prettier`.
-
-> Do not apply `@angular-eslint/template` rules and `prettier` within the same override block.
-
-The reason for this is down to the internals of the special ESLint processor for inline Component templates mentioned in the overrides section above and the hidden files it generates behind the scenes. Those files have names which match this pattern `*inline-template-*.component.html` and so we need to get `eslint-plugin-prettier` to ignore those files, otherwise it will get confused about them not existing directly in your project.
-
-Here is a fully working (tested in VSCode and on the command line via `ng lint`) example:
+```jsonc
+// This ensures that prettier applies its own Angular parser to all HTML files in our project
+{
+  "overrides": [
+    {
+      "files": "*.html",
+      "parser": "angular"
+    }
+  ]
+}
+```
 
 **.eslintrc.json**
 
@@ -432,31 +434,27 @@ Here is a fully working (tested in VSCode and on the command line via `ng lint`)
       "extends": [
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates",
-        "plugin:prettier/recommended"
+        "plugin:prettier/recommended" // <--- here we inherit from the recommended setup from eslint-plugin-prettier for TS
       ],
       "rules": {}
     },
-    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
     {
       "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:prettier/recommended" // <--- here we inherit from the recommended setup from eslint-plugin-prettier for HTML
+      ],
       "rules": {}
-    },
-    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
-    {
-      "files": ["*.html"],
-      "excludedFiles": ["*inline-template-*.component.html"],
-      "extends": ["plugin:prettier/recommended"],
-      "rules": {
-        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
-        "prettier/prettier": ["error", { "parser": "angular" }]
-      }
     }
   ]
 }
 ```
 
-We are setting the parser for `eslint-plugin-prettier` explicitly within our relevant override block so that it does not need to rely on inference. In this case we know it should always use its `angular` parser, because we are wiring it up to only run on angular HTML files within that override (_it's assumed that all HTML files in the project are angular templates_).
+With this setup, you have covered the following scenarios:
+
+- ESLint + prettier together work on Components with external templates (and all other source TS files)
+- ESLint + prettier together work on the external template HTML files themselves
+- ESLint + prettier together work on Components with inline templates
 
 <br>
 

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "14.0.4",
+  "version": "14.1.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "stream": true

package.json

@@ -2,7 +2,7 @@
   "name": "@angular-eslint/angular-eslint",
   "private": true,
   "volta": {
-    "node": "16.15.1",
+    "node": "16.17.0",
     "yarn": "1.22.19"
   },
   "workspaces": [
@@ -53,45 +53,45 @@
   "devDependencies": {
     "@actions/core": "1.9.1",
     "@actions/github": "5.0.3",
-    "@angular/cli": "14.2.2",
-    "@angular/compiler": "14.2.1",
+    "@angular/cli": "14.2.3",
+    "@angular/compiler": "14.2.2",
     "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "17.1.0",
-    "@nrwl/devkit": "14.6.5",
-    "@nrwl/jest": "14.6.5",
+    "@nrwl/devkit": "14.7.5",
+    "@nrwl/jest": "14.7.5",
     "@nrwl/nx-cloud": "14.6.2",
-    "@nrwl/workspace": "14.6.5",
-    "@schematics/angular": "14.2.2",
+    "@nrwl/workspace": "14.7.5",
+    "@schematics/angular": "14.2.3",
     "@types/eslint": "8.4.6",
     "@types/eslint-scope": "3.7.4",
     "@types/jest": "28.1.8",
-    "@types/node": "16.11.41",
-    "@types/prettier": "2.6.3",
-    "@typescript-eslint/eslint-plugin": "5.36.2",
-    "@typescript-eslint/parser": "5.36.2",
+    "@types/node": "16.11.59",
+    "@types/prettier": "2.7.0",
+    "@typescript-eslint/eslint-plugin": "5.37.0",
+    "@typescript-eslint/parser": "5.37.0",
     "env-cmd": "10.1.0",
-    "eslint": "8.23.0",
+    "eslint": "8.23.1",
     "eslint-config-prettier": "8.5.0",
     "execa": "5.1.1",
     "husky": "8.0.1",
     "jest": "28.1.3",
-    "jest-environment-jsdom": "28.1.1",
+    "jest-environment-jsdom": "29.0.3",
     "jest-preset-angular": "12.2.2",
     "json-schema-to-typescript": "11.0.2",
     "json-schema-traverse": "1.0.0",
-    "lerna": "5.5.0",
+    "lerna": "5.5.1",
     "lint-staged": "13.0.3",
     "microbundle": "0.15.1",
     "ncp": "2.0.0",
-    "nx": "14.6.5",
+    "nx": "14.7.5",
     "prettier": "2.7.1",
     "rimraf": "3.0.2",
     "strip-ansi": "6.0.1",
     "terser": "5.15.0",
     "tree-kill": "1.2.2",
     "ts-jest": "28.0.8",
     "ts-node": "10.9.1",
-    "typescript": "4.8.2"
+    "typescript": "4.8.3"
   },
   "dependencies": {}
 }

packages/builder/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.1.0](https://github.com/angular-eslint/angular-eslint/compare/v14.0.4...v14.1.0) (2022-09-18)
+
+**Note:** Version bump only for package @angular-eslint/builder
+
 ## [14.0.4](https://github.com/angular-eslint/angular-eslint/compare/v14.0.3...v14.0.4) (2022-09-08)
 
 ### Bug Fixes

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/builder",
-  "version": "14.0.4",
+  "version": "14.1.0",
   "description": "Angular CLI builder for ESLint",
   "license": "MIT",
   "main": "dist/index.js",
@@ -19,8 +19,8 @@
   ],
   "builders": "./builders.json",
   "dependencies": {
-    "@nrwl/devkit": "^14.6.5",
-    "nx": "^14.6.5"
+    "@nrwl/devkit": "^14.7.5",
+    "nx": "^14.7.5"
   },
   "peerDependencies": {
     "eslint": "^7.0.0 || ^8.0.0",

packages/bundled-angular-compiler/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.1.0](https://github.com/angular-eslint/angular-eslint/compare/v14.0.4...v14.1.0) (2022-09-18)
+
+**Note:** Version bump only for package @angular-eslint/bundled-angular-compiler
+
 ## [14.0.4](https://github.com/angular-eslint/angular-eslint/compare/v14.0.3...v14.0.4) (2022-09-08)
 
 **Note:** Version bump only for package @angular-eslint/bundled-angular-compiler

packages/bundled-angular-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/bundled-angular-compiler",
-  "version": "14.0.4",
+  "version": "14.1.0",
   "description": "A CJS bundled version of @angular/compiler",
   "license": "MIT",
   "main": "dist/index.js",

packages/eslint-plugin-template/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [14.1.0](https://github.com/angular-eslint/angular-eslint/compare/v14.0.4...v14.1.0) (2022-09-18)
+
+### Features
+
+- update typescript-eslint packages to v5.37.0 ([#1138](https://github.com/angular-eslint/angular-eslint/issues/1138)) ([96435a8](https://github.com/angular-eslint/angular-eslint/commit/96435a881f40ca9a124c8f44009a6f656f31e1f2))
+
 ## [14.0.4](https://github.com/angular-eslint/angular-eslint/compare/v14.0.3...v14.0.4) (2022-09-08)
 
 ### Bug Fixes

packages/eslint-plugin-template/docs/rules/click-events-have-key-events.md

@@ -81,6 +81,33 @@ The rule does not have any configuration options.
 
 #### ❌ Invalid Code
 
+```html
+<div (click)="onClick()" (handleSomething)="handleSomething()"></div>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/click-events-have-key-events": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
 ```html
 <header (click)="onClick()"></header>
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -333,6 +360,8 @@ The rule does not have any configuration options.
 
 ```html
 <div (click)="onClick()" (keyup)="onKeyup()"></div>
+<div (keyup)="onKeyup()" (click)="onClick()"></div>
+<div (click)="onClick()" (keyup)="onKeyup()" (handleSomething)="handleSomething()"></div>
 ```
 
 <br>

packages/eslint-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-eslint/eslint-plugin-template",
-  "version": "14.0.4",
+  "version": "14.1.0",
   "description": "ESLint plugin for Angular Templates",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,14 +17,14 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@angular-eslint/bundled-angular-compiler": "14.0.4",
-    "@typescript-eslint/type-utils": "5.36.2",
-    "@typescript-eslint/utils": "5.36.2",
+    "@angular-eslint/bundled-angular-compiler": "14.1.0",
+    "@typescript-eslint/type-utils": "5.37.0",
+    "@typescript-eslint/utils": "5.37.0",
     "aria-query": "5.0.2",
     "axobject-query": "3.0.1"
   },
   "devDependencies": {
-    "@angular-eslint/utils": "14.0.4",
+    "@angular-eslint/utils": "14.1.0",
     "@types/aria-query": "5.0.0"
   },
   "peerDependencies": {

packages/eslint-plugin-template/src/rules/click-events-have-key-events.ts

@@ -47,8 +47,9 @@ export default createESLintRule<Options, MessageIds>({
           hasKeyEvent = false;
 
         for (const output of node.outputs) {
-          hasClick = output.name === 'click';
+          hasClick = hasClick || output.name === 'click';
           hasKeyEvent =
+            hasKeyEvent ||
             output.name.startsWith('keyup') ||
             output.name.startsWith('keydown') ||
             output.name.startsWith('keypress');