@vobs/runtime 1.7.2 → 1.7.4

package/src/dynamic.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
-import { createDOMRenderer, setRenderer, createText, insertDynamicValue, insertList, insertDynamic, addEventListener, createComponent } from '@vobs/vobs'
+import { createDOMRenderer, setRenderer, createText, insertDynamicValue, insertList, insertDynamic, addEventListener, createComponent, type DynamicChild } from '@vobs/vobs'
 import { effect, state } from '@vobs/reactivity'
 import { bindText } from './bind'
 import { createFragment, type VobsNode } from './fragment'
@@ -460,4 +460,120 @@ describe('component render isolation (untrack)', () => {
     input.dispatchEvent(new Event('input'))
     expect(content.value).toBe('world')
   })
-})
+})
+
+describe('polymorphic insertDynamicValue (Solid 式运行时多态)', () => {
+  const flush = () => new Promise(resolve => setTimeout(resolve, 0))
+
+  it('字符串更新原地改写文本节点（节点身份保持，bindText 级性能）', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const label = state('hello')
+    insertDynamicValue(parent, null, () => label.value)
+    const textNode = parent.firstChild
+    expect(textNode?.nodeType).toBe(3)
+    expect(parent.textContent).toBe('hello')
+
+    label.value = 'world'
+    await flush()
+    // 快路径：同一个文本节点被复用，只改内容
+    expect(parent.firstChild).toBe(textNode)
+    expect(parent.textContent).toBe('world')
+  })
+
+  it('数值子节点同样命中文本快路径', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const count = state(0)
+    insertDynamicValue(parent, null, () => count.value)
+    const textNode = parent.firstChild
+    expect(parent.textContent).toBe('0')
+
+    count.value = 42
+    await flush()
+    expect(parent.firstChild).toBe(textNode)
+    expect(parent.textContent).toBe('42')
+  })
+
+  // 回归（Labelune 踩坑备忘）：JSX 子节点里的函数调用返回 Fragment 曾被
+  // String() 成 "[object Object]"；多态插入后节点值正确挂载，且可与原始值互切。
+  it('函数调用返回 Fragment 正确挂载，并与字符串互切', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const mode = state<'doc' | 'plain'>('doc')
+    const renderDoc = (): VobsNode => {
+      const section = document.createElement('p')
+      section.textContent = '条款正文'
+      return createFragment((fragmentParent, anchor) => {
+        fragmentParent.insertBefore(section, anchor)
+      })
+    }
+    insertDynamicValue(parent, null, () => (mode.value === 'doc' ? renderDoc() : '纯文本'))
+    expect(parent.textContent).toBe('条款正文')
+
+    mode.value = 'plain'
+    await flush()
+    expect(parent.textContent).toBe('纯文本')
+
+    mode.value = 'doc'
+    await flush()
+    expect(parent.textContent).toBe('条款正文')
+  })
+
+  it('节点值变化时整体替换，旧子树 effect 被清理', async () => {
+    setRenderer(createDOMRenderer())
+    const log: string[] = []
+    const version = state(0)
+    function Panel(): Node {
+      effect(() => {
+        log.push(`run:v${version.value}`)
+        return () => log.push('cleanup')
+      })
+      const el = document.createElement('p')
+      el.textContent = `v${version.value}`
+      return el
+    }
+    const parent = document.createElement('div')
+    // 工厂读取 version 建立结构依赖：version 变化 → 工厂重跑 → 新组件替换旧子树
+    // （组件体 untrack，自身渲染不建立依赖——与编译产物的 insertDynamicValue 语义一致）
+    insertDynamicValue(parent, null, () => {
+      void version.value
+      return createComponent(Panel, {})
+    })
+    expect(parent.textContent).toBe('v0')
+
+    version.value = 1
+    await flush()
+    expect(parent.textContent).toBe('v1')
+    expect(log).toContain('cleanup')
+    expect(log).toContain('run:v1')
+  })
+
+  it('null/undefined/boolean 清空文本与节点子树', async () => {
+    setRenderer(createDOMRenderer())
+    const parent = document.createElement('div')
+    const value = state<DynamicChild>('text')
+    insertDynamicValue(parent, null, () => value.value)
+    expect(parent.textContent).toBe('text')
+    const textNode = parent.firstChild
+
+    value.value = null
+    await flush()
+    expect(parent.textContent).toBe('')
+
+    value.value = false
+    await flush()
+    expect(parent.textContent).toBe('')
+
+    const el = document.createElement('span')
+    value.value = el
+    await flush()
+    expect(parent.contains(el)).toBe(true)
+
+    value.value = false
+    await flush()
+    expect(parent.contains(el)).toBe(false)
+    // 文本节点身份在字符串轮次间保持（此前的 textNode 已随 null 清除）
+    expect(parent.contains(textNode as Node)).toBe(false)
+  })
+})

