feat(compiler-dom/runtime-dom): stringify eligible static trees

packages/runtime-dom/src/nodeOps.ts

@@ -1,8 +1,13 @@
+import { RendererOptions } from '@vue/runtime-core/src'
+
 const doc = (typeof document !== 'undefined' ? document : null) as Document
 const svgNS = 'http://www.w3.org/2000/svg'
 
-export const nodeOps = {
-  insert: (child: Node, parent: Node, anchor?: Node) => {
+let tempContainer: HTMLElement
+let tempSVGContainer: SVGElement
+
+export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
+  insert: (child, parent, anchor) => {
     if (anchor != null) {
       parent.insertBefore(child, anchor)
     } else {
@@ -10,37 +15,50 @@ export const nodeOps = {
     }
   },
 
-  remove: (child: Node) => {
+  remove: child => {
     const parent = child.parentNode
     if (parent != null) {
       parent.removeChild(child)
     }
   },
 
-  createElement: (tag: string, isSVG?: boolean): Element =>
+  createElement: (tag, isSVG): Element =>
     isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag),
 
-  createText: (text: string): Text => doc.createTextNode(text),
+  createText: text => doc.createTextNode(text),
 
-  createComment: (text: string): Comment => doc.createComment(text),
+  createComment: text => doc.createComment(text),
 
-  setText: (node: Text, text: string) => {
+  setText: (node, text) => {
     node.nodeValue = text
   },
 
-  setElementText: (el: HTMLElement, text: string) => {
+  setElementText: (el, text) => {
     el.textContent = text
   },
 
-  parentNode: (node: Node): HTMLElement | null =>
-    node.parentNode as HTMLElement,
+  parentNode: node => node.parentNode as Element | null,
 
-  nextSibling: (node: Node): Node | null => node.nextSibling,
+  nextSibling: node => node.nextSibling,
 
-  querySelector: (selector: string): Element | null =>
-    doc.querySelector(selector),
+  querySelector: selector => doc.querySelector(selector),
 
-  setScopeId(el: Element, id: string) {
+  setScopeId(el, id) {
     el.setAttribute(id, '')
+  },
+
+  cloneNode(el) {
+    return el.cloneNode(true)
+  },
+
+  insertStaticContent(content, parent, anchor, isSVG) {
+    const temp = isSVG
+      ? tempSVGContainer ||
+        (tempSVGContainer = doc.createElementNS(svgNS, 'svg'))
+      : tempContainer || (tempContainer = doc.createElement('div'))
+    temp.innerHTML = content
+    const node = temp.children[0]
+    nodeOps.insert(node, parent, anchor)
+    return node
   }
 }

packages/runtime-dom/src/patchProp.ts

@@ -4,23 +4,19 @@ import { patchAttr } from './modules/attrs'
 import { patchDOMProp } from './modules/props'
 import { patchEvent } from './modules/events'
 import { isOn } from '@vue/shared'
-import {
-  ComponentInternalInstance,
-  SuspenseBoundary,
-  VNode
-} from '@vue/runtime-core'
+import { RendererOptions } from '@vue/runtime-core'
 
-export function patchProp(
-  el: Element,
-  key: string,
-  nextValue: any,
-  prevValue: any,
-  isSVG: boolean,
-  prevChildren?: VNode[],
-  parentComponent?: ComponentInternalInstance,
-  parentSuspense?: SuspenseBoundary<Node, Element>,
-  unmountChildren?: any
-) {
+export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
+  el,
+  key,
+  nextValue,
+  prevValue,
+  isSVG = false,
+  prevChildren,
+  parentComponent,
+  parentSuspense,
+  unmountChildren
+) => {
   switch (key) {
     // special
     case 'class':