响应式-副作用函数与依赖收集

export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions,
): ReactiveEffectRunner<T> {
  // 如果 fn 已经是一个 effect runner，则指向其原始函数
  if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
    fn = (fn as ReactiveEffectRunner).effect.fn
  }

  // 构造 ReactiveEffect 实例
  const e = new ReactiveEffect(fn)

  // 合并 options
  if (options) {
    extend(e, options)
  }

  // 立即执行一次，完成首次依赖收集
  try {
    e.run()
  } catch (err) {
    e.stop()
    throw err
  }

  // 返回 runner 函数，runner 上挂载了 effect 实例的引用
  const runner = e.run.bind(e) as ReactiveEffectRunner
  runner.effect = e
  return runner
}

const state = reactive({ a: 1 })

effect(() => console.log(state.a))
// 立即打印: 1（因为 run() 被调用了）

// 当前活跃的订阅者（旧版叫 activeEffect）
export let activeSub: Subscriber | undefined

// 效果标记位枚举
export enum EffectFlags {
  ACTIVE = 1 << 0,     // 是否处于活跃状态
  RUNNING = 1 << 1,    // 是否正在运行
  TRACKING = 1 << 2,   // 是否需要追踪依赖
  NOTIFIED = 1 << 3,   // 是否已被通知（等待执行）
  DIRTY = 1 << 4,      // 是否脏（需要重新计算，computed 用）
  ALLOW_RECURSE = 1 << 5, // 是否允许递归
  PAUSED = 1 << 6,     // 是否暂停
}

// Subscriber 接口
export interface Subscriber extends DebuggerOptions {
  deps?: Link          // 依赖链表头
  depsTail?: Link      // 依赖链表尾
  flags: EffectFlags   // 标记位
  next?: Subscriber    // 下一个待执行的订阅者（批处理用）
  notify(): true | void // 通知方法
}

export class ReactiveEffect<T = any>
  implements Subscriber, ReactiveEffectOptions
{
  deps?: Link = undefined            // 双向链表头指针
  depsTail?: Link = undefined        // 双向链表尾指针
  flags: EffectFlags = EffectFlags.ACTIVE | EffectFlags.TRACKING
  next?: Subscriber = undefined      // 批处理链表
  cleanup?: () => void = undefined   // 清理函数

  scheduler?: EffectScheduler = undefined
  onStop?: () => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void

  constructor(public fn: () => T) {
    // 如果当前处于活跃的 effectScope 中，自动注册
    if (activeEffectScope && activeEffectScope.active) {
      activeEffectScope.effects.push(this)
    }
  }
  // ... 其他方法
}

run(): T {
  // 如果 effect 已停止，直接执行 fn 但不收集依赖
  if (!(this.flags & EffectFlags.ACTIVE)) {
    return this.fn()
  }

  this.flags |= EffectFlags.RUNNING
  // 1. 执行清理函数（如果有）
  cleanupEffect(this)
  // 2. 准备依赖：将所有已有 Link 的 version 标记为 -1
  prepareDeps(this)

  // 3. 保存上一次的 activeSub，实现嵌套切换
  const prevEffect = activeSub
  const prevShouldTrack = shouldTrack
  activeSub = this
  shouldTrack = true

  try {
    // 4. 执行副作用函数，触发 getter → track → 依赖收集
    return this.fn()
  } finally {
    // 5. 清理无效依赖：version 仍为 -1 的 Link 就是无效的
    cleanupDeps(this)
    // 6. 恢复上下文
    activeSub = prevEffect
    shouldTrack = prevShouldTrack
    this.flags &= ~EffectFlags.RUNNING
  }
}

const state = reactive({ a: 1, b: 2 })

// ef1
effect(() => {
  // ef2
  effect(() => console.log(`b: ${state.b}`))
  console.log(`a: ${state.a}`)
})

state.a++

const prevEffect = activeSub   // 保存
activeSub = this                // 设置
try {
  return this.fn()
} finally {
  activeSub = prevEffect        // 恢复
}

