From: Evan You <evan@vuejs.org>
Date: Sat, 8 Feb 2025 07:44:13 +0000 (+0800)
Subject: chore: move benchmark and local playground in to packages-private
X-Git-Tag: v3.6.0-alpha.1~16^2~84
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6a185abbe4c154a37a4c0eec0054b44e91b14314;p=thirdparty%2Fvuejs%2Fcore.git

chore: move benchmark and local playground in to packages-private
---

diff --git a/benchmark/client/vapor.ts b/benchmark/client/vapor.ts
deleted file mode 100644
index 70f1d4b1b3..0000000000
--- a/benchmark/client/vapor.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createVaporApp } from 'vue/vapor'
-import App from './App.vue'
-
-createVaporApp(App as any).mount('#app')
diff --git a/eslint.config.js b/eslint.config.js
index 64d57dfc39..384074d4c3 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -126,7 +126,7 @@ export default tseslint.config(
     files: [
       'packages-private/template-explorer/**',
       'packages-private/sfc-playground/**',
-      'playground/**',
+      'packages-private/local-playground/**',
     ],
     rules: {
       'no-restricted-globals': ['error', ...NodeGlobals],
@@ -150,10 +150,10 @@ export default tseslint.config(
       'eslint.config.js',
       'rollup*.config.js',
       'scripts/**',
-      'benchmark/*',
       './*.{js,ts}',
       'packages/*/*.js',
       'packages/vue/*/*.js',
+      'packages-private/benchmark/*',
     ],
     rules: {
       'no-restricted-globals': 'off',
diff --git a/benchmark/.gitignore b/packages-private/benchmark/.gitignore
similarity index 100%
rename from benchmark/.gitignore
rename to packages-private/benchmark/.gitignore
diff --git a/benchmark/client/App.vue b/packages-private/benchmark/client/App.vue
similarity index 94%
rename from benchmark/client/App.vue
rename to packages-private/benchmark/client/App.vue
index 428217aa97..f87b38440f 100644
--- a/benchmark/client/App.vue
+++ b/packages-private/benchmark/client/App.vue
@@ -1,10 +1,10 @@
-<script setup lang="ts" vapor>
+<script setup lang="ts">
 import {
   shallowRef,
   triggerRef,
   type ShallowRef,
-  createSelector,
-} from 'vue/vapor'
+  // createSelector,
+} from 'vue'
 import { buildData } from './data'
 import { defer, wrap } from './profiling'
 
@@ -77,7 +77,7 @@ async function bench() {
   }
 }
 
-const isSelected = createSelector(selected)
+// const isSelected = createSelector(selected)
 
 const globalThis = window
 </script>
@@ -122,7 +122,7 @@ const globalThis = window
       <tr
         v-for="row of rows"
         :key="row.id"
-        :class="{ danger: isSelected(row.id) }"
+        :class="{ danger: selected === row.id }"
       >
         <td>{{ row.id }}</td>
         <td>
diff --git a/packages-private/benchmark/client/AppVapor.vue b/packages-private/benchmark/client/AppVapor.vue
new file mode 100644
index 0000000000..e418945128
--- /dev/null
+++ b/packages-private/benchmark/client/AppVapor.vue
@@ -0,0 +1,144 @@
+<script setup vapor lang="ts">
+import {
+  shallowRef,
+  triggerRef,
+  type ShallowRef,
+  // createSelector,
+} from 'vue'
+import { buildData } from './data'
+import { defer, wrap } from './profiling'
+
+const isVapor = !!import.meta.env.IS_VAPOR
+
+const selected = shallowRef<number>()
+const rows = shallowRef<
+  {
+    id: number
+    label: ShallowRef<string>
+  }[]
+>([])
+
+// Bench Add: https://jsbench.me/45lzxprzmu/1
+const add = wrap('add', () => {
+  rows.value.push(...buildData(1000))
+  triggerRef(rows)
+})
+
+const remove = wrap('remove', (id: number) => {
+  rows.value.splice(
+    rows.value.findIndex(d => d.id === id),
+    1,
+  )
+  triggerRef(rows)
+})
+
+const select = wrap('select', (id: number) => {
+  selected.value = id
+})
+
+const run = wrap('run', () => {
+  rows.value = buildData()
+  selected.value = undefined
+})
+
+const update = wrap('update', () => {
+  const _rows = rows.value
+  for (let i = 0, len = _rows.length; i < len; i += 10) {
+    _rows[i].label.value += ' !!!'
+  }
+})
+
+const runLots = wrap('runLots', () => {
+  rows.value = buildData(10000)
+  selected.value = undefined
+})
+
+const clear = wrap('clear', () => {
+  rows.value = []
+  selected.value = undefined
+})
+
+const swapRows = wrap('swap', () => {
+  const _rows = rows.value
+  if (_rows.length > 998) {
+    const d1 = _rows[1]
+    const d998 = _rows[998]
+    _rows[1] = d998
+    _rows[998] = d1
+    triggerRef(rows)
+  }
+})
+
+async function bench() {
+  for (let i = 0; i < 30; i++) {
+    rows.value = []
+    await runLots()
+    await defer()
+  }
+}
+
+// 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"
+  >
+    <button @click="bench">Benchmark mounting</button>
+    <button id="run" @click="run">Create 1,000 rows</button>
+    <button id="runLots" @click="runLots">Create 10,000 rows</button>
+    <button id="add" @click="add">Append 1,000 rows</button>
+    <button id="update" @click="update">Update every 10th row</button>
+    <button id="clear" @click="clear">Clear</button>
+    <button id="swaprows" @click="swapRows">Swap Rows</button>
+  </div>
+  <div id="time"></div>
+  <table>
+    <tbody>
+      <tr
+        v-for="row of rows"
+        :key="row.id"
+        :class="{ danger: selected === row.id }"
+      >
+        <td>{{ row.id }}</td>
+        <td>
+          <a @click="select(row.id)">{{ row.label.value }}</a>
+        </td>
+        <td>
+          <button @click="remove(row.id)">x</button>
+        </td>
+        <td class="col-md-6"></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style>
+.danger {
+  background-color: red;
+}
+</style>
diff --git a/benchmark/client/data.ts b/packages-private/benchmark/client/data.ts
similarity index 96%
rename from benchmark/client/data.ts
rename to packages-private/benchmark/client/data.ts
index 2626bf1348..ea5de1451d 100644
--- a/benchmark/client/data.ts
+++ b/packages-private/benchmark/client/data.ts
@@ -1,4 +1,4 @@
-import { shallowRef } from 'vue/vapor'
+import { shallowRef } from 'vue'
 
 let ID = 1
 
diff --git a/benchmark/client/index.html b/packages-private/benchmark/client/index.html
similarity index 100%
rename from benchmark/client/index.html
rename to packages-private/benchmark/client/index.html
diff --git a/benchmark/client/index.ts b/packages-private/benchmark/client/index.ts
similarity index 100%
rename from benchmark/client/index.ts
rename to packages-private/benchmark/client/index.ts
diff --git a/benchmark/client/profiling.ts b/packages-private/benchmark/client/profiling.ts
similarity index 92%
rename from benchmark/client/profiling.ts
rename to packages-private/benchmark/client/profiling.ts
index 82d950a0f6..ee4f38b609 100644
--- a/benchmark/client/profiling.ts
+++ b/packages-private/benchmark/client/profiling.ts
@@ -2,13 +2,13 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable no-restricted-globals */
 
-import { nextTick } from 'vue/vapor'
+import { nextTick } from 'vue'
 
-declare namespace globalThis {
-  let doProfile: boolean
-  let reactivity: boolean
-  let recordTime: boolean
-  let times: Record<string, number[]>
+declare global {
+  var doProfile: boolean
+  var reactivity: boolean
+  var recordTime: boolean
+  var times: Record<string, number[]>
 }
 
 globalThis.recordTime = true
diff --git a/packages-private/benchmark/client/vapor.ts b/packages-private/benchmark/client/vapor.ts
new file mode 100644
index 0000000000..2574da9dea
--- /dev/null
+++ b/packages-private/benchmark/client/vapor.ts
@@ -0,0 +1,4 @@
+import { createVaporApp } from 'vue'
+import App from './AppVapor.vue'
+
+createVaporApp(App as any).mount('#app')
diff --git a/benchmark/client/vdom.ts b/packages-private/benchmark/client/vdom.ts
similarity index 100%
rename from benchmark/client/vdom.ts
rename to packages-private/benchmark/client/vdom.ts
diff --git a/benchmark/index.js b/packages-private/benchmark/index.js
similarity index 88%
rename from benchmark/index.js
rename to packages-private/benchmark/index.js
index f1a37cdff7..7841b0b299 100644
--- a/benchmark/index.js
+++ b/packages-private/benchmark/index.js
@@ -8,7 +8,7 @@ import connect from 'connect'
 import sirv from 'sirv'
 import { launch } from 'puppeteer'
 import colors from 'picocolors'
-import { exec, getSha } from '../scripts/utils.js'
+import { exec, getSha } from '../../scripts/utils.js'
 import process from 'node:process'
 import readline from 'node:readline'
 
@@ -99,37 +99,34 @@ async function buildLib() {
 
   /** @type {import('node:child_process').SpawnOptions} */
   const options = {
-    cwd: path.resolve(import.meta.dirname, '..'),
+    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([
+  const [{ ok }, { ok: ok2 }, { ok: ok3 }] = await Promise.all([
     exec(
       'pnpm',
-      `run --silent build shared compiler-core compiler-dom compiler-vapor ${buildOptions} cjs`.split(
+      `run --silent build shared compiler-core compiler-dom ${buildOptions} cjs`.split(
         ' ',
       ),
       options,
     ),
     exec(
       'pnpm',
-      'run --silent build compiler-sfc compiler-ssr -f cjs'.split(' '),
-      options,
-    ),
-    exec(
-      'pnpm',
-      `run --silent build vue-vapor ${buildOptions} esm-browser`.split(' '),
+      'run --silent build compiler-sfc compiler-ssr compiler-vapor -f cjs'.split(
+        ' ',
+      ),
       options,
     ),
     exec(
       'pnpm',
-      `run --silent build vue ${buildOptions} esm-browser-runtime`.split(' '),
+      `run --silent build vue ${buildOptions} vapor`.split(' '),
       options,
     ),
   ])
 
-  if (!ok || !ok2 || !ok3 || !ok4) {
+  if (!ok || !ok2 || !ok3) {
     console.error('Failed to build')
     process.exit(1)
   }
@@ -143,21 +140,15 @@ async function buildApp(isVapor) {
 
   if (!devBuild) process.env.NODE_ENV = 'production'
   const CompilerSFC = await import(
-    '../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
+    '../../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
   )
   const prodSuffix = devBuild ? '.js' : '.prod.js'
 
-  /** @type {any} */
-  const TemplateCompiler = await import(
-    (isVapor
-      ? '../packages/compiler-vapor/dist/compiler-vapor.cjs'
-      : '../packages/compiler-dom/dist/compiler-dom.cjs') + prodSuffix
-  )
   const runtimePath = path.resolve(
     import.meta.dirname,
     (isVapor
-      ? '../packages/vue-vapor/dist/vue-vapor.esm-browser'
-      : '../packages/vue/dist/vue.runtime.esm-browser') + prodSuffix,
+      ? '../../packages/vue/dist/vue.runtime-with-vapor.esm-browser'
+      : '../../packages/vue/dist/vue.runtime.esm-browser') + prodSuffix,
   )
 
   const mode = isVapor ? 'vapor' : 'vdom'
@@ -179,7 +170,6 @@ async function buildApp(isVapor) {
     },
     resolve: {
       alias: {
-        'vue/vapor': runtimePath,
         vue: runtimePath,
       },
     },
@@ -187,7 +177,6 @@ async function buildApp(isVapor) {
     plugins: [
       Vue({
         compiler: CompilerSFC,
-        template: { compiler: TemplateCompiler },
       }),
     ],
   })
diff --git a/benchmark/package.json b/packages-private/benchmark/package.json
similarity index 97%
rename from benchmark/package.json
rename to packages-private/benchmark/package.json
index 81d55005c9..b087cfca4b 100644
--- a/benchmark/package.json
+++ b/packages-private/benchmark/package.json
@@ -9,7 +9,7 @@
     "start": "node index.js"
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5",
+    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@c156992",
     "connect": "^3.7.0",
     "sirv": "^2.0.4",
     "vite": "catalog:"
diff --git a/benchmark/tsconfig.json b/packages-private/benchmark/tsconfig.json
similarity index 90%
rename from benchmark/tsconfig.json
rename to packages-private/benchmark/tsconfig.json
index 535fcf2069..4a32149504 100644
--- a/benchmark/tsconfig.json
+++ b/packages-private/benchmark/tsconfig.json
@@ -17,7 +17,7 @@
     "skipLibCheck": true,
     "noEmit": true,
     "paths": {
-      "vue": ["../packages/vue/src"],
+      "vue": ["../packages/vue/src/runtime-with-vapor.ts"],
       "@vue/*": ["../packages/*/src"]
     }
   },
diff --git a/playground/index.html b/packages-private/local-playground/index.html
similarity index 100%
rename from playground/index.html
rename to packages-private/local-playground/index.html
diff --git a/playground/package.json b/packages-private/local-playground/package.json
similarity index 100%
rename from playground/package.json
rename to packages-private/local-playground/package.json
diff --git a/playground/setup/dev.js b/packages-private/local-playground/setup/dev.js
similarity index 97%
rename from playground/setup/dev.js
rename to packages-private/local-playground/setup/dev.js
index ab1c59e5e5..72a7ed4a83 100644
--- a/playground/setup/dev.js
+++ b/packages-private/local-playground/setup/dev.js
@@ -2,7 +2,7 @@
 import path from 'node:path'
 
 const resolve = (/** @type {string} */ p) =>
-  path.resolve(import.meta.dirname, '../../packages', p)
+  path.resolve(import.meta.dirname, '../../../packages', p)
 
 /**
  * @param {Object} [env]
diff --git a/playground/setup/vite.js b/packages-private/local-playground/setup/vite.js
similarity index 100%
rename from playground/setup/vite.js
rename to packages-private/local-playground/setup/vite.js
diff --git a/playground/src/.gitignore b/packages-private/local-playground/src/.gitignore
similarity index 100%
rename from playground/src/.gitignore
rename to packages-private/local-playground/src/.gitignore
diff --git a/packages-private/local-playground/src/App.vue b/packages-private/local-playground/src/App.vue
new file mode 100644
index 0000000000..b6124e39a3
--- /dev/null
+++ b/packages-private/local-playground/src/App.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import VaporComp from './VaporComp.vue'
+
+const msg = ref('hello')
+const passSlot = ref(true)
+</script>
+
+<template>
+  <input v-model="msg" />
+  <button @click="passSlot = !passSlot">toggle #test slot</button>
+  <VaporComp :msg="msg">
+    <template #default="{ foo }">
+      <div>slot props: {{ foo }}</div>
+      <div>component prop: {{ msg }}</div>
+    </template>
+
+    <template #test v-if="passSlot"> A test slot </template>
+  </VaporComp>
+</template>
diff --git a/packages-private/local-playground/src/main.ts b/packages-private/local-playground/src/main.ts
new file mode 100644
index 0000000000..9d682d9ffb
--- /dev/null
+++ b/packages-private/local-playground/src/main.ts
@@ -0,0 +1 @@
+import './_entry'
diff --git a/playground/src/style.css b/packages-private/local-playground/src/style.css
similarity index 100%
rename from playground/src/style.css
rename to packages-private/local-playground/src/style.css
diff --git a/playground/tsconfig.json b/packages-private/local-playground/tsconfig.json
similarity index 100%
rename from playground/tsconfig.json
rename to packages-private/local-playground/tsconfig.json
diff --git a/playground/vite.config.ts b/packages-private/local-playground/vite.config.ts
similarity index 100%
rename from playground/vite.config.ts
rename to packages-private/local-playground/vite.config.ts
diff --git a/playground/vite.prod.config.ts b/packages-private/local-playground/vite.prod.config.ts
similarity index 100%
rename from playground/vite.prod.config.ts
rename to packages-private/local-playground/vite.prod.config.ts
diff --git a/playground/src/App.vue b/playground/src/App.vue
deleted file mode 100644
index 5795cf47e9..0000000000
--- a/playground/src/App.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup lang="ts" vapor>
-import Comp from './Comp.vue'
-</script>
-
-<template>
-  <h1>Vapor</h1>
-  <Comp />
-</template>
diff --git a/playground/src/main.ts b/playground/src/main.ts
deleted file mode 100644
index 39c0d6fbe3..0000000000
--- a/playground/src/main.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// import './_entry'
-import './interop'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b14a05543..0f5e574ff0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,8 +13,8 @@ catalogs:
       specifier: ^7.25.2
       version: 7.26.0
     '@vitejs/plugin-vue':
-      specifier: ^5.1.2
-      version: 5.1.5
+      specifier: ^5.2.1
+      version: 5.2.1
     estree-walker:
       specifier: ^2.0.2
       version: 2.0.2
@@ -25,8 +25,8 @@ catalogs:
       specifier: ^1.2.0
       version: 1.2.1
     vite:
-      specifier: ^5.4.0
-      version: 5.4.8
+      specifier: ^6.1.0
+      version: 6.1.0
 
 importers:
 
@@ -178,16 +178,16 @@ importers:
         version: 8.20.0(eslint@9.18.0)(typescript@5.6.2)
       vite:
         specifier: 'catalog:'
-        version: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+        version: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
       vitest:
         specifier: ^3.0.2
-        version: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)
+        version: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
 
-  benchmark:
+  packages-private/benchmark:
     dependencies:
       '@vitejs/plugin-vue':
-        specifier: https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5
-        version: https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@3.5.13(typescript@5.6.2))
+        specifier: https://pkg.pr.new/@vitejs/plugin-vue@c156992
+        version: https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.2))
       connect:
         specifier: ^3.7.0
         version: 3.7.0
@@ -196,7 +196,7 @@ importers:
         version: 2.0.4
       vite:
         specifier: 'catalog:'
-        version: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+        version: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
     devDependencies:
       '@types/connect':
         specifier: ^3.4.38
@@ -226,6 +226,31 @@ importers:
         specifier: workspace:*
         version: link:../../packages/vue
 
+  packages-private/local-playground:
+    dependencies:
+      '@vueuse/core':
+        specifier: ^11.1.0
+        version: 11.1.0(vue@packages+vue)
+      vue:
+        specifier: workspace:*
+        version: link:../../packages/vue
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: https://pkg.pr.new/@vitejs/plugin-vue@c156992
+        version: https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@packages+vue)
+      '@vue/compiler-sfc':
+        specifier: workspace:*
+        version: link:../../packages/compiler-sfc
+      vite:
+        specifier: 'catalog:'
+        version: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
+      vite-hyper-config:
+        specifier: ^0.4.0
+        version: 0.4.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))
+      vite-plugin-inspect:
+        specifier: ^0.8.7
+        version: 0.8.7(rollup@4.31.0)(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))
+
   packages-private/sfc-playground:
     dependencies:
       '@vue/repl':
@@ -243,10 +268,10 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 5.1.5(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@packages+vue)
+        version: 5.2.1(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@packages+vue)
       vite:
         specifier: 'catalog:'
-        version: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+        version: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
 
   packages-private/template-explorer:
     dependencies:
@@ -264,10 +289,10 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 5.1.5(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@packages+vue)
+        version: 5.2.1(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@packages+vue)
       vite:
         specifier: 'catalog:'
-        version: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+        version: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
       vue:
         specifier: workspace:*
         version: link:../../packages/vue
@@ -496,31 +521,6 @@ importers:
         specifier: workspace:*
         version: link:../vue
 
-  playground:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^11.1.0
-        version: 11.1.0(vue@packages+vue)
-      vue:
-        specifier: workspace:*
-        version: link:../packages/vue
-    devDependencies:
-      '@vitejs/plugin-vue':
-        specifier: https://pkg.pr.new/@vitejs/plugin-vue@c156992
-        version: https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@packages+vue)
-      '@vue/compiler-sfc':
-        specifier: workspace:*
-        version: link:../packages/compiler-sfc
-      vite:
-        specifier: 'catalog:'
-        version: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
-      vite-hyper-config:
-        specifier: ^0.4.0
-        version: 0.4.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))
-      vite-plugin-inspect:
-        specifier: ^0.8.7
-        version: 0.8.7(rollup@4.31.0)(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))
-
 packages:
 
   '@ampproject/remapping@2.3.0':
@@ -1427,11 +1427,11 @@ packages:
     resolution: {integrity: sha512-v/BpkeeYAsPkKCkR8BDwcno0llhzWVqPOamQrAEMdpZav2Y9OVjd9dwJyBLJWwf335B5DmlifECIkZRJCaGaHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@vitejs/plugin-vue@5.1.5':
-    resolution: {integrity: sha512-dlnib73G05CDBAUR/YpuZcQQ47fpjihnnNouAAqN62z+oqSsWJ+kh52GRzIxpkgFG3q11eXK7Di7RMmoCwISZA==}
+  '@vitejs/plugin-vue@5.2.1':
+    resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^5.0.0
+      vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
   '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@c156992':
@@ -1442,14 +1442,6 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5':
-    resolution: {tarball: https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5}
-    version: 5.1.4
-    engines: {node: ^18.0.0 || >=20.0.0}
-    peerDependencies:
-      vite: ^5.0.0
-      vue: ^3.2.25
-
   '@vitest/coverage-v8@3.0.2':
     resolution: {integrity: sha512-U+hZYb0FtgNDb6B3E9piAHzXXIuxuBw2cd6Lvepc9sYYY4KjgiwCBmo3Sird9ZRu3ggLpLBTfw1ZRr77ipiSfw==}
     peerDependencies:
@@ -1983,15 +1975,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.3.7:
-    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -3036,9 +3019,6 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  picocolors@1.1.0:
-    resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3716,6 +3696,46 @@ packages:
       terser:
         optional: true
 
+  vite@6.1.0:
+    resolution: {integrity: sha512-RjjMipCKVoR4hVfPY6GQTgveinjNuyLw+qruksLDvA5ktI1150VmcMBKmQaEWJhg/j6Uaf6dNCNA0AfdzUb/hQ==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      jiti: '>=1.21.0'
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vitest@3.0.2:
     resolution: {integrity: sha512-5bzaHakQ0hmVVKLhfh/jXf6oETDBtgPo8tQCHYB+wftNgFJ+Hah67IsWc8ivx4vFL025Ow8UiuTf4W57z4izvQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -4588,20 +4608,20 @@ snapshots:
       '@typescript-eslint/types': 8.20.0
       eslint-visitor-keys: 4.2.0
 
-  '@vitejs/plugin-vue@5.1.5(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@packages+vue)':
+  '@vitejs/plugin-vue@5.2.1(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@packages+vue)':
     dependencies:
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
       vue: link:packages/vue
 
-  '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@packages+vue)':
+  '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@3.5.13(typescript@5.6.2))':
     dependencies:
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
-      vue: link:packages/vue
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
+      vue: 3.5.13(typescript@5.6.2)
 
-  '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@e3c5ce5(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))(vue@3.5.13(typescript@5.6.2))':
+  '@vitejs/plugin-vue@https://pkg.pr.new/@vitejs/plugin-vue@c156992(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))(vue@packages+vue)':
     dependencies:
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
-      vue: 3.5.13(typescript@5.6.2)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
+      vue: link:packages/vue
 
   '@vitest/coverage-v8@3.0.2(vitest@3.0.2)':
     dependencies:
@@ -4617,7 +4637,7 @@ snapshots:
       std-env: 3.8.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)
+      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -4627,7 +4647,7 @@ snapshots:
       eslint: 9.18.0
     optionalDependencies:
       typescript: 5.6.2
-      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)
+      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
 
   '@vitest/expect@3.0.2':
     dependencies:
@@ -4636,13 +4656,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.2(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))':
+  '@vitest/mocker@3.0.2(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))':
     dependencies:
       '@vitest/spy': 3.0.2
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
 
   '@vitest/pretty-format@3.0.2':
     dependencies:
@@ -4676,7 +4696,7 @@ snapshots:
       sirv: 3.0.0
       tinyglobby: 0.2.10
       tinyrainbow: 2.0.0
-      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)
+      vitest: 3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
 
   '@vitest/utils@3.0.2':
     dependencies:
@@ -5194,10 +5214,6 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  debug@4.3.7:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -6288,8 +6304,6 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
-  picocolors@1.1.0: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -6972,11 +6986,11 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vite-hyper-config@0.4.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)):
+  vite-hyper-config@0.4.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)):
     dependencies:
       cac: 6.7.14
-      picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      picocolors: 1.1.1
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
       vite-node: 2.1.1(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
     transitivePeerDependencies:
       - '@types/node'
@@ -6992,7 +7006,7 @@ snapshots:
   vite-node@2.1.1(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0):
     dependencies:
       cac: 6.7.14
-      debug: 4.3.6
+      debug: 4.4.0
       pathe: 1.1.2
       vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
     transitivePeerDependencies:
@@ -7006,15 +7020,16 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.0.2(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0):
+  vite-node@3.0.2(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.6.0
       pathe: 2.0.2
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
     transitivePeerDependencies:
       - '@types/node'
+      - jiti
       - less
       - lightningcss
       - sass
@@ -7023,19 +7038,21 @@ snapshots:
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
-  vite-plugin-inspect@0.8.7(rollup@4.31.0)(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)):
+  vite-plugin-inspect@0.8.7(rollup@4.31.0)(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.31.0)
-      debug: 4.3.7
+      debug: 4.4.0
       error-stack-parser-es: 0.1.5
       fs-extra: 11.2.0
       open: 10.1.0
       perfect-debounce: 1.0.0
-      picocolors: 1.1.0
+      picocolors: 1.1.1
       sirv: 2.0.4
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -7051,10 +7068,22 @@ snapshots:
       sass: 1.83.4
       terser: 5.33.0
 
-  vitest@3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0):
+  vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1):
+    dependencies:
+      esbuild: 0.24.2
+      postcss: 8.5.1
+      rollup: 4.31.0
+    optionalDependencies:
+      '@types/node': 22.10.7
+      fsevents: 2.3.3
+      sass: 1.83.4
+      terser: 5.33.0
+      yaml: 2.6.1
+
+  vitest@3.0.2(@types/node@22.10.7)(@vitest/ui@3.0.4)(jsdom@26.0.0)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1):
     dependencies:
       '@vitest/expect': 3.0.2
-      '@vitest/mocker': 3.0.2(vite@5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0))
+      '@vitest/mocker': 3.0.2(vite@6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1))
       '@vitest/pretty-format': 3.0.2
       '@vitest/runner': 3.0.2
       '@vitest/snapshot': 3.0.2
@@ -7070,14 +7099,15 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 5.4.8(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
-      vite-node: 3.0.2(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)
+      vite: 6.1.0(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
+      vite-node: 3.0.2(@types/node@22.10.7)(sass@1.83.4)(terser@5.33.0)(yaml@2.6.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.10.7
       '@vitest/ui': 3.0.4(vitest@3.0.2)
       jsdom: 26.0.0
     transitivePeerDependencies:
+      - jiti
       - less
       - lightningcss
       - msw
@@ -7087,6 +7117,8 @@ snapshots:
       - sugarss
       - supports-color
       - terser
+      - tsx
+      - yaml
 
   void-elements@3.1.0: {}
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d01dbb0480..c33fbb43b7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,8 +1,6 @@
 packages:
   - 'packages/*'
   - 'packages-private/*'
-  - playground
-  - benchmark
 
 catalog:
   '@babel/parser': ^7.25.3
@@ -10,5 +8,5 @@ catalog:
   'estree-walker': ^2.0.2
   'magic-string': ^0.30.11
   'source-map-js': ^1.2.0
-  'vite': ^5.4.0
-  '@vitejs/plugin-vue': ^5.1.2
+  'vite': ^6.1.0
+  '@vitejs/plugin-vue': ^5.2.1