feat(lib): routesrService.getCurrent now listens to router

apps/sample-blog/src/app/slow/slow.component.ts

@@ -15,7 +15,7 @@ import { first } from 'rxjs/operators';
 export class SlowComponent {
   isGenerated = isScullyGenerated();
 
-  delay$ = this.http.get('http://localhost:8200/slow/4000');
+  delay$ = this.http.get('http://localhost:8200/slow/2000');
 
   constructor(private http: HttpClient) {
     this.delay$.pipe(first()).subscribe();

apps/sample-blog/src/app/static/static.component.html

@@ -1,4 +1,5 @@
-<h1>Available routes</h1>
+<!-- Gets the title from the scully.routes -->
+<h1>{{ title$ | async }}</h1>
 
 <a class="btn" [routerLink]="['/home', '']" *ngIf="!toplevelOnly || unPublished"
   >Top level routes only</a

apps/sample-blog/src/app/static/static.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { ScullyRoutesService } from '@scullyio/ng-lib';
+import { map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-static',
@@ -12,9 +14,16 @@ export class StaticComponent implements OnInit {
   unPublished = false;
   available$ = this.srs.available$;
   topLevel$ = this.srs.topLevel$;
+
+  title$ = this.srs.getCurrent().pipe(
+    tap(r => console.log('current route', r)),
+    map(r => r.title || ''),
+    tap(t => this.title.setTitle(t))
+  );
   constructor(
     private srs: ScullyRoutesService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private title: Title
   ) {}
 
   get routes() {

libs/ng-lib/src/lib/idleMonitor/idle-monitor.service.ts

@@ -29,11 +29,11 @@ declare global {
   }
 }
 
-if (window) {
-  window.addEventListener('AngularReady', ev => {
-    console.log('appReady fired', ev);
-  });
-}
+// if (window) {
+//   window.addEventListener('AngularReady', ev => {
+//     console.log('appReady fired', ev);
+//   });
+// }
 
 @Injectable({
   providedIn: 'root'
@@ -149,8 +149,13 @@ export class IdleMonitorService {
           }, 50);
           return;
         }
-        window.dispatchEvent(this.appReady);
-        this.setState('idle', true);
+        this.zone.run(() => {
+          /** run this inside the zone, and give the app 250Ms to wrap up, before scraping starts */
+          setTimeout(() => {
+            window.dispatchEvent(this.appReady);
+            this.setState('idle', true);
+          }, 250);
+        });
       };
       monitor();
     });
@@ -172,6 +177,6 @@ export class IdleMonitorService {
   }
 }
 
