feat(lib): lazy url config

Author: ChristopherPHolder

packages/ngx-fast-icon-demo/src/app/app.config.server.ts

@@ -1,24 +1,21 @@
 import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 
-import { mergeApplicationConfig, ApplicationConfig, Injectable } from '@angular/core';
+import { ApplicationConfig, Injectable, mergeApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
 
-import { map, Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { provideFastSVG, SvgLoadStrategy } from '@push-based/ngx-fast-svg';
 
 import { appConfig } from './app.config';
 
 @Injectable()
-export class SvgLoadStrategySsr implements SvgLoadStrategy {
-  load(url$: Observable<string>): Observable<string> {
-    return url$.pipe(
-      map((url) => {
-        const iconPath = join(process.cwd(), 'packages', 'ngx-fast-icon-demo', 'src', url);
-        return readFileSync(iconPath, 'utf8')
-      })
-    )
+export class SvgLoadStrategySsr extends SvgLoadStrategy {
+  load(url: string): Observable<string> {
+    const iconPath = join(process.cwd(), 'packages', 'ngx-fast-icon-demo', 'src', url);
+    const iconSVG = readFileSync(iconPath, 'utf8')
+    return of(iconSVG);
   }
 }
 

packages/ngx-fast-icon-demo/src/app/app.config.ts

@@ -1,4 +1,4 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, Injectable } from '@angular/core';
 import {
   provideRouter,
   withComponentInputBinding,
@@ -9,17 +9,19 @@ import { provideHttpClient, withFetch } from '@angular/common/http';
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
-import { provideFastSVG } from '@push-based/ngx-fast-svg';
+import { provideFastSVG, SvgLoadStrategyImpl } from '@push-based/ngx-fast-svg';
 import { provideAngularSvgIcon } from 'angular-svg-icon';
 import { provideIonicAngular } from '@ionic/angular/standalone';
 
 import { appRoutes } from './app.routes';
-import { map, Observable, timer } from 'rxjs';
+import { Observable, of, switchMap, timer } from 'rxjs';
 
-class LoaderStrategy {
-  load(name: string): Observable<string> {
-    return timer(1000).pipe(map(() => `assets/svg-icons/${name}.svg`))
-  };
+@Injectable({ providedIn: 'root' })
+export class ConfigService extends SvgLoadStrategyImpl {
+  lazy$ = timer(10_000)
+  override config(url: string): Observable<string> {
+    return this.lazy$.pipe(switchMap(() => of(url)))
+  }
 }
 
 export const appConfig: ApplicationConfig = {
@@ -39,7 +41,8 @@ export const appConfig: ApplicationConfig = {
     provideAngularSvgIcon(),
     provideIonicAngular({}),
     provideFastSVG({
-      url: (name: string) => timer(10000).pipe(map(() => `assets/svg-icons/${name}.svg`)),
+      url: (name: string) => `assets/svg-icons/${name}.svg`,
+      svgLoadStrategy: ConfigService
     }),
   ],
 };

packages/ngx-fast-lib/src/index.ts

@@ -2,7 +2,7 @@
 export * from './lib/token/svg-options.model';
 export * from './lib/token/svg-options.token';
 export * from './lib/token/svg-load.strategy.model';
-export * from './lib/token/svg-load.strategy';
+export { SvgLoadStrategyImpl } from './lib/token/svg-load.strategy';
 // service
 export * from './lib/svg-registry.service';
 // component

packages/ngx-fast-lib/src/lib/fast-svg.component.ts

@@ -112,8 +112,7 @@ export class FastSvgComponent implements AfterViewInit, OnDestroy {
   height = input<string>('');
 
   #url = toSignal(toObservable(this.name).pipe(switchMap((name) => {
-    const url = this.registry.url(name);
-    return typeof url === 'string' ? of(url) : url;
+    return this.registry.url(name);
   })))
 
   // When the browser loaded the svg resource we trigger the caching mechanism

packages/ngx-fast-lib/src/lib/svg-registry.service.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, map, Observable } from 'rxjs';
 import { SvgOptionsToken } from './token/svg-options.token';
 import { suspenseSvg } from './token/default-token-values';
 import { SvgLoadStrategy } from './token/svg-load.strategy.model';
-import { SvgLoadStrategyImpl } from "./token/svg-load.strategy";
+import { SvgLoadStrategyImpl } from './token/svg-load.strategy';
 
 // @TODO compose svg in 1 sprite and fetch by id as before
 
@@ -69,7 +69,7 @@ export class SvgRegistry {
   public defaultSize = this.svgOptions?.defaultSize || '24';
   private _defaultViewBox = `0 0 ${this.defaultSize} ${this.defaultSize}`;
 
-  public url = this.svgOptions.url;
+  public url = (name: string) => this.svgLoadStrategy.config(this.svgOptions.url(name));
 
   constructor() {
     // configure suspense svg

packages/ngx-fast-lib/src/lib/token/svg-load.strategy.model.ts

@@ -1,7 +1,10 @@
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export abstract class SvgLoadStrategy {
   abstract load(url: string | Observable<string>): Observable<string>;
+  config(url: string): Observable<string> {
+    return of(url)
+  };
 }

packages/ngx-fast-lib/src/lib/token/svg-load.strategy.ts

@@ -1,11 +1,11 @@
-import { from, Observable, switchMap } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { getZoneUnPatchedApi } from '../internal/get-zone-unpatched-api';
-import { SvgLoadStrategy } from "./svg-load.strategy.model";
+import { SvgLoadStrategy } from './svg-load.strategy.model';
 
 export class SvgLoadStrategyImpl extends SvgLoadStrategy {
   fetch = getZoneUnPatchedApi('fetch', window as any);
 
-  load(url$: Observable<string>): Observable<string> {
-    return url$.pipe(switchMap((url) =>from(fetch(url).then((res) => (!res.ok ? '' : res.text())))));
+  load(url: string): Observable<string> {
+    return from(fetch(url).then((res) => (!res.ok ? '' : res.text())));
   }
 }

packages/ngx-fast-lib/src/lib/token/svg-options.model.ts

@@ -1,7 +1,5 @@
-import { Observable } from 'rxjs';
-
 export type SvgOptions = {
-  url: (name: string) => string | Observable<string>;
+  url: (name: string) => string;
   defaultSize?: string;
   suspenseSvgString?: string;
 };