dts-build/packages
*.tsbuildinfo
*.tgz
+packages-private/benchmark/reference
-<script setup lang="ts">
-import {
- shallowRef,
- triggerRef,
- type ShallowRef,
- // createSelector,
-} from 'vue'
+<script setup>
+import { shallowRef, triggerRef } 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>
- }[]
->([])
+const selected = shallowRef()
+const rows = shallowRef([])
// Bench Add: https://jsbench.me/45lzxprzmu/1
const add = wrap('add', () => {
triggerRef(rows)
})
-const remove = wrap('remove', (id: number) => {
+const remove = wrap('remove', id => {
rows.value.splice(
rows.value.findIndex(d => d.id === id),
1,
triggerRef(rows)
})
-const select = wrap('select', (id: number) => {
+const select = wrap('select', id => {
selected.value = id
})
}
}
-// const isSelected = createSelector(selected)
-
const globalThis = window
</script>
<template>
- <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+ <h1>Vue.js (VDOM) Benchmark</h1>
<div style="display: flex; gap: 4px; margin-bottom: 4px">
<label>
>
<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="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>
+ <table class="table table-hover table-striped test-data">
<tbody>
<tr
v-for="row of rows"
:key="row.id"
- :class="{ danger: selected === row.id }"
+ :class="selected === row.id ? 'danger' : ''"
>
- <td>{{ row.id }}</td>
- <td>
+ <td class="col-md-1">{{ row.id }}</td>
+ <td class="col-md-4">
<a @click="select(row.id)">{{ row.label.value }}</a>
</td>
- <td>
- <button @click="remove(row.id)">x</button>
+ <td class="col-md-1">
+ <a @click="remove(row.id)">
+ <span class="glyphicon glyphicon-remove" aria-hidden="true">x</span>
+ </a>
</td>
<td class="col-md-6"></td>
</tr>
</tbody>
</table>
+ <span
+ class="preloadicon glyphicon glyphicon-remove"
+ aria-hidden="true"
+ ></span>
</template>
<style>
-<script setup vapor lang="ts">
-import {
- shallowRef,
- triggerRef,
- type ShallowRef,
- // createSelector,
-} from 'vue'
+<script setup vapor>
+import { shallowRef, triggerRef } 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>
- }[]
->([])
+const selected = shallowRef()
+const rows = shallowRef([])
// Bench Add: https://jsbench.me/45lzxprzmu/1
const add = wrap('add', () => {
triggerRef(rows)
})
-const remove = wrap('remove', (id: number) => {
+const remove = wrap('remove', id => {
rows.value.splice(
rows.value.findIndex(d => d.id === id),
1,
triggerRef(rows)
})
-const select = wrap('select', (id: number) => {
+const select = wrap('select', id => {
selected.value = id
})
}
}
-// const isSelected = createSelector(selected)
-
const globalThis = window
</script>
<template>
- <h1>Vue.js ({{ isVapor ? 'Vapor' : 'Virtual DOM' }}) Benchmark</h1>
+ <h1>Vue.js (Vapor) Benchmark</h1>
<div style="display: flex; gap: 4px; margin-bottom: 4px">
<label>
>
<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="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>
+ <table class="table table-hover table-striped test-data">
<tbody>
<tr
v-for="row of rows"
:key="row.id"
- :class="{ danger: selected === row.id }"
+ :class="selected === row.id ? 'danger' : ''"
>
- <td>{{ row.id }}</td>
- <td>
+ <td class="col-md-1">{{ row.id }}</td>
+ <td class="col-md-4">
<a @click="select(row.id)">{{ row.label.value }}</a>
</td>
- <td>
- <button @click="remove(row.id)">x</button>
+ <td class="col-md-1">
+ <a @click="remove(row.id)">
+ <span class="glyphicon glyphicon-remove" aria-hidden="true">x</span>
+ </a>
</td>
<td class="col-md-6"></td>
</tr>
</tbody>
</table>
+ <span
+ class="preloadicon glyphicon glyphicon-remove"
+ aria-hidden="true"
+ ></span>
</template>
<style>
count: countStr,
warmupCount: warmupCountStr,
noHeadless,
- devBuild,
+ noMinify,
+ reference,
},
} = parseArgs({
allowNegative: true,
noHeadless: {
type: 'boolean',
},
- devBuild: {
+ noMinify: {
type: 'boolean',
- short: 'd',
+ },
+ reference: {
+ type: 'boolean',
+ short: 'r',
},
},
})
const warmupCount = +(/** @type {string}*/ (warmupCountStr))
const sha = await getSha(true)
-if (!skipLib) {
+if (!skipLib && !reference) {
await buildLib()
}
-if (!skipApp) {
+if (!skipApp && !reference) {
await rm('client/dist', { recursive: true }).catch(() => {})
vdom && (await buildApp(false))
!noVapor && (await buildApp(true))
stdio: 'inherit',
env: { ...process.env, BENCHMARK: 'true' },
}
- const buildOptions = devBuild ? '-df' : '-pf'
const [{ ok }, { ok: ok2 }, { ok: ok3 }] = await Promise.all([
exec(
'pnpm',
- `run --silent build shared compiler-core compiler-dom ${buildOptions} cjs`.split(
- ' ',
- ),
+ `run --silent build shared compiler-core compiler-dom -pf cjs`.split(' '),
options,
),
exec(
),
exec(
'pnpm',
- `run --silent build vue ${buildOptions} esm-browser-vapor`.split(' '),
+ `run --silent build shared reactivity runtime-core runtime-dom runtime-vapor vue -f esm-bundler+esm-bundler-runtime`.split(
+ ' ',
+ ),
options,
),
])
colors.blue(`\nBuilding ${isVapor ? 'Vapor' : 'Virtual DOM'} app...\n`),
)
- if (!devBuild) process.env.NODE_ENV = 'production'
+ process.env.NODE_ENV = 'production'
+
const CompilerSFC = await import(
'../../packages/compiler-sfc/dist/compiler-sfc.cjs.js'
)
- const prodSuffix = devBuild ? '.js' : '.prod.js'
const runtimePath = path.resolve(
import.meta.dirname,
- '../../packages/vue/dist/vue.runtime-with-vapor.esm-browser' + prodSuffix,
+ '../../packages/vue/dist/vue.runtime.esm-bundler.js',
)
const mode = isVapor ? 'vapor' : 'vdom'
'import.meta.env.IS_VAPOR': String(isVapor),
},
build: {
- minify: !devBuild,
+ minify: !noMinify,
outDir: path.resolve('./client/dist', mode),
rollupOptions: {
onwarn(log, handler) {
}
function startServer() {
- const server = connect().use(sirv('./client/dist')).listen(port)
- printPort(port)
+ const server = connect()
+ .use(sirv(reference ? './reference' : './client/dist', { dev: true }))
+ .listen(port)
+ printPort()
process.on('SIGTERM', () => server.close())
return server
}
await browser.close()
}
+/**
+ * @param {boolean} isVapor
+ */
+function getURL(isVapor) {
+ return `http://localhost:${port}/${reference ? '' : isVapor ? 'vapor' : 'vdom'}/`
+}
+
/**
*
* @param {import('puppeteer').Browser} browser
* @param {boolean} isVapor
*/
async function doBench(browser, isVapor) {
- const mode = isVapor ? 'vapor' : 'vdom'
+ const mode = reference ? `reference` : isVapor ? 'vapor' : 'vdom'
console.info('\n\nmode:', mode)
const page = await browser.newPage()
page.emulateCPUThrottling(4)
- await page.goto(`http://localhost:${port}/${mode}`, {
+ await page.goto(getURL(isVapor), {
waitUntil: 'networkidle0',
})
await clickButton('add') // append rows to large table
await withoutRecord(() => clickButton('clear'))
- await clickButton('runLots') // create many rows
+ await clickButton('runlots') // create many rows
await withoutRecord(() => clickButton('clear'))
// TODO replace all rows
for (let i = 1; i <= 10; i++) {
await page.click(`tbody > tr:nth-child(2) > td:nth-child(2) > a`)
await page.waitForSelector(`tbody > tr:nth-child(2).danger`)
- await page.click(`tbody > tr:nth-child(2) > td:nth-child(3) > button`)
+ await page.click(`tbody > tr:nth-child(2) > td:nth-child(3) > a`)
await wait()
}
}
return +n.toFixed(2)
}
-/** @param {number} port */
-function printPort(port) {
+function printPort() {
const vaporLink = !noVapor
- ? `\nVapor: ${colors.blue(`http://localhost:${port}/vapor`)}`
- : ''
- const vdomLink = vdom
- ? `\nvDom: ${colors.blue(`http://localhost:${port}/vdom`)}`
+ ? `\n${reference ? `Reference` : `Vapor`}: ${colors.blue(getURL(true))}`
: ''
+ const vdomLink = vdom ? `\nvDom: ${colors.blue(getURL(false))}` : ''
console.info(`\n\nServer started at`, vaporLink, vdomLink)
}
"license": "MIT",
"type": "module",
"scripts": {
- "dev": "pnpm start --devBuild --skipBench --vdom",
+ "dev": "pnpm start --noMinify --skipBench --vdom",
"start": "node index.js"
},
"dependencies": {
projects / thirdparty / vuejs / core.git / commitdiff
