fix(demo): improve ssr demo

push-based · Mar 18, 2024 · 5dc761a · 5dc761a
2 parents 7ccdb40 + 35775d1
commit 5dc761a
Show file tree

Hide file tree

Showing 16 changed files with 373 additions and 188 deletions.
diff --git a/packages/ngx-fast-icon-demo/project.json b/packages/ngx-fast-icon-demo/project.json
@@ -25,7 +25,9 @@
         ],
         "scripts": [],
         "server": "packages/ngx-fast-icon-demo/src/main.server.ts",
-        "prerender": true,
+        "prerender": {
+          "routesFile": "packages/ngx-fast-icon-demo/routes.txt"
+        },
         "ssr": {
           "entry": "packages/ngx-fast-icon-demo/server.ts"
         }

diff --git a/packages/ngx-fast-icon-demo/routes.txt b/packages/ngx-fast-icon-demo/routes.txt
@@ -1,31 +1,198 @@
-/
-/fast-svg
-/fast-svg?ls=on-screen&list=0
-/fast-svg?ls=on-screen&list=1
-/fast-svg?ls=off-screen&list=1
-/fast-svg?ls=distributed&list=1
-/material
-/material?ls=on-screen&list=0
-/material?ls=on-screen&list=1
-/material?ls=off-screen&list=1
-/material?ls=distributed&list=1
-/ionic
-/ionic?ls=on-screen&list=0
-/ionic?ls=on-screen&list=1
-/ionic?ls=off-screen&list=1
-/ionic?ls=distributed&list=1
-/font-awesome
-/font-awesome?ls=on-screen&list=0
-/font-awesome?ls=on-screen&list=1
-/font-awesome?ls=off-screen&list=1
-/font-awesome?ls=distributed&list=1
-/angular
-/angular?ls=on-screen&list=0
-/angular?ls=on-screen&list=1
-/angular?ls=off-screen&list=1
-/angular?ls=distributed&list=1
-/ant
-/ant?ls=on-screen&list=0
-/ant?ls=on-screen&list=1
-/ant?ls=off-screen&list=1
-/ant?ls=distributed&list=1
+/fast-svg/on-screen/0
+/fast-svg/on-screen/1
+/fast-svg/on-screen/2
+/fast-svg/on-screen/3
+/fast-svg/on-screen/4
+/fast-svg/on-screen/5
+/fast-svg/on-screen/6
+/fast-svg/on-screen/7
+/fast-svg/on-screen/8
+/fast-svg/on-screen/9
+/fast-svg/on-screen/10
+/fast-svg/off-screen/0
+/fast-svg/off-screen/1
+/fast-svg/off-screen/2
+/fast-svg/off-screen/3
+/fast-svg/off-screen/4
+/fast-svg/off-screen/5
+/fast-svg/off-screen/6
+/fast-svg/off-screen/7
+/fast-svg/off-screen/8
+/fast-svg/off-screen/9
+/fast-svg/off-screen/10
+/fast-svg/distributed/0
+/fast-svg/distributed/1
+/fast-svg/distributed/2
+/fast-svg/distributed/3
+/fast-svg/distributed/4
+/fast-svg/distributed/5
+/fast-svg/distributed/6
+/fast-svg/distributed/7
+/fast-svg/distributed/8
+/fast-svg/distributed/9
+/fast-svg/distributed/10
+/material/on-screen/0
+/material/on-screen/1
+/material/on-screen/2
+/material/on-screen/3
+/material/on-screen/4
+/material/on-screen/5
+/material/on-screen/6
+/material/on-screen/7
+/material/on-screen/8
+/material/on-screen/9
+/material/on-screen/10
+/material/off-screen/0
+/material/off-screen/1
+/material/off-screen/2
+/material/off-screen/3
+/material/off-screen/4
+/material/off-screen/5
+/material/off-screen/6
+/material/off-screen/7
+/material/off-screen/8
+/material/off-screen/9
+/material/off-screen/10
+/material/distributed/0
+/material/distributed/1
+/material/distributed/2
+/material/distributed/3
+/material/distributed/4
+/material/distributed/5
+/material/distributed/6
+/material/distributed/7
+/material/distributed/8
+/material/distributed/9
+/material/distributed/10
+/ionic/on-screen/0
+/ionic/on-screen/1
+/ionic/on-screen/2
+/ionic/on-screen/3
+/ionic/on-screen/4
+/ionic/on-screen/5
+/ionic/on-screen/6
+/ionic/on-screen/7
+/ionic/on-screen/8
+/ionic/on-screen/9
+/ionic/on-screen/10
+/ionic/off-screen/0
+/ionic/off-screen/1
+/ionic/off-screen/2
+/ionic/off-screen/3
+/ionic/off-screen/4
+/ionic/off-screen/5
+/ionic/off-screen/6
+/ionic/off-screen/7
+/ionic/off-screen/8
+/ionic/off-screen/9
+/ionic/off-screen/10
+/ionic/distributed/0
+/ionic/distributed/1
+/ionic/distributed/2
+/ionic/distributed/3
+/ionic/distributed/4
+/ionic/distributed/5
+/ionic/distributed/6
+/ionic/distributed/7
+/ionic/distributed/8
+/ionic/distributed/9
+/ionic/distributed/10
+/font-awesome/on-screen/0
+/font-awesome/on-screen/1
+/font-awesome/on-screen/2
+/font-awesome/on-screen/3
+/font-awesome/on-screen/4
+/font-awesome/on-screen/5
+/font-awesome/on-screen/6
+/font-awesome/on-screen/7
+/font-awesome/on-screen/8
+/font-awesome/on-screen/9
+/font-awesome/on-screen/10
+/font-awesome/off-screen/0
+/font-awesome/off-screen/1
+/font-awesome/off-screen/2
+/font-awesome/off-screen/3
+/font-awesome/off-screen/4
+/font-awesome/off-screen/5
+/font-awesome/off-screen/6
+/font-awesome/off-screen/7
+/font-awesome/off-screen/8
+/font-awesome/off-screen/9
+/font-awesome/off-screen/10
+/font-awesome/distributed/0
+/font-awesome/distributed/1
+/font-awesome/distributed/2
+/font-awesome/distributed/3
+/font-awesome/distributed/4
+/font-awesome/distributed/5
+/font-awesome/distributed/6
+/font-awesome/distributed/7
+/font-awesome/distributed/8
+/font-awesome/distributed/9
+/font-awesome/distributed/10
+/angular/on-screen/0
+/angular/on-screen/1
+/angular/on-screen/2
+/angular/on-screen/3
+/angular/on-screen/4
+/angular/on-screen/5
+/angular/on-screen/6
+/angular/on-screen/7
+/angular/on-screen/8
+/angular/on-screen/9
+/angular/on-screen/10
+/angular/off-screen/0
+/angular/off-screen/1
+/angular/off-screen/2
+/angular/off-screen/3
+/angular/off-screen/4
+/angular/off-screen/5
+/angular/off-screen/6
+/angular/off-screen/7
+/angular/off-screen/8
+/angular/off-screen/9
+/angular/off-screen/10
+/angular/distributed/0
+/angular/distributed/1
+/angular/distributed/2
+/angular/distributed/3
+/angular/distributed/4
+/angular/distributed/5
+/angular/distributed/6
+/angular/distributed/7
+/angular/distributed/8
+/angular/distributed/9
+/angular/distributed/10
+/ant/on-screen/0
+/ant/on-screen/1
+/ant/on-screen/2
+/ant/on-screen/3
+/ant/on-screen/4
+/ant/on-screen/5
+/ant/on-screen/6
+/ant/on-screen/7
+/ant/on-screen/8
+/ant/on-screen/9
+/ant/on-screen/10
+/ant/off-screen/0
+/ant/off-screen/1
+/ant/off-screen/2
+/ant/off-screen/3
+/ant/off-screen/4
+/ant/off-screen/5
+/ant/off-screen/6
+/ant/off-screen/7
+/ant/off-screen/8
+/ant/off-screen/9
+/ant/off-screen/10
+/ant/distributed/0
+/ant/distributed/1
+/ant/distributed/2
+/ant/distributed/3
+/ant/distributed/4
+/ant/distributed/5
+/ant/distributed/6
+/ant/distributed/7
+/ant/distributed/8
+/ant/distributed/9
+/ant/distributed/10
diff --git a/packages/ngx-fast-icon-demo/src/app/app.component.ts b/packages/ngx-fast-icon-demo/src/app/app.component.ts
@@ -1,7 +1,7 @@
-import {Component, inject, PLATFORM_ID} from '@angular/core';
+import { Component, inject, PLATFORM_ID } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
-import {filter, map, Observable, startWith} from 'rxjs';
+import { filter, map, Observable, startWith } from 'rxjs';
 import {MediaMatcher} from '@angular/cdk/layout';
 import {ShellComponent} from './misc/shell.component';
 import {AsyncPipe, isPlatformServer} from '@angular/common';
