feat: use browser mode

package.json

@@ -71,8 +71,9 @@
     "@types/node": "^20.16.10",
     "@types/semver": "^7.5.8",
     "@types/serve-handler": "^6.1.4",
-    "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@vitest/browser": "^2.1.5",
+    "@vitest/coverage-v8": "^2.1.5",
+    "@vitest/ui": "^2.1.5",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
@@ -90,6 +91,7 @@
     "marked": "13.0.3",
     "npm-run-all2": "^6.2.3",
     "picocolors": "^1.1.0",
+    "playwright": "^1.49.0",
     "prettier": "^3.3.3",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
@@ -108,7 +110,7 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.5.0",
     "vite": "catalog:",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.5"
   },
   "pnpm": {
     "peerDependencyRules": {

packages/runtime-vapor/__benchmarks__/_runtimes/vanilla.test.ts → packages/runtime-vapor/__benchmarks__/_runtimes/vanilla.spec.ts

@@ -11,12 +11,14 @@ describe('vanilla', () => {
     create(3)
     ;(rows().item(0)!.firstChild as HTMLElement)!.click()
 
-    expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
-    expect(document.body.innerHTML).toBe(`<div id="host">${html()}</div>`)
+    await expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
+    expect(document.body.innerHTML.trim()).toBe(
+      `<div id="host">${html()}</div>`,
+    )
 
     options.teardown()
 
-    expect(document.body.innerHTML).toBe('')
+    expect(document.body.innerHTML.trim()).toBe('')
   })
   it('shoud work with 1000 items', async () => {
     const { html, ctx, options } = createListAppOnVanilla()
@@ -29,10 +31,12 @@ describe('vanilla', () => {
     ;(items.item(0)!.firstChild as HTMLElement)!.click()
 
     expect(items.length).toBe(1000)
-    expect(document.body.innerHTML).toBe(`<div id="host">${html()}</div>`)
+    expect(document.body.innerHTML.trim()).toBe(
+      `<div id="host">${html()}</div>`,
+    )
 
     options.teardown()
 
-    expect(document.body.innerHTML).toBe('')
+    expect(document.body.innerHTML.trim()).toBe('')
   })
 })

packages/runtime-vapor/__benchmarks__/_runtimes/vanilla.ts

@@ -1,4 +1,5 @@
 import type { BenchOptions } from 'vitest'
+import { basicOptions } from '../_utils'
 
 export function createListAppOnVanilla({
   initHost = (): HTMLDivElement => {
@@ -37,8 +38,7 @@ export function createListAppOnVanilla({
   }
 
   const options = {
-    warmupIterations: 5,
-    iterations: 20,
+    ...basicOptions,
     setup: handleSetup,
     teardown: handleTeardown,
   } satisfies BenchOptions

packages/runtime-vapor/__benchmarks__/_runtimes/vapor-ref.test.ts → packages/runtime-vapor/__benchmarks__/_runtimes/vapor-ref.spec.ts

@@ -15,14 +15,14 @@ describe('vapor-ref', () => {
 
     await wait()
 
-    expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
-    expect(document.body.innerHTML).toBe(
+    await expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
+    expect(document.body.innerHTML.trim()).toBe(
       `<div id="host" data-v-app="">${html()}</div>`,
     )
 
     options.teardown()
 
-    expect(document.body.innerHTML).toBe('')
+    expect(document.body.innerHTML.trim()).toBe('')
   })
   it('shoud work with 1000 items', async () => {
     const { html, ctx, options, wait } = createListAppWithRef()
@@ -40,12 +40,12 @@ describe('vapor-ref', () => {
     let count = 0
     html().replaceAll('</a></td></tr>', v => (++count, v))
     expect(count).toBe(1000)
-    expect(document.body.innerHTML).toBe(
+    expect(document.body.innerHTML.trim()).toBe(
       `<div id="host" data-v-app="">${html()}</div>`,
     )
 
     options.teardown()
 
-    expect(document.body.innerHTML).toBe('')
+    expect(document.body.innerHTML.trim()).toBe('')
   })
 })

packages/runtime-vapor/__benchmarks__/_runtimes/vapor-ref.ts

@@ -17,6 +17,7 @@ import {
   setText,
   template,
 } from '../../src'
+import { basicOptions } from '../_utils'
 
 export function createListAppWithRef({
   initHost = (): HTMLDivElement => {
@@ -95,8 +96,7 @@ export function createListAppWithRef({
   })
 
   const options = {
-    warmupIterations: 5,
-    iterations: 20,
+    ...basicOptions,
     setup: handleSetup,
     teardown: handleTeardown,
   } satisfies BenchOptions

packages/runtime-vapor/__benchmarks__/_runtimes/vapor-shallow-ref.test.ts → packages/runtime-vapor/__benchmarks__/_runtimes/vapor-shallow-ref.spec.ts

@@ -15,13 +15,13 @@ describe('vapor-shallow-ref', () => {
 
     await wait()
 
-    expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
-    expect(document.body.innerHTML).toBe(
+    await expect(html()).toMatchFileSnapshot('./__snapshots__/create-list.html')
+    expect(document.body.innerHTML.trim()).toBe(
       `<div id="host" data-v-app="">${html()}</div>`,
     )
 
     options.teardown()
 
-    expect(document.body.innerHTML).toBe('')
+    expect(document.body.innerHTML.trim()).toBe('')
   })
 })

packages/runtime-vapor/__benchmarks__/_runtimes/vapor-shallow-ref.ts

@@ -18,6 +18,7 @@ import {
   shallowRef,
   template,
 } from '../../src'
+import { basicOptions } from '../_utils'
 
 export function createListAppWithShallowRef({
   initHost = (): HTMLDivElement => {
@@ -96,8 +97,7 @@ export function createListAppWithShallowRef({
   })
 
   const options = {
-    warmupIterations: 5,
-    iterations: 20,
+    ...basicOptions,
     setup: handleSetup,
     teardown: handleTeardown,
   } satisfies BenchOptions

packages/runtime-vapor/__benchmarks__/_utils.ts

@@ -1,3 +1,4 @@
+import type { BenchOptions } from 'vitest'
 import {
   type App,
   type Component,
@@ -9,6 +10,11 @@ import {
 } from '../src'
 import type { RawProps } from '../src/componentProps'
 
+export const basicOptions = {
+  warmupIterations: 10,
+  iterations: 30,
+} satisfies BenchOptions
+
 export interface RenderContext {
   component: Component
   host: HTMLElement

packages/runtime-vapor/__benchmarks__/demo.bench.ts

@@ -0,0 +1,17 @@
+import { bench, describe } from 'vitest'
+
+describe('vitest bench demo', () => {
+  bench('normal', () => {
+    const x = [1, 5, 4, 2, 3]
+    x.sort((a, b) => {
+      return a - b
+    })
+  })
+
+  bench('reverse', () => {
+    const x = [1, 5, 4, 2, 3]
+    x.reverse().sort((a, b) => {
+      return a - b
+    })
+  })
+})