export class Dep {
  version = 0                    // 版本号，每次 trigger 自增
  activeLink?: Link = undefined  // 指向当前活跃 effect 的 Link
  subs?: Link = undefined        // 订阅者链表尾指针
  subsHead?: Link                // 订阅者链表头指针（DEV only）
  map?: KeyToDepMap = undefined  // 所属的 depsMap（用于属性级清理）
  key?: unknown = undefined      // 属性 key（用于属性级清理）
  sc: number = 0                 // 订阅者计数

  constructor(public computed?: ComputedRefImpl | undefined) {}
}

export class Link {
  version: number               // 版本号，用于依赖清理
  nextDep?: Link                // 同一 subscriber 的下一个 dep
  prevDep?: Link                // 同一 subscriber 的上一个 dep
  nextSub?: Link                // 同一 dep 的下一个 subscriber
  prevSub?: Link                // 同一 dep 的上一个 subscriber
  prevActiveLink?: Link         // 保存前一个 activeLink（用于恢复）

  constructor(
    public sub: Subscriber,     // 订阅者（effect 或 computed）
    public dep: Dep,            // 依赖项（响应式属性）
  ) {
    this.version = dep.version  // 初始化版本号
  }
}

// baseHandlers.ts 中的 getter
get(target, key, receiver) {
  // ...
  if (!isReadonly) {
    track(target, TrackOpTypes.GET, key)
  }
  // ...
}

// dep.ts
export function track(target: object, type: TrackOpTypes, key: unknown): void {
  if (shouldTrack && activeSub) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) {
      depsMap.set(key, (dep = new Dep()))
      dep.map = depsMap
      dep.key = key
    }
    // 开发环境下传入调试信息
    dep.track({ target, type, key })
  }
}

targetMap: WeakMap<object, Map<key, Dep>>
  └── target → depsMap: Map<key, Dep>
       └── key → Dep { version, subs, activeLink, ... }

track(debugInfo?): Link | undefined {
  // 没有 activeSub 或不需要追踪，直接返回
  if (!activeSub || !shouldTrack || activeSub === this.computed) {
    return
  }

  let link = this.activeLink
  if (link === undefined || link.sub !== activeSub) {
    // 情况一：全新的订阅关系，创建新 Link
    link = this.activeLink = new Link(activeSub, this)

    if (!activeSub.deps) {
      // effect 的 deps 链表为空，Link 作为唯一节点
      activeSub.deps = activeSub.depsTail = link
    } else {
      // 追加到 effect 的 deps 链表尾部
      link.prevDep = activeSub.depsTail
      activeSub.depsTail!.nextDep = link
      activeSub.depsTail = link
    }

    // 将 Link 加入 dep 的 subs 链表
    addSub(link)

  } else if (link.version === -1) {
    // 情况二：复用上次 run 的 Link（version 被标记为 -1 后又被访问到）
    link.version = this.version

    // 如果该 Link 不在 deps 链表尾部，将其移动到尾部
    // 这保证了 effect 的 deps 链表顺序与属性访问顺序一致
    if (link.nextDep) {
      const next = link.nextDep
      next.prevDep = link.prevDep
      if (link.prevDep) link.prevDep.nextDep = next

      link.prevDep = activeSub.depsTail
      link.nextDep = undefined
      activeSub.depsTail!.nextDep = link
      activeSub.depsTail = link

      if (activeSub.deps === link) {
        activeSub.deps = next
      }
    }
  }

  return link
}

function addSub(link: Link) {
  link.dep.sc++  // 订阅者计数 +1

  if (link.sub.flags & EffectFlags.TRACKING) {
    const computed = link.dep.computed
    // computed 首次获得订阅者时，启用追踪并订阅 computed 自身的所有 deps
    if (computed && !link.dep.subs) {
      computed.flags |= EffectFlags.TRACKING | EffectFlags.DIRTY
      for (let l = computed.deps; l; l = l.nextDep) {
        addSub(l)
      }
    }

    const currentTail = link.dep.subs
    if (currentTail !== link) {
      link.prevSub = currentTail
      if (currentTail) currentTail.nextSub = link
    }

    if (__DEV__ && link.dep.subsHead === undefined) {
      link.dep.subsHead = link
    }

    link.dep.subs = link  // 更新尾指针
  }
}

