@vobs/runtime 1.5.0 → 1.6.0

package/src/bind.ts

@@ -1,15 +1,15 @@
-// 动态绑定：将 Signal 绑定到 DOM 节点
-
+// 动态绑定：将 Signal 绑定到 DOM 节点
+
 import { effect } from '@vobs/reactivity'
 import type { Signal } from '@vobs/reactivity'
-import { setAttribute, setProperty, setTextContent } from './ops'
+import { registerSelectValueBinding, setAttribute, setProperty, setTextContent } from './ops'
 
 export type ValueSource<T> = Signal<T> | (() => T)
 
 function readSource<T>(source: ValueSource<T>): T {
   return typeof source === 'function' ? source() : source.value
 }
-
+
 export function bindText(
   node: Text,
   source: ValueSource<unknown>
@@ -19,10 +19,10 @@ export function bindText(
     setTextContent(node, value === null || value === undefined || typeof value === 'boolean' ? '' : String(value))
   })
 }
-
+
 export function bindAttribute(
-  node: Element,
-  key: string,
+  node: Element,
+  key: string,
   source: ValueSource<unknown>
 ): void {
   effect(() => {
@@ -41,6 +41,11 @@ export function bindProperty(
   key: string,
   source: ValueSource<unknown>
 ): void {
+  // Select initial-value auto resync: remember the bound reader so that inserting
+  // <option> children later re-applies the current value (see ops.insertBefore).
+  if (key === 'value' && node.nodeName === 'SELECT') {
+    registerSelectValueBinding(node, () => readSource(source))
+  }
   effect(() => {
     setProperty(node, key, readSource(source))
   })

package/src/jsx-integration.test.ts

@@ -145,10 +145,39 @@ describe('JSX 编译 × runtime 集成回归', () => {
     expect(input.getAttribute('spellcheck')).toBe('false')
     expect((el.querySelector('td') as HTMLTableCellElement).colSpan).toBe(2)
   })
+
+  it('⑥ select 绑定 value 时选项异步到达自动重同步（不再需要 ref 兜底）', async () => {
+    setRenderer(createDOMRenderer())
+    const items = state<string[]>([])
+    const el = runJsxWith(`
+      const current = { value: 'b' }
+      const el = <select value={current.value}>{items.value.map(o => <option value={o}>{o}</option>)}</select>
+    `, { items }) as HTMLSelectElement
+    expect(el.value).toBe('')
+    items.value = ['a', 'b', 'c']
+    await new Promise(resolve => setTimeout(resolve, 20))
+    expect(el.value).toBe('b')
+  })
+
+  it('⑥b select 选项经 optgroup 插入同样重同步', async () => {
+    setRenderer(createDOMRenderer())
+    interface Group { readonly label: string; readonly options: readonly string[] }
+    const groups = state<readonly Group[]>([])
+    const el = runJsxWith(`
+      const current = { value: 'b' }
+      const el = <select value={current.value}>{groups.value.map(group => (
+        <optgroup label={group.label}>{group.options.map(o => <option value={o}>{o}</option>)}</optgroup>
+      ))}</select>
+    `, { groups }) as HTMLSelectElement
+    expect(el.value).toBe('')
+    groups.value = [{ label: 'G', options: ['a', 'b'] }]
+    await new Promise(resolve => setTimeout(resolve, 20))
+    expect(el.value).toBe('b')
+  })
 })
 
 /** runJsx 变体：额外注入外部依赖（真实信号等），供编译产物闭包引用 */
-function runJsxWith(source: string, deps: Record<string, unknown>): unknown {
+function runJsxWith(source: string, deps: Record<string, unknown> = {}): unknown {
   const compiled = compile(source, { filename: 'integration-deps.tsx' }) as unknown as string
   const imports = compiled.match(/import \{([^}]+)\} from "@vobs\/vobs";/)
   if (!imports) throw new Error('编译产物缺少 runtime 导入')

package/src/ops.ts

@@ -64,6 +64,8 @@ export function insertBefore(
   }
   getRenderer().insertBefore(parent, child, isVobsFragment(anchor) ? anchor.start : anchor)
   markHmrInstanceMounted(child, parent)
+  const nodeName = (child as Element).nodeName
+  if (nodeName === 'OPTION' || nodeName === 'OPTGROUP') syncSelectValue(parent)
   if (getRuntimeDebugHooks()) {
     invokeRuntimeDebug('domMutation', {
       operation: 'insert',
@@ -73,6 +75,31 @@ export function insertBefore(
   }
 }
 
+/**
+ * Select initial-value auto resync: `bindProperty(node, 'value', …)` registers the value
+ * reader for `<select>` elements; whenever an `<option>` is inserted into the select
+ * (directly or through an `<optgroup>`), the current bound value is re-applied. This
+ * removes the last reason for apps to keep `ref + queueMicrotask` value-sync workarounds
+ * for options that arrive after the value binding (e.g. asynchronously loaded lists).
+ */
+const selectValueReaders = new WeakMap<object, () => unknown>()
+
+export function registerSelectValueBinding(select: Element, read: () => unknown): void {
+  selectValueReaders.set(select, read)
+}
+
+function syncSelectValue(parent: Node): void {
+  let current: Node | null = parent
+  while (current !== null) {
+    if ((current as Element).nodeName === 'SELECT') {
+      const read = selectValueReaders.get(current)
+      if (read !== undefined) setProperty(current as Element, 'value', read())
+      return
+    }
+    current = current.parentNode
+  }
+}
+
 export function removeChild(
   parent: Node,
   child: VobsNode