@vobs/runtime 1.0.0 → 1.1.0

package/package.json

@@ -6,7 +6,7 @@
     "LICENSE"
   ],
   "name": "@vobs/runtime",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -15,6 +15,6 @@
     "./error": "./src/error.ts"
   },
   "dependencies": {
-    "@vobs/reactivity": "1.0.0"
+    "@vobs/reactivity": "1.1.0"
   }
 }

package/src/boundaries.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it, vi } from 'vitest'
 import { createDOMRenderer, createText, createVobs, Profiler, AsyncBoundary, state } from '@vobs/vobs'
 

package/src/dynamic.test.ts

@@ -226,3 +226,174 @@ describe('primitive list item updates', () => {
   })
 })
 
+describe('keyed list minimal-move reconciliation', () => {
+  interface Row { id: number; name: string }
+
+  function setup(initial: Row[]) {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const source = state(initial)
+    const rows = new Map<number, Element>()
+    insertList(
+      parent,
+      null,
+      () => source.value,
+      item => {
+        const el = document.createElement('li')
+        el.textContent = item.name
+        rows.set(item.id, el)
+        return el
+      },
+      row => row.id
+    )
+    const order = () =>
+      Array.from(parent.children)
+        .filter(node => node.tagName === 'LI')
+        .map(node => node.textContent)
+    return { parent, source, rows, order }
+  }
+
+  // name → 稳定 id 映射：重排 name 顺序 = 真正的 key 重排
+  // （若用数组下标当 id，重排后 key 顺序不变，keyed reconcile 正确地零移动）
+  const ids = new Map<string, number>()
+  const rows = (names: string[]): Row[] => names.map(name => {
+    if (!ids.has(name)) ids.set(name, ids.size)
+    return { id: ids.get(name)!, name }
+  })
+
+  it('swaps two adjacent rows and preserves row node identity', async () => {
+    const { parent, source, rows: rowMap, order } = setup(rows(['a', 'b', 'c']))
+    const nodeB = rowMap.get(1)
+    const nodeC = rowMap.get(2)
+
+    source.value = rows(['a', 'c', 'b'])
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(order()).toEqual(['a', 'c', 'b'])
+    // 最小移动：行节点复用，不整行重建；保留行不被移除
+    expect(rowMap.get(1)).toBe(nodeB)
+    expect(rowMap.get(2)).toBe(nodeC)
+    expect(parent.contains(nodeB!)).toBe(true)
+  })
+
+  it('moves the first row to the end', async () => {
+    const { source, order } = setup(rows(['a', 'b', 'c', 'd']))
+
+    source.value = rows(['b', 'c', 'd', 'a'])
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(order()).toEqual(['b', 'c', 'd', 'a'])
+  })
+
+  it('reverses the whole list', async () => {
+    const { source, order } = setup(rows(['a', 'b', 'c', 'd', 'e']))
+
+    source.value = rows(['e', 'd', 'c', 'b', 'a'])
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(order()).toEqual(['e', 'd', 'c', 'b', 'a'])
+  })
+
+  it('keeps DOM untouched when order is unchanged but item objects are new', async () => {
+    const { source, rows: rowMap, order } = setup(rows(['a', 'b', 'c']))
+    const nodesBefore = [rowMap.get(0), rowMap.get(1), rowMap.get(2)]
+
+    // 全新对象、相同 key、相同顺序：应当零移动零重建
+    source.value = [{ id: 0, name: 'a' }, { id: 1, name: 'b' }, { id: 2, name: 'c' }]
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(order()).toEqual(['a', 'b', 'c'])
+    expect([rowMap.get(0), rowMap.get(1), rowMap.get(2)]).toEqual(nodesBefore)
+  })
+
+  it('handles mixed remove + insert + move in one update', async () => {
+    const { source, order } = setup(rows(['a', 'b', 'c', 'd', 'e']))
+
+    // 移除 b、新增 f、d 前移，同时 a 挪到末尾
+    source.value = [
+      { id: 2, name: 'c' },
+      { id: 3, name: 'd' },
+      { id: 5, name: 'f' },
+      { id: 4, name: 'e' },
+      { id: 0, name: 'a' }
+    ]
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(order()).toEqual(['c', 'd', 'f', 'e', 'a'])
+  })
+
+  it('keeps the list anchored after surrounding sibling content', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const head = document.createElement('p')
+    head.textContent = 'head'
+    parent.appendChild(head)
+    const source = state(rows(['a', 'b', 'c']))
+    insertList(
+      parent,
+      null,
+      () => source.value,
+      item => {
+        const el = document.createElement('li')
+        el.textContent = item.name
+        return el
+      },
+      row => row.id
+    )
+    const tail = document.createElement('p')
+    tail.textContent = 'tail'
+    parent.appendChild(tail)
+
+    source.value = rows(['c', 'a', 'b'])
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    expect(parent.textContent).toBe('headcabtail')
+  })
+
+  it('rebuilds index-tracked rows when they move', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const source = state(rows(['a', 'b', 'c']))
+    insertList(
+      parent,
+      null,
+      () => source.value,
+      (item, index) => {
+        const el = document.createElement('li')
+        el.textContent = `${item.name}:${index}`
+        return el
+      },
+      row => row.id
+    )
+    expect(parent.textContent).toBe('a:0b:1c:2')
+
+    source.value = rows(['c', 'a', 'b'])
+    await new Promise(resolve => setTimeout(resolve, 0))
+    // index 参与渲染的行移动时必须重建，索引值正确
+    expect(parent.textContent).toBe('c:0a:1b:2')
+  })
+
+  it('falls back to indexed reconcile when keys are missing', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    // 原始类型项：keyOf 对 'b' 返回 null → 回退 indexed 调和
+    const source = state(['a', 'b', 'c'])
+    insertList(
+      parent,
+      null,
+      () => source.value,
+      item => {
+        const el = document.createElement('li')
+        el.textContent = item
+        return el
+      },
+      (item, index) => (item === 'b' ? null : index)
+    )
+    expect(parent.textContent).toBe('abc')
+
+    source.value = ['x', 'y', 'z']
+    await new Promise(resolve => setTimeout(resolve, 0))
+    expect(parent.textContent).toBe('xyz')
+  })
+})
+

