feat(ng-dev): Migrate from deprecated TSLint config to new ESLint config

BREAKING CHANGE: ESLint is no longer installed automatically with `ng-dev`. The old TSLint and ESLint configs are deprecated, but you can continue to use them for now if you install the old dependencies via your own `package.json`. The were: `"@typescript-eslint/eslint-plugin": "^4.8.0"`, "@typescript-eslint/parser": "^4.6.0"`, and `"eslint": "^7.14.0"`. Consult the README for instructions to set up the new ESLint config at your convenience; the old configs will be removed from this library in a future version.
simontonsoftware · May 18, 2021 · acd734c · acd734c
1 parent d527860
commit acd734c
Show file tree

Hide file tree

Showing 93 changed files with 797 additions and 248 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,12 +1 @@
-/.idea/
-/coverage/
-/dist/
-/docs/
-/node_modules/
-
-karma.conf.js
-*.e2e-spec.ts
-*.spec.ts
-*.js
-
-/projects/micro-dash/
+**/*.dts-spec.ts
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": "./projects/ng-dev/src/eslint-config.json",
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "s", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "s", "style": "kebab-case" }
+        ]
+      }
+    }
+  ]
+}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -20,10 +20,6 @@ jobs:
 
       - run: yarn test --no-watch --no-progress --browsers=ChromeHeadlessCI
 
-      - run: sudo apt-get update
-      - run: sudo apt-get install google-chrome-stable
-      - run: yarn e2e integration --protractorConfig=projects/integration/e2e/protractor-ci.conf.js
-
   lint:
     runs-on: ubuntu-latest
     steps:
@@ -41,5 +37,5 @@ jobs:
 
       - run: yarn build-libs
 
-      - run: yarn eslint
+      - run: yarn ng lint --quiet
       - run: yarn ts-node scripts/dtslint-all
diff --git a/.idea/s-libs.iml b/.idea/s-libs.iml
diff --git a/TODO.md b/TODO.md
@@ -5,6 +5,7 @@
   - Check for cool new TS features to use.
   - Open issue request about enabling ivy for ng-dev?
 
+- Re-enable eslint rules to ban types in micro-dash. Figure it out.
 - landing page to link to all API docs
 - coveralls
   - help may be here, to combine multiple coverage runs into one report: https://github.com/angular/angular-cli/issues/11268

diff --git a/angular.json b/angular.json
@@ -3,7 +3,8 @@
   "version": 1,
   "cli": {
     "packageManager": "yarn",
-    "analytics": "d2657102-efac-4510-9c45-87ca8fcdb63c"
+    "analytics": "d2657102-efac-4510-9c45-87ca8fcdb63c",
+    "defaultCollection": "@angular-eslint/schematics"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -35,6 +36,15 @@
             "tsConfig": "projects/app-state/tsconfig.spec.json",
             "karmaConfig": "projects/app-state/karma.conf.js"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/app-state/**/*.ts",
+              "projects/app-state/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -64,7 +74,9 @@
               "projects/integration/src/favicon.ico",
               "projects/integration/src/assets"
             ],
-            "styles": ["projects/integration/src/styles.scss"],
+            "styles": [
+              "projects/integration/src/styles.scss"
+            ],
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -135,7 +147,9 @@
               "projects/integration/src/favicon.ico",
               "projects/integration/src/assets"
             ],
-            "styles": ["projects/integration/src/styles.scss"],
+            "styles": [
+              "projects/integration/src/styles.scss"
+            ],
             "scripts": [
               "node_modules/rxjs/bundles/rxjs.umd.js",
               "node_modules/@angular/core/bundles/core.umd.js",
@@ -149,6 +163,15 @@
               "dist/ng-app-state/bundles/ng-app-state.umd.js"
             ]
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/integration/**/*.ts",
+              "projects/integration/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -180,6 +203,15 @@
             "tsConfig": "projects/js-core/tsconfig.spec.json",
             "karmaConfig": "projects/js-core/karma.conf.js"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/js-core/**/*.ts",
+              "projects/js-core/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -211,6 +243,15 @@
             "tsConfig": "projects/micro-dash/tsconfig.spec.json",
             "karmaConfig": "projects/micro-dash/karma.conf.js"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/micro-dash/**/*.ts",
+              "projects/micro-dash/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -272,6 +313,15 @@
           "options": {
             "browserTarget": "micro-dash-sizes:build"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/micro-dash-sizes/**/*.ts",
+              "projects/micro-dash-sizes/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -303,6 +353,15 @@
             "tsConfig": "projects/ng-app-state/tsconfig.spec.json",
             "karmaConfig": "projects/ng-app-state/karma.conf.js"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ng-app-state/**/*.ts",
+              "projects/ng-app-state/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -335,6 +394,15 @@
             "karmaConfig": "projects/ng-core/karma.conf.js",
             "polyfills": "projects/ng-core/src/test-polyfills.ts"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ng-core/**/*.ts",
+              "projects/ng-core/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -367,6 +435,15 @@
             "karmaConfig": "projects/ng-dev/karma.conf.js",
             "polyfills": "projects/ng-dev/src/test-polyfills.ts"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ng-dev/**/*.ts",
+              "projects/ng-dev/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -399,6 +476,15 @@
             "karmaConfig": "projects/rxjs-core/karma.conf.js",
             "polyfills": "projects/rxjs-core/src/test-polyfills.ts"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/rxjs-core/**/*.ts",
+              "projects/rxjs-core/**/*.html"
+            ]
+          }
         }
       }
     }

diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
     "e2e": "ng e2e",
     "build-libs": "yarn ts-node scripts/build-libs",
     "dtslint": "dtslint --expectOnly --localTs node_modules/typescript/lib",
-    "eslint": "eslint . --ext .ts,.tsx",
     "prettier-all": "prettier --write \"**/*.{html,js,json,md,scss,ts,yml}\"",
     "docs": "yarn ts-node scripts/docs-libs",
     "git-publish": "standard-version --commit-all",
@@ -29,14 +28,18 @@
     "@angular/router": "~12.0.0",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
-    "eslint": "^7.26.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "utility-types": "~3.10.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~12.0.0",
+    "@angular-eslint/builder": "12.0.0",
+    "@angular-eslint/eslint-plugin": "12.0.0",
+    "@angular-eslint/eslint-plugin-template": "12.0.0",
+    "@angular-eslint/schematics": "12.0.0",
+    "@angular-eslint/template-parser": "12.0.0",
     "@angular/cdk": "~12.0.0",
     "@angular/cli": "~12.0.0",
     "@angular/compiler-cli": "~12.0.0",
@@ -45,7 +48,10 @@
     "@types/lodash-es": "^4.17.3",
     "@types/node": "^12.11.1",
     "@types/prettier": "^2.0.1",
+    "@typescript-eslint/eslint-plugin": "4.23.0",
+    "@typescript-eslint/parser": "4.23.0",
     "dtslint": "^4.0.6",
+    "eslint": "^7.26.0",
     "expect-type": "^0.11.0",
     "glob": "^7.1.6",
     "jasmine-core": "~3.7.0",

diff --git a/projects/app-state/.eslintrc.json b/projects/app-state/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "projects/app-state/tsconfig.lib.json",
+          "projects/app-state/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {}
+    },
+    { "files": ["*.html"], "rules": {} }
+  ]
+}
diff --git a/projects/app-state/src/lib/child-store.spec.ts b/projects/app-state/src/lib/child-store.spec.ts
@@ -80,7 +80,7 @@ describe('ChildStore', () => {
     });
 
     it('gets the new subvalue even when it has a later subscriber (production bug)', () => {
-      let expectedValue: InnerState | undefined;
+      let expectedValue: InnerState | undefined = undefined;
       store.$.subscribe(() => {
         expect(store('optional').state()).toBe(expectedValue);
       });

diff --git a/projects/app-state/src/lib/root-store.spec.ts b/projects/app-state/src/lib/root-store.spec.ts
@@ -94,7 +94,7 @@ describe('RootStore', () => {
 
     it("doesn't have that infinite loop with 2 stores (production bug)", () => {
       // https://github.com/simontonsoftware/ng-app-state/issues/28
-      const store2 = new RootStore<{}>({});
+      const store2 = new RootStore<Record<string, never>>({});
       store.$.subscribe(() => {
         store2.batch(noop);
       });

diff --git a/projects/app-state/src/lib/store.spec.ts b/projects/app-state/src/lib/store.spec.ts
@@ -123,8 +123,8 @@ describe('Store', () => {
     });
 
     // https://github.com/simontonsoftware/ng-app-state/issues/13
-    it('does not emit stale values in the middle of propogating a change (production bug)', () => {
-      let log: jasmine.Spy | undefined;
+    it('does not emit stale values in the middle of propagating a change (production bug)', () => {
+      let log: jasmine.Spy | undefined = undefined;
       store.$.subscribe(() => {
         store('optional').$.subscribe(log);
       });

diff --git a/projects/app-state/src/lib/store.ts b/projects/app-state/src/lib/store.ts
@@ -7,7 +7,6 @@ import { ChildStore, RootStore } from './index';
 type GetSlice<T> = <K extends keyof T>(attr: K) => Store<T[K]>;
 
 export interface Store<T> extends GetSlice<T> {
-  // tslint:disable:callable-types
   /**
    * Select a slice of the store to operate on. For example `store('currentUser')` will return a new `Store` that represents the `currentUser` property.
    */

diff --git a/projects/integration/.eslintrc.json b/projects/integration/.eslintrc.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "projects/integration/tsconfig.app.json",
+          "projects/integration/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/projects/integration/e2e/.eslintrc.json b/projects/integration/e2e/.eslintrc.json
@@ -0,0 +1 @@
+{ "ignorePatterns": ["**/*"] }
diff --git a/projects/integration/src/app/api-tests/ng-app-state.spec.ts b/projects/integration/src/app/api-tests/ng-app-state.spec.ts
@@ -8,7 +8,7 @@ import {
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { RootStore } from '@s-libs/app-state';
-import { keys } from '@s-libs/micro-dash';
+import { keys, noop } from "@s-libs/micro-dash";
 import * as ngAppState from '@s-libs/ng-app-state';
 import { NasModelModule } from '@s-libs/ng-app-state';
 
@@ -78,7 +78,7 @@ describe('ng-app-state', () => {
         {
           extraDirectives = [] as Array<Type<any>>,
           template = '',
-          beforeCreate = () => {},
+          beforeCreate = noop,
         } = {},
       ): S {
         if (template) {