chore(lib): migrate to signals inputs

tomastrajan · tomastrajan · commit 96c5946141ef · 2025-04-29T08:54:52.000+02:00
diff --git a/package.json b/package.json
@@ -9,7 +9,6 @@
     "lint": "ng lint",
     "test": "ng lint && npm run format:test && npm run test:lib",
     "test:lib": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js --config projects/elements/jest.config.ts",
-    "watch": "ng test --watch",
     "prebuild": "npm run build:copy-changelog",
     "build": "ng build elements-demo && ng build elements",
     "postbuild": "replace \"onFetch.*\\{\" \"onFetch(event) { if (event.request.url.indexOf('unpkg.com') > -1) { return; }\" ./dist/elements-demo/browser/ngsw-worker.js",
diff --git a/projects/elements-demo/src/assets/CHANGELOG.md b/projects/elements-demo/src/assets/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [19.0.0](https://github.com/angular-extensions/elements/compare/v18.2.1...v19.0.0) (2025-04-28)
+
+### ⚠ BREAKING CHANGES
+
+- **lib:** Angular 19
+
+* cleanups, control flow migration, scss import migration
+* jest setup migration
+
+### Features
+
+- **lib:** upgrade to Angular 19 ([67980dd](https://github.com/angular-extensions/elements/commit/67980ddbee48922441017dbdbbc248130788e0ec))
+
 ### [18.2.1](https://github.com/angular-extensions/elements/compare/v18.2.0...v18.2.1) (2024-09-02)
 
 ### Bug Fixes
diff --git a/projects/elements/jest.config.ts b/projects/elements/jest.config.ts
@@ -9,7 +9,7 @@ const jestConfig: Config = {
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   transform: {
     '^.+\\.(ts|js|html)$': [
-      'ts-jest',
+      'jest-preset-angular',
       {
         tsconfig: '<rootDir>/tsconfig.spec.json',
         stringifyContentPathRegex: '\\.(html|svg)$',
@@ -18,7 +18,6 @@ const jestConfig: Config = {
     ],
   },
   moduleNameMapper: {
-    tslib: 'tslib/tslib.es6.js',
     '^rxjs(/operators$)?$':
       '<rootDir>../../node_modules/rxjs/dist/bundles/rxjs.umd.js',
     '^rxjs/testing$':
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts
@@ -4,12 +4,12 @@ import {
   Directive,
   EmbeddedViewRef,
   inject,
-  Input,
   OnInit,
   PLATFORM_ID,
   Renderer2,
   TemplateRef,
   ViewContainerRef,
+  input,
 } from '@angular/core';
 import { DOCUMENT, isPlatformServer } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -25,18 +25,24 @@ const LOG_PREFIX = '@angular-extensions/elements';
   selector: '[axLazyElementDynamic]',
 })
 export class LazyElementDynamicDirective implements OnInit {
-  @Input('axLazyElementDynamic') tag: string | null = null;
-  @Input('axLazyElementDynamicUrl') url: string | null = null;
-  @Input('axLazyElementDynamicLoadingTemplate')
-  loadingTemplateRef: TemplateRef<any> | null = null;
-  @Input('axLazyElementDynamicErrorTemplate')
-  errorTemplateRef: TemplateRef<any> | null = null;
-  @Input('axLazyElementDynamicModule') isModule = false;
-  @Input('axLazyElementDynamicImportMap') importMap = false;
-  @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
-  @Input('axLazyElementLoadingError') loadingError?: (
-    error: ErrorEvent,
-  ) => void;
+  readonly tag = input<string | null>(null, { alias: 'axLazyElementDynamic' });
+  readonly url = input<string | null>(null, {
+    alias: 'axLazyElementDynamicUrl',
+  });
+  readonly loadingTemplateRef = input<TemplateRef<any> | null>(null, {
+    alias: 'axLazyElementDynamicLoadingTemplate',
+  });
+  readonly errorTemplateRef = input<TemplateRef<any> | null>(null, {
+    alias: 'axLazyElementDynamicErrorTemplate',
+  });
+  readonly isModule = input(false, { alias: 'axLazyElementDynamicModule' });
+  readonly importMap = input(false, { alias: 'axLazyElementDynamicImportMap' });
+  readonly loadingSuccess = input<() => void>(undefined, {
+    alias: 'axLazyElementLoadingSuccess',
+  });
+  readonly loadingError = input<(error: ErrorEvent) => void>(undefined, {
+    alias: 'axLazyElementLoadingError',
+  });
 
   #viewRef: EmbeddedViewRef<any> | null = null;
 
@@ -58,15 +64,16 @@ export class LazyElementDynamicDirective implements OnInit {
       return;
     }
 
+    const tagValue = this.tag();
     if (ngDevMode) {
-      if (!this.tag || this.tag.length === 0 || !this.tag.includes('-')) {
+      if (!tagValue || tagValue.length === 0 || !tagValue.includes('-')) {
         throw new Error(
-          `${LOG_PREFIX} - Valid tag has to be specified when using *axLazyElementDynamic directive (use *axLazyElementDynamic="'some-tag'"), got: "${this.tag}"`,
+          `${LOG_PREFIX} - Valid tag has to be specified when using *axLazyElementDynamic directive (use *axLazyElementDynamic="'some-tag'"), got: "${tagValue}"`,
         );
       }
     }
 
-    const tag = this.tag!;
+    const tag = tagValue!;
 
     const elementConfig =
       this.#elementsLoaderService.getElementConfig(tag) ||
@@ -75,18 +82,19 @@ export class LazyElementDynamicDirective implements OnInit {
     const loadingComponent =
       elementConfig.loadingComponent || options.loadingComponent;
 
-    if (this.loadingTemplateRef) {
-      this.#vcr.createEmbeddedView(this.loadingTemplateRef);
+    const loadingTemplateRef = this.loadingTemplateRef();
+    if (loadingTemplateRef) {
+      this.#vcr.createEmbeddedView(loadingTemplateRef);
     } else if (loadingComponent) {
       this.#vcr.createComponent(loadingComponent);
     }
 
     const loadElement$ = from(
       this.#elementsLoaderService.loadElement(
-        this.url,
+        this.url(),
         tag,
-        this.isModule,
-        this.importMap,
+        this.isModule(),
+        this.importMap(),
         elementConfig?.hooks,
       ),
     );
@@ -98,7 +106,7 @@ export class LazyElementDynamicDirective implements OnInit {
       )
       .subscribe({
         next: () => {
-          this.loadingSuccess?.();
+          this.loadingSuccess()?.();
           this.#vcr.clear();
           const originalCreateElement = this.#renderer.createElement;
           this.#renderer.createElement = (name: string, namespace: string) => {
@@ -112,19 +120,20 @@ export class LazyElementDynamicDirective implements OnInit {
           this.#cdr.markForCheck();
         },
         error: (error) => {
-          this.loadingError?.(error);
+          this.loadingError()?.(error);
           const errorComponent =
             elementConfig.errorComponent || options.errorComponent;
           this.#vcr.clear();
-          if (this.errorTemplateRef) {
-            this.#vcr.createEmbeddedView(this.errorTemplateRef);
+          const errorTemplateRef = this.errorTemplateRef();
+          if (errorTemplateRef) {
+            this.#vcr.createEmbeddedView(errorTemplateRef);
             this.#cdr.markForCheck();
           } else if (errorComponent) {
             this.#vcr.createComponent(errorComponent);
             this.#cdr.markForCheck();
-          } else if (ngDevMode && !this.loadingError) {
+          } else if (ngDevMode && !this.loadingError()) {
             console.error(
-              `${LOG_PREFIX} - Loading of element <${this.tag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,
+              `${LOG_PREFIX} - Loading of element <${this.tag()}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElementDynamic="errorTemplate: error" to display customized error message in place of element\n\n`,
               error,
             );
           }
diff --git a/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts b/projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.ts
@@ -4,16 +4,18 @@ import {
   Directive,
   EmbeddedViewRef,
   inject,
-  Input,
-  OnChanges,
   OnInit,
   PLATFORM_ID,
-  SimpleChanges,
   TemplateRef,
   ViewContainerRef,
+  input,
 } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  takeUntilDestroyed,
+  toObservable,
+  toSignal,
+} from '@angular/core/rxjs-interop';
 import {
   animationFrameScheduler,
   BehaviorSubject,
@@ -35,34 +37,34 @@ const LOG_PREFIX = '@angular-extensions/elements';
   standalone: true,
   selector: '[axLazyElement]',
 })
-export class LazyElementDirective implements OnInit, OnChanges {
+export class LazyElementDirective implements OnInit {
   readonly #platformId = inject(PLATFORM_ID);
   readonly #destroyRef = inject(DestroyRef);
   readonly #vcr = inject(ViewContainerRef);
   readonly #cdr = inject(ChangeDetectorRef);
   readonly #template = inject(TemplateRef<any>);
   readonly #elementsLoaderService = inject(LazyElementsLoaderService);
 
-  @Input('axLazyElement') url: string | null = null;
-  @Input('axLazyElementLoadingTemplate')
-  loadingTemplateRef: TemplateRef<any> | null = null;
-  @Input('axLazyElementErrorTemplate')
-  errorTemplateRef: TemplateRef<any> | null = null;
-  @Input('axLazyElementModule') isModule?: boolean;
-  @Input('axLazyElementImportMap') importMap = false;
-  @Input('axLazyElementLoadingSuccess') loadingSuccess?: () => void;
-  @Input('axLazyElementLoadingError') loadingError?: (
-    error: ErrorEvent,
-  ) => void;
+  readonly url = input<string | null>(null, { alias: 'axLazyElement' });
+  readonly loadingTemplateRef = input<TemplateRef<any> | null>(null, {
+    alias: 'axLazyElementLoadingTemplate',
+  });
+  readonly errorTemplateRef = input<TemplateRef<any> | null>(null, {
+    alias: 'axLazyElementErrorTemplate',
+  });
+  readonly isModule = input<boolean>(undefined, {
+    alias: 'axLazyElementModule',
+  });
+  readonly importMap = input(false, { alias: 'axLazyElementImportMap' });
+  readonly loadingSuccess = input<() => void>(undefined, {
+    alias: 'axLazyElementLoadingSuccess',
+  });
+  readonly loadingError = input<(error: ErrorEvent) => void>(undefined, {
+    alias: 'axLazyElementLoadingError',
+  });
 
   #viewRef: EmbeddedViewRef<any> | null = null;
-  #url$ = new BehaviorSubject<string | null>(null);
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.url) {
-      this.#url$.next(this.url);
-    }
-  }
+  #url$ = toObservable(this.url);
 
   ngOnInit() {
     // There's no sense to execute the below logic on the Node.js side since the JavaScript
@@ -104,8 +106,9 @@ export class LazyElementDirective implements OnInit, OnChanges {
         // The `animationFrameScheduler` is used to prevent the frame drop.
         debounceTime(0, animationFrameScheduler),
         switchMap((url) => {
-          if (this.loadingTemplateRef) {
-            this.#vcr.createEmbeddedView(this.loadingTemplateRef);
+          const loadingTemplateRef = this.loadingTemplateRef();
+          if (loadingTemplateRef) {
+            this.#vcr.createEmbeddedView(loadingTemplateRef);
           } else if (loadingComponent) {
             this.#vcr.createComponent(loadingComponent);
           }
@@ -114,23 +117,24 @@ export class LazyElementDirective implements OnInit, OnChanges {
             this.#elementsLoaderService.loadElement(
               url,
               elementTag,
-              this.isModule,
-              this.importMap,
+              this.isModule(),
+              this.importMap(),
               elementConfig?.hooks,
             ),
           ).pipe(
             catchError((error) => {
-              this.loadingError?.(error);
+              this.loadingError()?.(error);
               this.#vcr.clear();
               const errorComponent =
                 elementConfig.errorComponent || options.errorComponent;
-              if (this.errorTemplateRef) {
-                this.#vcr.createEmbeddedView(this.errorTemplateRef);
+              const errorTemplateRef = this.errorTemplateRef();
+              if (errorTemplateRef) {
+                this.#vcr.createEmbeddedView(errorTemplateRef);
                 this.#cdr.markForCheck();
               } else if (errorComponent) {
                 this.#vcr.createComponent(errorComponent);
                 this.#cdr.markForCheck();
-              } else if (ngDevMode && !this.loadingError) {
+              } else if (ngDevMode && !this.loadingError()) {
                 console.error(
                   `${LOG_PREFIX} - Loading of element <${elementTag}> failed, please provide <ng-template #error>Loading failed...</ng-template> and reference it in *axLazyElement="errorTemplate: error" to display customized error message in place of element`,
                 );
@@ -139,7 +143,7 @@ export class LazyElementDirective implements OnInit, OnChanges {
             }),
           );
         }),
-        tap(() => this.loadingSuccess?.()),
+        tap(() => this.loadingSuccess()?.()),
         mergeMap(() => customElements.whenDefined(elementTag)),
         takeUntilDestroyed(this.#destroyRef),
       )
diff --git a/projects/elements/tsconfig.spec.json b/projects/elements/tsconfig.spec.json
@@ -2,10 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "module": "es2020",
-    "esModuleInterop": true,
-    "emitDecoratorMetadata": true,
-    "allowJs": true,
+    "module": "es2022",
     "types": ["jest", "node"]
   },
   "files": [],