package/src/dynamic.ts

@@ -108,34 +108,144 @@ export function insertList<T>(
 
   effect(() => {
     const items = source()
-    const keyed = keyOf && items.every((item, index) => keyOf(item, index) != null)
-    const nextEntries = keyed
-      ? reconcileKeyed(items, entries, renderItem, keyOf)
+
+    // key 只计算一次：keyed 判定与调和共用，避免 keyOf 每轮被调用两遍。
+    let keys: unknown[] | null = null
+    if (keyOf) {
+      keys = new Array(items.length)
+      let allKeyed = items.length > 0
+      for (let index = 0; index < items.length; index++) {
+        const key = keyOf(items[index], index)
+        if (key == null) {
+          allKeyed = false
+          break
+        }
+        keys[index] = key
+      }
+      if (!allKeyed) keys = null
+    }
+
+    const nextEntries = keys
+      ? reconcileKeyed(items, keys, entries, renderItem)
       : reconcileIndexed(items, entries, renderItem)
 
+    // tracksIndex 时 index 参与渲染，位置变化的行必须整体重建，新节点不在 DOM 中，
+    // 重排阶段强制插入；否则只同步记录的位置，节点保持原样交给重排阶段移动。
+    const refreshed = tracksIndex ? new Set<ListEntry<T>>() : null
     for (let index = 0; index < nextEntries.length; index++) {
       const entry = nextEntries[index]
-      if (tracksIndex && entry && entry.index !== index) refreshListEntry(parent, entry, index, renderItem)
+      if (tracksIndex) {
+        if (entry.index !== index) {
+          refreshListEntry(parent, entry, index, renderItem)
+          refreshed!.add(entry)
+        }
+      } else {
+        entry.index = index
+      }
     }
 
+    const retained = new Set(nextEntries)
     for (const entry of entries) {
-      if (!nextEntries.includes(entry)) disposeEntry(parent, entry)
+      if (!retained.has(entry)) disposeEntry(parent, entry)
     }
 
-    let reference: VobsNode | null = marker
-    for (let index = nextEntries.length - 1; index >= 0; index--) {
-      insertBefore(parent, nextEntries[index].node, reference)
-      reference = nextEntries[index].node
-    }
+    reorderListEntries(parent, marker, entries, nextEntries, refreshed)
     entries = nextEntries
   })
 }
 
