Skip to content

Commit 4aa2af0

Browse files
krausestkrausest
committed
Merge branch 'antfu-master'
2 parents 309b6e0 + 0440fac commit 4aa2af0

File tree

9 files changed

+374
-53
lines changed

9 files changed

+374
-53
lines changed

‎frameworks/keyed/vue2-composition-api/.babelrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
{
3+
"presets": [
4+
["@babel/preset-env", {
5+
"targets": {
6+
"browsers": ["last 1 chrome versions"]
7+
}
8+
}]
9+
],
10+
"plugins": []
11+
}

‎frameworks/keyed/vue2-composition-api/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vue.js</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id='main'></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/vue2-composition-api/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "js-framework-benchmark-vue2-composition-api",
3+
"version": "1.0.0",
4+
"description": "Benchmark for vue.js framework with @vue/composition-api",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "@vue/composition-api"
7+
},
8+
"scripts": {
9+
"build-dev": "webpack -w -d",
10+
"build-prod": "webpack -p"
11+
},
12+
"keywords": [
13+
"vue"
14+
],
15+
"author": "Stefan Krause",
16+
"license": "Apache-2.0",
17+
"homepage": "https://github.com/krausest/js-framework-benchmark",
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/krausest/js-framework-benchmark.git"
21+
},
22+
"devDependencies": {
23+
"@babel/core": "7.2.2",
24+
"@babel/preset-env": "7.3.1",
25+
"css-loader": "2.1.0",
26+
"vue-loader": "15.6.2",
27+
"babel-loader": "8.0.5",
28+
"vue-template-compiler": "2.6.2",
29+
"webpack": "4.29.2",
30+
"webpack-cli": "3.2.3"
31+
},
32+
"dependencies": {
33+
"vue": "2.6.2",
34+
"@vue/composition-api": "0.6.5"
35+
}
36+
}

