@vobs/runtime 1.7.8 → 1.8.0

package/src/props.test.ts

@@ -1,7 +1,8 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
 import { createDOMRenderer, setRenderer } from '@vobs/vobs'
-import { setProperty, setStaticProps, spreadProps } from './index'
+import { state } from '@vobs/reactivity'
+import { bindAttribute, bindProperty, setProperty, setStaticProps, spreadProps } from './index'
 
 setRenderer(createDOMRenderer())
 
@@ -83,3 +84,62 @@ describe('static and spread prop application', () => {
     expect(node.hasAttribute('title')).toBe(false)
   })
 })
+
+/*
+ * null / undefined 不该被 String() 成字面量写进 DOM。
+ *
+ * bindText 早就把 null/undefined 当 ''，静态路径 setStaticProps 也跳过它们，
+ * 只有响应式的 bindAttribute / bindProperty 漏了 —— 于是 placeholder={undefined}
+ * 会写进 "undefined"，input.value = undefined 也会被 DOM 强转成字符串。
+ */
+describe('绑定 null / undefined', () => {
+  // vobs 的更新是微任务批处理：写完要让它跑一轮，断言才成立
+  const flush = async () => { await Promise.resolve(); await Promise.resolve() }
+
+  it('bindAttribute 不把 undefined 写成字面量', async () => {
+    const input = document.createElement('input')
+    const source = state<unknown>('提示')
+    bindAttribute(input, 'placeholder', source)
+    await flush()
+    expect(input.getAttribute('placeholder')).toBe('提示')
+
+    source.value = undefined
+    await flush()
+    expect(input.getAttribute('placeholder')).not.toBe('undefined')
+
+    source.value = 'ok'
+    await flush()
+    expect(input.getAttribute('placeholder')).toBe('ok')
+  })
+
+  it('bindProperty 不把 undefined 写成字面量，但 false 必须透传', async () => {
+    const input = document.createElement('input')
+    const source = state<unknown>('a')
+    bindProperty(input, 'value', source)
+    await flush()
+    expect(input.value).toBe('a')
+
+    source.value = undefined
+    await flush()
+    expect(input.value).not.toBe('undefined')
+
+    const disabled = state<unknown>(true)
+    bindProperty(input, 'disabled', disabled)
+    await flush()
+    expect(input.disabled).toBe(true)
+    disabled.value = false
+    await flush()
+    expect(input.disabled).toBe(false)
+  })
+
+  it('null 同样被挡住', async () => {
+    const div = document.createElement('div')
+    const source = state<unknown>('x')
+    bindAttribute(div, 'title', source)
+    await flush()
+    expect(div.getAttribute('title')).toBe('x')
+    source.value = null
+    await flush()
+    expect(div.getAttribute('title')).not.toBe('null')
+  })
+})

package/src/ref-cleanup.test.ts