package/src/dynamic.ts

@@ -5,7 +5,8 @@ import {
   createComment,
   createText,
   insertBefore,
-  removeChild
+  removeChild,
+  setTextContent
 } from './ops'
 import { createFragment, isVobsFragment, type VobsNode } from './fragment'
 
@@ -41,6 +42,10 @@ export function insertDynamic(parent: Node, anchor: Node | null, factory: NodeFa
 /**
  * Inserts any Vobs child value. This is the escape hatch for JSX expressions
  * that return a node, an array of nodes, text, or an empty conditional value.
+ *
+ * 多态插入（Solid 式）：编译器把所有非静态子表达式统一路由到这里，值类型在运行时
+ * 分发——原始值走自管理文本节点的原地更新快路径（等价 bindText 性能），节点/Fragment/
+ * 数组走 scope 隔离的挂载/卸载路径。函数调用返回节点因此与返回字符串同样安全。
  */
 export function insertDynamicValue(
   parent: Node,
@@ -50,13 +55,43 @@ export function insertDynamicValue(
   const marker = createComment('vobs:value')
   insertBefore(parent, marker, anchor)
   let current: VobsNode | null = null
+  /** current 是否为本 effect 自建的文本节点（可安全原地改写内容） */
+  let currentIsText = false
   let scope: Owner | null = null
 
   effect(() => {
     // 每轮求值使用独立 scope Owner：factory 求值与挂载期间创建的组件 Owner 全部挂在它下面。
     // 数组/节点被替换时整体 dispose 旧 scope，避免被丢弃子树的 effect 继续订阅信号（幽灵更新与内存泄漏）。
     const nextScope = createOwner()
-    const next = nextScope.run(() => normalizeDynamicChild(factory()))
+    const value = nextScope.run(factory)
+    // ── 原始值快路径：自建文本节点原地改写，不销毁重建（高频文本零 GC）──
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (currentIsText) {
+        setTextContent(current as Text, String(value))
+        nextScope.dispose()
+        return
+      }
+      if (current) removeChild(parent, current)
+      scope?.dispose()
+      scope = null
+      const text = createText(String(value))
+      insertBefore(parent, text, marker)
+      current = text
+      currentIsText = true
+      nextScope.dispose()
+      return
+    }
+    if (value === null || value === undefined || typeof value === 'boolean') {
+      if (current) removeChild(parent, current)
+      scope?.dispose()
+      scope = null
+      current = null
+      currentIsText = false
+      nextScope.dispose()
+      return
+    }
+    // ── 节点/Fragment/数组路径：scope 隔离的挂载与整体替换 ──
+    const next = nextScope.run(() => normalizeDynamicChild(value))
     if (next === current) {
       nextScope.dispose()
       return
@@ -65,6 +100,7 @@ export function insertDynamicValue(
     scope?.dispose()
     scope = nextScope
     current = next
+    currentIsText = false
     if (current) insertBefore(parent, current, marker)
   })
 }

package/src/ops.ts

@@ -44,7 +44,35 @@ export function createText(content: string): Text {
   return getRenderer().createText(content)
 }
 
+/** SVG 命名空间（与 HTML 解析器 foreign-content 规则一致） */
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
+
+/**
+ * SVG 标签全集（= TypeScript SVGElementTagNameMap 的键，运行时分发依据）。
+ * 与 React 的运行时清单同思路：只含纯 SVG 标签，刻意排除与 HTML 同名的
+ * a/script/style/title（它们在 JSX 类型里归 HTMLElement，按 HTML 创建）。
+ */
+const SVG_TAGS = new Set([
+  'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'defs', 'desc',
+  'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite',
+  'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight',
+  'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR',
+  'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset',
+  'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
+  'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'marker', 'mask',
+  'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient',
+  'rect', 'set', 'stop', 'svg', 'switch', 'symbol', 'text', 'textPath', 'tspan',
+  'use', 'view'
+])
+
 export function createElement(tag: string): Element {
+  // SVG 标签走命名空间创建：document.createElement('rect') 产物是 HTMLUnknownElement，
+  // 整棵 SVG 子树都不会渲染（无报错）。渲染器未实现 createSvgElement 时按 createElement
+  // 兜底（旧自定义渲染器保持原行为）。
+  if (SVG_TAGS.has(tag)) {
+    const renderer = getRenderer()
+    if (renderer.createSvgElement) return renderer.createSvgElement(tag)
+  }
   return getRenderer().createElement(tag)
 }
 

package/src/renderer.ts

@@ -6,6 +6,11 @@ export interface VobsRenderer<
 > {
   createText(content: string): TextNode
   createElement(tag: string): ElementNode
+  /**
+   * 创建 SVG 命名空间元素（http://www.w3.org/2000/svg）。可选：未实现时运行时按
+   * createElement 兜底（HTML namespace，SVG 内容不渲染）。DOM/SSR/水合渲染器均需实现。
+   */
+  createSvgElement?(tag: string): ElementNode
   createComment(content: string): CommentNode
   insertBefore(parent: NodeType, child: NodeType, anchor: NodeType | null): void
   removeChild(parent: NodeType, child: NodeType): void

package/src/svg.test.ts

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from 'vitest'
+import { createDOMRenderer, setRenderer, createElement, insertBefore } from '@vobs/vobs'
+
+// 回归（Labelune 踩坑备忘）：createElement('svg'/'rect') 此前走 HTML namespace，
+// 产物是 HTMLUnknownElement——整棵 SVG 子树静默不渲染且无报错。
+// 1.7.4 起 createElement 按 SVG 标签全集分发到渲染器 createSvgElement（createElementNS）。
+describe('svg namespace element creation', () => {
+  it('creates SVG-namespace elements for SVG tags and HTML for the rest', () => {
+    setRenderer(createDOMRenderer())
+    const svg = createElement('svg')
+    expect(svg).toBeInstanceOf(SVGElement)
+    expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg')
+
+    const rect = createElement('rect')
+    expect(rect).toBeInstanceOf(SVGElement)
+    expect(rect.namespaceURI).toBe('http://www.w3.org/2000/svg')
+
+    // 驼峰 SVG 标签（clipPath/linearGradient）同样命中
+    expect(createElement('clipPath').namespaceURI).toBe('http://www.w3.org/2000/svg')
+
+    // 与 HTML 同名集合之外的普通标签仍是 HTML namespace
+    const div = createElement('div')
+    expect(div).toBeInstanceOf(HTMLDivElement)
+    expect(div.namespaceURI).toBe('http://www.w3.org/1999/xhtml')
+  })
+
+  it('builds a renderable, queryable svg tree via createElement/insertBefore', () => {
+    setRenderer(createDOMRenderer())
+    const svg = createElement('svg')
+    svg.setAttribute('viewBox', '0 0 50 30')
+    const rect = createElement('rect')
+    rect.setAttribute('x', '0')
+    rect.setAttribute('y', '0')
+    rect.setAttribute('width', '50')
+    rect.setAttribute('height', '30')
+    insertBefore(svg, rect, null)
+
+    const host = document.createElement('div')
+    insertBefore(host, svg, null)
+
+    // 真实 SVG 子树：querySelector 命中、命名空间正确、属性大小写保留
+    expect(host.querySelector('svg')).not.toBeNull()
+    const found = host.querySelector('rect')
+    expect(found).not.toBeNull()
+    expect(found!.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(svg.getAttribute('viewBox')).toBe('0 0 50 30')
+  })
+
+  it('falls back to createElement when the renderer lacks createSvgElement', () => {
+    setRenderer({
+      ...createDOMRenderer(),
+      createSvgElement: undefined
+    })
+    const rect = createElement('rect')
+    // 旧自定义渲染器兜底：按 HTML 创建（保持原行为，不抛错）
+    expect(rect.namespaceURI).not.toBe('http://www.w3.org/2000/svg')
+  })
+})