Merge pull request #376 from MurhafSousli/release/12.0.2

v12.0.2

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 12.0.2
+
+- refactor: Use `untracked` in effects instead of `allowSignalWrites` and `setTimeout`.
+
 ## 12.0.1
 
 - Upgrade to Angular 18 (still compatible v17.3.0 and above).

package.json

@@ -10,33 +10,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.0",
-    "@angular/cdk": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/compiler": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@angular/forms": "^18.2.0",
-    "@angular/material": "^18.2.0",
-    "@angular/platform-browser": "^18.2.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
-    "@angular/router": "^18.2.0",
+    "@angular/animations": "^18.2.3",
+    "@angular/cdk": "^18.2.3",
+    "@angular/common": "^18.2.3",
+    "@angular/compiler": "^18.2.3",
+    "@angular/core": "^18.2.3",
+    "@angular/forms": "^18.2.3",
+    "@angular/material": "^18.2.3",
+    "@angular/platform-browser": "^18.2.3",
+    "@angular/platform-browser-dynamic": "^18.2.3",
+    "@angular/router": "^18.2.3",
     "rxjs": "~7.8.1",
-    "tslib": "^2.3.1",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.0",
-    "@angular/cli": "^18.2.0",
-    "@angular/compiler-cli": "^18.2.0",
-    "@angular/language-service": "^18.2.0",
-    "@types/jasmine": "~3.6.0",
-    "jasmine-core": "~5.2.0",
+    "@angular-devkit/build-angular": "^18.2.3",
+    "@angular/cli": "^18.2.3",
+    "@angular/compiler-cli": "^18.2.3",
+    "@angular/language-service": "^18.2.3",
+    "@types/jasmine": "^5.1.4",
+    "jasmine-core": "^5.3.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.2.0",
+    "ng-packagr": "^18.2.1",
+    "tslib": "^2.7.0",
     "typescript": "~5.5.4"
   }
 }

projects/ngx-progressbar-demo/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { progressInterceptor } from 'ngx-progressbar/http';
+import { appRoutes } from './app-routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes, withHashLocation()),
+    provideAnimations(),
+    provideHttpClient(
+      withFetch(),
+      withInterceptors([progressInterceptor])
+    )
+  ]
+}

projects/ngx-progressbar-demo/src/main.ts

@@ -1,24 +1,11 @@
 import { enableProdMode } from '@angular/core';
-import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { provideRouter, withHashLocation } from '@angular/router';
-import { progressInterceptor } from 'ngx-progressbar/http';
 import { environment } from './environments/environment';
 import { AppComponent } from './app/app.component';
-import { appRoutes } from './app/app-routes';
+import { appConfig } from './app/app.config';
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {
-  providers: [
-    provideRouter(appRoutes, withHashLocation()),
-    provideAnimations(),
-    provideHttpClient(
-      withFetch(),
-      withInterceptors([progressInterceptor])
-    )
-  ]
-}).catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

projects/ngx-progressbar/http/src/ng-progress-http.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, effect, inject } from '@angular/core';
+import { Directive, effect, inject, untracked } from '@angular/core';
 import { NgProgressRef } from 'ngx-progressbar';
 import { NgProgressHttpManager } from './ng-progress-http-manager';
 
@@ -11,12 +11,15 @@ class NgProgressHttpBase {
 
   constructor() {
     effect(() => {
-      if (this.manager.requestsLoading()) {
-        this.progressRef.start();
-      } else if (this.progressRef.isActive) {
-        this.progressRef.complete();
-      }
-    }, { allowSignalWrites: true });
+      const requestLoading: boolean = this.manager.requestsLoading();
+      untracked(() => {
+        if (requestLoading) {
+          this.progressRef.start();
+        } else if (this.progressRef.active()) {
+          this.progressRef.complete();
+        }
+      });
+    });
   }
 }
 

