Update Angular 12 (#310)

jfcere · May 16, 2021 · bcc0d10 · bcc0d10
1 parent 4d53234
commit bcc0d10
Show file tree

Hide file tree

Showing 45 changed files with 4,406 additions and 4,823 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -33,17 +33,21 @@ jobs:
       - run:
           name: Push coverage artifacts
           command: yarn coveralls
+      # Type check the source code
+      - run:
+          name: Type-Check
+          command: yarn type-check:lib
       # Lint the source code
       - run:
           name: Lint
           command: yarn lint:ci
       - store_artifacts:
-          path: tslint.xml
+          path: eslint.xml
           prefix: lint
       # Build the source code
       - run:
           name: Build
-          command: yarn build:lib --prod
+          command: yarn build:lib
   deploy:
     docker:
       - image: circleci/node:12-browsers

diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,92 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "settings": {
+        "import/resolver": {
+          "typescript": {}
+        }
+      },
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/no-output-native": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "comma-dangle": [
+          "error",
+          "always-multiline"
+        ],
+        "import/order": ["error", {
+          "alphabetize": {
+            "order": "asc",
+            "caseInsensitive": true
+          },
+          "pathGroups": [
+            {
+              "pattern": "@*/**",
+              "group": "parent"
+            },
+            {
+              "pattern": "ngx-markdown",
+              "group": "external"
+            }
+          ]
+        }],
+        "sort-imports": ["error", {
+          "ignoreCase": true,
+          "ignoreDeclarationSort": true
+        }],
+        "object-shorthand": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,6 @@
 
 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea
@@ -39,7 +38,7 @@ speed-measure-plugin*.json
 /typings
 package-lock.json
 test-results.xml
-tslint.xml
+eslint.xml
 *.log
 *.tar
 *.tgz

diff --git a/angular.json b/angular.json
@@ -13,7 +13,7 @@
           "strict": true
         },
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
@@ -25,7 +25,6 @@
             "main": "demo/src/main.ts",
             "polyfills": "demo/src/polyfills.ts",
             "tsConfig": "demo/tsconfig.app.json",
-            "aot": true,
             "assets": [
               "demo/src/favicon.ico",
               "demo/src/assets",
@@ -67,19 +66,6 @@
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "demo/src/environments/environment.ts",
-                  "with": "demo/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -91,29 +77,45 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "demo/src/environments/environment.ts",
+                  "with": "demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "demo:build"
-          },
           "configurations": {
             "production": {
               "browserTarget": "demo:build:production"
+            },
+            "development": {
+              "browserTarget": "demo:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "demo/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "eslintConfig": "demo/.eslintrc.json",
+            "lintFilePatterns": [
+              "demo/**/*.ts",
+              "demo/**/*.html"
             ]
           }
         }
@@ -128,14 +130,17 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "lib/tsconfig.lib.json",
             "project": "lib/ng-package.json"
           },
           "configurations": {
             "production": {
               "tsConfig": "lib/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "lib/tsconfig.lib.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -146,19 +151,17 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "lib/tsconfig.lib.json",
-              "lib/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "eslintConfig": "lib/.eslintrc.json",
+            "lintFilePatterns": [
+              "lib/**/*.ts",
+              "lib/**/*.html"
             ]
           }
         }
       }
     }
   },
   "defaultProject": "demo"
-}
+}
diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json
@@ -0,0 +1,55 @@
+{
+  "extends": "../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "demo/tsconfig.app.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/no-output-native": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unused-vars": "error",
+        "@typescript-eslint/no-var-requires": "off",
+        "comma-dangle": [
+          "error",
+          "always-multiline"
+        ],
+        "import/order": "error",
+        "object-shorthand": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -4,8 +4,8 @@ <h1>ngx-markdown</h1>
     <span fxFlex></span>
     <button mat-icon-button (click)="toggleTheme()">
       <mat-icon>
-        <img [hidden]="theme == 'light'" src="assets/icon-light-on.svg">
-        <img [hidden]="theme == 'dark'" src="assets/icon-light-off.svg">
+        <img [hidden]="theme === 'light'" src="assets/icon-light-on.svg">
+        <img [hidden]="theme === 'dark'" src="assets/icon-light-off.svg">
       </mat-icon>
     </button>
     <a mat-icon-button href="https://github.com/jfcere/ngx-markdown">

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -20,7 +20,7 @@ export class AppComponent implements OnInit {
   theme = 'light';
 
   @ViewChild('tabHeader', { read: ElementRef, static: true })
-  tabHeader: ElementRef;
+  tabHeader: ElementRef | undefined;
 
   @HostListener('document:click', ['$event'])
   onDocumentClick(event: Event): void {
@@ -29,6 +29,9 @@ export class AppComponent implements OnInit {
 
   @HostListener('window:scroll')
   onWindowScroll(): void {
+    if (this.tabHeader == null) {
+      return;
+    }
     const tabHeader = this.tabHeader.nativeElement as HTMLElement;
     const tabHeaderOffset = Math.ceil(tabHeader.offsetTop);
     const windowOffset = Math.ceil(window.pageYOffset);
@@ -45,10 +48,11 @@ export class AppComponent implements OnInit {
     @Inject(DOCUMENT) private document: Document,
     private anchorService: AnchorService,
     private router: Router,
-  ) { }
+  ) {
+    this.routes = this.router.config.filter(route => route.data && route.data.label);
+  }
 
   ngOnInit(): void {
-    this.routes = this.router.config.filter(route => route.data && route.data.label);
     this.setTheme(localStorage.getItem('theme') || 'light');
   }
 
@@ -70,7 +74,7 @@ export class AppComponent implements OnInit {
   getRouteAnimation(outlet: RouterOutlet): string {
     return outlet
       && outlet.activatedRouteData
-      && outlet.activatedRouteData.label;
+      && outlet.activatedRouteData.label as string;
   }
 
   toggleTheme(): void {

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -18,7 +18,7 @@ export function markedOptionsFactory(anchorService: AnchorService): MarkedOption
 
   // fix `href` for absolute link with fragments so that _copy-paste_ urls are correct
   renderer.link = (href: string, title: string, text: string) => {
-    return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text);
+    return MarkedRenderer.prototype.link.call(renderer, anchorService.normalizeExternalUrl(href), title, text) as string;
   };
 
   return { renderer };