feat(scully runtime config): user forRoot to pass config to Scully (#271)

* feat(Scully runtime config): user forRoot to pass config to Scully
The transfer-state service now only gets activated when the config using forRoot says so.

* fix(scullyconfig.ts): turn default of useTranferState to `true` to prevent breaking change
This is a better default as it's not breaking anymore, but still enables people to opt-out

Author: SanderElias

projects/sampleBlog/src/app/app.module.ts

@@ -7,7 +7,12 @@ import {AppComponent} from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, HttpClientModule, AppRoutingModule, ScullyLibModule],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    AppRoutingModule,
+    ScullyLibModule.forRoot({useTranferState: true}),
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/scullyio/ng-lib/src/lib/config/scully-config.ts

@@ -0,0 +1,13 @@
+import {InjectionToken} from '@angular/core';
+
+export interface ScullyLibConfig {
+  useTranferState: boolean;
+}
+
+export const ScullyDefaultSettings: ScullyLibConfig = {
+  useTranferState: true,
+};
+
+export const SCULLY_LIB_CONFIG = new InjectionToken<ScullyLibConfig>('scullyLibConfig', {
+  factory: () => ScullyDefaultSettings,
+});

projects/scullyio/ng-lib/src/lib/idleMonitor/idle-monitor.service.ts

@@ -1,8 +1,10 @@
-import {Injectable, NgZone} from '@angular/core';
+import {Inject, Injectable, NgZone} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {BehaviorSubject} from 'rxjs';
 import {filter, pluck, take, tap} from 'rxjs/operators';
+import {ScullyLibConfig, SCULLY_LIB_CONFIG} from '../config/scully-config';
 import {TransferStateService} from '../transfer-state/transfer-state.service';
+import {isScullyRunning} from '../utils/isScully';
 
 // tslint:disable-next-line: no-any
 // tslint:disable: no-string-literal
@@ -27,8 +29,13 @@ export class IdleMonitorService {
   private appReady = new Event('AngularReady', {bubbles: true, cancelable: false});
   private appTimeout = new Event('AngularTimeout', {bubbles: true, cancelable: false});
 
-  constructor(private zone: NgZone, private router: Router, private tss: TransferStateService) {
-    if (window) {
+  constructor(
+    private zone: NgZone,
+    private router: Router,
+    @Inject(SCULLY_LIB_CONFIG) conf: ScullyLibConfig,
+    tss: TransferStateService
+  ) {
+    if (window && isScullyRunning()) {
       window.dispatchEvent(this.initApp);
       this.router.events
         .pipe(
@@ -37,6 +44,10 @@ export class IdleMonitorService {
         )
         .subscribe();
     }
+    if (conf && conf.useTranferState) {
+      /** don't start monitoring if people don't use the transferState */
+      tss.startMonitoring();
+    }
   }
 
   public async init() {

projects/scullyio/ng-lib/src/lib/scully-lib.module.ts

@@ -1,4 +1,5 @@
-import {NgModule} from '@angular/core';
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {ScullyDefaultSettings, ScullyLibConfig, SCULLY_LIB_CONFIG} from './config/scully-config';
 import {IdleMonitorService} from './idleMonitor/idle-monitor.service';
 import {ScullyContentModule} from './scully-content/scully-content.module';
 
@@ -14,5 +15,11 @@ export class ScullyLibModule {
    * there will be only 1 instance in our app.
    * We don't need forRoot, as we are not configuring anything in here.
    */
+  static forRoot(config: ScullyLibConfig = ScullyDefaultSettings): ModuleWithProviders {
+    return {
+      ngModule: ScullyLibModule,
+      providers: [{provide: SCULLY_LIB_CONFIG, useValue: config}],
+    };
+  }
   constructor(private idle: IdleMonitorService) {}
 }

projects/scullyio/ng-lib/src/lib/transfer-state/transfer-state.service.ts

@@ -27,7 +27,9 @@ export class TransferStateService {
   private stateBS = new BehaviorSubject<State>({});
   private state$ = this.stateBS.pipe(filter(state => state !== undefined));
 
-  constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {
+  constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {}
+
+  startMonitoring() {
     this.setupEnvForTransferState();
     this.setupNavStartDataFetching();
   }
@@ -50,22 +52,10 @@ export class TransferStateService {
   /**
    * Getstate will return an observable that fires once and completes.
    * It does so right after the navigation for the page has finished.
+   * please note, this works SYNC on initial route, preventing a flash of content.
    * @param name The name of the state to
    */
   getState<T>(name: string): Observable<T> {
-    /**
-     * We need the initial state only when the app is booting.
-     * In this case, the router doesn't fire an event.
-     * As the boot process is SYNC, putting in anything async will cause flicker in the view.
-     * we can't use the subject in this case, because it will fire the
-     * data sync before the component is ready.
-     */
-    // if (this.initial) {
-    //   this.initial = false;
-    //   // this.stateBS.next(this.state);
-    //   return of(this.state[name]);
-    // }
-    /** once booted, the router will make sure this event fires after navigation */
     return this.state$.pipe(pluck(name));
   }
 
@@ -92,6 +82,7 @@ export class TransferStateService {
         filter(e => e instanceof NavigationStart),
         switchMap((e: NavigationStart) => {
           if (this.initialUrl === e.url) {
+            /** don't kick off on initial load to prevent flicker */
             this.initialUrl = '__done__with__Initial__navigation__';
             return NEVER;
           }
@@ -113,7 +104,7 @@ export class TransferStateService {
             }),
           ]);
         }),
-        /** parse out the relevant piece off text, and conver to json */
+        /** parse out the relevant piece off text, and convert to json */
         map(([e, html]: [any, string]) => {
           try {
             const newStateStr = html.split(SCULLY_STATE_START)[1].split(SCULLY_STATE_END)[0];