projects/ngx-progressbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-progressbar",
-  "version": "12.0.1",
+  "version": "12.0.2",
   "author": {
     "name": "Murhaf Sousli",
     "url": "https://github.com/MurhafSousli",

projects/ngx-progressbar/router/src/ng-progress-router.directive.ts

@@ -1,16 +1,14 @@
 import { Directive, inject, Type, OnInit, OnDestroy } from '@angular/core';
-import { Event, Router, RouterEvent } from '@angular/router';
+import { Event, Router } from '@angular/router';
 import { Observable, Subscription, of, delay, filter, switchMap, tap } from 'rxjs';
 import { NgProgressRef } from 'ngx-progressbar';
 import { NG_PROGRESS_ROUTER_OPTIONS, NgProgressRouterOptions } from './ng-progress-router.model';
 
 /**
  * Check if a router event type exists in an array of router event types
  */
-function eventExists(routerEvent: Event, events: Type<RouterEvent>[]): boolean {
-  let res: boolean = false;
-  events.map((event: Type<RouterEvent>) => res = res || routerEvent instanceof event);
-  return res;
+function eventExists(routerEvent: Event, events: Type<Event>[]): boolean {
+  return events.some((e: Type<Event>) => routerEvent instanceof e);
 }
 
 @Directive()
@@ -34,7 +32,7 @@ class NgProgressRouterBase implements OnInit, OnDestroy {
       tap(() => this.progressRef.complete())
     );
 
-    const filterEvents: Type<RouterEvent>[] = [...this.config.startEvents, ...this.config.completeEvents];
+    const filterEvents: Type<Event>[] = [...this.config.startEvents, ...this.config.completeEvents];
 
     this.subscription = this.router.events.pipe(
       filter((event: Event) => eventExists(event, filterEvents)),

projects/ngx-progressbar/router/src/ng-progress-router.model.ts

@@ -1,11 +1,11 @@
 import { InjectionToken, Provider, Type } from '@angular/core';
-import { RouterEvent } from '@angular/router';
+import { Event } from '@angular/router';
 import { defaultRouterOptions } from './ng-progress-router-default';
 
 export interface NgProgressRouterOptions {
   minDuration?: number;
-  startEvents?: Type<RouterEvent>[];
-  completeEvents?: Type<RouterEvent>[];
+  startEvents?: Type<Event>[];
+  completeEvents?: Type<Event>[];
 }
 
 export const NG_PROGRESS_ROUTER_OPTIONS: InjectionToken<NgProgressRouterOptions> = new InjectionToken<NgProgressRouterOptions>('NG_PROGRESS_ROUTER_OPTIONS', {

projects/ngx-progressbar/src/lib/ng-progress-ref.ts

@@ -1,10 +1,10 @@
 import {
+  Directive,
   inject,
   signal,
   effect,
   computed,
-  Directive,
-  OnDestroy,
+  untracked,
   Signal,
   WritableSignal,
   EffectCleanupRegisterFn
@@ -35,21 +35,15 @@ enum TriggerType {
   selector: '[ngProgressRef]',
   exportAs: 'ngProgressRef'
 })
-export class NgProgressRef implements OnDestroy {
+export class NgProgressRef {
 
   private readonly _config: WritableSignal<NgProgressOptions> = signal<NgProgressOptions>(inject(NG_PROGRESS_OPTIONS));
 
   private _progress: WritableSignal<number> = signal<number>(0);
 
   private _active: WritableSignal<boolean> = signal<boolean>(false);
 
-  // A boolean flag that indicates the active state
-  isActive: boolean;
-
-  active: Signal<boolean> = computed(() => {
-    this.isActive = this._active();
-    return this.isActive;
-  });
+  active: Signal<boolean> = computed(() => this._active());
 
   progress: Signal<number> = computed(() => this._progress());
 
@@ -65,39 +59,30 @@ export class NgProgressRef implements OnDestroy {
   private readonly _completed: Subject<void> = new Subject<void>();
   readonly completed: Observable<void> = this._completed.asObservable();
 
-  // Stream that increments and updates the progress _state
-  private readonly _trickling: Subject<{ start?: boolean, config?: NgProgressOptions }> = new Subject<{
-    start?: boolean,
-    config?: NgProgressOptions
-  }>();
-
   constructor() {
     let sub$: Subscription;
     effect((onCleanup: EffectCleanupRegisterFn) => {
-      sub$?.unsubscribe();
-
-      sub$ = this._trigger.pipe(
-        switchMap((trigger: TriggerType) => {
-          if (trigger === TriggerType.START) {
-            return timer(this.config().debounceTime).pipe(
-              switchMap(() => this.onTrickling(this.config()))
-            );
-          } else if (trigger === TriggerType.COMPLETE) {
-            return this.onComplete(this.config());
-          }
-          return EMPTY;
-        })
-      ).subscribe();
-
-      onCleanup(() => {
+      const config: NgProgressOptions = this.config();
+
+      untracked(() => {
         sub$?.unsubscribe();
-      });
-    }, { allowSignalWrites: true });
-  }
 
-  ngOnDestroy(): void {
-    // Clean up
-    this._trickling.complete();
+        sub$ = this._trigger.pipe(
+          switchMap((trigger: TriggerType) => {
+            if (trigger === TriggerType.START) {
+              return timer(config.debounceTime).pipe(
+                switchMap(() => this.onTrickling(config))
+              );
+            } else if (trigger === TriggerType.COMPLETE) {
+              return this.onComplete(config);
+            }
+            return EMPTY;
+          })
+        ).subscribe();
+      })
+
+      onCleanup(() => sub$?.unsubscribe());
+    });
   }
 
   /**
@@ -135,7 +120,6 @@ export class NgProgressRef implements OnDestroy {
    * Set the progress
    */
   set(n: number): void {
-    // this._trigger.set(TriggerType.SET);
     this._active.set(true);
     this._progress.set(this.clamp(n));
   }

projects/ngx-progressbar/src/lib/ng-progress.component.ts

@@ -3,13 +3,13 @@ import {
   inject,
   effect,
   computed,
+  untracked,
   numberAttribute,
   booleanAttribute,
   input,
   Signal,
   InputSignal,
   OutputRef,
-  ElementRef,
   ChangeDetectionStrategy,
   InputSignalWithTransform
 } from '@angular/core';
@@ -27,7 +27,8 @@ import { NG_PROGRESS_OPTIONS, NgProgressOptions } from './ng-progress.model';
     '[class.ng-progress-bar-active]': 'progressRef.active()',
     '[class.ng-progress-bar-relative]': 'relative()',
     '[attr.spinnerPosition]': 'spinnerPosition()',
-    '[attr.direction]': 'direction()'
+    '[attr.direction]': 'direction()',
+    '[style.--_ng-progress-speed]': 'this.speed() + "ms"'
   },
   template: `
     <div class="ng-progress-bar-wrapper">
@@ -80,21 +81,17 @@ export class NgProgressbar {
   completed: OutputRef<void> = outputFromObservable<void>(this.progressRef.completed);
 
   constructor() {
-    const element: HTMLElement = inject(ElementRef<HTMLElement>).nativeElement;
-
     effect(() => {
-      setTimeout(() => {
-        element.style.setProperty('--_ng-progress-speed', `${ this.speed() }ms`);
-        // Update progress bar config when inputs change
-        this.progressRef.setConfig({
-          max: (this.max() > 0 && this.max() <= 100) ? this.max() : 100,
-          min: (this.min() < 100 && this.min() >= 0) ? this.min() : 0,
-          speed: this.speed(),
-          trickleSpeed: this.trickleSpeed(),
-          trickleFunc: this.trickleFunc(),
-          debounceTime: this.debounceTime()
-        });
-      });
+      const config: NgProgressOptions = {
+        max: (this.max() > 0 && this.max() <= 100) ? this.max() : 100,
+        min: (this.min() < 100 && this.min() >= 0) ? this.min() : 0,
+        speed: this.speed(),
+        trickleSpeed: this.trickleSpeed(),
+        trickleFunc: this.trickleFunc(),
+        debounceTime: this.debounceTime()
+      };
+      // Update progress bar config when inputs change
+      untracked(() => this.progressRef.setConfig(config));
     });
   }