Merge pull request #85 from cloudnc/feat/upgrade-angular

Author: zak-cloudnc

.betterer.results

@@ -2,16 +2,19 @@
 exports[`stricter compilation`] = {
   timestamp: 1619240872304,
   value: `{
+    "node_modules/@types/jasmine/index.d.ts:2472745569": [
+      [669, 14, 16, "Interface \'FunctionMatchers<Fn>\' incorrectly extends interface \'Matchers<any>\'.\\n  The types returned by \'toHaveBeenCalledWith(...)\' are incompatible between these types.\\n    Type \'boolean\' is not assignable to type \'Promise<void>\'.", "2718731728"]
+    ],
     "src/app/google-charts.service.ts:1308226900": [
-      [3, 29, 15, "Could not find a declaration file for module \'google-charts\'. \'./node_modules/google-charts/dist/googleCharts.js\' implicitly has an \'any\' type.\\n  Try \`npm install @types/google-charts\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'google-charts\';\`", "2535818334"]
+      [3, 29, 15, "Could not find a declaration file for module \'google-charts\'. \'./node_modules/google-charts/dist/googleCharts.js\' implicitly has an \'any\' type.\\n  Try \`npm i --save-dev @types/google-charts\` if it exists or add a new declaration (.d.ts) file containing \`declare module \'google-charts\';\`", "2535818334"]
     ],
     "src/app/multiple-worker-pool/log-line/log-line.component.ts:1269916813": [
       [10, 11, 7, "Property \'message\' has no initializer and is not definitely assigned in the constructor.", "1236122734"],
       [11, 11, 5, "Property \'files\' has no initializer and is not definitely assigned in the constructor.", "171232592"],
       [13, 9, 5, "Property \'color\' has no initializer and is not definitely assigned in the constructor.", "176948952"],
       [18, 44, 17, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n  Type \'undefined\' is not assignable to type \'string\'.", "463397358"]
     ],
-    "src/app/multiple-worker-pool/multiple-worker-pool.component.ts:1042385498": [
+    "src/app/multiple-worker-pool/multiple-worker-pool.component.ts:816086637": [
       [90, 9, 14, "Type \'Observable<{ millisSinceLast: number | null; file?: string | undefined; timestamp: Date; message: string; thread: Thread; fileEventType: FileHashEvent | null; }[]>\' is not assignable to type \'Observable<HashWorkerMessage[]>\'.\\n  Type \'{ millisSinceLast: number | null; file?: string | undefined; timestamp: Date; message: string; thread: Thread; fileEventType: FileHashEvent | null; }[]\' is not assignable to type \'HashWorkerMessage[]\'.\\n    Type \'{ millisSinceLast: number | null; file?: string | undefined; timestamp: Date; message: string; thread: Thread; fileEventType: FileHashEvent | null; }\' is not assignable to type \'HashWorkerMessage\'.\\n      Types of property \'millisSinceLast\' are incompatible.\\n        Type \'number | null\' is not assignable to type \'number | undefined\'.\\n          Type \'null\' is not assignable to type \'number | undefined\'.", "463576723"]
     ]
   }`

.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "root": true,
+  "ignorePatterns": ["projects/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "lib",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "lib",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {}
+    }
+  ]
+}

.github/workflows/main.yml

@@ -30,9 +30,10 @@ jobs:
       - name: Test
         run: yarn lib:test:ci
       - name: Coverage
-        uses: codecov/codecov-action@v1
+        uses: codecov/codecov-action@v2
         with:
           fail_ci_if_error: true # optional (default = false)
+          directory: coverage
       - name: Build
         run: yarn lib:build:prod
       - name: Incremental code quality checking

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -72,7 +72,10 @@ import { of } from 'rxjs';
 
 const input$ = of('Hello from main thread');
 