-function dropEndingSlash(str: string) {
+export function dropEndingSlash(str: string) {
   return str.endsWith('/') ? str.slice(0, -1) : str;
 }

libs/ng-lib/src/lib/route-service/scully-routes.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, of, ReplaySubject } from 'rxjs';
+import { Observable, of, ReplaySubject, merge } from 'rxjs';
 import {
   catchError,
   map,
@@ -8,6 +8,8 @@ import {
   filter
 } from 'rxjs/operators';
 import { fetchHttp } from '../utils/fetchHttp';
+import { Router, NavigationEnd, NavigationStart } from '@angular/router';
+import { basePathOnly } from '../utils/basePathOnly';
 
 export interface ScullyRoute {
   route: string;
@@ -25,6 +27,9 @@ export interface ScullyRoute {
 })
 export class ScullyRoutesService {
   private refresh = new ReplaySubject<void>(1);
+  /**
+   * An observable with all routes, published and unpublished alike
+   */
   allRoutes$: Observable<ScullyRoute[]> = this.refresh.pipe(
     switchMap(() => fetchHttp<ScullyRoute[]>('/assets/scully-routes.json')),
     catchError(() => {
@@ -38,6 +43,9 @@ export class ScullyRoutesService {
     map(this.cleanDups),
     shareReplay({ refCount: false, bufferSize: 1 })
   );
+  /**
+   * An observable with available routes (all published routes)
+   */
   available$ = this.allRoutes$.pipe(
     map(list =>
       list.filter(r =>
@@ -47,6 +55,9 @@ export class ScullyRoutesService {
     shareReplay({ refCount: false, bufferSize: 1 })
   );
 
+  /**
+   * an observable with all unpublished routes
+   */
   unPublished$ = this.allRoutes$.pipe(
     map(list =>
       list.filter(r =>
@@ -56,43 +67,61 @@ export class ScullyRoutesService {
     shareReplay({ refCount: false, bufferSize: 1 })
   );
 
+  /**
+   * An observable with the top-level off all published routes.
+   * (in an urls it would be `http://www.sample.org/__thisPart__/subroutes`)
+   */
   topLevel$: Observable<ScullyRoute[]> = this.available$.pipe(
     map(routes =>
       routes.filter((r: ScullyRoute) => !r.route.slice(1).includes('/'))
     ),
     shareReplay({ refCount: false, bufferSize: 1 })
   );
 
-  constructor() {
+  constructor(private router: Router) {
     /** kick off first cycle */
     this.reload();
   }
 
+  /**
+   * returns an observable that returns the route information for the
+   * route currently selected. subscribes to route-events to update when needed
+   */
   getCurrent(): Observable<ScullyRoute> {
     if (!location) {
       /** probably not in a browser, no current location available */
       return of();
     }
-    const curLocation = decodeURI(location.pathname).trim();
-    return this.available$.pipe(
-      map(list =>
-        list.find(
+    /** fire off at start, and when navigation is done. */
+    return merge(of(new NavigationEnd(0, '', '')), this.router.events).pipe(
+      filter(e => e instanceof NavigationEnd),
+      switchMap(() => this.available$),
+      map(list => {
+        const curLocation = basePathOnly(encodeURI(location.pathname).trim());
+        return list.find(
           r =>
-            curLocation === r.route.trim() ||
+            curLocation === basePathOnly(r.route.trim()) ||
             (r.slugs &&
               Array.isArray(r.slugs) &&
-              r.slugs.find(slug => curLocation.endsWith(slug.trim())))
-        )
-      )
+              r.slugs.find(slug =>
+                curLocation.endsWith(basePathOnly(slug.trim()))
+              ))
+        );
+      })
     );
   }
 
+  /**
+   * internal, as routes can have multiple slugs, and so occur multiple times
+   * this util function collapses all slugs back into 1 route.
+   */
   private cleanDups(routes: ScullyRoute[]) {
     const m = new Map<string, ScullyRoute>();
     routes.forEach(r => m.set(r.sourceFile || r.route, r));
     return [...m.values()];
   }
 
+  /** an utility that will force a reload of the `scully-routes.json` file */
   reload(): void {
     this.refresh.next();
   }

libs/plugins/from-data/src/lib/plugins-from-data.ts

@@ -1,12 +1,14 @@
 import { routeSplit, registerPlugin, HandledRoute } from '@scullyio/scully';
 
+export const extraData = 'extraData';
+
 /**
  * This plugin replaces the parameter with a counter from 0 to the numberOfPages
  * in the config.
  * @param route
  * @param options
  */
-export const dataRoutesPlugin = async (
+const dataRoutesPlugin = async (
   route,
   options
 ): Promise<Partial<HandledRoute>[]> => {

libs/scully/src/lib/systemPlugins/storeRoutes.ts

@@ -24,7 +24,7 @@ export async function storeRoutes(routes: HandledRoute[]) {
   }
   try {
     const jsonResult = JSON.stringify(
-      routes.map(r => ({ route: r.route || '/', ...r.data }))
+      routes.map(r => ({ route: r.route || '/', title: r['title'], ...r.data }))
     );
     const write = file => {
       createFolderFor(file);

tests/cypress/integration/getcurrent.spec.js

@@ -0,0 +1,19 @@
+/// <reference types="Cypress" />
+
+const { textSpanContainsTextSpan } = require('typescript');
+
+context('RoutesService tests', () => {
+  it('should start with toplevel', () => {
+    cy.visit('/home');
+    cy.get('main>app-static>h1').should(el =>
+      assert.isTrue(el.html() === 'Toplevel routes in application')
+    );
+  });
+
+  it('navigate to all', () => {
+    cy.get('main > app-static > a:nth-child(2)')
+      .click()
+      .get('main>app-static>h1')
+      .should(el => assert.isTrue(el.html() === 'All routes in application'));
+  });
+});

tests/cypress/integration/sampleBlog.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-context('check first integration test', () => {
+context('combined integration tests', () => {
   it('check if a users exist', () => {
     cy.visit('/home');
     cy.get('ul>li>a')
@@ -28,7 +28,7 @@ context('check first integration test', () => {
       onRequest: req => {
         cy.log('Call http done');
         expect(true).to.equal(false);
-      },
+      }
     });
     cy.visit('/user');
     cy.wait(3000);
@@ -37,15 +37,15 @@ context('check first integration test', () => {
   it('Check the list of users after navigation', () => {
     cy.visit('/home');
     cy.get('ul>li>a')
-      .contains('/user', {timeout: 1250})
+      .contains('/user', { timeout: 1250 })
       .click()
       .wait(500)
       .get('a')
-      .contains('Leanne', {timeout: 1250})
+      .contains('Leanne', { timeout: 1250 })
       .click()
       .wait(5)
       .get('p')
-      .contains('1', {timeout: 1250});
+      .contains('1', { timeout: 1250 });
   });
 
   it('Check of transferState exist in html', () => {
@@ -77,7 +77,9 @@ context('check first integration test', () => {
   });
 
   it('check link to have target_blank in blog page 2', () => {
-    cy.visit('/blog/___UNPUBLISHED___k5nhcflm_SJwD4Z0QDrIHg1PGHo2mrfLZE8sfUsPy/');
+    cy.visit(
+      '/blog/___UNPUBLISHED___k5nhcflm_SJwD4Z0QDrIHg1PGHo2mrfLZE8sfUsPy/'
+    );
 
     cy.get('a[target]').should('have.attr', 'target', '_blank');
   });
@@ -86,7 +88,7 @@ context('check first integration test', () => {
     cy.visit('/slow').reload();
 
     cy.get('app-slow>h1').contains('Scully Not Generated');
-    cy.wait(4100)
+    cy.wait(2100)
       .get('app-slow>h1')
       .contains('Scully Generated');
   });