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

Author: 9romise

packages/reactivity/__tests__/effectScope.spec.ts

@@ -363,6 +363,23 @@ describe('reactivity/effect/scope', () => {
     expect(getEffectsCount(scope)).toBe(0)
     expect(scope.cleanupsLength).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()
+  })
 })
 
 function getEffectsCount(scope: EffectScope): number {

packages/reactivity/src/effectScope.ts

@@ -19,6 +19,16 @@ export class EffectScope implements ReactiveNode {
    * @internal
    */
   cleanupsLength = 0
+  /**
+   * @internal
+   */
+  private _controller: AbortController | undefined
+
+  get signal(): AbortSignal {
+    if (!this._controller) this._controller = new AbortController()
+
+    return this._controller.signal
+  }
 
   constructor(detached = false) {
     if (!detached && activeEffectScope) {
@@ -72,6 +82,9 @@ export class EffectScope implements ReactiveNode {
     if (!this.active) {
       return
     }
+    if (this._controller) {
+      this._controller.abort()
+    }
     this.flags = EffectFlags.STOP
     let dep = this.deps
     while (dep !== undefined) {