@vobs/runtime 1.7.3 → 1.7.5

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')
+  })
+})