Merge pull request #1571 from eneajaho/untrack-push

edbzn · web-flow · commit 1d6c77fc9b86 · 2023-05-31T15:12:45.000+02:00
fix(template): untrack subscription and unsubscription in push pipe
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;
diff --git a/libs/template/push/src/lib/tests/push.pipe.spec.ts b/libs/template/push/src/lib/tests/push.pipe.spec.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, computed, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import {
   RX_RENDER_STRATEGIES_CONFIG,
@@ -29,12 +29,14 @@ let pushPipeTestComponent: {
 };
 let componentNativeElement: HTMLElement;
 let strategyProvider: RxStrategyProvider;
+let pushPipe: RxPush;
 
 const setupPushPipeComponent = () => {
   TestBed.configureTestingModule({
     declarations: [PushPipeTestComponent],
     imports: [RxPush],
     providers: [
+      RxPush,
       ChangeDetectorRef,
       {
         provide: RX_RENDER_STRATEGIES_CONFIG,
@@ -61,8 +63,43 @@ const setupPushPipeComponent = () => {
   pushPipeTestComponent = fixturePushPipeTestComponent.componentInstance;
   componentNativeElement = fixturePushPipeTestComponent.nativeElement;
   strategyProvider = TestBed.inject(RxStrategyProvider);
+  pushPipe = TestBed.inject(RxPush);
 };
 
+describe('RxPush', () => {
+  beforeAll(() => mockConsole());
+  beforeEach(setupPushPipeComponent);
+
+  it('should be instantiable', () => {
+    expect(pushPipe).toBeDefined();
+  });
+
+  describe('transform function', () => {
+    it('should not track signal reads in subscriptions', () => {
+      const trigger = signal(false);
+
+      const obs = new Observable(() => {
+        // Whenever `obs` is subscribed, synchronously read `trigger`.
+        trigger();
+      });
+
+      let trackCount = 0;
+      const tracker = computed(() => {
+        // Subscribe to `obs` within this `computed`. If the subscription side effect runs
+        // within the computed, then changes to `trigger` will invalidate this computed.
+        pushPipe.transform(obs);
+
+        // The computed returns how many times it's run.
+        return ++trackCount;
+      });
+
+      expect(tracker()).toBe(1);
+      trigger.set(true);
+      expect(tracker()).toBe(1);
+    });
+  });
+});
+
 describe('RxPush used as pipe in the template', () => {
   beforeAll(() => mockConsole());
 
