@vobs/runtime 1.2.2 → 1.3.1

package/src/hmr.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import {
   createHmrStateStore,
   disposeHmrModule,
+  hmrStateRef,
   resolveComponent,
   updateHmrModule
 } from './hmr'
@@ -54,3 +55,19 @@ describe('runtime HMR', () => {
     expect(createHmrStateStore(moduleId).get('count', 0)).toBe(3)
   })
 })
+
+describe('hmrStateRef', () => {
+  it('模块重执行时复用既有信号实例（状态保鲜）', () => {
+    let first: unknown
+    const create = () => ({ value: 0, tag: Math.random() })
+    // 模拟模块首执行
+    const firstRef = hmrStateRef('src/stores/a.ts', 'count', create)
+    first = firstRef
+    // 模拟热更新后模块重执行：新实例、同一 key
+    const secondRef = hmrStateRef('src/stores/a.ts', 'count', create)
+    expect(secondRef).toBe(first)
+    // 不同 key / 不同模块各自独立
+    expect(hmrStateRef('src/stores/a.ts', 'other', create)).not.toBe(first)
+    expect(hmrStateRef('src/stores/b.ts', 'count', create)).not.toBe(first)
+  })
+})

package/src/hmr.ts

@@ -96,6 +96,20 @@ export function createHmrStateStore(moduleId: string): HmrStateStore {
   }
 }
 