‎frameworks/keyed/vue2-composition-api/src/App.vue

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<template>
2+
<div>
3+
<div class="jumbotron">
4+
<div class="row">
5+
<div class="col-md-6">
6+
<h1>Vue.js 2 + @vue/composition-api (keyed)</h1>
7+
</div>
8+
<div class="col-md-6">
9+
<div class="row">
10+
<div class="col-sm-6 smallpad">
11+
<button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
12+
</div>
13+
<div class="col-sm-6 smallpad">
14+
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="runLots">Create 10,000 rows</button>
15+
</div>
16+
<div class="col-sm-6 smallpad">
17+
<button type="button" class="btn btn-primary btn-block" id="add" @click="add">Append 1,000 rows</button>
18+
</div>
19+
<div class="col-sm-6 smallpad">
20+
<button type="button" class="btn btn-primary btn-block" id="update" @click="update">Update every 10th row</button>
21+
</div>
22+
<div class="col-sm-6 smallpad">
23+
<button type="button" class="btn btn-primary btn-block" id="clear" @click="clear">Clear</button>
24+
</div>
25+
<div class="col-sm-6 smallpad">
26+
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="swapRows">Swap Rows</button>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<table class="table table-hover table-striped test-data">
33+
<tbody>
34+
<tr
35+
v-for="row in rows"
36+
:key="row.id"
37+
:class="{'danger': row.id === selected}">
38+
<td class="col-md-1">{{row.id}}</td>
39+
<td class="col-md-4">
40+
<a @click="select(row.id)">{{row.label}}</a>
41+
</td>
42+
<td class="col-md-1">
43+
<a @click="remove(row.id)">
44+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
45+
</a>
46+
</td>
47+
<td class="col-md-6"></td>
48+
</tr>
49+
</tbody>
50+
</table>
51+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
52+
</div>
53+
</template>
54+
55+
<script>
56+
import { ref, markRaw } from '@vue/composition-api';
57+
58+
let ID = 1;
59+
let startTime;
60+
let lastMeasure;
61+
62+
63+
const startMeasure = function(name) {
64+
startTime = performance.now();
65+
lastMeasure = name;
66+
};
67+
const stopMeasure = function() {
68+
const last = lastMeasure;
69+
if (lastMeasure) {
70+
window.setTimeout(function () {
71+
lastMeasure = null;
72+
const stop = performance.now();
73+
console.log(last+" took "+(stop-startTime));
74+
}, 0);
75+
}
76+
};
77+
78+
function _random(max) {
79+
return Math.round(Math.random()*1000)%max;
80+
}
81+
82+
function buildData(count = 1000) {
83+
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
84+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
85+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
86+
const data = [];
87+
for (let i = 0; i < count; i++)
88+
data.push({id: ID++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
89+
return data;
90+
}
91+
92+
export default {
93+
setup() {
94+
const selected = ref(null);
95+
const rows = ref([]);
96+
97+
function setRows(update = rows.value.slice()) {
98+
rows.value = markRaw(update)
99+
}
100+
101+
function add() {
102+
startMeasure("add");
103+
setRows(rows.value.concat(buildData(1000)));
104+
stopMeasure();
105+
}
106+
107+
function remove(id) {
108+
startMeasure("remove");
109+
rows.value.splice(rows.value.findIndex(d => d.id === id), 1);
110+
setRows();
111+
stopMeasure();
112+
}
113+
114+
function select(id) {
115+
startMeasure("select");
116+
selected.value = id;
117+
stopMeasure();
118+
}
119+
120+
function run() {
121+
startMeasure("run");
122+
setRows(buildData());
123+
selected.value = undefined;
124+
stopMeasure();
125+
}
126+
127+
function update() {
128+
startMeasure("update");
129+
for (let i = 0; i < rows.value.length; i += 10) {
130+
rows.value[i].label += ' !!!';
131+
}
132+
setRows();
133+
stopMeasure();
134+
}
135+
136+
function runLots() {
137+
startMeasure("runLots");
138+
setRows(buildData(10000));
139+
selected.value = undefined;
140+
stopMeasure();
141+
}
142+
143+
function clear() {
144+
startMeasure("clear");
145+
setRows([]);
146+
selected.value = undefined;
147+
stopMeasure();
148+
}
149+
150+
function swapRows() {
151+
startMeasure("swapRows");
152+
153+
if (rows.value.length > 998) {
154+
const d1 = rows.value[1];
155+
const d998 = rows.value[998];
156+
157+
rows.value[1] = d998;
158+
rows.value[998] = d1;
159+
160+
setRows();
161+
}
162+
stopMeasure();
163+
}
164+
165+
return {
166+
rows,
167+
selected,
168+
run,
169+
clear,
170+
swapRows,
171+
runLots,
172+
update,
173+
select,
174+
remove,
175+
add,
176+
}
177+
}
178+
}
179+
</script>

‎frameworks/keyed/vue2-composition-api/src/main.es6.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import VueCompositionAPI from '@vue/composition-api'
4+
5+
Vue.use(VueCompositionAPI)
6+
7+
new Vue({
8+
el: '#main',
9+
render: h => h(App)
10+
})

‎frameworks/keyed/vue2-composition-api/webpack.config.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use strict';
2+
var path = require('path')
3+
var webpack = require('webpack')
4+
var VueLoaderPlugin = require('vue-loader/lib/plugin')
5+
6+
var cache = {};
7+
var loaders = [
8+
{
9+
test: /\.js$/,
10+
loader: 'babel-loader',
11+
exclude: /node_modules/
12+
},
13+
{
14+
test: /\.css$/,
15+
use: [
16+
'vue-style-loader',
17+
'css-loader'
18+
]
19+
},
20+
{
21+
test: /\.vue$/,
22+
loader: 'vue-loader',
23+
query: {
24+
preserveWhitespace: false
25+
}
26+
}
27+
];
28+
var extensions = [
29+
'.js', '.jsx', '.es6.js', '.msx'
30+
];
31+
32+
module.exports = [{
33+
cache: cache,
34+
module: {
35+
rules: loaders
36+
},
37+
entry: {
38+
main: './src/main',
39+
},
40+
output: {
41+
path: path.resolve(__dirname, "dist"),
42+
filename: '[name].js',
43+
sourceMapFilename: "[file].map",
44+
},
45+
resolve: {
46+
modules: [
47+
__dirname,
48+
path.resolve(__dirname, "src"),
49+
"node_modules"
50+
],
51+
extensions: extensions
52+
},
53+
plugins: [
54+
new VueLoaderPlugin()
55+
]
56+
}];

0 commit comments

Comments
 (0)