test(ssr): more hydration tests

Author: yyx990803

packages/compiler-core/__tests__/hydration.spec.ts

@@ -1,4 +1,12 @@
-import { createSSRApp, h, ref, nextTick, VNode, Portal } from '@vue/runtime-dom'
+import {
+  createSSRApp,
+  h,
+  ref,
+  nextTick,
+  VNode,
+  Portal,
+  createStaticVNode
+} from '@vue/runtime-dom'
 
 function mountWithHydration(html: string, render: () => any) {
   const container = document.createElement('div')
@@ -28,6 +36,21 @@ describe('SSR hydration', () => {
     expect(container.textContent).toBe('bar')
   })
 
+  test('comment', () => {
+    const { vnode, container } = mountWithHydration('<!---->', () => null)
+    expect(vnode.el).toBe(container.firstChild)
+    expect(vnode.el.nodeType).toBe(8) // comment
+  })
+
+  test('static', () => {
+    const html = '<div><span>hello</span></div>'
+    const { vnode, container } = mountWithHydration(html, () =>
+      createStaticVNode(html)
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    expect(vnode.el.outerHTML).toBe(html)
+  })
+
   test('element with text children', async () => {
     const msg = ref('foo')
     const { vnode, container } = mountWithHydration(
@@ -148,10 +171,6 @@ describe('SSR hydration', () => {
     )
   })
 
-  test('comment', () => {})
-
-  test('static', () => {})
-
   // compile SSR + client render fn from the same template & hydrate
   test('full compiler integration', () => {})
 

packages/runtime-core/src/hydration.ts

@@ -131,14 +131,16 @@ export function createHydrationFunctions({
     parentComponent: ComponentInternalInstance | null,
     optimized: boolean
   ) => {
+    optimized = optimized || vnode.dynamicChildren !== null
     const { props, patchFlag, shapeFlag } = vnode
     // skip props & children if this is hoisted static nodes
     if (patchFlag !== PatchFlags.HOISTED) {
       // props
       if (props !== null) {
         if (
-          patchFlag & PatchFlags.FULL_PROPS ||
-          patchFlag & PatchFlags.HYDRATE_EVENTS
+          !optimized ||
+          (patchFlag & PatchFlags.FULL_PROPS ||
+            patchFlag & PatchFlags.HYDRATE_EVENTS)
         ) {
           for (const key in props) {
             if (!isReservedProp(key) && isOn(key)) {
@@ -172,7 +174,7 @@ export function createHydrationFunctions({
           vnode,
           el,
           parentComponent,
-          optimized || vnode.dynamicChildren !== null
+          optimized
         )
         while (next) {
           hasMismatch = true