refactor(reactivity): alien-signals 2.0.1

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -27,7 +27,7 @@ import {
 } from '../src'
 import type { ComputedRef, ComputedRefImpl } from '../src/computed'
 import { pauseTracking, resetTracking } from '../src/effect'
-import { SubscriberFlags } from '../src/system'
+import { ReactiveFlags } from '../src/system'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -467,8 +467,8 @@ describe('reactivity/computed', () => {
     const c2 = computed(() => c1.value) as unknown as ComputedRefImpl
 
     c2.value
-    expect(c1.flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)).toBe(0)
-    expect(c2.flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)).toBe(0)
+    expect(c1.flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)).toBe(0)
+    expect(c2.flags & (ReactiveFlags.Dirty | ReactiveFlags.Pending)).toBe(0)
   })
 
   it('should chained computeds dirtyLevel update with first computed effect', () => {

packages/reactivity/__tests__/effect.spec.ts

@@ -22,7 +22,7 @@ import {
   stop,
   toRaw,
 } from '../src/index'
-import { type Dependency, endBatch, startBatch } from '../src/system'
+import { type ReactiveNode, endBatch, startBatch } from '../src/system'
 
 describe('reactivity/effect', () => {
   it('should run the passed function once (wrapped by a effect)', () => {
@@ -1178,7 +1178,7 @@ describe('reactivity/effect', () => {
   })
 
   describe('dep unsubscribe', () => {
-    function getSubCount(dep: Dependency | undefined) {
+    function getSubCount(dep: ReactiveNode | undefined) {
       let count = 0
       let sub = dep!.subs
       while (sub) {

packages/reactivity/src/computed.ts

@@ -10,10 +10,9 @@ import {
 import { activeEffectScope } from './effectScope'
 import type { Ref } from './ref'
 import {
-  type Dependency,
   type Link,
-  type Subscriber,
-  SubscriberFlags,
+  type ReactiveNode,
+  ReactiveFlags as _ReactiveFlags,
   checkDirty,
   endTracking,
   link,
@@ -53,20 +52,17 @@ export interface WritableComputedOptions<T, S = T> {
  * @private exported by @vue/reactivity for Vue core use, but not exported from
  * the main vue package
  */
-export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
+export class ComputedRefImpl<T = any> implements ReactiveNode {
   /**
    * @internal
    */
   _value: T | undefined = undefined
 
-  // Dependency
   subs: Link | undefined = undefined
   subsTail: Link | undefined = undefined
-
-  // Subscriber
   deps: Link | undefined = undefined
   depsTail: Link | undefined = undefined
-  flags: SubscriberFlags = SubscriberFlags.Dirty
+  flags: _ReactiveFlags = _ReactiveFlags.Mutable | _ReactiveFlags.Dirty
 
   /**
    * @internal
@@ -84,7 +80,7 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
     return this
   }
   // for backwards compat
-  get dep(): Dependency {
+  get dep(): ReactiveNode {
     return this
   }
   /**
@@ -93,15 +89,15 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
    */
   get _dirty(): boolean {
     const flags = this.flags
-    if (flags & SubscriberFlags.Dirty) {
+    if (flags & _ReactiveFlags.Dirty) {
       return true
     }
-    if (flags & SubscriberFlags.Pending) {
-      if (checkDirty(this.deps!)) {
-        this.flags = flags | SubscriberFlags.Dirty
+    if (flags & _ReactiveFlags.Pending) {
+      if (checkDirty(this.deps!, this)) {
+        this.flags = flags | _ReactiveFlags.Dirty
         return true
       } else {
-        this.flags = flags & ~SubscriberFlags.Pending
+        this.flags = flags & ~_ReactiveFlags.Pending
       }
     }
     return false
@@ -112,9 +108,9 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
    */
   set _dirty(v: boolean) {
     if (v) {
-      this.flags |= SubscriberFlags.Dirty
+      this.flags |= _ReactiveFlags.Dirty
     } else {
-      this.flags &= ~(SubscriberFlags.Dirty | SubscriberFlags.Pending)
+      this.flags &= ~(_ReactiveFlags.Dirty | _ReactiveFlags.Pending)
     }
   }
 
@@ -139,17 +135,17 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
   get value(): T {
     const flags = this.flags
     if (
-      flags & SubscriberFlags.Dirty ||
-      (flags & SubscriberFlags.Pending && checkDirty(this.deps!))
+      flags & _ReactiveFlags.Dirty ||
+      (flags & _ReactiveFlags.Pending && checkDirty(this.deps!, this))
     ) {
       if (this.update()) {
         const subs = this.subs
         if (subs !== undefined) {
           shallowPropagate(subs)
         }
       }
-    } else if (flags & SubscriberFlags.Pending) {
-      this.flags = flags & ~SubscriberFlags.Pending
+    } else if (flags & _ReactiveFlags.Pending) {
+      this.flags = flags & ~_ReactiveFlags.Pending
     }
     if (activeSub !== undefined) {
       if (__DEV__) {

packages/reactivity/src/debug.ts

@@ -1,6 +1,6 @@
 import { extend } from '@vue/shared'
 import type { DebuggerEventExtraInfo, ReactiveEffectOptions } from './effect'
-import { type Link, type Subscriber, SubscriberFlags } from './system'
+import { type Link, ReactiveFlags, type ReactiveNode } from './system'
 
 export const triggerEventInfos: DebuggerEventExtraInfo[] = []
 
@@ -61,7 +61,7 @@ export function setupOnTrigger(target: { new (...args: any[]): any }): void {
   })
 }
 
-function setupFlagsHandler(target: Subscriber): void {
+function setupFlagsHandler(target: ReactiveNode): void {
   ;(target as any)._flags = target.flags
   Object.defineProperty(target, 'flags', {
     get() {
@@ -71,9 +71,9 @@ function setupFlagsHandler(target: Subscriber): void {
       if (
         !(
           (target as any)._flags &
-          (SubscriberFlags.Dirty | SubscriberFlags.Pending)
+          (ReactiveFlags.Dirty | ReactiveFlags.Pending)
         ) &&
-        !!(value & (SubscriberFlags.Dirty | SubscriberFlags.Pending))
+        !!(value & (ReactiveFlags.Dirty | ReactiveFlags.Pending))
       ) {
         onTrigger(this)
       }

packages/reactivity/src/dep.ts

@@ -3,17 +3,20 @@ import { type TrackOpTypes, TriggerOpTypes } from './constants'
 import { onTrack, triggerEventInfos } from './debug'
 import { activeSub } from './effect'
 import {
-  type Dependency,
   type Link,
+  ReactiveFlags,
+  type ReactiveNode,
   endBatch,
   link,
   propagate,
+  shallowPropagate,
   startBatch,
 } from './system'
 
-class Dep implements Dependency {
+class Dep implements ReactiveNode {
   _subs: Link | undefined = undefined
   subsTail: Link | undefined = undefined
+  flags: ReactiveFlags = ReactiveFlags.None
 
   constructor(
     private map: KeyToDepMap,
@@ -103,7 +106,7 @@ export function trigger(
     return
   }
 
-  const run = (dep: Dependency | undefined) => {
+  const run = (dep: ReactiveNode | undefined) => {
     if (dep !== undefined && dep.subs !== undefined) {
       if (__DEV__) {
         triggerEventInfos.push({
@@ -116,6 +119,7 @@ export function trigger(
         })
       }
       propagate(dep.subs)
+      shallowPropagate(dep.subs)
       if (__DEV__) {
         triggerEventInfos.pop()
       }
@@ -190,7 +194,7 @@ export function trigger(
 export function getDepFromReactive(
   object: any,
   key: string | number | symbol,
-): Dependency | undefined {
+): ReactiveNode | undefined {
   const depMap = targetMap.get(object)
   return depMap && depMap.get(key)
 }

packages/reactivity/src/effect.ts

@@ -3,10 +3,9 @@ import type { TrackOpTypes, TriggerOpTypes } from './constants'
 import { setupOnTrigger } from './debug'
 import { activeEffectScope } from './effectScope'
 import {
-  type Dependency,
   type Link,
-  type Subscriber,
-  SubscriberFlags,
+  ReactiveFlags,
+  type ReactiveNode,
   checkDirty,
   endTracking,
   link,
@@ -18,7 +17,7 @@ import { warn } from './warning'
 export type EffectScheduler = (...args: any[]) => any
 
 export type DebuggerEvent = {
-  effect: Subscriber
+  effect: ReactiveNode
 } & DebuggerEventExtraInfo
 
 export type DebuggerEventExtraInfo = {
@@ -55,16 +54,13 @@ export enum EffectFlags {
 }
 
 export class ReactiveEffect<T = any>
-  implements ReactiveEffectOptions, Dependency, Subscriber
+  implements ReactiveEffectOptions, ReactiveNode
 {
-  // Subscriber
   deps: Link | undefined = undefined
   depsTail: Link | undefined = undefined
-  flags: number = SubscriberFlags.Dirty
-
-  // Dependency
   subs: Link | undefined = undefined
   subsTail: Link | undefined = undefined
+  flags: number = ReactiveFlags.Watching | ReactiveFlags.Dirty
 
   /**
    * @internal
@@ -129,6 +125,9 @@ export class ReactiveEffect<T = any>
   }
 
   run(): T {
+    if (!this.active) {
+      return this.fn()
+    }
     cleanup(this)
     const prevSub = activeSub
     setActiveSub(this)
@@ -147,10 +146,10 @@ export class ReactiveEffect<T = any>
       endTracking(this)
       const flags = this.flags
       if (
-        (flags & (SubscriberFlags.Recursed | EffectFlags.ALLOW_RECURSE)) ===
-        (SubscriberFlags.Recursed | EffectFlags.ALLOW_RECURSE)
+        (flags & (ReactiveFlags.Recursed | EffectFlags.ALLOW_RECURSE)) ===
+        (ReactiveFlags.Recursed | EffectFlags.ALLOW_RECURSE)
       ) {
-        this.flags = flags & ~SubscriberFlags.Recursed
+        this.flags = flags & ~ReactiveFlags.Recursed
         this.notify()
       }
     }
@@ -161,23 +160,25 @@ export class ReactiveEffect<T = any>
     if (sub !== undefined) {
       unlink(sub)
     }
-    startTracking(this)
-    endTracking(this)
-    cleanup(this)
+    let dep = this.deps
+    while (dep !== undefined) {
+      dep = unlink(dep, this)
+    }
     this.flags = 0
+    cleanup(this)
   }
 
   get dirty(): boolean {
     const flags = this.flags
-    if (flags & SubscriberFlags.Dirty) {
+    if (flags & ReactiveFlags.Dirty) {
       return true
     }
-    if (flags & SubscriberFlags.Pending) {
-      if (checkDirty(this.deps!)) {
-        this.flags = flags | SubscriberFlags.Dirty
+    if (flags & ReactiveFlags.Pending) {
+      if (checkDirty(this.deps!, this)) {
+        this.flags = flags | ReactiveFlags.Dirty
         return true
       } else {
-        this.flags = flags & ~SubscriberFlags.Pending
+        this.flags = flags & ~ReactiveFlags.Pending
       }
     }
     return false
@@ -234,7 +235,7 @@ export function stop(runner: ReactiveEffectRunner): void {
   runner.effect.stop()
 }
 
-const resetTrackingStack: (Subscriber | undefined)[] = []
+const resetTrackingStack: (ReactiveNode | undefined)[] = []
 
 /**
  * Temporarily pauses tracking.
@@ -284,7 +285,7 @@ export function resetTracking(): void {
 }
 
 export function cleanup(
-  sub: Subscriber & { cleanups: (() => void)[]; cleanupsLength: number },
+  sub: ReactiveNode & { cleanups: (() => void)[]; cleanupsLength: number },
 ): void {
   const l = sub.cleanupsLength
   if (l) {
@@ -329,8 +330,8 @@ function cleanupEffect(fn: () => void) {
   }
 }
 
-export let activeSub: Subscriber | undefined = undefined
+export let activeSub: ReactiveNode | undefined = undefined
 
-export function setActiveSub(sub: Subscriber | undefined): void {
+export function setActiveSub(sub: ReactiveNode | undefined): void {
   activeSub = sub
 }

packages/reactivity/src/effectScope.ts

@@ -1,26 +1,15 @@
 import { EffectFlags, cleanup } from './effect'
-import {
-  type Dependency,
-  type Link,
-  type Subscriber,
-  endTracking,
-  link,
-  startTracking,
-  unlink,
-} from './system'
+import { type Link, type ReactiveNode, link, unlink } from './system'
 import { warn } from './warning'
 
 export let activeEffectScope: EffectScope | undefined
 
-export class EffectScope implements Subscriber, Dependency {
-  // Subscriber
+export class EffectScope implements ReactiveNode {
   deps: Link | undefined = undefined
   depsTail: Link | undefined = undefined
-  flags: number = 0
-
-  // Dependency
   subs: Link | undefined = undefined
   subsTail: Link | undefined = undefined
+  flags: number = 0
 
   /**
    * @internal
@@ -86,10 +75,12 @@ export class EffectScope implements Subscriber, Dependency {
     if (sub !== undefined) {
       unlink(sub)
     }
-    startTracking(this)
-    endTracking(this)
-    cleanup(this)
+    let dep = this.deps
+    while (dep !== undefined) {
+      dep = unlink(dep, this)
+    }
     this.flags = 0
+    cleanup(this)
   }
 }