-fromWorker<string, string>(() => new Worker('./hello.worker', { type: 'module' }), input$).subscribe(message => {
+fromWorker<string, string>(
+  () => new Worker(new URL('./hello.worker', import.meta.url), { type: 'module' }),
+  input$,
+).subscribe(message => {
   console.log(message); // Outputs 'Hello from webworker'
 });
 
@@ -154,7 +157,7 @@ call to select which elements of the input stream are transferable.
 // src/readme/transferable.main.ts#L7-L11
 
 return fromWorker<ArrayBuffer, string>(
-  () => new Worker('./transferable.worker', { type: 'module' }),
+  () => new Worker(new URL('./transferable.worker', import.meta.url), { type: 'module' }),
   input$,
   input => [input],
 );
@@ -204,7 +207,10 @@ import { Observable } from 'rxjs';
 import { fromWorkerPool } from 'observable-webworker';
 
 export function computeHashes(files: File[]): Observable<string> {
-  return fromWorkerPool<File, string>(() => new Worker('./worker-pool-hash.worker', { type: 'module' }), files);
+  return fromWorkerPool<File, string>(
+    () => new Worker(new URL('./worker-pool-hash.worker', import.meta.url), { type: 'module' }),
+    files,
+  );
 }
 
 ```

angular.json

@@ -22,11 +22,16 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "webWorkerTsConfig": "tsconfig.worker.json"
+            "webWorkerTsConfig": "tsconfig.worker.json",
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -38,7 +43,6 @@
               ],
               "optimization": true,
               "outputHashing": "all",
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -55,7 +59,8 @@
                 }
               ]
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -85,13 +90,6 @@
             "styles": ["src/styles.scss"],
             "scripts": []
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "tsconfig.worker.json"],
-            "exclude": ["**/node_modules/**"]
-          }
         }
       }
     },
@@ -102,7 +100,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/observable-webworker/tsconfig.lib.json",
             "project": "projects/observable-webworker/ng-package.json"
@@ -122,17 +120,16 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "projects/observable-webworker/tsconfig.lib.json",
-              "projects/observable-webworker/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["projects/observable-webworker/**/*.ts", "projects/observable-webworker/**/*.html"]
           }
         }
       }
     }
   },
-  "defaultProject": "observable-webworker-demo"
+  "defaultProject": "observable-webworker-demo",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }

karma.conf.js

@@ -7,20 +7,31 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
+      require('karma-coverage'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/observable-webworker'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true,
+    reporters: ['progress', 'kjhtml', 'coverage'],
+    coverageReporter: {
+      // specify a common output directory
+      dir: require('path').join(__dirname, '../../coverage/observable-webworker'),
+      reporters: [
+        // reporters not supporting the `file` property
+        { type: 'html', subdir: 'report-html' },
+        // { type: 'lcov', subdir: 'report-lcov' },
+        // reporters supporting the `file` property, use `subdir` to directly
+        // output them in the `dir` directory
+        // { type: 'cobertura', subdir: '.', file: 'cobertura.txt' },
+        { type: 'lcovonly', subdir: '.', file: 'lcov.info' },
+        // { type: 'teamcity', subdir: '.', file: 'teamcity.txt' },
+        // { type: 'text', subdir: '.', file: 'text.txt' },
+        { type: 'text-summary', subdir: '.', file: 'text-summary.txt' },
+      ],
     },
-    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -13,14 +13,14 @@
     "------------------ DEMO COMMANDS -----------------": "",
     "demo:start": "yarn run ng serve",
     "demo:build:base": "yarn run ng build",
-    "demo:build:prod": "yarn run demo:build:base --prod",
+    "demo:build:prod": "yarn run demo:build:base --configuration=production",
     "demo:test": "yarn run ng test",
     "demo:test:e2e:watch": "yarn run cy open",
     "demo:test:e2e:ci": "yarn run cy run",
     "demo:lint:check": "yarn run ng lint",
     "demo:lint:fix": "yarn run demo:lint:check --fix",
     "------------------ LIB COMMANDS -----------------": "",
-    "lib:build:prod": "yarn run ng build --project observable-webworker --prod",
+    "lib:build:prod": "yarn run ng build --project observable-webworker --configuration=production",
     "lib:build:watch": "yarn run lib:build:prod --watch",
     "lib:test:watch": "yarn run ng test --project observable-webworker",
     "lib:test:ci": "yarn run ng test --project observable-webworker --watch false --code-coverage",
@@ -34,54 +34,60 @@
     "test": "yarn lib:test:watch --code-coverage",
     "start": "yarn demo:start",
     "commit": "git add . && git-cz",
-    "betterer": "betterer"
+    "betterer": "betterer",
+    "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "~10.2.0",
-    "@angular/common": "~10.2.0",
-    "@angular/compiler": "~10.2.0",
-    "@angular/core": "~10.2.0",
-    "@angular/forms": "~10.2.0",
-    "@angular/platform-browser": "~10.2.0",
-    "@angular/platform-browser-dynamic": "~10.2.0",
-    "@angular/router": "~10.2.0",
+    "@angular/animations": "~13.1.2",
+    "@angular/common": "~13.1.2",
+    "@angular/compiler": "~13.1.2",
+    "@angular/core": "~13.1.2",
+    "@angular/forms": "~13.1.2",
+    "@angular/platform-browser": "~13.1.2",
+    "@angular/platform-browser-dynamic": "~13.1.2",
+    "@angular/router": "~13.1.2",
     "google-charts": "2.0.0",
     "js-md5": "0.7.3",
     "rxjs": "~6.6.3",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "tslib": "^2.3.1",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular/cli": "~10.2.0",
-    "@angular/compiler-cli": "~10.2.0",
-    "@angular/language-service": "~10.2.0",
+    "@angular-devkit/build-angular": "~13.1.3",
+    "@angular-eslint/builder": "13.0.1",
+    "@angular-eslint/eslint-plugin": "13.0.1",
+    "@angular-eslint/eslint-plugin-template": "13.0.1",
+    "@angular-eslint/schematics": "13.0.1",
+    "@angular-eslint/template-parser": "13.0.1",
+    "@angular/cli": "~13.1.3",
+    "@angular/compiler-cli": "~13.1.2",
+    "@angular/language-service": "~13.1.2",
     "@betterer/cli": "^1.1.3",
     "@betterer/typescript": "^1.1.2",
     "@types/google.visualization": "0.0.48",
-    "@types/jasmine": "~3.3.8",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/js-md5": "^0.4.2",
     "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "commitizen": "4.0.3",
     "cypress": "3.4.1",
     "cz-conventional-changelog": "2.1.0",
     "embedme": "1.6.0",
+    "eslint": "^8.2.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~6.3.11",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-coverage": "2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^13.1.3",
     "prettier": "2.2.1",
     "semantic-release": "^17.2.3",
     "ts-node": "~7.0.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.0.3"
+    "typescript": "~4.5.4"
   },
   "repository": {
     "type": "git",

projects/observable-webworker/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "projects/observable-webworker/tsconfig.lib.json",
+          "projects/observable-webworker/tsconfig.spec.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "rules": {}
+    }
+  ]
+}