@@ -10,12 +10,7 @@ import {AsyncPipe, isPlatformServer} from '@angular/common';
   selector: 'ngx-fast-icon-root',
   standalone: true,
   template: `
-    <app-shell
-      [rootClass]='(rootClass$ | async) || ""'
-      [isMobile]='isMobile'
-      [links]='links'
-      [queryParams]='(queryParams$ | async) || {}'
-    >
+    <app-shell [rootClass]='(rootClass$ | async) || ""' [isMobile]='isMobile'>
       <router-outlet />
     </app-shell>
   `,
@@ -26,28 +21,17 @@ import {AsyncPipe, isPlatformServer} from '@angular/common';
   ]
 })
 export class AppComponent {
-  private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly _PLATFORM_ID = inject(PLATFORM_ID);
 
-  readonly queryParams$ = this.route.queryParams;
   readonly isMobile = inject(MediaMatcher).matchMedia('(max-width: 600px)').matches;
+
   private readonly navUrl$: Observable<string> = this.router.events.pipe(
     filter((e): e is NavigationEnd => e instanceof NavigationEnd),
     map((e) => e.urlAfterRedirects),
   )
   readonly rootClass$ = this.navUrl$.pipe(
     startWith(isPlatformServer(this._PLATFORM_ID) ? '' : window.location.pathname),
-    map((pathname) => pathname.split('?')[0].replace('/', ' ')),
+    map((pathname) => pathname.split('?')[0].split('/').filter(Boolean)),
   );
-
-  readonly links = [
-    'description',
-    'fast-svg',
-    'material',
-    'ionic',
-    'font-awesome',
-    'angular',
-    'ant',
-  ];
 }