const state = reactive({ a: 1, show: true })

effect(() => {
  if (state.show) {
    console.log(`a: ${state.a}`)
  }
})

// 此时 effect 同时依赖 show 和 a

setTimeout(() => {
  state.show = false
  // effect 重新执行，fn 内不再访问 state.a
  // 如果不清理，后续 state.a 变化仍会触发 effect
}, 1000)

function prepareDeps(sub: Subscriber) {
  for (let link = sub.deps; link; link = link.nextDep) {
    // 标记为 -1，表示"待验证"
    link.version = -1
    // 保存之前的 activeLink，用于后续恢复
    link.prevActiveLink = link.dep.activeLink
    link.dep.activeLink = link
  }
}

// dep.track() 中
else if (link.version === -1) {
  link.version = this.version  // 从 -1 恢复为当前版本号
  // ... 可选地移动到链表尾部
}

function cleanupDeps(sub: Subscriber) {
  let head
  let tail = sub.depsTail
  let link = tail

  while (link) {
    const prev = link.prevDep
    if (link.version === -1) {
      // version 仍为 -1 → 该依赖未被使用，需要清理
      if (link === tail) tail = prev

      // 从 dep 的 subs 链表中移除该 Link
      removeSub(link)
      // 从 effect 的 deps 链表中移除该 Link
      removeDep(link)
    } else {
      // version 不为 -1 → 该依赖仍在使用，保留
      // 最后一个保留的节点成为新的 head
      head = link
    }

    // 恢复 dep 的 activeLink
    link.dep.activeLink = link.prevActiveLink
    link.prevActiveLink = undefined
    link = prev
  }

  // 更新 effect 的 deps 链表首尾指针
  sub.deps = head
  sub.depsTail = tail
}

const state = reactive({ a: 1, show: true })

effect(() => {
  if (state.show) {
    console.log(`a: ${state.a}`)
  }
})

// baseHandlers.ts 中的 setter
set(target, key, value, receiver) {
  // ...
  if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
  // ...
}

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>,
): void {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    globalVersion++  // 即使没有 deps，也递增全局版本号
    return
  }

  const run = (dep: Dep | undefined) => {
    if (dep) dep.trigger()
  }

  startBatch()  // 开启批处理

  if (type === TriggerOpTypes.CLEAR) {
    depsMap.forEach(run)
  } else {
    const targetIsArray = isArray(target)
    const isArrayIndex = targetIsArray && isIntegerKey(key)

    if (targetIsArray && key === 'length') {
      const newLength = Number(newValue)
      depsMap.forEach((dep, key) => {
        if (key === 'length' || key === ARRAY_ITERATE_KEY ||
            (!isSymbol(key) && key >= newLength)) {
          run(dep)
        }
      })
    } else {
      // SET | ADD | DELETE：触发指定 key 的 dep
      if (key !== void 0 || depsMap.has(void 0)) {
        run(depsMap.get(key))
      }

      // 数组索引变化还需要触发 ARRAY_ITERATE_KEY
      if (isArrayIndex) {
        run(depsMap.get(ARRAY_ITERATE_KEY))
      }

      // ADD / DELETE 需要触发 ITERATE_KEY
      switch (type) {
        case TriggerOpTypes.ADD:
          if (!targetIsArray) {
            run(depsMap.get(ITERATE_KEY))
            if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY))
          } else if (isArrayIndex) {
            run(depsMap.get('length'))
          }
          break
        case TriggerOpTypes.DELETE:
          if (!targetIsArray) {
            run(depsMap.get(ITERATE_KEY))
            if (isMap(target)) run(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
          break
        case TriggerOpTypes.SET:
          if (isMap(target)) run(depsMap.get(ITERATE_KEY))
          break
      }
    }
  }

  endBatch()  // 结束批处理，执行所有待处理的 effect
}

