test: add hydration benchmark for Vapor and VDOM

Author: edison1105

packages/runtime-vapor/__tests__/hydration.bench.ts

@@ -0,0 +1,144 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { bench, describe } from 'vitest'
+import {
+  ssrInterpolate as _ssrInterpolate,
+  ssrRenderAttrs as _ssrRenderAttrs,
+} from '@vue/server-renderer'
+import {
+  Fragment as _Fragment,
+  createBlock as _createBlock,
+  createElementBlock as _createElementBlock,
+  createElementVNode as _createElementVNode,
+  createVNode as _createVNode,
+  openBlock as _openBlock,
+  renderList as _renderList,
+  toDisplayString as _toDisplayString,
+  vModelText as _vModelText,
+  withDirectives as _withDirectives,
+  createSSRApp,
+  ref,
+} from '@vue/runtime-dom'
+import {
+  applyTextModel as _applyTextModel,
+  child as _child,
+  createComponent as _createComponent,
+  createFor as _createFor,
+  renderEffect as _renderEffect,
+  setInsertionState as _setInsertionState,
+  setText as _setText,
+  template as _template,
+  createVaporSSRApp,
+} from '@vue/runtime-vapor'
+
+describe('hydration benchmark', () => {
+  let html = `<div><!--[--><h1>Hello World!</h1><input value="Hello World!"><!--]--></div>`
+
+  const t0 = _template('<h1> </h1>')
+  const t1 = _template('<input>')
+
+  const VaporChild = {
+    __vapor: true,
+    setup() {
+      const msg = ref('Hello World!')
+
+      const n0 = t0() as any
+      const n1 = t1() as any
+      const x0 = _child(n0) as any
+      _applyTextModel(
+        n1,
+        () => msg.value,
+        _value => (msg.value = _value),
+      )
+      _renderEffect(() => _setText(x0, _toDisplayString(msg.value)))
+      return [n0, n1]
+    },
+  }
+  const _t0 = _template('<div></div>', true)
+  const VaporApp = {
+    __vapor: true,
+    setup() {
+      const n1 = _t0() as any
+      _setInsertionState(n1)
+      _createComponent(VaporChild)
+      return n1
+    },
+  }
+
+  const VdomChild = {
+    setup() {
+      const msg = ref('foo')
+
+      // @ts-expect-error
+      return (_ctx, _cache) => {
+        return (
+          _openBlock(),
+          _createElementBlock(
+            _Fragment,
+            null,
+            [
+              _createElementVNode(
+                'h1',
+                null,
+                _toDisplayString(msg.value),
+                1 /* TEXT */,
+              ),
+              _withDirectives(
+                _createElementVNode(
+                  'input',
+                  {
+                    'onUpdate:modelValue':
+                      _cache[0] ||
+                      (_cache[0] = ($event: any) => (msg.value = $event)),
+                  },
+                  null,
+                  512 /* NEED_PATCH */,
+                ),
+                [[_vModelText, msg.value]],
+              ),
+            ],
+            64 /* STABLE_FRAGMENT */,
+          )
+        )
+      }
+    },
+  }
+
+  const VdomApp = {
+    setup() {
+      return () => {
+        return (
+          _openBlock(),
+          _createElementBlock('div', null, [_createVNode(VdomChild)])
+        )
+      }
+    },
+  }
+
+  bench('vapor', () => {
+    try {
+      __DEV__ = false
+      const container = document.createElement('div')
+      container.innerHTML = html
+
+      const app = createVaporSSRApp(VaporApp)
+      app.mount(container)
+    } finally {
+      __DEV__ = true
+    }
+  })
+
+  bench('vdom', () => {
+    try {
+      __DEV__ = false
+      const container = document.createElement('div')
+      container.innerHTML = html
+
+      const app = createSSRApp(VdomApp)
+      app.mount(container)
+    } finally {
+      __DEV__ = true
+    }
+  })
+})