+/**
+ * 按 nextEntries 顺序整理 DOM，但只移动必须移动的节点。
+ */
+function reorderListEntries<T>(
+  parent: Node,
+  marker: Node,
+  previous: readonly ListEntry<T>[],
+  nextEntries: readonly ListEntry<T>[],
+  forceInsert: Set<ListEntry<T>> | null
+): void {
+  const count = nextEntries.length
+  if (count === 0) return
+
+  // 首次挂载（旧列表为空）：全部是新节点，倒序直插即可，跳过 Map/LIS 构建。
+  if (previous.length === 0) {
+    let reference: VobsNode = marker
+    for (let index = count - 1; index >= 0; index--) {
+      const node = nextEntries[index].node
+      insertBefore(parent, node, reference)
+      reference = node
+    }
+    return
+  }
+
+  const oldIndexOf = new Map<ListEntry<T>, number>()
+  for (let index = 0; index < previous.length; index++) oldIndexOf.set(previous[index], index)
+
+  // seq[i] = 条目在旧序中的位置；新条目、重建条目与强制插入条目为 -1。
+  const seq: number[] = new Array(count)
+  for (let index = 0; index < count; index++) {
+    const entry = nextEntries[index]
+    seq[index] = forceInsert?.has(entry) ? -1 : oldIndexOf.get(entry) ?? -1
+  }
+
+  const keep = computeKeptByLis(seq)
+
+  let reference: VobsNode = marker
+  for (let index = count - 1; index >= 0; index--) {
+    const node = nextEntries[index].node
+    if (keep[index]) {
+      reference = node
+      continue
+    }
+    insertBefore(parent, node, reference)
+    reference = node
+  }
+}
+
+/**
+ * 严格递增子序列（LIS）成员标记，O(n log n)。
+ * 负值（新节点）不参与 LIS，永远视为需要移动。
+ */
+function computeKeptByLis(seq: readonly number[]): boolean[] {
+  const count = seq.length
+  const keep = new Array<boolean>(count).fill(false)
+  const tailsIndex: number[] = []
+  const tailsValue: number[] = []
+  const prev = new Array<number>(count).fill(-1)
+
+  for (let i = 0; i < count; i++) {
+    const value = seq[i]
+    if (value < 0) continue
+    let lo = 0
+    let hi = tailsValue.length
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1
+      if (tailsValue[mid] < value) lo = mid + 1
+      else hi = mid
+    }
+    if (lo === tailsValue.length) {
+      tailsValue.push(value)
+      tailsIndex.push(i)
+    } else {
+      tailsValue[lo] = value
+      tailsIndex[lo] = i
+    }
+    prev[i] = lo > 0 ? tailsIndex[lo - 1] : -1
+  }
+
+  let cursor = tailsIndex.length > 0 ? tailsIndex[tailsIndex.length - 1] : -1
+  while (cursor >= 0) {
+    keep[cursor] = true
+    cursor = prev[cursor]
+  }
+  return keep
+}
+
 function reconcileKeyed<T>(
   items: readonly T[],
+  keys: readonly unknown[],
   entries: Array<ListEntry<T>>,
-  renderItem: (item: T, index: number) => VobsNode,
-  keyOf: (item: T, index: number) => unknown
+  renderItem: (item: T, index: number) => VobsNode
 ): Array<ListEntry<T>> {
   const previous = new Map(entries.map(entry => [entry.key, entry]))
   const seen = new Set<unknown>()
@@ -143,13 +253,13 @@ function reconcileKeyed<T>(
 
   for (let index = 0; index < items.length; index++) {
     const item = items[index]
-    const key = keyOf(item, index)
+    const key = keys[index]
     if (seen.has(key)) {
       console.warn(`Vobs: 检测到重复的列表 key: ${String(key)}`)
     }
     seen.add(key)
-    if (previous.has(key)) {
-      const entry = previous.get(key)!
+    const entry = previous.get(key)
+    if (entry) {
       previous.delete(key)
       if (isPrimitiveItem(item) && !Object.is(entry.value, item)) {
         // 原始类型项在编译产物中被静态捕获，无法通过 item 信号刷新视图：值变化时必须重建行。

package/src/hmr.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
 import {
   createHmrStateStore,

package/src/index.ts

@@ -45,6 +45,7 @@ export { ref, setRef } from './ref'
 export type { Ref, RefTarget } from './ref'
 export { insertDynamic, insertDynamicValue, insertList, normalizeDynamicChild } from './dynamic'
 export type { DynamicChild, NodeFactory } from './dynamic'
+export { createTemplate, cloneTemplate } from './template'
 export type { VobsLocatedError, VobsSourceLocation } from './ops'
 export {
   VobsError,

package/src/ref.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
 import { createDOMRenderer, createVobs } from '@vobs/vobs'
 import { createElement, createText, insertBefore, ref, setRef } from './index'

package/src/template.ts

@@ -0,0 +1,24 @@
+// 编译器静态模板提升的运行时支撑：
+// 编译期把完全静态的 JSX 子树序列化为 HTML 字符串，模块加载时解析一次，
+// 运行时通过 cloneNode 复制，替代逐个 createElement + setStaticProps + insertBefore。
+// 仅适用于 DOM 渲染器（模板本质是 HTML），自定义渲染器场景由编译产物不使用该优化兜底。
+
+const templateCache = new Map<string, HTMLTemplateElement>()
+
+/** Parse a static template once; called at module load for each hoisted template. */
+export function createTemplate(html: string): HTMLTemplateElement {
+  let template = templateCache.get(html)
+  if (!template) {
+    template = document.createElement('template')
+    template.innerHTML = html
+    templateCache.set(html, template)
+  }
+  return template
+}
+
+/** Clone a hoisted template for one mount; the compiled HTML always has a single root element. */
+export function cloneTemplate(template: HTMLTemplateElement): Node {
+  const root = template.content.firstElementChild
+  if (!root) throw new Error('Vobs: 静态模板缺少根元素，请检查编译产物')
+  return root.cloneNode(true)
+}