Merge pull request #61 from eneajaho/f/ej/fixes-1

feat: simplify library internals

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

@@ -3,6 +3,9 @@ import { FastSvgComponent } from './fast-svg.component';
 import { FastSvgProviderOptions } from './provider-config.interface';
 import { provideFastSVG } from './fast-svg.provider';
 
+/**
+ * @deprecated Use `provideFastSVG` provider function instead
+ */
 @NgModule({
   imports: [FastSvgComponent],
   exports: [FastSvgComponent],

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

@@ -1,19 +1,13 @@
-import { Provider, makeEnvironmentProviders } from '@angular/core';
-import {
-  SvgLoadStrategy,
-  SvgLoadStrategyImpl,
-  SvgOptions,
-  SvgOptionsToken,
-  SvgRegistry,
-} from '..';
+import { Provider } from '@angular/core';
+import { SvgLoadStrategy, SvgOptions, SvgOptionsToken } from '..';
 import { FastSvgProviderOptions } from './provider-config.interface';
 
 /**
  * @description
  * Use this function to register the FastSvg providers in your application.
  *
  * @param options {FastSvgProviderOptions} - The options for the FastSvg providers.
- * @return { EnvironmentProviders } - The providers for the FastSvg module.
+ * @return { Provider[] } - The providers for the FastSvg module.
  *
  * @example
  *
@@ -26,21 +20,23 @@ import { FastSvgProviderOptions } from './provider-config.interface';
  * ]});
  * ```
  */
-export const provideFastSVG = (options: FastSvgProviderOptions) => {
-  const svgOptions: SvgOptions = {
-    url: options.url,
-    suspenseSvgString: options.suspenseSvgString || undefined,
-    defaultSize: options.defaultSize || undefined,
-  };
-
+export const provideFastSVG = (options: FastSvgProviderOptions): Provider[] => {
   const providers: Provider[] = [
-    SvgRegistry,
     {
-      provide: SvgLoadStrategy,
-      useClass: options.svgLoadStrategy || SvgLoadStrategyImpl,
+      provide: SvgOptionsToken,
+      useValue: {
+        url: options.url,
+        suspenseSvgString: options.suspenseSvgString || undefined,
+        defaultSize: options.defaultSize || undefined,
+      } as SvgOptions,
     },
-    { provide: SvgOptionsToken, useValue: svgOptions },
   ];
 
+  if (options.svgLoadStrategy) {
+    providers.push(
+      { provide: SvgLoadStrategy, useClass: options.svgLoadStrategy } as Provider
+    );
+  }
+
   return providers;
 };

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

@@ -1,10 +1,10 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, Optional } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BehaviorSubject, map, Observable } from 'rxjs';
 import { SvgOptionsToken } from './token/svg-options.token';
 import { suspenseSvg } from './token/default-token-values';
-import { SvgOptions } from './token/svg-options.model';
 import { SvgLoadStrategy } from './token/svg-load.strategy.model';
+import { SvgLoadStrategyImpl } from "./token/svg-load.strategy";
 
 // @TODO compose svg in 1 sprite and fetch by id as before
 
@@ -42,9 +42,17 @@ function styleDomCacheForPerformance(el: HTMLElement): HTMLElement {
   return el;
 }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class SvgRegistry {
+  private document = inject(DOCUMENT);
+  private svgOptions = inject(SvgOptionsToken);
+
+  private svgLoadStrategy =
+    inject(SvgLoadStrategy, { optional: true }) // custom strategy if provided
+    || new SvgLoadStrategyImpl(); // default strategy
+
   private readonly domParser = createDomParser(this.document);
+
   private readonly svgDomCache: HTMLElement = (() => {
     // The DOM cache could be already created on SSR or due to multiple instances of the registry
     const domCache =
@@ -63,24 +71,15 @@ export class SvgRegistry {
 
   public url = this.svgOptions.url;
 
-  constructor(
-    @Optional()
-    @Inject(DOCUMENT)
-    private document: Document,
-    @Optional()
-    @Inject(SvgLoadStrategy)
-    private svgLoadStrategy: SvgLoadStrategy,
-    @Optional()
-    @Inject(SvgOptionsToken)
-    private svgOptions: SvgOptions
-  ) {
+  constructor() {
     // configure suspense svg
     const suspenseSvgId = this.svgId('suspense');
-    !this._cachedSvgs.has(suspenseSvgId) &&
+    if (!this._cachedSvgs.has(suspenseSvgId)) {
       this.cacheSvgInDOM(
         suspenseSvgId,
         this.svgOptions.suspenseSvgString || suspenseSvg
       );
+    }
 
     this.hydrateFromDom();
   }
@@ -110,10 +109,10 @@ export class SvgRegistry {
     // trigger fetch
     this.svgLoadStrategy
       .load(this.svgOptions.url(svgName))
-      .subscribe(
-        (body: string) => this.cacheSvgInDOM(svgId, body),
-        console.error
-      );
+      .subscribe({
+        next: (body: string) => this.cacheSvgInDOM(svgId, body),
+        error: console.error
+      });
   };
 
   isSvgCached(name: string): boolean {

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

@@ -1,9 +1,8 @@
 import { from, Observable } from 'rxjs';
-import { Injectable } from '@angular/core';
 import { getZoneUnPatchedApi } from '../internal/get-zone-unpatched-api';
+import { SvgLoadStrategy } from "./svg-load.strategy.model";
 
-@Injectable()
-export class SvgLoadStrategyImpl {
+export class SvgLoadStrategyImpl extends SvgLoadStrategy {
   fetch = getZoneUnPatchedApi('fetch', window as any);
 
   load(url: string): Observable<string> {

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

@@ -2,5 +2,13 @@ import { InjectionToken } from '@angular/core';
 import { SvgOptions } from './svg-options.model';
 
 export const SvgOptionsToken = new InjectionToken<SvgOptions>(
-  '__SvgOptionsToken__'
+  '__SvgOptionsToken__',
+  {
+    providedIn: 'root',
+    factory: () => ({
+      url: () => '',
+      defaultSize: undefined,
+      suspenseSvgString: undefined,
+    }),
+  }
 );