+/**
+ * 编译器为模块顶层 state() 声明生成的取值入口（`#state:` 前缀与手动 store 键隔离）。
+ * 模块热更新重执行时复用既有信号实例：旧导入方持有的实例与新模块实例共享同一份状态，
+ * 消除"两份模块、两份状态"导致的编辑不生效/页面半边失灵。
+ */
+export function hmrStateRef<T>(moduleId: string, key: string, create: () => T): T {
+  const state = getModule(moduleId).state
+  const registryKey = `#state:${key}`
+  if (state.has(registryKey)) return state.get(registryKey) as T
+  const value = create()
+  state.set(registryKey, value)
+  return value
+}
+
 export function registerHmrInstance(moduleId: string, instance: HmrInstance): () => void {
   const instances = getModule(moduleId).instances
   instances.add(instance)

package/src/index.ts

@@ -65,6 +65,7 @@ export type {
 export {
   createHmrStateStore,
   disposeHmrModule,
+  hmrStateRef,
   markHmrInstanceMounted,
   registerHmrInstance,
   resolveComponent,

package/src/ops.ts

@@ -1,6 +1,6 @@
 // 编译产物调用的基础操作
 
-import { createOwner, getCurrentOwner, setOwnerDebugName, type Owner } from '@vobs/reactivity'
+import { createOwner, getCurrentOwner, setOwnerDebugName, untrack, type Owner } from '@vobs/reactivity'
 import { isVobsFragment, type VobsNode } from './fragment'
 import { describeDebugNode, getRuntimeDebugHooks, invokeRuntimeDebug, readDebugValue } from './debug'
 import {
@@ -118,6 +118,9 @@ export function setProperty(
     ? readDebugValue(() => Reflect.get(node, key))
     : undefined
   getRenderer().setProperty(node, key, value)
+  if (key === 'value' && (node as { tagName?: unknown }).tagName === 'SELECT') {
+    scheduleSelectValueSync(node, value)
+  }
   if (getRuntimeDebugHooks()) {
     invokeRuntimeDebug('domMutation', {
       operation: 'property',
@@ -129,6 +132,30 @@ export function setProperty(
   }
 }
 
+const pendingSelectValues = new WeakMap<Element, unknown>()
+const selectSyncScheduled = new WeakSet<Element>()
+
+/**
+ * `<select value>` 在 option 子节点存在前赋值不生效（HTML 规范：select 的 value
+ * 由已存在的 option 决定）。编译产物先设置属性、后插入子节点，静态写法必然丢初始值
+ * （消费方此前只能用 ref + queueMicrotask 规避）。
+ * 这里对 select 的 value 赋值统一延迟到微任务重放一次：静态子节点在同一同步任务内
+ * 插入完毕，重放即命中。动态（insertList/insertDynamic）插入的 option 晚于该微任务时，
+ * 由 value 的绑定 effect 在后续信号更新中正常覆盖。
+ */
+function scheduleSelectValueSync(node: Element, value: unknown): void {
+  pendingSelectValues.set(node, value)
+  if (selectSyncScheduled.has(node)) return
+  selectSyncScheduled.add(node)
+  queueMicrotask(() => {
+    selectSyncScheduled.delete(node)
+    if (!pendingSelectValues.has(node)) return
+    const pending = pendingSelectValues.get(node)
+    pendingSelectValues.delete(node)
+    getRenderer().setProperty(node, 'value', pending)
+  })
+}
+
 export function setAttribute(
   node: Element,
   key: string,
@@ -207,6 +234,9 @@ export function addEventListener(
   if (previous && previous.original === handler && previous.owner === owner) return
   if (previous) renderer.removeEventListener(node, event, previous.handler)
   const listener = owner ? (reason: Event) => {
+    // Owner 已销毁说明节点所属子树已被卸载/替换，事件来自游离 DOM，直接忽略。
+    // 否则 owner.run 会抛"已销毁的 Owner"，在事件流里制造无意义的错误噪音。
+    if (owner.disposed) return
     try {
       owner.run(() => handler(reason))
     } catch (error) {
@@ -273,7 +303,12 @@ export function createComponent<Component extends VobsComponent>(
   })
   let node: VobsNode
   try {
-    node = owner.run(() => component(props))
+    // 组件渲染必须 untrack：组件是 run-once 的，其渲染发生在某次 effect 求值
+    // （insertDynamic/insertBoundary 的渲染工厂、路由挂载）内时，若不切断追踪，
+    // 组件体内读取的信号会被收集为祖先 effect 的依赖——一次无关编辑就会触发
+    // 整棵子树销毁重建（输入框被换掉、焦点丢失、事件监听随旧树一起被清理）。
+    // 结构性响应只属于条件工厂与绑定 effect，组件本体渲染一次即止。
+    node = owner.run(() => untrack(() => component(props)))
   } catch (error) {
     owner.dispose()
     attachSourceLocation(error, source)
@@ -288,7 +323,7 @@ export function createComponent<Component extends VobsComponent>(
       parent: null,
       refresh(): void {
         const previous = instance.node
-        const next = owner.run(() => component(props))
+        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)

package/src/props.test.ts

@@ -1,10 +1,41 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
 import { createDOMRenderer, setRenderer } from '@vobs/vobs'
-import { setStaticProps, spreadProps } from './index'
+import { setProperty, setStaticProps, spreadProps } from './index'
 
 setRenderer(createDOMRenderer())
 
+describe('select value sync', () => {
+  it('option 子节点就绪后重放 value 赋值（微任务）', async () => {
+    const select = document.createElement('select') as HTMLSelectElement
+    // 模拟编译产物顺序：先设置 value，后插入 option 子节点
+    setProperty(select, 'value', 'b')
+    select.innerHTML = '<option value="a">A</option><option value="b">B</option>'
+    // 子节点插入使 value 回落到首个 option
+    expect(select.value).toBe('a')
+    await Promise.resolve()
+    expect(select.value).toBe('b')
+  })
+
+  it('setStaticProps 的 value 走同一重放路径', async () => {
+    const select = document.createElement('select') as HTMLSelectElement
+    setStaticProps(select, { value: 'x' })
+    select.innerHTML = '<option value="x">X</option>'
+    expect(select.value).toBe('x')
+    await Promise.resolve()
+    expect(select.value).toBe('x')
+  })
+
+  it('同一微任务内多次赋值以最后一次为准', async () => {
+    const select = document.createElement('select') as HTMLSelectElement
+    setProperty(select, 'value', 'a')
+    setProperty(select, 'value', 'c')
+    select.innerHTML = '<option value="a">A</option><option value="c">C</option>'
+    await Promise.resolve()
+    expect(select.value).toBe('c')
+  })
+})
+
 describe('static and spread prop application', () => {
   it('spreadProps applies false for property keys to clear them', () => {
     const node = document.createElement('input') as HTMLInputElement