Merge pull request #192 from TAMULib/sprint9-staging-config-improvement

Fetch config before bootstrap

angular.json

@@ -37,6 +37,9 @@
               {
                 "input": "node_modules/document-register-element/build/document-register-element.js"
               }
+            ],
+            "allowedCommonJsDependencies": [
+              "css-element-queries"
             ]
           },
           "configurations": {

package.json

@@ -50,28 +50,28 @@
     "test:ci": "npm run test:coverage && npm run test:audit"
   },
   "dependencies": {
-    "@angular/animations": "^10.0.7",
-    "@angular/common": "^10.0.7",
-    "@angular/compiler": "^10.0.7",
-    "@angular/core": "^10.0.7",
-    "@angular/elements": "^10.0.7",
-    "@angular/forms": "^10.0.7",
-    "@angular/localize": "^10.0.7",
-    "@angular/platform-browser": "^10.0.7",
-    "@angular/platform-browser-dynamic": "^10.0.7",
-    "@angular/router": "^10.0.7",
+    "@angular/animations": "^10.0.9",
+    "@angular/common": "^10.0.9",
+    "@angular/compiler": "^10.0.9",
+    "@angular/core": "^10.0.9",
+    "@angular/elements": "^10.0.9",
+    "@angular/forms": "^10.0.9",
+    "@angular/localize": "^10.0.9",
+    "@angular/platform-browser": "^10.0.9",
+    "@angular/platform-browser-dynamic": "^10.0.9",
+    "@angular/router": "^10.0.9",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@types/json5": "0.0.30",
     "dotenv-override": "^5.0.1",
     "dotenv-override-true": "^6.2.1",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
     "classlist.js": "^1.1.20150312",
     "css-element-queries": "^1.2.3",
-    "document-register-element": "^1.14.3",
+    "document-register-element": "^1.14.5",
     "ie11-custom-properties": "^4.1.0",
     "json5": "^2.1.3",
     "rxjs": "~6.6.2",
-    "tslib": "^2.0.0",
+    "tslib": "^2.0.1",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.3"
   },
@@ -80,10 +80,10 @@
     "@angular-devkit/build-ng-packagr": "~0.1000.5",
     "@angular-devkit/schematics": "^10.0.5",
     "@angular/cli": "^10.0.5",
-    "@angular/compiler-cli": "^10.0.7",
-    "@angular/language-service": "^10.0.7",
+    "@angular/compiler-cli": "^10.0.9",
+    "@angular/language-service": "^10.0.9",
     "@compodoc/compodoc": "^1.1.11",
-    "@lhci/cli": "^0.4.3",
+    "@lhci/cli": "^0.4.4",
     "@pickra/copy-code-block": "^1.2.0",
     "@types/jasmine": "~3.5.12",
     "@types/jasminewd2": "~2.0.8",
@@ -98,14 +98,14 @@
     "glob": "^7.1.6",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.2",
-    "jsdom": "^16.3.0",
+    "jsdom": "^16.4.0",
     "karma": "~5.1.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~3.3.1",
+    "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "lighthouse": "^6.1.1",
-    "lighthouse-badges": "^1.0.32",
+    "lighthouse": "^6.2.0",
+    "lighthouse-badges": "^1.0.33",
     "ng-packagr": "^10.0.3",
     "protractor": "~7.0.0",
     "rimraf": "^3.0.2",

projects/wvr-elements/src/lib/core/icon.service.spec.ts

@@ -1,7 +1,8 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { APP_CONFIG } from '../shared/config/app-config';
+import { testAppConfig } from '../shared/config/test-app-config';
 import { IconService } from './icon.service';
