@vobs/runtime 1.4.2 → 1.5.1

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

@@ -0,0 +1,198 @@
+// @vitest-environment jsdom
+// JSX 编译产物 + runtime 集成回归：复现 Labelune 侧报过的两个场景
+// ③ 列表内动态 style 表达式（品牌色板：动态 style 渲染不出来 → 全透明）
+// ④ 列表条目内「节点↔null」条件（信号已 set 但节点不出现/不移除）
+import { describe, expect, it } from 'vitest'
+import { compile } from '@vobs/compiler'
+import { createDOMRenderer } from '@vobs/vobs'
+import {
+  createElement,
+  createText,
+  createTemplate,
+  cloneTemplate,
+  insertBefore,
+  insertDynamic,
+  insertList,
+  insertDynamicValue,
+  bindAttribute,
+  bindText,
+  bindProperty,
+  setStaticProps,
+  setProperty,
+  setAttribute, addEventListener, spreadProps, setRef,
+  setRenderer
+} from '@vobs/runtime'
+import { state } from '@vobs/reactivity'
+
+/** 编译 JSX 源码并执行：helper 以运行时实现注入（与 vite-plugin 编译路径等价） */
+function runJsx(source: string): unknown {
+  const compiled = compile(source, { filename: 'integration.tsx' }) as unknown as string
+  const imports = compiled.match(/import \{([^}]+)\} from "@vobs\/vobs";/)
+  if (!imports) throw new Error('编译产物缺少 runtime 导入')
+  const code = compiled.replace(imports[0], '')
+  const names = imports[1]!.split(',').map(name => name.trim()).filter(Boolean)
+  const impls: Record<string, unknown> = {
+    createElement, createText, createTemplate, cloneTemplate,
+    insertBefore, insertDynamic, insertList, insertDynamicValue,
+    bindAttribute, bindText, bindProperty, setStaticProps, setProperty,
+    setAttribute, addEventListener, spreadProps, setRef
+  }
+  const args = names.map(name => {
+    if (!(name in impls)) throw new Error(`未注入的 runtime helper: ${name}`)
+    return impls[name]
+  })
+  return new Function(...names, `"use strict";\n${code}; return el;`)(...args)
+}
+
+describe('JSX 编译 × runtime 集成回归', () => {
+  it('③ 列表内动态 style 表达式正常着色（品牌色板场景）', () => {
+    setRenderer(createDOMRenderer())
+    const el = runJsx(`
+      const colors = [{ hex: '#10b981', label: '绿' }, { hex: '#f97316', label: '橙' }]
+      const el = <div>{colors.map(c => (
+        <button type="button" class="dot" style={\`background: \${c.hex}\`} key={c.hex}>{c.label}</button>
+      ))}</div>
+    `) as HTMLElement
+    const dots = el.querySelectorAll('button')
+    expect(dots.length).toBe(2)
+    expect((dots[0] as HTMLElement).style.background).toContain('rgb(16, 185, 129)')
+    expect((dots[0] as HTMLElement).style.background).not.toBe('')
+  })
+
+  it('④ 列表条目内「节点↔null」条件响应外部信号', async () => {
+    setRenderer(createDOMRenderer())
+    const el = runJsx(`
+      const active = { value: 'a' }
+      const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
+      const el = <div>{items.map(item => (
+        <div class="row" key={item.id}>
+          {active.value === item.id ? <span class="dot-on">on</span> : null}
+          <span>{item.label}</span>
+        </div>
+      ))}</div>
+    `) as HTMLElement
+    // 注意：源码里的 active 被编译产物捕获为普通对象，外部信号驱动需通过行内 effect 订阅的信号
+    // 这里直接验证初次渲染 + 条件分支两种初始形态
+    expect(el.querySelectorAll('.dot-on').length).toBe(1)
+  })
+
+  it('④b 列表条目内「节点↔null」条件随真实信号翻转', async () => {
+    setRenderer(createDOMRenderer())
+    const active = state('a')
+    const el = runJsxWith(`
+      const items = [{ id: 'a', label: 'A' }, { id: 'b', label: 'B' }]
+      const el = <div>{items.map(item => (
+        <div class="row" key={item.id}>
+          {active.value === item.id ? <span class="dot-on">on</span> : null}
+          <span>{item.label}</span>
+        </div>
+      ))}</div>
+    `, { active }) as HTMLElement
+    expect(el.querySelectorAll('.dot-on').length).toBe(1)
+    active.value = 'b'
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(el.querySelectorAll('.dot-on').length).toBe(1)
+    expect((el.querySelectorAll('.row')[1] as HTMLElement).querySelector('.dot-on')).not.toBeNull()
+    expect((el.querySelectorAll('.row')[0] as HTMLElement).querySelector('.dot-on')).toBeNull()
+  })
+
+  it('④c 列表条目内「节点↔null」条件随列表项对象属性翻转（item 信号驱动）', async () => {
+    setRenderer(createDOMRenderer())
+    const items = state([
+      { id: 'a', label: 'A', on: true },
+      { id: 'b', label: 'B', on: false }
+    ])
+    const el = runJsxWith(`
+      const el = <div>{items.value.map(item => (
+        <div class="row" key={item.id}>
+          {item.on ? <span class="dot-on">on</span> : null}
+          <span>{item.label}</span>
+        </div>
+      ))}</div>
+    `, { items }) as HTMLElement
+    expect(el.querySelectorAll('.dot-on').length).toBe(1)
+    items.value = [
+      { id: 'a', label: 'A', on: false },
+      { id: 'b', label: 'B', on: true }
+    ]
+    await new Promise(resolve => setTimeout(resolve, 10))
+    expect(el.querySelectorAll('.dot-on').length).toBe(1)
+    expect((el.querySelectorAll('.row')[1] as HTMLElement).querySelector('.dot-on')).not.toBeNull()
+    expect((el.querySelectorAll('.row')[0] as HTMLElement).querySelector('.dot-on')).toBeNull()
+  })
+
+  it('② 指针事件编译为 pointerdown 监听并可触发', () => {
+    setRenderer(createDOMRenderer())
+    const el = runJsx(`
+      const el = <div onPointerDown={() => { window.__downs = (window.__downs ?? 0) + 1 }} />
+    `) as HTMLElement
+    el.dispatchEvent(new PointerEvent('pointerdown'))
+    expect((window as unknown as { __downs?: number }).__downs).toBe(1)
+  })
+
+  it('⑤ role/spellCheck/autoComplete 属性正确落 DOM', () => {
+    setRenderer(createDOMRenderer())
+    const el = runJsx(`
+      const el = <div>
+        <div role="dialog" />
+        <input spellCheck={false} autoComplete="off" />
+        <td colSpan={2} />
+      </div>
+    `) as HTMLElement
+    expect(el.querySelector('[role="dialog"]')).not.toBeNull()
+    const input = el.querySelector('input') as HTMLInputElement
+    expect(input.getAttribute('autocomplete')).toBe('off')
+    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 {
+  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 导入')
+  const code = compiled.replace(imports[0], '')
+  const names = imports[1]!.split(',').map(name => name.trim()).filter(Boolean)
+  const impls: Record<string, unknown> = {
+    createElement, createText, createTemplate, cloneTemplate,
+    insertBefore, insertDynamic, insertList, insertDynamicValue,
+    bindAttribute, bindText, bindProperty, setStaticProps, setProperty,
+    setAttribute, addEventListener, spreadProps, setRef
+  }
+  const argNames = [...names, ...Object.keys(deps)]
+  const args = [...names.map(name => {
+    if (!(name in impls)) throw new Error(`未注入的 runtime helper: ${name}`)
+    return impls[name]
+  }), ...Object.values(deps)]
+  return new Function(...argNames, `"use strict";\n${code}; return el;`)(...args)
+}

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
@@ -189,7 +216,7 @@ export function spreadProps(node: Element, props: Record<string, unknown>): void
     // attribute 键的 false 表示“不设置”，与 HTML 语义一致。
     else if (isPropertyKey(key)) setProperty(node, key, value)
     else if (value === false) continue
-    else setAttribute(node, key === 'className' ? 'class' : key, key === 'style' && isStyleObject(value) ? formatStyle(value) : String(value))
+    else setAttribute(node, domAttributeName(key), key === 'style' && isStyleObject(value) ? formatStyle(value) : String(value))
   }
 }
 
@@ -200,7 +227,7 @@ export function setStaticProps(node: Element, props: Record<string, unknown>): v
     if (value === null || value === undefined) continue
     if (isPropertyKey(key)) setProperty(node, key, value)
     else if (value === false) continue
-    else setAttribute(node, key === 'className' ? 'class' : key, key === 'style' && isStyleObject(value) ? formatStyle(value) : String(value))
+    else setAttribute(node, domAttributeName(key), key === 'style' && isStyleObject(value) ? formatStyle(value) : String(value))
   }
 }
 
@@ -208,6 +235,18 @@ function isPropertyKey(key: string): boolean {
   return key === 'value' || key === 'checked' || key === 'selected' || key === 'disabled'
     || key === 'multiple' || key === 'readOnly' || key === 'required'
     || key === 'autofocus' || key === 'hidden' || key === 'tabIndex'
+    || key === 'colSpan' || key === 'rowSpan'
+}
+
+/** camelCase JSX 属性名 → HTML attribute 名（与 compiler 的 domAttributeName 保持一致） */
+function domAttributeName(key: string): string {
+  switch (key) {
+    case 'className': return 'class'
+    case 'htmlFor': return 'for'
+    case 'autoComplete': return 'autocomplete'
+    case 'spellCheck': return 'spellcheck'
+    default: return key
+  }
 }
 
 function isStyleObject(value: unknown): value is Record<string, unknown> {