trigger(debugInfo?): void {
  this.version++       // 递增 dep 版本号
  globalVersion++      // 递增全局版本号（computed 快速路径用）
  this.notify(debugInfo)
}

notify(debugInfo?): void {
  startBatch()
  try {
    // 遍历 subs 链表，通知所有订阅者
    for (let link = this.subs; link; link = link.prevSub) {
      if (link.sub.notify() === true) {
        // computed 的 notify 返回 true，需要继续通知 computed 的 dep
        ;(link.sub as ComputedRefImpl).dep.notify()
      }
    }
  } finally {
    endBatch()
  }
}

let batchDepth = 0
let batchedSub: Subscriber | undefined
let batchedComputed: Subscriber | undefined

export function startBatch(): void {
  batchDepth++
}

export function endBatch(): void {
  if (--batchDepth > 0) return

  // 先处理 computed（computed 优先级高于普通 effect）
  if (batchedComputed) {
    let e = batchedComputed
    batchedComputed = undefined
    while (e) {
      const next = e.next
      e.next = undefined
      e.flags &= ~EffectFlags.NOTIFIED
      e = next
    }
  }

  // 再处理普通 effect
  let error: unknown
  while (batchedSub) {
    let e = batchedSub
    batchedSub = undefined
    while (e) {
      const next = e.next
      e.next = undefined
      e.flags &= ~EffectFlags.NOTIFIED
      if (e.flags & EffectFlags.ACTIVE) {
        try {
          ;(e as ReactiveEffect).trigger()
        } catch (err) {
          if (!error) error = err
        }
      }
      e = next
    }
  }

  if (error) throw error
}

notify(): void {
  // 如果正在运行且不允许递归，跳过
  if (this.flags & EffectFlags.RUNNING &&
      !(this.flags & EffectFlags.ALLOW_RECURSE)) {
    return
  }
  // 如果还没被通知过，加入批处理队列
  if (!(this.flags & EffectFlags.NOTIFIED)) {
    batch(this)
  }
}

trigger(): void {
  if (this.flags & EffectFlags.PAUSED) {
    pausedQueueEffects.add(this)
  } else if (this.scheduler) {
    // 有调度器（如 watch），交给调度器处理
    this.scheduler()
  } else {
    // 没有调度器，检查是否脏，脏则重新 run
    this.runIfDirty()
  }
}

export function onEffectCleanup(fn: () => void, failSilently = false): void {
  if (activeSub instanceof ReactiveEffect) {
    activeSub.cleanup = fn
  } else if (__DEV__ && !failSilently) {
    warn(
      `onEffectCleanup() was called when there was no active effect` +
        ` to associate with.`,
    )
  }
}

function cleanupEffect(e: ReactiveEffect) {
  const { cleanup } = e
  e.cleanup = undefined
  if (cleanup) {
    const prevSub = activeSub
    activeSub = undefined  // 清理期间暂停依赖收集
    try {
      cleanup()
    } finally {
      activeSub = prevSub  // 恢复依赖收集
    }
  }
}

const cleanupMap: WeakMap<ReactiveEffect, (() => void)[]> = new WeakMap()
let activeWatcher: ReactiveEffect | undefined = undefined

export function onWatcherCleanup(
  cleanupFn: () => void,
  failSilently = false,
  owner: ReactiveEffect | undefined = activeWatcher,
): void {
  if (owner) {
    let cleanups = cleanupMap.get(owner)
    if (!cleanups) cleanupMap.set(owner, (cleanups = []))
    cleanups.push(cleanupFn)
  } else if (__DEV__ && !failSilently) {
    warn(
      `onWatcherCleanup() was called when there was no active watcher` +
        ` to associate with.`,
    )
  }
}