-import { APP_CONFIG } from './app-config';
 
 describe('IconService', () => {
   let service: IconService;
@@ -10,10 +11,8 @@ describe('IconService', () => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       providers: [{
-        provide: APP_CONFIG, useValue: {
-          baseUrl: 'http://localhost:4200',
-          assetUrl: 'http://localhost:4200/assets'
-        }
+        provide: APP_CONFIG,
+        useValue: testAppConfig
       }]
     });
     service = TestBed.inject(IconService);

projects/wvr-elements/src/lib/core/icon.service.ts

@@ -2,22 +2,26 @@ import { HttpClient } from '@angular/common/http';
 import { Inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { share } from 'rxjs/operators';
+import { AppConfig, APP_CONFIG } from '../shared/config/app-config';
 import { Icon } from '../wvr-icon/icon';
 import { IconSet } from '../wvr-icon/icon-set';
-import { AppConfig, APP_CONFIG } from './app-config';
 
 @Injectable({
   providedIn: 'root'
 })
 export class IconService {
 
-  iconRegister: Map<string, IconSet> = new Map<string, IconSet>();
+  private readonly _iconRegister: Map<string, IconSet> = new Map<string, IconSet>();
+
+  constructor(
+    private readonly http: HttpClient,
+    @Inject(APP_CONFIG) private readonly appConfig: AppConfig
+  ) {
 
-  constructor(private http: HttpClient, @Inject(APP_CONFIG) private appConfig: AppConfig) {
   }
 
   registerIcons(icons: IconSet): void {
-    this.iconRegister.set(icons.name, icons);
+    this._iconRegister.set(icons.name, icons);
   }
 
   getIcon(set: string, name: string): Observable<string> {
@@ -26,22 +30,16 @@ export class IconService {
     return this.getOrSetIcon(iSet, name).svg;
   }
 
-  private fetchIcon(set: IconSet, name: string): Observable<string> {
-
-    return this.http.get(`${this.appConfig.assetsUrl}/icons/${set.name}/${name}.svg`, { responseType: 'text' })
-      .pipe(share());
-  }
-
   private getOrSetIconSet(set: string): IconSet {
-    let iSet = this.iconRegister.get(set);
+    let iSet = this._iconRegister.get(set);
     if (iSet) {
       return iSet;
     }
     iSet = {
       name: set,
       icons: []
     };
-    this.iconRegister.set(set, iSet);
+    this._iconRegister.set(set, iSet);
 
     return iSet;
   }
@@ -61,4 +59,10 @@ export class IconService {
     return icon;
   }
 
+  private fetchIcon(set: IconSet, name: string): Observable<string> {
+
+    return this.http.get(`${this.appConfig.assetsUrl}/icons/${set.name}/${name}.svg`, { responseType: 'text' })
+      .pipe(share());
+  }
+
 }

projects/wvr-elements/src/lib/core/wvr-animation.service.ts

@@ -1,7 +1,7 @@
 import { animation, AnimationBuilder, AnimationMetadata, AnimationPlayer, AnimationReferenceMetadata, useAnimation } from '@angular/animations';
 import { Injectable } from '@angular/core';
-import { wvrAnimationInitialization, wvrAnimations } from '../shared/animation/wvr-animations';
 import { wvrAnimationDefaults } from '../shared/animation/wvr-animation-defaults';
+import { wvrAnimationInitialization, wvrAnimations } from '../shared/animation/wvr-animations';
 import { WvrBaseComponent } from '../shared/wvr-base.component';
 
 @Injectable({
@@ -10,9 +10,9 @@ import { WvrBaseComponent } from '../shared/wvr-base.component';
 })
 export class WvrAnimationService {
 
-  private recieversRegistry = new Map<string, Array<WvrBaseComponent>>();
+  private readonly recieversRegistry = new Map<string, Array<WvrBaseComponent>>();
 
-  private animationStates = new Map<number, Map<string, boolean>>();
+  private readonly animationStates = new Map<number, Map<string, boolean>>();
 
   constructor(private readonly builder: AnimationBuilder) { }
 
@@ -35,7 +35,9 @@ export class WvrAnimationService {
   triggerAnimationReciever(recieverName: string): void {
     const recievers = this.recieversRegistry.get(recieverName);
     if (recievers) {
-      recievers.forEach(r => r.triggerAnimations('animationTrigger'));
+      recievers.forEach(r => {
+        r.triggerAnimations('animationTrigger');
+      });
     }
   }
 
@@ -45,9 +47,7 @@ export class WvrAnimationService {
         const animConf = animationConfig[animName];
         const initializationMethod = wvrAnimationInitialization[animName];
         if (initializationMethod && animationRootElem) {
-          const from = animConf.from ?
-                      animConf.from :
-                      wvrAnimationDefaults[animName].from;
+          const from = animConf.from ? animConf.from : wvrAnimationDefaults[animName].from;
           initializationMethod(this.animationStates.get(stateId), from, animationRootElem.nativeElement);
         }
       });
@@ -56,19 +56,18 @@ export class WvrAnimationService {
   playAnimation(stateId: number, animationName: string, animationConfig: {}, animationRoot: HTMLElement): AnimationPlayer {
 
     const timing = animationConfig[animationName] ?
-                   animationConfig[animationName].timing :
-                   wvrAnimationDefaults[animationName].timing;
+      animationConfig[animationName].timing :
+      wvrAnimationDefaults[animationName].timing;
     const to = animationConfig[animationName] ?
-                   animationConfig[animationName].to :
-                   wvrAnimationDefaults[animationName].to;
+      animationConfig[animationName].to :
+      wvrAnimationDefaults[animationName].to;
     const from = animationConfig[animationName] ?
-                   animationConfig[animationName].from :
-                   wvrAnimationDefaults[animationName].from;
+      animationConfig[animationName].from :
+      wvrAnimationDefaults[animationName].from;
 
     const a = this.selectAnimation(stateId, animationName, timing, to, from, animationRoot);
     if (a) {
-      const animationFactory = this.builder
-      .build(a);
+      const animationFactory = this.builder.build(a);
       const player: AnimationPlayer = animationFactory.create(animationRoot);
       player.play();
 

projects/wvr-elements/src/lib/shared/config/app-config.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+
+interface AppConfig {
+  baseUrl: string;
+  assetsUrl?: string;
+}
+
+const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
+
+export {
+  AppConfig,
+  APP_CONFIG
+};

projects/wvr-elements/src/lib/shared/config/index.ts

@@ -0,0 +1,2 @@
+export { AppConfig, APP_CONFIG } from './app-config';
+export { testAppConfig } from './test-app-config';

projects/wvr-elements/src/lib/shared/config/test-app-config.ts

@@ -0,0 +1,6 @@
+import { AppConfig } from './app-config';
+
+export const testAppConfig: AppConfig = {
+  baseUrl: 'http://localhost:4200',
+  assetsUrl: 'http://localhost:4200/assets'
+};

projects/wvr-elements/src/lib/shared/utility/bootstrap.utility.ts

@@ -0,0 +1,27 @@
+import { Type } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppConfig, APP_CONFIG } from '../config';
+
+const obtainConfigPath = (): string => {
+  const componentScript = document.getElementsByTagName('script');
+  const componentScriptSrc = componentScript[componentScript.length - 1].src;
+  const componentScriptSrcPathParts = componentScriptSrc.split('/');
+  componentScriptSrcPathParts.pop();
+  const configBasePath = componentScriptSrcPathParts.join('/');
+
+  return `${configBasePath}/config.json`;
+};
+
+const weaverBootstrap = (module: Type<unknown>) => () => fetch(obtainConfigPath())
+  .then((response: Response) => response.json())
+  .then((appConfig: AppConfig) => platformBrowserDynamic([{
+    provide: APP_CONFIG,
+    useValue: appConfig
+  }])
+    .bootstrapModule(module)
+    .catch((err: any) => { console.error(err); }));
+
+export {
+  obtainConfigPath,
+  weaverBootstrap
+};

projects/wvr-elements/src/lib/shared/utility/index.ts

@@ -0,0 +1,2 @@
+export { obtainConfigPath, weaverBootstrap } from './bootstrap.utility';
+

projects/wvr-elements/src/lib/shared/wvr-base.component.ts

@@ -105,6 +105,6 @@ export abstract class WvrBaseComponent implements AfterContentInit, OnInit {
     this.triggerAnimations($event.type);
   }
 
-  private checkScreenSize = () => document.body.offsetWidth < 767;
+  private readonly checkScreenSize = () => document.body.offsetWidth < 767;
 
 }

projects/wvr-elements/src/lib/wvr-dropdown/wvr-dropdown.component.html

@@ -34,4 +34,4 @@
       <ng-content select="wvr-dropdown-menu"></ng-content>
     </div>
   </div>
-</div>
+</div>