@vobs/runtime 1.3.6 → 1.4.0

package/src/hmr.test.ts

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
+import { effect, onDispose, scheduler, state } from '@vobs/reactivity'
 import {
   createHmrStateStore,
   disposeHmrModule,
@@ -7,29 +8,34 @@ import {
   resolveComponent,
   updateHmrModule
 } from './hmr'
-import { createComponent, insertBefore, setRenderer } from './ops'
+import { createComponent, insertBefore, removeChild, setRenderer } from './ops'
+import { createFragment, type VobsNode } from './fragment'
+
+function setupRenderer(): void {
+  setRenderer<Node, Text, Element, Comment>({
+    createText: content => document.createTextNode(content),
+    createElement: tag => document.createElement(tag),
+    createComment: content => document.createComment(content),
+    insertBefore: (parent, child, anchor) => { parent.insertBefore(child, anchor) },
+    removeChild: (parent, child) => { parent.removeChild(child) },
+    setTextContent: (node, content) => { node.textContent = content },
+    setProperty: (node, key, value) => { (node as unknown as Record<string, unknown>)[key] = value },
+    setAttribute: (node, key, value) => { node.setAttribute(key, value) },
+    addEventListener: (node, event, handler) => { node.addEventListener(event, handler) },
+    removeEventListener: (node, event, handler) => { node.removeEventListener(event, handler) },
+    nextSibling: node => node.nextSibling,
+    clear: container => {
+      while (container.childNodes.length > 0) {
+        const child = container.childNodes[0]
+        if (child) container.removeChild(child)
+      }
+    }
+  })
+}
 
 describe('runtime HMR', () => {
   it('刷新已挂载的组件节点时复用原 Owner', () => {
-    setRenderer<Node, Text, Element, Comment>({
-      createText: content => document.createTextNode(content),
-      createElement: tag => document.createElement(tag),
-      createComment: content => document.createComment(content),
-      insertBefore: (parent, child, anchor) => { parent.insertBefore(child, anchor) },
-      removeChild: (parent, child) => { parent.removeChild(child) },
-      setTextContent: (node, content) => { node.textContent = content },
-      setProperty: (node, key, value) => { (node as unknown as Record<string, unknown>)[key] = value },
-      setAttribute: (node, key, value) => { node.setAttribute(key, value) },
-      addEventListener: (node, event, handler) => { node.addEventListener(event, handler) },
-      removeEventListener: (node, event, handler) => { node.removeEventListener(event, handler) },
-      nextSibling: node => node.nextSibling,
-      clear: container => {
-        while (container.childNodes.length > 0) {
-          const child = container.childNodes[0]
-          if (child) container.removeChild(child)
-        }
-      }
-    })
+    setupRenderer()
     const moduleId = `hmr-mounted-${Date.now()}-${Math.random()}`
     const first = resolveComponent(() => document.createTextNode('first'), moduleId, 'Panel')
     const node = createComponent(first, {})
@@ -41,6 +47,135 @@ describe('runtime HMR', () => {
     expect(parent.textContent).toBe('second')
   })
 
+  it('刷新 fragment 根组件时替换整个 DOM 区间', () => {
+    setupRenderer()
+    const moduleId = `hmr-fragment-${Date.now()}-${Math.random()}`
+    const renderFragment = (label: string): VobsNode => createFragment((parent, anchor) => {
+      insertBefore(parent, document.createTextNode(label), anchor)
+    })
+    const first = resolveComponent(() => renderFragment('first'), moduleId, 'Panel')
+    const node = createComponent(first, {})
+    const parent = document.createElement('div')
+    insertBefore(parent, node, null)
+    expect(parent.textContent).toBe('first')
+
+    updateHmrModule(moduleId, { Panel: () => renderFragment('second') })
+
+    expect(parent.textContent).toBe('second')
+    // 旧 fragment 区间（start 注释 + 文本 + end 注释）整体移除，只余新区间
+    expect(parent.childNodes.length).toBe(3)
+  })
+
+  it('普通节点与 fragment 根组件之间互相刷新替换', () => {
+    setupRenderer()
+    const moduleId = `hmr-mixed-${Date.now()}-${Math.random()}`
+    const first = resolveComponent(() => document.createTextNode('first'), moduleId, 'Panel')
+    const node = createComponent(first, {})
+    const parent = document.createElement('div')
+    insertBefore(parent, node, null)
+
+    updateHmrModule(moduleId, {
+      Panel: () => createFragment((parent, anchor) => {
+        insertBefore(parent, document.createTextNode('second'), anchor)
+      })
+    })
+    expect(parent.textContent).toBe('second')
+
+    updateHmrModule(moduleId, { Panel: () => document.createTextNode('third') })
+    expect(parent.textContent).toBe('third')
+    expect(parent.childNodes.length).toBe(1)
+  })
+
+  it('刷新时释放上一轮渲染作用域：body 清理回调执行、旧 effect 失效', () => {
+    setupRenderer()
+    const moduleId = `hmr-dispose-${Date.now()}-${Math.random()}`
+    const counter = state(0)
+    let renderRuns = 0
+    let effectRuns = 0
+    let disposed = 0
+    const first = resolveComponent(() => {
+      renderRuns++
+      effect(() => {
+        void counter.value
+        effectRuns++
+      })
+      onDispose(() => { disposed++ })
+      return document.createTextNode('first')
+    }, moduleId, 'Panel')
+    const node = createComponent(first, {})
+    const parent = document.createElement('div')
+    insertBefore(parent, node, null)
+    expect(renderRuns).toBe(1)
+
+    updateHmrModule(moduleId, {
+      Panel: () => {
+        renderRuns++
+        effect(() => {
+          void counter.value
+          effectRuns++
+        })
+        return document.createTextNode('second')
+      }
+    })
+
+    expect(parent.textContent).toBe('second')
+    expect(renderRuns).toBe(2)
+    expect(effectRuns).toBe(2)
+    expect(disposed).toBe(1)
+
+    // 旧渲染的 effect 已随渲染作用域释放：信号变化只触发新一轮的 effect
+    counter.value = 99
+    scheduler.flush()
+    expect(effectRuns).toBe(3)
+  })
+
+  it('一次热更新中每个组件实例只渲染一次（refresh 期间新建的实例不再刷新）', () => {
+    setupRenderer()
+    const moduleId = `hmr-once-${Date.now()}-${Math.random()}`
+    let childRuns = 0
+    const child = resolveComponent(() => {
+      childRuns++
+      return document.createTextNode('child')
+    }, moduleId, 'Child')
+    const panel = resolveComponent(() => {
+      const wrapper = document.createElement('div')
+      insertBefore(wrapper, createComponent(child, {}), null)
+      return wrapper
+    }, moduleId, 'Panel')
+    const node = createComponent(panel, {})
+    const parent = document.createElement('div')
+    insertBefore(parent, node, null)
+    expect(childRuns).toBe(1)
+
+    updateHmrModule(moduleId, {
+      Panel: () => createComponent(child, {}),
+      Child: () => {
+        childRuns++
+        return document.createTextNode('child-next')
+      }
+    })
+
+    // Panel 刷新重渲染 Child 一次；refresh 期间新建的 Child 实例已在快照外，不再刷新
+    expect(childRuns).toBe(2)
+    expect(parent.textContent).toBe('child-next')
+  })
+
+  it('普通卸载仍释放整个渲染作用域', () => {
+    setupRenderer()
+    const moduleId = `hmr-unmount-${Date.now()}-${Math.random()}`
+    let disposed = 0
+    const first = resolveComponent(() => {
+      onDispose(() => { disposed++ })
+      return document.createTextNode('first')
+    }, moduleId, 'Panel')
+    const node = createComponent(first, {})
+    const parent = document.createElement('div')
+    insertBefore(parent, node, null)
+
+    removeChild(parent, node)
+    expect(disposed).toBe(1)
+  })
+
   it('更新组件代理时保留已有引用，并保留模块状态', () => {
     const moduleId = `hmr-test-${Date.now()}-${Math.random()}`
     const first = resolveComponent(() => ({ textContent: 'first' } as unknown as Node), moduleId, 'Panel')

package/src/hmr.ts

@@ -55,25 +55,29 @@ export function resolveComponent<Props extends object>(
   return proxy
 }
 
-export function updateHmrModule(_moduleId: string, nextModule: Record<string, unknown>): void {
-  const modules = [...hmrGlobal.modules.values()]
-  for (const module of modules) {
-    let changed = false
-    for (const [name, proxy] of module.components) {
-      const next = nextModule[name]
-      if (typeof next !== 'function') continue
-      const hmrProxy = proxy as HmrComponent & { current: HmrComponent; displayName?: string }
-      hmrProxy.current = next as HmrComponent
-      Object.defineProperty(hmrProxy, 'displayName', { configurable: true, value: next.name || name })
-      changed = true
-    }
-    if (!changed) continue
-    for (const instance of module.instances) {
-      try {
-        instance.refresh()
-      } catch {
-        // HMR failures remain application errors on the next normal render.
-      }
+export function updateHmrModule(moduleId: string, nextModule: Record<string, unknown>): void {
+  const module = hmrGlobal.modules.get(moduleId)
+  if (!module) return
+  let changed = false
+  for (const [name, proxy] of module.components) {
+    const next = nextModule[name]
+    if (typeof next !== 'function') continue
+    const hmrProxy = proxy as HmrComponent & { current: HmrComponent; displayName?: string }
+    hmrProxy.current = next as HmrComponent
+    Object.defineProperty(hmrProxy, 'displayName', { configurable: true, value: next.name || name })
+    changed = true
+  }
+  if (!changed) return
+  // 快照后正序遍历：实例在自身渲染开始前注册，祖先必然先于后代入列——
+  // 祖先先刷新会 dispose 上一轮渲染作用域，其树内旧后代实例的 refresh
+  // 命中已销毁守卫被跳过，避免同一组件在一次热更新中重渲染两次。
+  // 同时 refresh 重渲染以新代码创建的全新实例不在快照中，天然不会再刷新。
+  const instances = [...module.instances]
+  for (const instance of instances) {
+    try {
+      instance.refresh()
+    } catch {
+      // HMR failures remain application errors on the next normal render.
     }
   }
 }

package/src/ops.ts

@@ -59,6 +59,7 @@ export function insertBefore(
 ): void {
   if (isVobsFragment(child)) {
     child.mount(parent, isVobsFragment(anchor) ? anchor.start : anchor)
+    markHmrInstanceMounted(child, parent)
     return
   }
   getRenderer().insertBefore(parent, child, isVobsFragment(anchor) ? anchor.start : anchor)
@@ -301,6 +302,22 @@ export function createComponent<Component extends VobsComponent>(
     attachComponentContext(reason, componentName, owner.id)
     throw reason
   })
+  // HMR 注册先于渲染作用域标记：注册清理必须跨热更新保活，不能被
+  // disposeSince 当作上一轮渲染的清理释放掉。
+  const hmrKey = (component as typeof component & { hmrKey?: string }).hmrKey
+  let instance: HmrInstance | null = null
+  if (hmrKey) {
+    const separator = hmrKey.lastIndexOf(':')
+    const moduleId = separator < 0 ? hmrKey : hmrKey.slice(0, separator)
+    instance = { node: null as unknown as VobsNode, parent: null, refresh: () => refreshInstance() }
+    const cleanup = registerHmrInstance(moduleId, instance)
+    owner.onDispose(cleanup)
+  }
+  // 渲染作用域：组件 Owner 只承载 HMR 注册与错误处理，每轮渲染注册的 effect、
+  // onDispose（含 portal 清理）与嵌套组件 Owner 都归属该轮作用域。HMR refresh
+  // 重渲染前释放上一轮作用域，旧实例的 effect 不再订阅信号、portal 节点不再
+  // 残留在 body 中每轮热更新叠加；组件 Owner 与 HMR 注册保活。
+  const renderScope = owner.mark()
   let node: VobsNode
   try {
     // 组件渲染必须 untrack：组件是 run-once 的，其渲染发生在某次 effect 求值
@@ -316,29 +333,31 @@ export function createComponent<Component extends VobsComponent>(
     throw error
   }
   associateNodeOwner(node, owner)
-  const hmrKey = (component as typeof component & { hmrKey?: string }).hmrKey
-  if (hmrKey) {
-    const instance: HmrInstance = {
-      node,
-      parent: null,
-      refresh(): void {
-        const previous = instance.node
-        const next = owner.run(() => untrack(() => component(props)))
-        if (instance.parent && !isVobsFragment(previous) && !isVobsFragment(next)) {
-          getRenderer().insertBefore(instance.parent, next, previous)
-          getRenderer().removeChild(instance.parent, previous)
-        }
-        nodeOwners.delete(previous as object)
-        nodeOwners.set(next as object, owner)
-        associateHmrInstance(next, instance)
-        instance.node = next
-      }
-    }
+  if (instance) {
+    instance.node = node
     associateHmrInstance(node, instance)
-    const separator = hmrKey.lastIndexOf(':')
-    const moduleId = separator < 0 ? hmrKey : hmrKey.slice(0, separator)
-    const cleanup = registerHmrInstance(moduleId, instance)
-    owner.onDispose(cleanup)
+  }
+  function refreshInstance(): void {
+    // 组件已随旧渲染树一起卸载（如父级在同一次热更新中先完成刷新），
+    // 无法也无需再刷新。
+    if (owner.disposed) return
+    const previous = instance!.node
+    owner.disposeSince(renderScope)
+    const next = owner.run(() => untrack(() => component(props)))
+    const parent = instance!.parent
+    if (parent) {
+      // 先插入新树再卸载旧树：替换锚点始终取自仍在文档中的旧树，
+      // fragment 与普通节点两种形态任意组合都能正确定位插入点。
+      const anchor = isVobsFragment(previous) ? previous.start : previous
+      if (isVobsFragment(next)) next.mount(parent, anchor)
+      else getRenderer().insertBefore(parent, next, anchor)
+      if (isVobsFragment(previous)) previous.unmount(parent)
+      else getRenderer().removeChild(parent, previous)
+    }
+    nodeOwners.delete(previous as object)
+    nodeOwners.set(next as object, owner)
+    associateHmrInstance(next, instance!)
+    instance!.node = next
   }
   return node
 }