Angular 10 and Clarity 4 (hobbyfarm#76)

* angular 9 to 10 upgrade * clarity 3 -> 4 * package-lock * package-lock * fixed CTR rendering * fixed terminal rendering because of missing elvis * upgraded auth0/angular-jwt to 5.x * allow xterm commonjs dep * codelyzer and clarity core bumps
svalabs · Dec 14, 2020 · a6ce705 · a6ce705
1 parent 2de7ca8
commit a6ce705
Show file tree

Hide file tree

Showing 10 changed files with 5,506 additions and 2,122 deletions.
diff --git a/browserslist → .browserslistrc b/browserslist → .browserslistrc
diff --git a/angular.json b/angular.json
@@ -34,7 +34,9 @@
               "node_modules/xterm/dist/xterm.js",
               "node_modules/marked/lib/marked.js"
             ],
-            "es5BrowserSupport": true
+            "allowedCommonJsDependencies": [
+              "xterm"
+            ]
           },
           "configurations": {
             "local": {

diff --git a/e2e/tsconfig.e2e.json b/e2e/tsconfig.e2e.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,47 +14,51 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.14",
-    "@angular/common": "^8.2.14",
-    "@angular/compiler": "^8.2.14",
-    "@angular/core": "^8.2.14",
-    "@angular/forms": "^8.2.14",
-    "@angular/platform-browser": "^8.2.14",
-    "@angular/platform-browser-dynamic": "^8.2.14",
-    "@angular/router": "^8.2.14",
-    "@auth0/angular-jwt": "^3.0.1",
-    "@clr/angular": "^2.3.5",
-    "@clr/icons": "^2.3.5",
-    "@clr/ui": "^2.3.5",
-    "@webcomponents/custom-elements": "^1.3.2",
+    "@angular/animations": "^10.2.3",
+    "@angular/common": "^10.2.3",
+    "@angular/compiler": "^10.2.3",
+    "@angular/core": "^10.2.3",
+    "@angular/forms": "^10.2.3",
+    "@angular/platform-browser": "^10.2.3",
+    "@angular/platform-browser-dynamic": "^10.2.3",
+    "@angular/router": "^10.2.3",
+    "@auth0/angular-jwt": "^5.0.0",
+    "@clr/angular": "^4.0.6",
+    "@clr/core": "^4.0.6",
+    "@clr/icons": "^4.0.6",
+    "@clr/ui": "^4.0.6",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@webcomponents/custom-elements": "^1.0.0",
     "core-js": "^2.6.11",
     "guid-typescript": "^1.0.9",
     "ng-dynamic": "^3.0.2",
-    "ngx-markdown": "^8.2.1",
-    "rxjs": "^6.5.4",
-    "tslib": "^1.10.0",
+    "ngx-markdown": "^9.1.1",
+    "rxjs": "^6.6.3",
+    "tslib": "^2.0.0",
     "xterm": "^3.14.5",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.22",
-    "@angular/cli": "^8.3.22",
-    "@angular/compiler-cli": "^8.2.14",
-    "@angular/language-service": "^8.2.14",
-    "@types/jasmine": "~2.8.8",
+    "@angular-devkit/build-angular": "~0.1002.0",
+    "@angular/cli": "^10.2.0",
+    "@angular/compiler-cli": "^10.2.3",
+    "@angular/language-service": "^10.2.3",
+    "@types/jasmine": "^2.8.17",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.2.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.2.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.0.6",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "fibers": "^4.0.3",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "node-sass": "^4.0.0",
+    "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "~3.5.3"
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.5"
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, APP_INITIALIZER } from '@angular/core';
+import { NgModule, APP_INITIALIZER, SecurityContext } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ClarityModule } from '@clr/angular';
@@ -47,10 +47,10 @@ const appInitializerFn = (appConfig: AppConfigService) => {
 export function jwtOptionsFactory() {
   return {
     tokenGetter: tokenGetter,
-    whitelistedDomains: [
+    allowedDomains: [
       environment.server.replace(/(^\w+:|^)\/\//, ''),
     ],
-    blacklistedRoutes: [
+    disallowedRoutes: [
       environment.server.replace(/(^\w+:|^)\/\//, '') + "/auth/authenticate"
     ],
     skipWhenExpired: true
@@ -80,7 +80,9 @@ export function jwtOptionsFactory() {
     ClarityModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    MarkdownModule.forRoot(),
+    MarkdownModule.forRoot({
+      sanitize: SecurityContext.NONE
+    }),
     DynamicHTMLModule.forRoot({
       components: [
         { component: CtrComponent, selector: 'ctr' },

diff --git a/src/app/dynamic-html/module.ts b/src/app/dynamic-html/module.ts
@@ -14,7 +14,6 @@ export class DynamicHTMLModule {
             providers: [
                 DynamicHTMLRenderer,
                 { provide: DynamicHTMLOptions, useValue: options },
-                { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: options.components, multi: true },
             ],
         };
     }

diff --git a/src/app/scenario/step.component.html b/src/app/scenario/step.component.html
@@ -75,7 +75,7 @@ <h4 class="card-title">{{ step.title | atob }}</h4>
                             <td><b>Shell Status:</b> {{ getShellStatus(v.key) }} </td>
                         </tr>
                     </table>
-                    <terminal [vmname]="v.key" [vmid]="v.value.vm_id" [endpoint]="getVm(v.value.vm_id).ws_endpoint"
+                    <terminal [vmname]="v.key" [vmid]="v.value.vm_id" [endpoint]="getVm(v.value.vm_id)?.ws_endpoint"
                         #term></terminal>
                 </clr-tab-content>
             </clr-tab>

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,7 +6,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "esnext",
+    "module": "es2020",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

diff --git a/tslint.json b/tslint.json
@@ -4,17 +4,32 @@
     "codelyzer"
   ],
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
     "array-type": false,
     "arrow-parens": false,
+    "arrow-return-shorthand": true,
     "deprecation": {
       "severity": "warn"
     },
+    "curly": true,
     "import-blacklist": [
       true,
       "rxjs/Rx"
     ],
     "interface-name": false,
+    "eofline": true,
     "max-classes-per-file": false,
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
     "max-line-length": [
       true,
       140
@@ -48,7 +63,6 @@
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
-    "no-use-before-declare": true,
     "no-var-requires": false,
     "object-literal-key-quotes": [
       true,
@@ -68,8 +82,57 @@
     "no-input-rename": true,
     "no-output-rename": true,
     "use-lifecycle-interface": true,
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
     "use-pipe-transform-interface": true,
+    "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"
+        }
+      ]
+    },
     "component-class-suffix": true,
-    "directive-class-suffix": true
+    "directive-class-suffix": true,
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    }
   }
 }