@@ -0,0 +1,144 @@
+// @vitest-environment jsdom
+/*
+ * 回归：**坏的回调 ref 不得打断 Owner 的 dispose 级联**。
+ *
+ * 实测来源（端到端交互冒烟）：playground 的 `<ul ref={attachList}>` 里
+ * `attachList(node)` 直接 `insertList(node, …)` 没判空。回调 ref 会在**卸载时以 null 调用**
+ * （React 语义），于是收到 null 时抛
+ *   TypeError: Cannot read properties of null (reading 'insertBefore')
+ * 而该异常从 `onDispose` 里**冒了出去** —— 导致同一 Owner 后续的 cleanup
+ * （effect 解绑、监听移除、其它 ref 清理）**全部不执行**。
+ *
+ * 这与 `owner.ts:114-128` 已经修过的"子 Owner 抛错不能中断级联"是同一类缺陷：
+ * 清理路径必须逐个隔离，不能因为一个 cleanup 失败就丢下其余的。
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { createOwner, effect, state } from '@vobs/reactivity'
+import { createDOMRenderer } from '@vobs/dom'
+import { setRenderer } from '@vobs/vobs'
+import { createElement, insertBefore, setRef } from './index'
+
+setRenderer(createDOMRenderer())
+
+const flush = async (): Promise<void> => {
+  for (let i = 0; i < 4; i++) await Promise.resolve()
+}
+
+describe('回调 ref 在卸载时收到 null 的行为', () => {
+  it('回调 ref 在挂载时收到节点、在 Owner 销毁时收到 null', () => {
+    const owner = createOwner()
+    const el = createElement('div')
+    const seen: Array<unknown> = []
+    owner.run(() => { setRef(el, (value: unknown) => { seen.push(value) }) })
+    expect(seen).toEqual([el])
+
+    owner.dispose()
+    // React 语义：卸载时以 null 调用
+    expect(seen).toEqual([el, null])
+  })
+
+  it('坏的回调 ref（不判空、收到 null 就抛）不得打断 dispose 级联', async () => {
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+    const owner = createOwner()
+    const el = createElement('div')
+    const value = state(0)
+    let effectRuns = 0
+    let laterCleanupRan = false
+
+    owner.run(() => {
+      // 一个会在收到 null 时抛错的回调 ref（模拟未判空的 attachList）
+      setRef(el, (node: unknown) => {
+        if (node === null) throw new TypeError("Cannot read properties of null (reading 'insertBefore')")
+      })
+      // 这个 effect 代表"同一 Owner 里后续的 cleanup"
+      effect(() => { value.value; effectRuns += 1 })
+      // 再挂一个一定该执行的清理
+      owner.onDispose(() => { laterCleanupRan = true })
+    })
+
+    expect(effectRuns).toBe(1)
+
+    // 关键：dispose 不该因为那个坏 ref 回调而抛出去
+    expect(() => owner.dispose()).not.toThrow()
+
+    // 关键：后续清理必须都跑过（这正是修复前被丢掉的）
+    expect(laterCleanupRan).toBe(true)
+    value.value = 1
+    await flush()
+    expect(effectRuns).toBe(1)          // effect 已被解绑
+
+    // 异常不该无声：要么记录，要么冒泡 —— 这里选择记录
+    expect(spy).toHaveBeenCalled()
+    spy.mockRestore()
+  })
+
+  it('同 owner 内 ref 改指只留一条清理注册（不留陈旧项）', () => {
+    const owner = createOwner()
+    const a = createElement('div')
+    const b = createElement('div')
+    const target = { current: null as unknown }
+
+    const before = owner.mark().cleanups
+    owner.run(() => { setRef(a, target) })
+    expect(owner.mark().cleanups - before).toBe(1)
+    expect(target.current).toBe(a)
+
+    owner.run(() => { setRef(b, target) })
+    /*
+     * 关键：第二次绑定**替换**掉第一条注册，而不是追加。
+     * 修复前这里会变成 2 条 —— 销毁时逆序跑两条清理，其中一条的守卫
+     * （`target.current !== node`）会因为另一条已经把值清成 null 而"恰好通过"，
+     * 于是同一个 ref 被清两次。现在只留最新那条。
+     */
+    expect(owner.mark().cleanups - before).toBe(1)
+    expect(target.current).toBe(b)
+
+    // 销毁时把 ref 清成 null 是**既定语义**（React 的 unmount ref 回调同样收到 null）
+    owner.dispose()
+    expect(target.current).toBeNull()
+  })
+
+  it('跨 owner 改指时，先销毁的那个不覆盖后绑定的值', () => {
+    const first = createOwner()
+    const second = createOwner()
+    const b = createElement('div')
+    const c = createElement('div')
+    const shared = { current: null as unknown }
+    first.run(() => { setRef(b, shared) })
+    second.run(() => { setRef(c, shared) })
+    first.dispose()
+    expect(shared.current).toBe(c)   // 已被 second 改指，first 的清理不该动它
+    second.dispose()
+    expect(shared.current).toBeNull()
+  })
+
+  it('同一个 ref 绑到不同 owner 时各自独立清理（不互相摘除）', () => {
+    const first = createOwner()
+    const second = createOwner()
+    const target = { current: null as unknown }
+    const a = createElement('div')
+    const b = createElement('div')
+    first.run(() => { setRef(a, target) })
+    second.run(() => { setRef(b, target) })
+    second.dispose()
+    expect(target.current).toBeNull()
+    // first 的注册必须还在（属于另一个 owner），销毁时照常清理
+    first.dispose()
+    expect(target.current).toBeNull()
+  })
+
+  it('ref 指向的节点被移除后，后续插入不该拿到 null 父节点', () => {
+    const host = createElement('div')
+    const list = createElement('ul')
+    insertBefore(host, list, null)
+    // 判空守卫的形态（修复后 playground 的写法）
+    const attach = (node: Element | null): void => {
+      if (!node) return
+      const li = createElement('li')
+      insertBefore(node, li, null)
+    }
+    attach(list)
+    expect(list.children.length).toBe(1)
+    expect(() => attach(null)).not.toThrow()
+  })
+})

package/src/ref.ts

