fix(lib): scully-content-component didn't update links in all cases (#417)

* fix(lib): scully-conent-component didn't update links in all cases

fiex the case where links wheren't updated properly in content pages, and there was an extra load of
an index.html on first visit

* fix(lib): scullycontent

don't load index on intial page load

* fix(lib): move back to init

* test(snapshots): update snapshot to reflect new situation

Co-authored-by: Jorge Cano <jorgeucano@gmail.com>

Author: SanderElias

projects/scullyio/ng-lib/src/lib/scully-content/scully-content.component.ts

@@ -24,6 +24,8 @@ declare global {
 /** this is needed, because otherwise the CLI borks while building */
 const scullyBegin = '<!--scullyContent-begin-->';
 const scullyEnd = '<!--scullyContent-end-->';
+const dropEndingSlash = (str: string) => (str.endsWith('/') ? str.slice(0, -1) : str);
+
 @Component({
   // tslint:disable-next-line: component-selector
   selector: 'scully-content',
@@ -42,7 +44,7 @@ const scullyEnd = '<!--scullyContent-end-->';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: true,
 })
-export class ScullyContentComponent implements OnInit, OnDestroy {
+export class ScullyContentComponent implements OnDestroy, OnInit {
   elm = this.elmRef.nativeElement as HTMLElement;
   /** placeholder */
   lastHandled: string;
@@ -51,16 +53,18 @@ export class ScullyContentComponent implements OnInit, OnDestroy {
   /** monitor the router, so we can update while navigating in the same 'page' see #311 */
   routeUpdates$ = this.router.events.pipe(
     filter(ev => ev instanceof NavigationEnd),
+    /** don't replace if we are already there */
+    filter((ev: NavigationEnd) => this.lastHandled && !this.lastHandled.endsWith(ev.urlAfterRedirects)),
     tap(r => this.replaceContent())
   );
 
   routeSub = this.routeUpdates$.subscribe();
 
-  constructor(private elmRef: ElementRef, private srs: ScullyRoutesService, private router: Router) {}
+  constructor(private elmRef: ElementRef, private srs: ScullyRoutesService, private router: Router) {
+    /** do this from constructor, so it runs ASAP */
+  }
 
-  ngOnInit() {
-    // /** make sure the idle-check is loaded. */
-    // this.idle.init();
+  ngOnInit(): void {
     if (this.elm) {
       /** this will only fire in a browser environment */
       this.handlePage();
@@ -72,7 +76,7 @@ export class ScullyContentComponent implements OnInit, OnDestroy {
    * Will fetch the content from sibling links with xmlHTTPrequest
    */
   private async handlePage() {
-    const curPage = location.href;
+    const curPage = dropEndingSlash(location.href);
     if (this.lastHandled === curPage) {
       /**
        * Due to the fix we needed for #311
@@ -129,8 +133,9 @@ export class ScullyContentComponent implements OnInit, OnDestroy {
     parent.insertBefore(begin, this.elm);
     parent.insertBefore(template.content, this.elm);
     parent.insertBefore(end, this.elm);
-    /** upgrade all hrefs to simulated routelinks  */
-    document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this));
+    /** upgrade all hrefs to simulated routelinks (in next microtask) */
+    setTimeout(() => document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this)), 10);
+    // document.querySelectorAll('[href]').forEach(this.upgradeToRoutelink.bind(this));
   }
 
   /**
@@ -141,8 +146,9 @@ export class ScullyContentComponent implements OnInit, OnDestroy {
    */
   async upgradeToRoutelink(elm: HTMLElement) {
     const routes = await this.routes;
-    const lnk = elm.getAttribute('href').toLowerCase();
-    const route = routes.find(r => r.route.toLowerCase() === lnk);
+    const lnk = dropEndingSlash(elm.getAttribute('href').toLowerCase());
+    const route = routes.find(r => dropEndingSlash(r.route.toLowerCase()) === lnk);
+
     /** only upgrade routes known by scully. */
     if (lnk && route) {
       elm.onclick = async (ev: MouseEvent) => {
@@ -175,6 +181,7 @@ export class ScullyContentComponent implements OnInit, OnDestroy {
      * the new content. handlePage() takes care of that.
      */
     /** delete the content, as it is now out of date! */
+
     window.scullyContent = undefined;
     const parent = this.elm.parentElement;
     let cur = findComments(parent, 'scullyContent-begin')[0] as ChildNode;

src/__tests__/__snapshots__/blog-index.spec.ts.snap

@@ -34,6 +34,25 @@ console.log('yah');</code></pre>
 <hr =\\"\\">
 <h4 =\\"\\">End of blog content</h4>
 
+<span =\\"\\">
+  <a =\\"\\" href=\\"/blog/2014/2/12/asdf/\\">/blog/2014/2/12/asdf</a>
+  <br =\\"\\">
+</span><span =\\"\\">
+  <a =\\"\\" href=\\"/blog/page-1/\\">/blog/page-1</a>
+  <br =\\"\\">
+</span><span =\\"\\">
+  <a =\\"\\" href=\\"/blog/page-3/\\">/blog/page-3</a>
+  <br =\\"\\">
+</span><span =\\"\\">
+  <a =\\"\\" href=\\"/blog/page-4/\\">/blog/page-4</a>
+  <br =\\"\\">
+</span><span =\\"\\">
+  <a =\\"\\" href=\\"/blog/page-5/\\">/blog/page-5</a>
+  <br =\\"\\">
+</span><span =\\"\\">
+  <a =\\"\\" href=\\"/blog/test/testing/\\">/blog/test/testing</a>
+  <br =\\"\\">
+</span><!---->
 </app-blog><!----></main><footer =\\"\\"><h3 =\\"\\">Made with ❤️ <strong =\\"\\">@HeroDevs</strong></h3></footer></app-root>
   <script id=\\"ScullyIO-transfer-state\\"></script><script src=\\"runtime-es2015.js\\" type=\\"module\\"></script><script src=\\"runtime-es5.js\\" nomodule=\\"\\" defer=\\"\\"></script><script src=\\"polyfills-es5.js\\" nomodule=\\"\\" defer=\\"\\"></script><script src=\\"polyfills-es2015.js\\" type=\\"module\\"></script><script src=\\"main-es2015.js\\" type=\\"module\\"></script><script src=\\"main-es5.js\\" nomodule=\\"\\" defer=\\"\\"></script>