fix(template): untrack subscription and unsubscription in push pipe

eneajaho · eneajaho · commit fbdbf5b33033 · 2023-05-31T14:09:46.000+02:00
diff --git a/libs/template/push/src/lib/push.pipe.ts b/libs/template/push/src/lib/push.pipe.ts
@@ -4,6 +4,7 @@ import {
   OnDestroy,
   Pipe,
   PipeTransform,
+  untracked,
 } from '@angular/core';
 import {
   RxStrategyNames,
@@ -165,7 +166,7 @@ export class RxPush implements PipeTransform, OnDestroy {
 
   /** @internal */
   ngOnDestroy(): void {
-    this.subscription?.unsubscribe();
+    untracked(() => this.subscription?.unsubscribe());
   }
 
   /** @internal */
@@ -179,26 +180,38 @@ export class RxPush implements PipeTransform, OnDestroy {
   private handleChangeDetection(): Unsubscribable {
     const scope = (this.cdRef as any).context;
     const sub = new Subscription();
-    const setRenderedValue = this.templateValues$.subscribe(({ value }) => {
-      this.renderedValue = value;
-    });
-    const render = this.hasInitialValue(this.templateValues$)
-      .pipe(
-        switchMap((isSync) =>
-          this.templateValues$.pipe(
-            // skip ticking change detection
-            // in case we have an initial value, we don't need to perform cd
-            // the variable will be evaluated anyway because of the lifecycle
-            skip(isSync ? 1 : 0),
-            // onlyValues(),
-            this.render(scope),
-            tap((v) => {
-              this._renderCallback?.next(v);
-            })
+
+    // Subscription can be side-effectful, and we don't want any signal reads which happen in the
+    // side effect of the subscription to be tracked by a component's template when that
+    // subscription is triggered via the async pipe. So we wrap the subscription in `untracked` to
+    // decouple from the current reactive context.
+    //
+    // `untracked` also prevents signal _writes_ which happen in the subscription side effect from
+    // being treated as signal writes during the template evaluation (which throws errors).
+    const setRenderedValue = untracked(() =>
+      this.templateValues$.subscribe(({ value }) => {
+        this.renderedValue = value;
+      })
+    );
+    const render = untracked(() =>
+      this.hasInitialValue(this.templateValues$)
+        .pipe(
+          switchMap((isSync) =>
+            this.templateValues$.pipe(
+              // skip ticking change detection
+              // in case we have an initial value, we don't need to perform cd
+              // the variable will be evaluated anyway because of the lifecycle
+              skip(isSync ? 1 : 0),
+              // onlyValues(),
+              this.render(scope),
+              tap((v) => {
+                this._renderCallback?.next(v);
+              })
+            )
           )
         )
-      )
-      .subscribe();
+        .subscribe()
+    );
     sub.add(setRenderedValue);
     sub.add(render);
     return sub;
