Merge branch 'feature/angular-13' into 'develop'

⬆️ Upgrade to Angular 13

See merge request NatoBoram/public-gateway-cacher!7

.eslintrc.json

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

.gitignore

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

.vscode/extensions.json

@@ -5,13 +5,12 @@
   "recommendations": [
     "angular.ng-template",
     "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
     "editorconfig.editorconfig",
     "gitlab.gitlab-workflow",
-    "hookyqr.beautify",
     "johnpapa.angular2",
     "ms-vscode.vscode-typescript-next",
-    "ms-vscode.vscode-typescript-tslint-plugin",
+    "visualstudioexptteam.vscodeintellicode",
-    "visualstudioexptteam.vscodeintellicode"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": [

.vscode/settings.json

@@ -1,12 +1,27 @@
 {
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
+    "source.fixAll.eslint": true,
     "source.organizeImports": true
   },
   "editor.formatOnSave": true,
   "editor.rulers": [
     140
   ],
+  "eslint.options": {
+    "extensions": [
+      ".ts",
+      ".html"
+    ]
+  },
+  "eslint.packageManager": "yarn",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html"
+  ],
   "files.associations": {
     ".ipfs-npmrc": "json"
   },

CHANGELOG.md

@@ -9,17 +9,19 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 ### Added
 
 * More information in the `package.json`.
+* Added ESLint
 
 ### Changed
 
-* Upgraded to Angular 12
-* Upgraded TSLint rules
 * Updated `gateways.json`
+* Upgraded to Angular 13
 
 ### Deprecated
 
 ### Removed
 
+* Removed TSLint
+
 ### Fixed
 
 ### Security

angular.json

@@ -3,7 +3,8 @@
   "version": 1,
   "cli": {
     "packageManager": "yarn",
-    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85"
+    "analytics": "10b848ad-8b81-4346-852f-5eff89573a85",
+    "defaultCollection": "@angular-eslint/schematics"
   },
   "newProjectRoot": "projects",
   "projects": {
@@ -36,6 +37,11 @@
             "styles": [
               "src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules"
+              ]
+            },
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -151,20 +157,12 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "stylePreprocessorOptions": {
-          }
+              "includePaths": [
-        },
+                "node_modules"
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
               ]
+            },
+            "scripts": []
           }
         },
         "e2e": {
@@ -178,6 +176,15 @@
               "devServerTarget": "public-gateway-cacher:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }

package.json

@@ -37,17 +37,17 @@
     "postinstall": "ngcc"
   },
   "dependencies": {
-    "@angular/animations": "~12.2.16",
+    "@angular/animations": "~13.2.6",
-    "@angular/cdk": "~12.2.13",
+    "@angular/cdk": "~13.2.6",
-    "@angular/common": "~12.2.16",
+    "@angular/common": "~13.2.6",
-    "@angular/compiler": "~12.2.16",
+    "@angular/compiler": "~13.2.6",
-    "@angular/core": "~12.2.16",
+    "@angular/core": "~13.2.6",
-    "@angular/flex-layout": "^12.0.0-beta.35",
+    "@angular/flex-layout": "^13.0.0-beta.38",
-    "@angular/forms": "~12.2.16",
+    "@angular/forms": "~13.2.6",
-    "@angular/material": "^12.2.13",
+    "@angular/material": "^13.2.6",
-    "@angular/platform-browser": "~12.2.16",
+    "@angular/platform-browser": "~13.2.6",
-    "@angular/platform-browser-dynamic": "~12.2.16",
+    "@angular/platform-browser-dynamic": "~13.2.6",
-    "@angular/router": "~12.2.16",
+    "@angular/router": "~13.2.6",
     "bootstrap": "^5.1.3",
     "ipfs-css": "^1.3.0",
     "rxjs": "~6.6.0",
@@ -55,14 +55,21 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.16",
+    "@angular-devkit/build-angular": "~13.2.6",
-    "@angular/cli": "~12.2.16",
+    "@angular-eslint/builder": "13.1.0",
-    "@angular/compiler-cli": "~12.2.16",
+    "@angular-eslint/eslint-plugin": "13.1.0",
-    "@angular/language-service": "~12.2.16",
+    "@angular-eslint/eslint-plugin-template": "13.1.0",
+    "@angular-eslint/schematics": "13.1.0",
+    "@angular-eslint/template-parser": "13.1.0",
+    "@angular/cli": "~13.2.6",
+    "@angular/compiler-cli": "~13.2.6",
+    "@angular/language-service": "~13.2.6",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.2",
+    "@typescript-eslint/eslint-plugin": "5.11.0",
+    "@typescript-eslint/parser": "5.11.0",
+    "eslint": "^8.2.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.17",
@@ -71,13 +78,8 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
-    "rxjs-tslint-rules": "^4.33.3",
     "ts-node": "~8.10.2",
-    "tslint": "~6.1.2",
+    "typescript": "~4.5.5"
-    "tslint-consistent-codestyle": "^1.16.0",
-    "tslint-origin-ordered-imports-rule": "^2.0.0",
-    "tslint-rxjs-subject-restrictions-rule": "^1.0.4",
-    "typescript": "~4.3.5"
   },
   "private": true
 }

