From 604c42db4968103d5e62489f773bc8975e1b3f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 29 Sep 2024 01:55:00 +0800
Subject: [PATCH] chore(runtime-vapor): add benchmark build flag

---
 benchmark/client/App.vue                | 25 +++++++++++++++++++++++--
 benchmark/client/profiling.ts           | 17 +++++++++++++++--
 benchmark/index.js                      |  4 +++-
 packages/global.d.ts                    |  1 +
 packages/runtime-vapor/src/scheduler.ts |  2 ++
 playground/setup/dev.js                 |  1 +
 rollup.config.js                        |  1 +
 scripts/dev.js                          |  1 +
 vitest.config.ts                        |  1 +
 9 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/benchmark/client/App.vue b/benchmark/client/App.vue
index 0e7cbc82f..8c2d9a3b3 100644
--- a/benchmark/client/App.vue
+++ b/benchmark/client/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts" vapor>
 import {
-  ref,
   shallowRef,
   triggerRef,
   type ShallowRef,
@@ -11,7 +10,7 @@ import { defer, wrap } from './profiling'
 
 const isVapor = !!import.meta.env.IS_VAPOR
 
-const selected = ref<number>()
+const selected = shallowRef<number>()
 const rows = shallowRef<
   {
     id: number
@@ -79,10 +78,32 @@ async function bench() {
 }
 
 const isSelected = createSelector(selected)
+
+const globalThis = window
 </script>
 
 <template>
   <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+
+  <div style="display: flex; gap: 4px; margin-bottom: 4px">
+    <label>
+      <input
+        type="checkbox"
+        :value="globalThis.doProfile"
+        @change="globalThis.doProfile = $event.target.checked"
+      />
+      Profiling
+    </label>
+    <label>
+      <input
+        type="checkbox"
+        :value="globalThis.reactivity"
+        @change="globalThis.reactivity = $event.target.checked"
+      />
+      Reactivity Cost
+    </label>
+  </div>
+
   <div
     id="control"
     style="display: flex; flex-direction: column; width: fit-content; gap: 6px"
diff --git a/benchmark/client/profiling.ts b/benchmark/client/profiling.ts
index d4de3f517..2269e5ef9 100644
--- a/benchmark/client/profiling.ts
+++ b/benchmark/client/profiling.ts
@@ -2,14 +2,16 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-restricted-globals */
 
-declare module globalThis {
+declare namespace globalThis {
   let doProfile: boolean
+  let reactivity: boolean
   let recordTime: boolean
   let times: Record<string, number[]>
 }
 
 globalThis.recordTime = true
 globalThis.doProfile = false
+globalThis.reactivity = false
 
 export const defer = () => new Promise(r => requestIdleCallback(r))
 
@@ -34,7 +36,18 @@ export function wrap(
     fn(...args)
 
     await defer()
-    const time = performance.now() - start
+    let time: number
+    if (globalThis.reactivity) {
+      time = performance.measure(
+        'flushJobs-measure',
+        'flushJobs-start',
+        'flushJobs-end',
+      ).duration
+      performance.clearMarks()
+      performance.clearMeasures()
+    } else {
+      time = performance.now() - start
+    }
     const prevTimes = times[id] || (times[id] = [])
     prevTimes.push(time)
 
diff --git a/benchmark/index.js b/benchmark/index.js
index 7ea24ec1f..2332761ec 100644
--- a/benchmark/index.js
+++ b/benchmark/index.js
@@ -88,9 +88,11 @@ if (!skipBench) {
 async function buildLib() {
   console.info(colors.blue('Building lib...'))
 
+  /** @type {import('node:child_process').SpawnOptions} */
   const options = {
     cwd: path.resolve(import.meta.dirname, '..'),
     stdio: 'inherit',
+    env: { ...process.env, BENCHMARK: 'true' },
   }
   const buildOptions = devBuild ? '-df' : '-pf'
   const [{ ok }, { ok: ok2 }, { ok: ok3 }, { ok: ok4 }] = await Promise.all([
@@ -130,7 +132,7 @@ async function buildApp(isVapor) {
     colors.blue(`\nBuilding ${isVapor ? 'Vapor' : 'Virtual DOM'} app...\n`),
   )
 
-  process.env.NODE_ENV = 'production'
+  if (!devBuild) process.env.NODE_ENV = 'production'
   const CompilerSFC = await import(
     '../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
   )
diff --git a/packages/global.d.ts b/packages/global.d.ts
index 8b627d2e5..e6acf0d1b 100644
--- a/packages/global.d.ts
+++ b/packages/global.d.ts
@@ -9,6 +9,7 @@ declare var __CJS__: boolean
 declare var __SSR__: boolean
 declare var __VERSION__: string
 declare var __COMPAT__: boolean
+declare var __BENCHMARK__: boolean
 
 // Feature flags
 declare var __FEATURE_OPTIONS_API__: boolean
diff --git a/packages/runtime-vapor/src/scheduler.ts b/packages/runtime-vapor/src/scheduler.ts
index 5b3a1e93a..cfdfd1349 100644
--- a/packages/runtime-vapor/src/scheduler.ts
+++ b/packages/runtime-vapor/src/scheduler.ts
@@ -139,6 +139,7 @@ export function flushPostFlushCbs(): void {
 
 // TODO: dev mode and checkRecursiveUpdates
 function flushJobs() {
+  if (__BENCHMARK__) performance.mark('flushJobs-start')
   isFlushPending = false
   isFlushing = true
 
@@ -169,6 +170,7 @@ function flushJobs() {
     if (queue.length || pendingPostFlushCbs.length) {
       flushJobs()
     }
+    if (__BENCHMARK__) performance.mark('flushJobs-end')
   }
 }
 
diff --git a/playground/setup/dev.js b/playground/setup/dev.js
index a6ba15274..8f24be757 100644
--- a/playground/setup/dev.js
+++ b/playground/setup/dev.js
@@ -51,6 +51,7 @@ export function DevPlugin({ browser = false } = {}) {
           __NODE_JS__: String(false),
           // need SSR-specific branches?
           __SSR__: String(false),
+          __BENCHMARK__: 'false',
 
           // 2.x compat build
           __COMPAT__: String(false),
diff --git a/rollup.config.js b/rollup.config.js
index 0efe1326a..2ed8bb09f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -218,6 +218,7 @@ function createConfig(format, output, plugins = []) {
       __CJS__: String(isCJSBuild),
       // need SSR-specific branches?
       __SSR__: String(!isGlobalBuild),
+      __BENCHMARK__: process.env.BENCHMARK || 'false',
 
       // 2.x compat build
       __COMPAT__: String(isCompatBuild),
diff --git a/scripts/dev.js b/scripts/dev.js
index fb4d3873e..a43d1142a 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -151,6 +151,7 @@ for (const target of targets) {
         __ESM_BROWSER__: String(format.includes('esm-browser')),
         __CJS__: String(format === 'cjs'),
         __SSR__: String(format !== 'global'),
+        __BENCHMARK__: process.env.BENCHMARK || 'false',
         __COMPAT__: String(target === 'vue-compat'),
         __FEATURE_SUSPENSE__: `true`,
         __FEATURE_OPTIONS_API__: `true`,
diff --git a/vitest.config.ts b/vitest.config.ts
index fb67562fc..4d7285f76 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
     __ESM_BROWSER__: false,
     __CJS__: true,
     __SSR__: true,
+    __BENCHMARK__: false,
     __FEATURE_OPTIONS_API__: true,
     __FEATURE_SUSPENSE__: true,
     __FEATURE_PROD_DEVTOOLS__: false,