From 35775d18a1b386c10d8c3d98bee3af48a3c7311a Mon Sep 17 00:00:00 2001 From: ChristopherPHolder Date: Mon, 18 Mar 2024 12:40:05 +0100 Subject: [PATCH] fix(demo): improve ssr demo --- packages/ngx-fast-icon-demo/project.json | 4 +- packages/ngx-fast-icon-demo/routes.txt | 229 +++++++++++++++--- .../src/app/app.component.ts | 26 +- .../ngx-fast-icon-demo/src/app/app.config.ts | 17 +- .../ngx-fast-icon-demo/src/app/app.routes.ts | 17 +- .../src/app/comparison/angular.component.ts | 16 +- .../src/app/comparison/ant.component.ts | 18 +- .../src/app/comparison/fast-icon.component.ts | 14 +- .../app/comparison/font-awesome.component.ts | 14 +- .../src/app/comparison/ionic.component.ts | 17 +- .../src/app/comparison/material.component.ts | 15 +- .../src/app/misc/base-demo.component.ts | 21 ++ .../src/app/misc/constants.ts | 22 ++ .../src/app/misc/controller.component.ts | 15 +- .../src/app/misc/icon-tester.service.ts | 87 ++----- .../src/app/misc/shell.component.ts | 29 ++- 16 files changed, 373 insertions(+), 188 deletions(-) create mode 100644 packages/ngx-fast-icon-demo/src/app/misc/base-demo.component.ts create mode 100644 packages/ngx-fast-icon-demo/src/app/misc/constants.ts diff --git a/packages/ngx-fast-icon-demo/project.json b/packages/ngx-fast-icon-demo/project.json index 8019304..e95625c 100644 --- 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 index 6d19f99..bad5a42 100644 --- 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 index aa79464..0b2a7b3 100644 --- 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: ` - + `, @@ -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 = 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 index a8caa17..d8f8674 100644 --- 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 index e98bd81..5d0f869 100644 --- 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) } ]; diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts index e576c06..02a10e2 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/angular.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, input, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { AsyncPipe } from '@angular/common'; import { SvgIconComponent } from 'angular-svg-icon'; @@ -6,17 +6,18 @@ import { SvgIconComponent } from 'angular-svg-icon'; import { ControllerComponent } from '../misc/controller.component'; import { IconTester } from '../misc/icon-tester.service'; import { SUPPORTED_ICONS } from '../misc/icon-data'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
- @for (list of (tester.lists | async); track $index) { +
+ @for (list of countArr(); track $index) {
    - @for (icon of list; track $index) { + @for (icon of tester.icons; track $index) {
  • - +
    • }
@@ -27,8 +28,9 @@ import { SUPPORTED_ICONS } from '../misc/icon-data'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class AngularComponent { - constructor(public tester: IconTester) { +export class AngularComponent extends BaseDemoComponent { + constructor() { + super(); this.tester.defineSet( SUPPORTED_ICONS.map((i) => `assets/svg-icons/${i}.svg`) ); diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/ant.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/ant.component.ts index 9776557..cf406d6 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/ant.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/ant.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core'; import { AsyncPipe } from '@angular/common'; import { IconModule, IconService} from '@ant-design/icons-angular'; @@ -8,17 +8,18 @@ import { IconTester } from '../misc/icon-tester.service'; import { SUPPORTED_ICONS } from '../misc/icon-data'; import { AllIcons } from './ant-icons'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
- @for (list of (tester.lists | async); track $index) { -
    - @for (icon of list; track $index) { +
    + @for (list of countArr(); track $index) { +
      + @for (icon of tester.icons; track $index) {
    • - +
      • }
    @@ -29,8 +30,9 @@ import { AllIcons } from './ant-icons'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class AntComponent { - constructor(private iconService: IconService, public tester: IconTester) { +export class AntComponent extends BaseDemoComponent { + constructor(private iconService: IconService) { + super(); this.tester.defineSet(SUPPORTED_ICONS); this.iconService.addIcon(...(AllIcons)); } diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/fast-icon.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/fast-icon.component.ts index 24e2824..cfecd33 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/fast-icon.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/fast-icon.component.ts @@ -6,17 +6,18 @@ import { FastSvgComponent } from '@push-based/ngx-fast-svg'; import { ControllerComponent } from '../misc/controller.component'; import { IconTester } from '../misc/icon-tester.service'; import { SUPPORTED_ICONS } from '../misc/icon-data'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
    - @for (list of (tester.lists | async); track $index) { +
    + @for (list of countArr(); track $index) {
      - @for (icon of list; track $index) { + @for (icon of tester.icons; track $index) {
    • - +
      • }
    @@ -27,8 +28,9 @@ import { SUPPORTED_ICONS } from '../misc/icon-data'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class FastIconRouteComponent { - constructor(public tester: IconTester) { +export class FastIconRouteComponent extends BaseDemoComponent { + constructor() { + super(); this.tester.defineSet(SUPPORTED_ICONS); } } diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/font-awesome.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/font-awesome.component.ts index 0c082f2..5afeda9 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/font-awesome.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/font-awesome.component.ts @@ -6,17 +6,18 @@ import { faCircleUser } from '@fortawesome/free-solid-svg-icons'; import { ControllerComponent } from '../misc/controller.component'; import { IconTester } from '../misc/icon-tester.service'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
    - @for (list of (tester.lists | async); track $index) { +
    + @for (list of countArr(); track $index) {
      - @for (icon of list; track $index) { + @for (icon of tester.icons; track $index) {
    • - +
      • }
    @@ -27,8 +28,9 @@ import { IconTester } from '../misc/icon-tester.service'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class FontAwesomeComponent { - constructor(public tester: IconTester) { +export class FontAwesomeComponent extends BaseDemoComponent { + constructor() { + super(); this.tester.defineSet([ faCircleUser, faCircleUser, diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/ionic.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/ionic.component.ts index 638bffb..d7f1207 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/ionic.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/ionic.component.ts @@ -4,19 +4,19 @@ import { AsyncPipe } from '@angular/common'; import { IonIcon } from '@ionic/angular/standalone'; import { ControllerComponent } from '../misc/controller.component'; -import { IconTester } from '../misc/icon-tester.service'; import { SUPPORTED_ICONS } from '../misc/icon-data'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
    - @for (list of (tester.lists | async); track $index) { -
      - @for (icon of list; track $index) { +
      + @for (list of countArr(); track $index) { +
        + @for (icon of tester.icons; track $index) {
      • - +
        • }
      @@ -27,8 +27,9 @@ import { SUPPORTED_ICONS } from '../misc/icon-data'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class IonicComponent { - constructor(public tester: IconTester) { +export class IonicComponent extends BaseDemoComponent { + constructor() { + super(); this.tester.defineSet( SUPPORTED_ICONS.map((i) => `assets/svg-icons/${i}.svg`) ); diff --git a/packages/ngx-fast-icon-demo/src/app/comparison/material.component.ts b/packages/ngx-fast-icon-demo/src/app/comparison/material.component.ts index 36898e8..d9c4091 100644 --- a/packages/ngx-fast-icon-demo/src/app/comparison/material.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/comparison/material.component.ts @@ -7,17 +7,18 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon'; import { ControllerComponent } from '../misc/controller.component'; import { IconTester } from '../misc/icon-tester.service'; import { SUPPORTED_ICONS } from '../misc/icon-data'; +import { BaseDemoComponent } from '../misc/base-demo.component'; @Component({ standalone: true, template: ` -
      - @for (list of (tester.lists | async); track $index) { -
        - @for (icon of list; track $index) { +
        + @for (list of countArr(); track $index) { +
          + @for (icon of tester.icons; track $index) {
        • - +
          • }
        @@ -28,12 +29,12 @@ import { SUPPORTED_ICONS } from '../misc/icon-data'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) -export class MaterialComponent { +export class MaterialComponent extends BaseDemoComponent { constructor( private domSanitizer: DomSanitizer, private matIconRegistry: MatIconRegistry, - public tester: IconTester ) { + super(); this.tester.defineSet(SUPPORTED_ICONS); SUPPORTED_ICONS.forEach((i) => { this.matIconRegistry.addSvgIcon( diff --git a/packages/ngx-fast-icon-demo/src/app/misc/base-demo.component.ts b/packages/ngx-fast-icon-demo/src/app/misc/base-demo.component.ts new file mode 100644 index 0000000..695dbb7 --- /dev/null +++ b/packages/ngx-fast-icon-demo/src/app/misc/base-demo.component.ts @@ -0,0 +1,21 @@ +import { Component, computed, inject, input, OnInit } from '@angular/core'; +import { IconTester } from './icon-tester.service'; + +@Component({ + standalone: true, + template: ``, +}) +export class BaseDemoComponent implements OnInit { + protected layout = input('on-screen'); + protected count = input(0, { + transform: (count) => Number(count) + }); + protected countArr = computed(() => [...Array(Number(this.count())).keys()]); + protected tester = inject(IconTester); + + ngOnInit() { + this.tester.activeDemo.set('angular'); + this.tester.activeLayoutSetting.set(this.layout() as any); + this.tester.iconListCount.set(this.count()); + } +} diff --git a/packages/ngx-fast-icon-demo/src/app/misc/constants.ts b/packages/ngx-fast-icon-demo/src/app/misc/constants.ts new file mode 100644 index 0000000..42731d2 --- /dev/null +++ b/packages/ngx-fast-icon-demo/src/app/misc/constants.ts @@ -0,0 +1,22 @@ +export const BASE_ROUTE = 'description'; +export const DEMO_ROUTE = { + FAST_SVG: 'fast-svg', + MATERIAL: 'material', + IONIC: 'ionic', + FONT_AWESOME: 'font-awesome', + ANGULAR: 'angular', + ANT: 'ant' +} as const; + +export const LAYOUT_SETTING = { + ON_SCREEN: 'on-screen', + OFF_SCREEN: 'off-screen', + DISTRIBUTED: 'distributed' +} as const; +export type LayoutSetting = typeof LAYOUT_SETTING[keyof typeof LAYOUT_SETTING]; + +export const LAYOUT_SETTING_NAME = { + [LAYOUT_SETTING.ON_SCREEN]: 'ON SCREEN', + [LAYOUT_SETTING.OFF_SCREEN]: 'OFF SCREEN', + [LAYOUT_SETTING.DISTRIBUTED]: 'DISTRIBUTED' +} as const; diff --git a/packages/ngx-fast-icon-demo/src/app/misc/controller.component.ts b/packages/ngx-fast-icon-demo/src/app/misc/controller.component.ts index 12a5a5b..7dad3a5 100644 --- a/packages/ngx-fast-icon-demo/src/app/misc/controller.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/misc/controller.component.ts @@ -1,6 +1,7 @@ -import { Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { IconTester } from './icon-tester.service'; import { AsyncPipe, NgClass } from '@angular/common'; +import { LAYOUT_SETTING_NAME } from './constants'; @Component({ standalone: true, @@ -13,11 +14,11 @@ import { AsyncPipe, NgClass } from '@angular/common';

        {{demoLib}} demo

        Layout setting

        - @for (button of tester.buttons; track $index) { + @for (setting of tester.LAYOUT_SETTINGS; track setting) { }
        @@ -27,9 +28,11 @@ import { AsyncPipe, NgClass } from '@angular/common';
        - ` + `, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ControllerComponent { @Input({required: true}) demoLib!: string; @Input({required: true}) tester!: IconTester; + protected readonly LAYOUT_NAME = LAYOUT_SETTING_NAME; } diff --git a/packages/ngx-fast-icon-demo/src/app/misc/icon-tester.service.ts b/packages/ngx-fast-icon-demo/src/app/misc/icon-tester.service.ts index c03a0c0..15878d8 100644 --- a/packages/ngx-fast-icon-demo/src/app/misc/icon-tester.service.ts +++ b/packages/ngx-fast-icon-demo/src/app/misc/icon-tester.service.ts @@ -1,46 +1,27 @@ -import { Injectable } from '@angular/core'; -import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router'; -import {filter, map, Observable, switchMap } from 'rxjs'; +import { Injectable, signal } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; - -enum ViewportSetting { - OnScreen = 'On Screen', - OffScreen = 'Off Screen', - Distributed = 'Distributed', -} +import { LAYOUT_SETTING, LayoutSetting } from './constants'; @Injectable({ providedIn: 'root' }) export class IconTester { - lsOptions = ['on-screen', 'off-screen', 'distributed']; - buttons = [ - ViewportSetting.OnScreen, - ViewportSetting.OffScreen, - ViewportSetting.Distributed, - ]; - icons?: string[] | IconDefinition[]; - - readonly setting = this.activatedRoute.queryParams.pipe(map(({ls}) => this._reverseKebab(ls))); + readonly LAYOUT_SETTINGS = Object.values(LAYOUT_SETTING); + readonly activeLayoutSetting = signal(this.LAYOUT_SETTINGS[0]); + readonly iconListCount = signal(0); + readonly activeDemo = signal(undefined); - readonly layout = this.activatedRoute.queryParams.pipe(map(({ls}) => ls)); + icons?: string[] | IconDefinition[]; - readonly lists = this.activatedRoute.queryParams.pipe(map(({list}) => Array(Number(list)).fill(this.icons))); + constructor(private activatedRoute: ActivatedRoute, private router: Router) {} - constructor(private activatedRoute: ActivatedRoute, private router: Router) { - const queryParams$ = router.events.pipe( - filter((e): e is NavigationEnd => e instanceof NavigationEnd), - switchMap(() => activatedRoute.queryParams) - ) - this._handleNavigationWithInvalidQueryParams(queryParams$, activatedRoute); + setLayout(setting: LayoutSetting) { + this.activeLayoutSetting.set(setting); + this.updateLocation(); } - setLayout(setting: ViewportSetting) { - this.router.navigate([], { - relativeTo: this.activatedRoute, - queryParams: { - ls: this._toKebab(setting), - }, - queryParamsHandling: 'merge', - }); + updateList(number: number): void { + this.iconListCount.update((count) => count + number); + this.updateLocation(); } defineSet(set: string[] | IconDefinition[]) { @@ -51,38 +32,10 @@ export class IconTester { window.location.reload(); } - updateList(number: number): void { - this.router.navigate([], { - relativeTo: this.activatedRoute, - queryParams: { - list: Number(this.activatedRoute.snapshot.queryParams['list']) + number - }, - queryParamsHandling: 'merge', - }); - } - - private _handleNavigationWithInvalidQueryParams(queryParams$: Observable, activatedRoute: ActivatedRoute): void { - queryParams$ - .pipe(filter(({ls, list}) => !this.lsOptions.includes(ls) || !list)) - .subscribe(() => { - this.router.navigate( - [], - { - relativeTo: activatedRoute, - queryParams: { - ls: this._toKebab(ViewportSetting.OnScreen), - list: 0 - }, - queryParamsHandling: 'merge', - }); - }); - } - - private _reverseKebab(str: string): string { - return str.split('-').map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join(' ') - } - - private _toKebab(str: string): string { - return str.replace(' ','-').toLowerCase(); + private updateLocation(): void { + this.router.navigate( + [this.activeDemo(), this.activeLayoutSetting(), this.iconListCount()], + { relativeTo: this.activatedRoute } + ); } } diff --git a/packages/ngx-fast-icon-demo/src/app/misc/shell.component.ts b/packages/ngx-fast-icon-demo/src/app/misc/shell.component.ts index e7a3d8d..7d02634 100644 --- a/packages/ngx-fast-icon-demo/src/app/misc/shell.component.ts +++ b/packages/ngx-fast-icon-demo/src/app/misc/shell.component.ts @@ -1,11 +1,13 @@ -import { Component, Input, ViewChild } from '@angular/core'; +import { Component, inject, Input, ViewChild } from '@angular/core'; import { AsyncPipe } from '@angular/common'; import { FastSvgComponent } from '@push-based/ngx-fast-svg'; import { IonicModule } from '@ionic/angular'; import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav'; import { MatToolbarModule } from '@angular/material/toolbar'; -import { Params, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; +import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; import { MatDividerModule } from '@angular/material/divider'; +import { BASE_ROUTE, DEMO_ROUTE } from './constants'; +import { IconTester } from './icon-tester.service'; @Component({ selector: 'app-shell', @@ -22,14 +24,19 @@ import { MatDividerModule } from '@angular/material/divider';
        - @for (link of links; track $index) { + {{ BASE_ROUTE }} + @for (demo of DEMO_ROUTES; track $index) { {{ link }} + [class]='demo' + [routerLink]='[demo,tester.activeLayoutSetting(),tester.iconListCount()]' + >{{ demo }} }
        @@ -267,9 +274,11 @@ import { MatDividerModule } from '@angular/material/divider'; ] }) export class ShellComponent { - @Input({required: true}) rootClass!: string; + @Input({required: true}) rootClass!: string | string[]; @Input({required: true}) isMobile!: boolean; - @Input({required: true}) links!: string[]; - @Input({required: true}) queryParams!: Params; @ViewChild(MatSidenav) sideNav!: MatSidenav; + readonly tester = inject(IconTester); + + readonly DEMO_ROUTES = Object.values(DEMO_ROUTE); + readonly BASE_ROUTE = BASE_ROUTE; }