@@ -1,4 +1,5 @@
-import { getCurrentOwner } from '@vobs/reactivity'
+import { getCurrentOwner, type Owner } from '@vobs/reactivity'
+import { formatVobsError } from './error'
 
 /** A mutable reference populated when a host node is mounted. */
 export interface Ref<T extends object = Node> {
@@ -11,6 +12,32 @@ export function ref<T extends object = Node>(initialValue: T | null = null): Ref
   return { current: initialValue }
 }
 
+/*
+ * 每个 (Owner, ref 目标) 只保留**一条**清理注册。
+ *
+ * 为什么需要：`ref` 会被先后绑到不同节点（同一个 ref 对象、节点被替换；
+ * 或条件分支里换了宿主元素）。若每次都 `onDispose` 追加一条，销毁时按注册**逆序**执行，
+ * 后注册的那条先把 `target.current` 清成 `null`，于是先注册那条的守卫
+ * （`isObjectRef(target) && target.current !== node`）**恰好通过**，再清一次 ——
+ * 最终读到 `null` 而不是当前节点。
+ *
+ * 用 WeakMap<Owner, WeakMap<target, cleanup>> 而不是往 Owner 上挂属性：
+ * Owner 是 class 实例，挂新属性会把它推进字典模式（reactivity/src/owner.ts 记过这笔代价）。
+ * target 可弱引用（对象），函数型 ref 也可弱引用，所以不阻止回收。
+ */
+const refCleanups = new WeakMap<Owner, WeakMap<object, () => void>>()
+
+function rememberRefCleanup(owner: Owner, target: object, cleanup: () => void): void {
+  let byTarget = refCleanups.get(owner)
+  if (!byTarget) {
+    byTarget = new WeakMap()
+    refCleanups.set(owner, byTarget)
+  }
+  const previous = byTarget.get(target)
+  if (previous) owner.removeCleanup(previous)
+  byTarget.set(target, cleanup)
+}
+
 /** Bind a host node to an object or callback ref and clear it with its Owner. */
 export function setRef<T extends object>(node: T, target: unknown): void {
   if (!isRefTarget<T>(target)) return
@@ -19,11 +46,28 @@ export function setRef<T extends object>(node: T, target: unknown): void {
   if (isSSRNode(node)) return
   const owner = getCurrentOwner()
   assignRef(target, node)
-  owner?.onDispose(() => {
-    // Do not clear a ref that has since been reassigned to another node.
-    if (isObjectRef(target) && target.current !== node) return
-    assignRef(target, null)
-  })
+  if (!owner) return
+  const cleanup = (): void => {
+    /*
+     * 清除 ref 时**必须自己吞掉异常**，不能让 user 的 ref 回调把 dispose 级联打断。
+     *
+     * `assignRef` 内部已经 try/catch + `console.error`（回调是用户代码，不该让挂载失败），
+     * 但那条保护只覆盖"赋值"这一步 —— 而这里还有一个**可能抛错的前置判断**。
+     * 按 React 语义，函数型 ref 在卸载时**本来就该收到 `null`**；若回调没判空
+     * （如 `node => insertList(node, …)`），它会抛，而异常从 onDispose 冒出去会
+     * **中断 Owner 的整个清理循环**（实测：/runtime 页面的 `<ul ref={attachList}>`）。
+     * 这与 owner.ts 已修的"子 Owner 抛错不能中断级联"是同一类缺陷。
+     */
+    try {
+      // Do not clear a ref that has since been reassigned to another node.
+      if (isObjectRef(target) && target.current !== node) return
+      assignRef(target, null)
+    } catch (error) {
+      console.error(formatVobsError(error, { includeStack: true }))
+    }
+  }
+  rememberRefCleanup(owner, target as object, cleanup)
+  owner.onDispose(cleanup)
 }
 
 function isSSRNode(value: object): boolean {
@@ -44,7 +88,12 @@ function assignRef<T extends object>(target: RefTarget<T>, value: T | null): voi
   try {
     if (typeof target === 'function') target(value)
     else target.current = value
-  } catch {
-    // Ref callbacks are user code; never make mounting fail because of them.
+  } catch (error) {
+    /*
+     * ref 回调是用户代码，挂载不该因为它失败 —— 但也不能**完全无声**：
+     * 回调抛错时 ref 拿不到节点，界面看起来正常，用户完全不知道为什么。
+     * 保持吞掉（不冒泡），但打一条控制台记录。
+     */
+    console.error(formatVobsError(error, { includeStack: true }))
   }
 }

package/src/remove-listener-identity.test.ts

@@ -0,0 +1,97 @@
+// @vitest-environment jsdom
+/*
+ * `removeEventListener(node, event, handler)` **必须比 handler 身份**。
+ *
+ * 这是 DOM `removeEventListener` 的既定语义：只有 `(type, listener, capture)` 三者都一致
+ * 才摘除；用另一个 listener 调用是 **no-op**。
+ *
+ * 修复前：实现忽略传入的 `handler` —— 只要 `(node,event)` 上有绑定就一律摘掉并删除绑定记录。
+ * 于是"取消自己那次"的调用把**当前生效的别人的**监听弄没了。
+ * 实测形态：`addEventListener(el,'click',A)` 之后 `removeEventListener(el,'click',B)`
+ * 会把 A 摘掉，A 从此再也收不到事件。
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { createDOMRenderer } from '@vobs/dom'
+import { setRenderer } from '@vobs/vobs'
+import { addEventListener, removeEventListener } from './ops'
+
+setRenderer(createDOMRenderer())
+
+describe('removeEventListener 按 handler 身份摘除', () => {
+  it('传另一个 handler 是 no-op，当前绑定仍然生效', () => {
+    const el = document.createElement('button')
+    const a = vi.fn()
+    const b = vi.fn()
+    addEventListener(el, 'click', a)
+
+    removeEventListener(el, 'click', b)   // 修复前：把 a 摘掉了
+
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(a, '用别的 handler 调 remove 把当前绑定误摘了').toHaveBeenCalledTimes(1)
+    expect(b).not.toHaveBeenCalled()
+  })
+
+  it('传同一个 handler 才真的摘除', () => {
+    const el = document.createElement('button')
+    const a = vi.fn()
+    addEventListener(el, 'click', a)
+
+    removeEventListener(el, 'click', a)
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(a).not.toHaveBeenCalled()
+  })
+
+  it('误摘失败之后，正确的摘除仍然有效（绑定记录没被破坏）', () => {
+    const el = document.createElement('button')
+    const a = vi.fn()
+    const b = vi.fn()
+    addEventListener(el, 'click', a)
+
+    removeEventListener(el, 'click', b)   // no-op
+    removeEventListener(el, 'click', a)   // 真正摘掉
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(a).not.toHaveBeenCalled()
+  })
+
+  it('重绑之后按新 handler 摘除（绑定记录跟着走）', () => {
+    const el = document.createElement('button')
+    const a = vi.fn()
+    const b = vi.fn()
+    addEventListener(el, 'click', a)
+    addEventListener(el, 'click', b)            // 重绑替换
+
+    removeEventListener(el, 'click', a)  // 旧 handler：已不是当前绑定 → no-op
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(b).toHaveBeenCalledTimes(1)
+    expect(a).not.toHaveBeenCalled()
+
+    removeEventListener(el, 'click', b)  // 当前绑定 → 摘掉
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(b).toHaveBeenCalledTimes(1)
+  })
+
+  it('没有绑定记录时，按传入的 handler 兜底摘一次（渲染器直连仍可用）', () => {
+    const el = document.createElement('button')
+    const direct = vi.fn()
+    const renderer = createDOMRenderer()
+    renderer.addEventListener(el, 'click', direct)   // 绕过 bindEvent 直接绑
+
+    removeEventListener(el, 'click', direct)
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(direct).not.toHaveBeenCalled()
+  })
+
+  it('多个事件类型互不干扰', () => {
+    const el = document.createElement('button')
+    const onClick = vi.fn()
+    const onFocus = vi.fn()
+    addEventListener(el, 'click', onClick)
+    addEventListener(el, 'focus', onFocus)
+
+    removeEventListener(el, 'click', onClick)
+    el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    el.dispatchEvent(new FocusEvent('focus'))
+    expect(onClick).not.toHaveBeenCalled()
+    expect(onFocus).toHaveBeenCalledTimes(1)
+  })
+})

package/src/renderer.ts

@@ -16,7 +16,9 @@ export interface VobsRenderer<
   removeChild(parent: NodeType, child: NodeType): void
   setTextContent(node: TextNode, content: string): void
   setProperty(node: ElementNode, key: string, value: unknown): void
-  setAttribute(node: ElementNode, key: string, value: string): void
+  setAttribute(node: ElementNode, key: string, value: string): void
+  /** 删除 attribute。可选：老自定义渲染器没实现时运行时退回 setAttribute(key, '')。 */
+  removeAttribute?(node: ElementNode, key: string): void
   addEventListener(node: ElementNode, event: string, handler: EventListener): void
   removeEventListener(node: ElementNode, event: string, handler: EventListener): void
   nextSibling(node: NodeType): NodeType | null

package/src/select-hidden-subscription.test.ts

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+/*
+ * `<select value={…}>` 插入 option 时的值重放，**不得建立隐藏订阅**。
+ *
+ * 机制：`bindProperty(select,'value',…)` 会注册一个 reader（`ops.ts` 的
+ * `selectValueReaders`），插入 `<option>` 时同步重放当前值。
+ * 而插入往往发生在某个 effect 运行期间（`insertList`/`insertDynamic` 都由 effect 驱动）——
+ * 若重放里的读取被算进**外层 effect 的依赖**，该 effect 以后会被那个信号唤醒：
+ * 依赖图上多一条没人打算建立的边（"隐藏订阅"），表现为"插选项时某个不相关的 effect 重跑了"。
+ *
+ * 判据用**行为**：外层 effect 的重跑次数。
+ * 修复前：插入 option 时外层 effect 会额外重跑（因为它意外订阅了值信号）。
+ * 修复后：外层 effect 只被它自己读的信号驱动。
+ */
+import { describe, expect, it } from 'vitest'
+import { createDOMRenderer, setRenderer, state } from '@vobs/vobs'
+import { effect, scheduler } from '@vobs/reactivity'
+import { bindProperty, createElement, insertBefore, setAttribute } from './index'
+
+setRenderer(createDOMRenderer())
+const settle = (): void => { scheduler.flush() }
+
+function optionFor(value: string): HTMLOptionElement {
+  const option = createElement('option') as HTMLOptionElement
+  setAttribute(option, 'value', value)
+  return option
+}
+
+describe('<select> value 重放不得建立隐藏订阅', () => {
+  it('插入 option 不会让"值信号"之外的 effect 被唤醒', () => {
+    const select = createElement('select') as HTMLSelectElement
+    const selectedValue = state('b')
+    const unrelated = state(0)
+
+    bindProperty(select, 'value', () => selectedValue.value)
+
+    // 外层 effect：只读 `unrelated`，与 select 的值无关
+    let runs = 0
+    const stop = effect(() => {
+      runs += 1
+      void unrelated.value
+      // 在 effect 内插入选项 —— 模拟列表驱动的动态 option
+      const option = optionFor('a')
+      insertBefore(select, option, null)
+    })
+    settle()
+    const afterFirst = runs
+    expect(afterFirst).toBeGreaterThanOrEqual(1)
+
+    // 改**值信号**：外层 effect 没读过它，不该被唤醒
+    selectedValue.value = 'a'
+    settle()
+    expect(runs, '插入 option 的路径让外层 effect 意外订阅了 select 的值信号').toBe(afterFirst)
+
+    stop.dispose()
+  })
+
+  it('重放仍然生效：动态插入的 option 能命中已绑定的值', () => {
+    const select = createElement('select') as HTMLSelectElement
+    const selectedValue = state('b')
+    bindProperty(select, 'value', () => selectedValue.value)
+    settle()
+
+    insertBefore(select, optionFor('a'), null)
+    insertBefore(select, optionFor('b'), null)
+    settle()
+
+    // 值 'b' 对应的 option 现在存在了 → select.value 应当命中
+    expect(select.value).toBe('b')
+  })
+
+  it('值信号变化本身仍然驱动 select.value（绑定没被 untrack 弄坏）', () => {
+    const select = createElement('select') as HTMLSelectElement
+    const selectedValue = state('a')
+    bindProperty(select, 'value', () => selectedValue.value)
+    insertBefore(select, optionFor('a'), null)
+    insertBefore(select, optionFor('b'), null)
+    settle()
+    expect(select.value).toBe('a')
+
+    selectedValue.value = 'b'
+    settle()
+    expect(select.value, '绑定的 effect 没跟上值信号').toBe('b')
+  })
+
+  it('optgroup 内的 option 也会触发重放（既有语义不变）', () => {
+    const select = createElement('select') as HTMLSelectElement
+    const selectedValue = state('x')
+    bindProperty(select, 'value', () => selectedValue.value)
+    const group = createElement('optgroup')
+    insertBefore(select, group, null)
+    insertBefore(group, optionFor('x'), null)
+    settle()
+    expect(select.value).toBe('x')
+  })
+
+  it('没有绑定值的 select 插入 option 是安全的（reader 不存在）', () => {
+    const select = createElement('select') as HTMLSelectElement
+    expect(() => {
+      insertBefore(select, optionFor('a'), null)
+    }).not.toThrow()
+    expect(select.value).toBe('a')
+  })
+})