feat(runtime): support rendering comment nodes

Author: yyx990803

packages/runtime-core/src/componentRenderUtils.ts

@@ -3,7 +3,7 @@ import {
   FunctionalComponent,
   Data
 } from './component'
-import { VNode, normalizeVNode, createVNode, Empty } from './vnode'
+import { VNode, normalizeVNode, createVNode, Comment } from './vnode'
 import { ShapeFlags } from './shapeFlags'
 import { handleError, ErrorCodes } from './errorHandling'
 import { PatchFlags } from './patchFlags'
@@ -45,7 +45,7 @@ export function renderComponentRoot(
     }
   } catch (err) {
     handleError(err, instance, ErrorCodes.RENDER_FUNCTION)
-    result = createVNode(Empty)
+    result = createVNode(Comment)
   }
   currentRenderingInstance = null
   return result

packages/runtime-core/src/createRenderer.ts

@@ -1,7 +1,7 @@
 import {
   Text,
   Fragment,
-  Empty,
+  Comment,
   Portal,
   normalizeVNode,
   VNode,
@@ -191,8 +191,8 @@ export function createRenderer<
       case Text:
         processText(n1, n2, container, anchor)
         break
-      case Empty:
-        processEmptyNode(n1, n2, container, anchor)
+      case Comment:
+        processCommentNode(n1, n2, container, anchor)
         break
       case Fragment:
         processFragment(
@@ -283,15 +283,20 @@ export function createRenderer<
     }
   }
 
-  function processEmptyNode(
+  function processCommentNode(
     n1: HostVNode | null,
     n2: HostVNode,
     container: HostElement,
     anchor: HostNode | null
   ) {
     if (n1 == null) {
-      hostInsert((n2.el = hostCreateComment('')), container, anchor)
+      hostInsert(
+        (n2.el = hostCreateComment((n2.children as string) || '')),
+        container,
+        anchor
+      )
     } else {
+      // there's no support for dynamic comments
       n2.el = n1.el
     }
   }
@@ -677,7 +682,7 @@ export function createRenderer<
       }
     }
     // insert an empty node as the placeholder for the portal
-    processEmptyNode(n1, n2, container, anchor)
+    processCommentNode(n1, n2, container, anchor)
   }
 
   function processSuspense(
@@ -1057,8 +1062,8 @@ export function createRenderer<
         })
 
       // give it a placeholder
-      const placeholder = (instance.subTree = createVNode(Empty))
-      processEmptyNode(null, placeholder, container, anchor)
+      const placeholder = (instance.subTree = createVNode(Comment))
+      processCommentNode(null, placeholder, container, anchor)
       initialVNode.el = placeholder.el
       return
     }

packages/runtime-core/src/index.ts

@@ -19,7 +19,7 @@ export {
   createBlock
 } from './vnode'
 // VNode type symbols
-export { Text, Empty, Fragment, Portal, Suspense } from './vnode'
+export { Text, Comment, Fragment, Portal, Suspense } from './vnode'
 // VNode flags
 export { PublicPatchFlags as PatchFlags } from './patchFlags'
 export { PublicShapeFlags as ShapeFlags } from './shapeFlags'

packages/runtime-core/src/vnode.ts

@@ -16,7 +16,7 @@ import { SuspenseBoundary } from './suspense'
 
 export const Fragment = __DEV__ ? Symbol('Fragment') : Symbol()
 export const Text = __DEV__ ? Symbol('Text') : Symbol()
-export const Empty = __DEV__ ? Symbol('Empty') : Symbol()
+export const Comment = __DEV__ ? Symbol('Empty') : Symbol()
 export const Portal = __DEV__ ? Symbol('Portal') : Symbol()
 export const Suspense = __DEV__ ? Symbol('Suspense') : Symbol()
 
@@ -27,7 +27,7 @@ export type VNodeTypes =
   | typeof Fragment
   | typeof Portal
   | typeof Text
-  | typeof Empty
+  | typeof Comment
   | typeof Suspense
 
 type VNodeChildAtom<HostNode, HostElement> =
@@ -245,7 +245,7 @@ export function cloneVNode(vnode: VNode): VNode {
 export function normalizeVNode(child: VNodeChild): VNode {
   if (child == null) {
     // empty placeholder
-    return createVNode(Empty)
+    return createVNode(Comment)
   } else if (isArray(child)) {
     // fragment
     return createVNode(Fragment, null, child)