src/app/app.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ThemeService } from './services/theme.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   constructor(

src/app/app.module.ts

@@ -15,14 +15,12 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    CommonModule,
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
     AppRoutingModule,
-
+    BrowserAnimationsModule,
-    // Material
+    BrowserModule,
+    CommonModule,
     FlexLayoutModule,
+    HttpClientModule,
     MatButtonModule,
     MatIconModule,
     MatToolbarModule,

src/app/pages/pages.component.ts

@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { Subscription } from 'rxjs';
@@ -13,7 +13,8 @@ import { ThemeService } from '../services/theme.service';
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
-  styleUrls: ['./pages.component.scss']
+  styleUrls: ['./pages.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PagesComponent implements OnInit, OnDestroy {
 

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/styles.scss

@@ -1,5 +1,5 @@
 // Custom Theming for Angular Material
-@use '~@angular/material' as mat;
+@use '@angular/material'as mat;
 // For more information: https://material.angular.io/guide/theming
 // Plus imports for other components in your app.
 

src/styles/ipfs-colours.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/core/theming/palette";
+@import "@angular/material/core/theming/palette";
 
 $ipfs-colour-navy: (default: #0B3A53,
   lighter: #3e6480,

src/styles/ipfs-palettes.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material'as mat;
 @import 'ipfs-colours.scss';
 
 $ipfs-primary: mat.define-palette($ipfs-colour-navy, 'default', 'lighter', 'darker');

src/styles/ipfs-themes.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material'as mat;
 @import 'ipfs-palettes.scss';
 
 $ipfs-light-theme: mat.define-light-theme($ipfs-primary, $ipfs-accent, $ipfs-warn);

src/test.ts

@@ -1,18 +1,20 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
+import 'zone.js/testing';
 
 declare const require: any;
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false }
+}
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

tsconfig.json

@@ -6,8 +6,22 @@
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "useUnknownInCatchVariables": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,

tslint.json