watch(id, (newId, oldId, onCleanup) => {
  const controller = new AbortController()

  fetch(`/api/${newId}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      // 处理数据
    })

  // 注册清理回调：下次 watch 触发前取消上一次请求
  onCleanup(() => controller.abort())
})

stop(): void {
  if (this.flags & EffectFlags.ACTIVE) {
    // 从所有 dep 的 subs 链表中移除自己
    for (let link = this.deps; link; link = link.nextDep) {
      removeSub(link)
    }
    this.deps = this.depsTail = undefined
    // 执行清理回调
    cleanupEffect(this)
    // 执行 onStop 回调
    this.onStop && this.onStop()
    // 移除 ACTIVE 标记
    this.flags &= ~EffectFlags.ACTIVE
  }
}

pause(): void {
  this.flags |= EffectFlags.PAUSED
}

resume(): void {
  if (this.flags & EffectFlags.PAUSED) {
    this.flags &= ~EffectFlags.PAUSED
    if (pausedQueueEffects.has(this)) {
      pausedQueueEffects.delete(this)
      this.trigger()  // 恢复时触发一次
    }
  }
}

function isDirty(sub: Subscriber): boolean {
  for (let link = sub.deps; link; link = link.nextDep) {
    if (
      link.dep.version !== link.version ||
      (link.dep.computed &&
        (refreshComputed(link.dep.computed) ||
          link.dep.version !== link.version))
    ) {
      return true
    }
  }
  if (sub._dirty) return true
  return false
}

export class EffectScope {
  private _active = true
  effects: ReactiveEffect[] = []
  cleanups: (() => void)[] = []
  private _isPaused = false
  parent: EffectScope | undefined
  scopes: EffectScope[] | undefined
  private index: number | undefined

  constructor(public detached = false) {
    this.parent = activeEffectScope
    // 非独立作用域自动注册到父作用域
    if (!detached && activeEffectScope) {
      this.index =
        (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(this) - 1
    }
  }

  run<T>(fn: () => T): T | undefined {
    if (this._active) {
      const currentEffectScope = activeEffectScope
      try {
        activeEffectScope = this
        return fn()
      } finally {
        activeEffectScope = currentEffectScope
      }
    }
  }

  stop(fromParent?: boolean): void {
    if (this._active) {
      this._active = false
      // 停止所有 effect
      for (let i = 0; i < this.effects.length; i++) {
        this.effects[i].stop()
      }
      this.effects.length = 0
      // 执行所有清理函数
      for (let i = 0; i < this.cleanups.length; i++) {
        this.cleanups[i]()
      }
      this.cleanups.length = 0
      // 递归停止子作用域
      if (this.scopes) {
        for (let i = 0; i < this.scopes.length; i++) {
          this.scopes[i].stop(true)
        }
        this.scopes.length = 0
      }
      // 从父作用域中移除自己
      if (!this.detached && this.parent && !fromParent) {
        const last = this.parent.scopes!.pop()
        if (last && last !== this) {
          this.parent.scopes![this.index!] = last
          last.index = this.index!
        }
      }
      this.parent = undefined
    }
  }

  pause(): void { /* 暂停所有子 effect */ }
  resume(): void { /* 恢复所有子 effect */ }
}

constructor(public fn: () => T) {
  if (activeEffectScope && activeEffectScope.active) {
    activeEffectScope.effects.push(this)
  }
}

const scope = effectScope()

scope.run(() => {
  // 这些 effect 会自动注册到 scope
  effect(() => console.log('effect 1'))
  effect(() => console.log('effect 2'))

  const sum = computed(() => /* ... */)

  watch(source, () => { /* ... */ })

  onScopeDispose(() => {
    console.log('scope 被销毁了')
  })
})

// 一键清理
scope.stop()
// 所有 effect、computed、watch 都会被停止
// onScopeDispose 注册的回调也会被执行

export let shouldTrack = true
const trackStack: boolean[] = []

export function pauseTracking(): void {
  trackStack.push(shouldTrack)
  shouldTrack = false
}

export function enableTracking(): void {
  trackStack.push(shouldTrack)
  shouldTrack = true
}

export function resetTracking(): void {
  const last = trackStack.pop()
  shouldTrack = last === undefined ? true : last
}