refactor: replace AllowSignalWrites with untracked (#607)

apps/app/src/app/pages/(components)/components/(data-table)/data-table.preview.ts

@@ -1,13 +1,13 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { DecimalPipe, TitleCasePipe } from '@angular/common';
-import { Component, computed, effect, signal, type TrackByFunction } from '@angular/core';
+import { Component, computed, effect, signal, untracked, type TrackByFunction } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideArrowUpDown, lucideChevronDown, lucideEllipsis } from '@ng-icons/lucide';
 import { BrnMenuTriggerDirective } from '@spartan-ng/brain/menu';
 import { BrnSelectModule } from '@spartan-ng/brain/select';
-import { BrnTableModule, type PaginatorState, useBrnColumnManager } from '@spartan-ng/brain/table';
+import { BrnTableModule, useBrnColumnManager, type PaginatorState } from '@spartan-ng/brain/table';
 import { HlmButtonModule } from '@spartan-ng/ui-button-helm';
 import { HlmCheckboxComponent } from '@spartan-ng/ui-checkbox-helm';
 import { HlmIconDirective } from '@spartan-ng/ui-icon-helm';
@@ -367,7 +367,10 @@ export class DataTablePreviewComponent {
 	constructor() {
 		// needed to sync the debounced filter to the name filter, but being able to override the
 		// filter when loading new users without debounce
-		effect(() => this._emailFilter.set(this._debouncedFilter() ?? ''), { allowSignalWrites: true });
+		effect(() => {
+			const debouncedFilter = this._debouncedFilter();
+			untracked(() => this._emailFilter.set(debouncedFilter ?? ''));
+		});
 	}
 
 	protected togglePayment(payment: Payment) {
@@ -763,7 +766,10 @@ export class DataTablePreviewComponent {
   constructor() {
     // needed to sync the debounced filter to the name filter, but being able to override the
     // filter when loading new users without debounce
-    effect(() => this._emailFilter.set(this._debouncedFilter() ?? ''), { allowSignalWrites: true });
+		effect(() => {
+			const debouncedFilter = this._debouncedFilter();
+			untracked(() => this._emailFilter.set(debouncedFilter ?? ''));
+		});
   }
 
   protected togglePayment(payment: Payment) {

apps/app/src/app/pages/(examples)/examples/tasks/services/tasks.service.ts

@@ -1,5 +1,5 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { computed, effect, inject, Injectable, signal } from '@angular/core';
+import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
 import { toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { useBrnColumnManager } from '@spartan-ng/brain/table';
 import { debounceTime, map } from 'rxjs/operators';
@@ -98,7 +98,10 @@ export class TasksService {
 	constructor() {
 		// needed to sync the debounced filter to the name filter, but being able to override the
 		// filter when loading new users without debounce
-		effect(() => this._taskFilter.set(this._debouncedFilter() ?? ''), { allowSignalWrites: true });
+		effect(() => {
+			const debouncedFilter = this._debouncedFilter();
+			untracked(() => this._taskFilter.set(debouncedFilter ?? ''));
+		});
 		const columnSettings = this._localStorageService.getTaskTableColumns();
 		for (const column of columnSettings) {
 			this._brnColumnManager.setVisible(column as any);

apps/app/src/app/shared/input-error/input-error.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Injector, type OnInit, effect, inject } from '@angular/core';
+import { Directive, Injector, type OnInit, effect, inject, untracked } from '@angular/core';
 import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
 import { SignalInputDirective, SignalInputErrorDirective } from 'ng-signal-forms';
 
@@ -16,18 +16,18 @@ export class SpartanInputErrorDirective implements OnInit {
 	ngOnInit() {
 		effect(
 			() => {
-				if (
-					this._signalInput?.formField?.touchedState() === 'TOUCHED' &&
-					Object.values(this._signalInput?.formField?.errors() ?? {}).length > 0
-				) {
-					if (this._label) this._label.setError(true);
-				} else {
-					if (this._label) this._label.setError('auto');
-				}
+				const touchedState = this._signalInput?.formField?.touchedState();
+				const errors = this._signalInput?.formField?.errors() ?? {};
+				untracked(() => {
+					if (touchedState === 'TOUCHED' && Object.values(errors).length > 0) {
+						if (this._label) this._label.setError(true);
+					} else {
+						if (this._label) this._label.setError('auto');
+					}
+				});
 			},
 			{
 				injector: this._injector,
-				allowSignalWrites: true,
 			},
 		);
 	}

libs/brain/calendar/src/lib/brn-calendar-week.directive.ts

@@ -8,6 +8,7 @@ import {
 	computed,
 	effect,
 	inject,
+	untracked,
 } from '@angular/core';
 import { injectBrnCalendar } from './brn-calendar.token';
 
@@ -51,10 +52,13 @@ export class BrnCalendarWeekDirective<T> implements OnDestroy {
 
 	constructor() {
 		// this should use `afterRenderEffect` but it's not available in the current version
-		effect(() => this.renderWeek(), { allowSignalWrites: true });
+		effect(() => {
+			const weeks = this.weeks();
+			untracked(() => this._renderWeeks(weeks));
+		});
 	}
 
-	private renderWeek(): void {
+	private _renderWeeks(weeks: T[][]): void {
 		// Destroy all the views when the directive is destroyed
 		for (const viewRef of this._viewRefs) {
 			viewRef.destroy();
@@ -63,7 +67,7 @@ export class BrnCalendarWeekDirective<T> implements OnDestroy {
 		this._viewRefs.length = 0;
 
 		// Create a new view for each week
-		for (const week of this.weeks()) {
+		for (const week of weeks) {
 			const viewRef = this._viewContainerRef.createEmbeddedView(this._templateRef, {
 				$implicit: week,
 			});

libs/brain/collapsible/src/lib/brn-collapsible-content.component.ts

@@ -1,4 +1,14 @@
-import { type AfterContentInit, Component, ElementRef, computed, effect, inject, input, signal } from '@angular/core';
+import {
+	type AfterContentInit,
+	Component,
+	ElementRef,
+	computed,
+	effect,
+	inject,
+	input,
+	signal,
+	untracked,
+} from '@angular/core';
 import { BrnCollapsibleComponent } from './brn-collapsible.component';
 
 @Component({
@@ -43,14 +53,12 @@ export class BrnCollapsibleContentComponent implements AfterContentInit {
 			throw Error('Collapsible trigger directive can only be used inside a brn-collapsible element.');
 		}
 
-		effect(
-			() => {
-				const id = this.id();
-				if (!id || !this._collapsible) return;
-				this._collapsible.contentId.set(id);
-			},
-			{ allowSignalWrites: true },
-		);
+		effect(() => {
+			const id = this.id();
+			const collapsible = this._collapsible;
+			if (!id || !collapsible) return;
+			untracked(() => collapsible.contentId.set(id));
+		});
 	}
 
 	ngAfterContentInit() {

libs/brain/hover-card/src/lib/brn-hover-card-content.service.ts

@@ -23,6 +23,7 @@ import {
 	type Signal,
 	signal,
 	TemplateRef,
+	untracked,
 	ViewContainerRef,
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -243,15 +244,14 @@ export class BrnHoverCardTriggerDirective implements OnInit, OnDestroy {
 	private readonly _brnHoverCardTriggerForState = computed(() => this.mutableBrnHoverCardTriggerFor()());
 
 	constructor() {
-		effect(
-			() => {
-				const value = this._brnHoverCardTriggerForState();
+		effect(() => {
+			const value = this._brnHoverCardTriggerForState();
+			untracked(() => {
 				if (value) {
 					this._contentService.setContent(value, this._vcr);
 				}
-			},
-			{ allowSignalWrites: true },
-		);
+			});
+		});
 	}
 
 	public ngOnInit() {

libs/brain/slider/src/lib/brn-slider-track.directive.ts

@@ -21,6 +21,7 @@ import {
 	input,
 	model,
 	signal,
+	untracked,
 } from '@angular/core';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -137,17 +138,20 @@ export class BrnSliderInputDirective implements ControlValueAccessor, BrnSliderI
 	private readonly _renderer2 = inject(Renderer2);
 
 	constructor() {
-		effect(
-			() => {
-				if (isPlatformBrowser(this._platformId)) {
-					this._updateHostElementStep(this._slider.step());
-					this._updateMinValue(this._slider.min());
-					this._updateMaxValue(this._slider.max());
-					this._updateDirection(this._slider.direction());
-				}
-			},
-			{ allowSignalWrites: true },
-		);
+		effect(() => {
+			if (isPlatformBrowser(this._platformId)) {
+				const step = this._slider.step();
+				const min = this._slider.min();
+				const max = this._slider.max();
+				const direction = this._slider.direction();
+				untracked(() => {
+					this._updateHostElementStep(step);
+					this._updateMinValue(min);
+					this._updateMaxValue(max);
+					this._updateDirection(direction);
+				});
+			}
+		});
 	}
 
 	onFocus(): void {

libs/brain/table/src/lib/brn-paginator.directive.ts

@@ -10,6 +10,7 @@ import {
 	inject,
 	numberAttribute,
 	signal,
+	untracked,
 } from '@angular/core';
 
 export type PaginatorState = {
@@ -74,17 +75,16 @@ export class BrnPaginatorDirective implements OnInit {
 	public onStateChange?: (state: PaginatorState) => void;
 
 	constructor() {
-		effect(
-			() => {
-				const state = this._state();
+		effect(() => {
+			const state = this._state();
+			untracked(() => {
 				Promise.resolve().then(() => {
 					if (this.onStateChange) {
 						this.onStateChange(state);
 					}
 				});
-			},
-			{ allowSignalWrites: true },
-		);
+			});
+		});
 	}
 
 	public ngOnInit() {

libs/brain/tabs/src/lib/brn-tabs-trigger.directive.ts

@@ -1,4 +1,16 @@
-import { Directive, ElementRef, Input, computed, effect, inject, input, model, output, signal } from '@angular/core';
+import {
+	Directive,
+	ElementRef,
+	Input,
+	computed,
+	effect,
+	inject,
+	input,
+	model,
+	output,
+	signal,
+	untracked,
+} from '@angular/core';
 
 @Directive({
 	selector: '[brnTabsContent]',
@@ -22,12 +34,10 @@ export class BrnTabsContentDirective {
 	protected labelId = computed(() => `brn-tabs-label-${this.contentFor()}`);
 
 	constructor() {
-		effect(
-			() => {
-				this._root.registerContent(this.contentFor(), this);
-			},
-			{ allowSignalWrites: true },
-		);
+		effect(() => {
+			const contentFor = this.contentFor();
+			untracked(() => this._root.registerContent(contentFor, this));
+		});
 	}
 
 	public focus() {
@@ -123,12 +133,10 @@ export class BrnTabsTriggerDirective {
 	public disabled = false;
 
 	constructor() {
-		effect(
-			() => {
-				this._root.registerTrigger(this.triggerFor(), this);
-			},
-			{ allowSignalWrites: true },
-		);
+		effect(() => {
+			const triggerFor = this.triggerFor();
+			untracked(() => this._root.registerTrigger(triggerFor, this));
+		});
 	}
 
 	public focus() {

libs/brain/tooltip/src/lib/brn-tooltip-trigger.directive.ts

@@ -281,17 +281,18 @@ export class BrnTooltipTriggerDirective implements OnDestroy, AfterViewInit {
 	}
 
 	private _initBrnTooltipTriggerEffect(): void {
-		effect(
-			() => {
-				if (!this.brnTooltipTriggerState() && this._isTooltipVisible()) {
+		effect(() => {
+			const brnTooltipTriggerState = this.brnTooltipTriggerState();
+			const isTooltipVisible = this._isTooltipVisible();
+			untracked(() => {
+				if (!brnTooltipTriggerState && isTooltipVisible) {
 					this.hide(0);
 				} else {
 					this._setupPointerEnterEventsIfNeeded();
 					this._updateTooltipContent();
 				}
-			},
-			{ allowSignalWrites: true },
-		);
+			});
+		});
 	}
 
 	private _initExitAnimationDurationEffect(): void {

libs/cli/src/generators/ui/libs/ui-accordion-helm/files/lib/hlm-accordion-content.component.ts.template

@@ -1,18 +1,19 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, effect, input } from '@angular/core';
-import { BrnAccordionContentComponent } from '@spartan-ng/brain/accordion';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { BrnAccordionContentComponent, provideBrnAccordionContentClass } from '@spartan-ng/brain/accordion';
 import { hlm } from '@spartan-ng/brain/core';
 import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-accordion-content',
 	template: `
 		<div [attr.inert]="_addInert()" style="overflow: hidden">
-			<p [class]="_contentClass()">
+			<p [class]="_contentClass">
 				<ng-content />
 			</p>
 		</div>
 	`,
 	standalone: true,
+	providers: [provideBrnAccordionContentClass('pt-1 pb-4')],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	encapsulation: ViewEncapsulation.None,
 	host: {
@@ -25,14 +26,4 @@ export class HlmAccordionContentComponent extends BrnAccordionContentComponent {
 		const gridRows = this.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
 		return hlm('text-sm transition-all grid', gridRows, this.userClass());
 	});
-
-	constructor() {
-		super();
-		effect(
-			() => {
-				this.setClassToCustomElement('pt-1 pb-4');
-			},
-			{ allowSignalWrites: true },
-		);
-	}
 }