@@ -1,324 +0,0 @@
-{
-  "extends": [
-    "tslint:recommended",
-    "rxjs-tslint-rules"
-  ],
-  "linterOptions": {
-    "exclude": [
-      "**/*-routing.module.ts",
-      "src/polyfills.ts",
-      "src/test.ts",
-      "**/*.po.ts"
-    ]
-  },
-  "rules": {
-    "align": {
-      "options": [
-        "parameters",
-        "statements"
-      ]
-    },
-    "array-type": false,
-    "arrow-parens": false,
-    "arrow-return-shorthand": [
-      true,
-      "multiline"
-    ],
-    "ban-types": [
-      true,
-      [
-        "Object",
-        "Use {} instead."
-      ],
-      [
-        "String"
-      ]
-    ],
-    "callable-types": true,
-    "component-class-suffix": true,
-    "component-max-inline-declarations": true,
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "contextual-decorator": false,
-    "contextual-lifecycle": true,
-    "curly": true,
-    "cyclomatic-complexity": [
-      true,
-      20
-    ],
-    "deprecation": {
-      "severity": "warning"
-    },
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "encoding": true,
-    "eofline": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-destructuring-spacing": true,
-    "import-spacing": true,
-    "increment-decrement": [
-      true,
-      "allow-post"
-    ],
-    "indent": {
-      "options": [
-        "spaces"
-      ]
-    },
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-file-line-count": [
-      true,
-      400
-    ],
-    "max-line-length": [
-      true,
-      {
-        "ignore-pattern": "^import |^export {(.*?)}|class [a-zA-Z]+ implements |// ",
-        "limit": 140
-      }
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "public-static-field",
-          "private-static-field",
-          "public-instance-field",
-          "private-instance-field",
-          "public-constructor",
-          "private-constructor",
-          "public-instance-method",
-          "protected-instance-method",
-          "private-instance-method",
-          "public-static-method",
-          "protected-static-method",
-          "private-static-method"
-        ]
-      }
-    ],
-    "newline-before-return": false,
-    "no-any": [
-      true,
-      {
-        "ignore-rest-args": true
-      }
-    ],
-    "no-arg": true,
-    "no-attribute-decorator": true,
-    "no-collapsible-if": true,
-    "no-conflicting-lifecycle": true,
-    "no-consecutive-blank-lines": [
-      true,
-      1
-    ],
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-default-export": true,
-    "no-default-import": true,
-    "no-duplicate-imports": true,
-    "no-duplicate-super": true,
-    "no-duplicate-switch-case": true,
-    "no-empty": [
-      true,
-      "allow-empty-functions"
-    ],
-    "no-for-in-array": true,
-    "no-forward-ref": true,
-    "no-host-metadata-property": true,
-    "no-implicit-dependencies": [
-      false,
-      "dev"
-    ],
-    "no-import-side-effect": [
-      true,
-      {
-        "ignore-module": "(hammerjs|core-js|zone.js)"
-      }
-    ],
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-invalid-template-strings": true,
-    "no-invalid-this": [
-      true,
-      "check-function-in-method"
-    ],
-    "no-lifecycle-call": true,
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "no-pipe-impure": true,
-    "no-queries-metadata-property": true,
-    "no-redundant-jsdoc": true,
-    "no-reference": true,
-    "no-require-imports": true,
-    "no-return-await": true,
-    "no-return-undefined": true,
-    "no-static-this": true,
-    "no-switch-case-fall-through": true,
-    "no-tautology-expression": true,
-    "no-this-assignment": true,
-    "no-trailing-whitespace": true,
-    "no-unbound-method": true,
-    "no-unnecessary-callback-wrapper": true,
-    "no-unnecessary-class": [
-      true,
-      "allow-constructor-only",
-      "allow-static-only",
-      "allow-empty-class"
-    ],
-    "no-unnecessary-initializer": true,
-    "no-unnecessary-type-assertion": true,
-    "no-unsafe-finally": true,
-    "no-unused": true,
-    "no-unused-css": true,
-    "no-var-keyword": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "origin-ordered-imports": [
-      true
-    ],
-    "prefer-const": true,
-    "prefer-inline-decorator": false,
-    "prefer-output-readonly": true,
-    "prefer-readonly": true,
-    "prefer-template": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": false,
-    "restrict-plus-operands": true,
-    "rx-subject-restrictions": true,
-    "rxjs-no-compat": true,
-    "rxjs-no-internal": true,
-    "semicolon": {
-      "options": [
-        "always"
-      ]
-    },
-    "space-before-function-paren": [
-      true,
-      {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    ],
-    "space-within-parens": true,
-    "template-banana-in-box": true,
-    "template-conditional-complexity": true,
-    "template-no-call-expression": true,
-    "template-no-negated-async": true,
-    "template-use-track-by-function": true,
-    "trailing-comma": [
-      true,
-      {
-        "esSpecCompliant": true,
-        "multiline": {
-          "arrays": "ignore",
-          "functions": "never",
-          "objects": "ignore",
-          "typeLiterals": "ignore"
-        }
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": [
-      true,
-      "call-signature",
-      "property-declaration",
-      "object-destructuring",
-      "arrow-call-signature"
-    ],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "unnecessary-else": [
-      true,
-      {
-        "allow-else-if": true
-      }
-    ],
-    "use-component-view-encapsulation": true,
-    "use-isnan": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-decorator": true,
-    "use-pipe-transform-interface": true,
-    "variable-name": {
-      "options": [
-        "ban-keywords",
-        "check-format",
-        "allow-leading-underscore",
-        "allow-pascal-case"
-      ]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    }
-  },
-  "rulesDirectory": [
-    "codelyzer",
-    "node_modules/tslint-origin-ordered-imports-rule/dist",
-    "node_modules/tslint-rxjs-subject-restrictions-rule/dist",
-    "node_modules/tslint-consistent-codestyle/rules"
-  ]
-}