diff --git a/packages/ngx-fast-icon-demo/src/app/app.config.ts b/packages/ngx-fast-icon-demo/src/app/app.config.ts
@@ -1,5 +1,10 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withRouterConfig } from '@angular/router';
+import {
+  provideRouter,
+  withComponentInputBinding,
+  withEnabledBlockingInitialNavigation,
+  withRouterConfig
+} from '@angular/router';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -15,7 +20,15 @@ export const appConfig: ApplicationConfig = {
     provideAnimations(),
     provideClientHydration(),
     provideHttpClient(withFetch()),
-    provideRouter(appRoutes, withRouterConfig({ urlUpdateStrategy: 'eager' })),
+    provideRouter(
+      appRoutes,
+      withRouterConfig({
+        urlUpdateStrategy: 'eager',
+        paramsInheritanceStrategy: 'always'
+      }),
+      withEnabledBlockingInitialNavigation(),
+      withComponentInputBinding()
+    ),
     provideAngularSvgIcon(),
     provideIonicAngular({}),
     provideFastSVG({

diff --git a/packages/ngx-fast-icon-demo/src/app/app.routes.ts b/packages/ngx-fast-icon-demo/src/app/app.routes.ts
@@ -1,37 +1,38 @@
 import { Route } from '@angular/router';
+import { BASE_ROUTE, DEMO_ROUTE } from './misc/constants';
 
 export const appRoutes: Route[] = [
   {
     path: '',
     pathMatch: 'full',
-    redirectTo: 'description'
+    redirectTo: BASE_ROUTE
   },
   {
-    path: 'description',
+    path: BASE_ROUTE,
     loadComponent: () => import('./misc/description.component').then((c) => c.DescriptionComponent)
   },
   {
-    path: 'angular',
+    path: `${DEMO_ROUTE.ANGULAR}/:layout/:count`,
     loadComponent: () => import('./comparison/angular.component').then((c) => c.AngularComponent)
   },
   {
-    path: 'material',
+    path: `${DEMO_ROUTE.MATERIAL}/:layout/:count`,
     loadComponent: () => import('./comparison/material.component').then((c) => c.MaterialComponent)
   },
   {
-    path: 'ant',
+    path: `${DEMO_ROUTE.ANT}/:layout/:count`,
     loadComponent: () => import('./comparison/ant.component').then((c) => c.AntComponent)
   },
   {
-    path: 'ionic',
+    path: `${DEMO_ROUTE.IONIC}/:layout/:count`,
     loadComponent: () => import('./comparison/ionic.component').then((c) => c.IonicComponent)
   },
   {
-    path: 'font-awesome',
+    path: `${DEMO_ROUTE.FONT_AWESOME}/:layout/:count`,
     loadComponent: () => import('./comparison/font-awesome.component').then((c) => c.FontAwesomeComponent)
   },
   {
-    path: 'fast-svg',
+    path: `${DEMO_ROUTE.FAST_SVG}/:layout/:count`,
     loadComponent: () => import('./comparison/fast-icon.component').then((c) => c.FastIconRouteComponent)
   }
 ];