feat(effectScope): add lazy-initialized signal getter with automatic abort on stop

Author: 9romise

packages/reactivity/__tests__/effectScope.spec.ts

@@ -362,4 +362,21 @@ describe('reactivity/effect/scope', () => {
     expect(scope.effects.length).toBe(0)
     expect(scope.cleanups.length).toBe(0)
   })
+
+  test('signal', () => {
+    const scope = effectScope()
+    // should not create an `AbortController` until `scope.signal` is accessed
+    expect((scope as any)._controller).toBeUndefined()
+
+    const { signal } = scope
+    expect((scope as any)._controller).toBeDefined()
+    expect(signal).toBeDefined()
+
+    const spy = vi.fn()
+    signal.addEventListener('abort', spy)
+
+    scope.stop()
+    // should trigger `abort` on the `signal` when `scope.stop()` is called.
+    expect(spy).toBeCalled()
+  })
 })

packages/reactivity/src/effectScope.ts

@@ -39,6 +39,16 @@ export class EffectScope {
    * @internal
    */
   private index: number | undefined
+  /**
+   * @internal
+   */
+  private _controller: AbortController | undefined
+
+  get signal(): AbortSignal {
+    if (!this._controller) this._controller = new AbortController()
+
+    return this._controller.signal
+  }
 
   constructor(public detached = false) {
     this.parent = activeEffectScope
@@ -129,6 +139,9 @@ export class EffectScope {
   stop(fromParent?: boolean): void {
     if (this._active) {
       this._active = false
+
+      if (this._controller) this._controller.abort()
+
       let i, l
       for (i = 0, l = this.effects.length; i < l; i++) {
         this.effects[i].stop()