Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit baa048f

Browse files
krausestkrausest
committed
Merge branch 'filipsobol-master'
2 parents 59215c1 + 1c37a3e commit baa048f

File tree

14 files changed

+469
-2
lines changed

14 files changed

+469
-2
lines changed

‎frameworks/keyed/svelte/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
"rollup-plugin-node-resolve": "^5.0.2",
2626
"rollup-plugin-svelte": "5.1.0",
2727
"rollup-plugin-terser": "^5.0.0",
28-
"svelte": "3.5.1"
28+
"svelte": "3.18.1"
2929
}
3030
}

‎frameworks/keyed/vue-next/.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/vue-next/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" class="container"></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/keyed/vue-next/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "js-framework-benchmark-vue",
3+
"version": "1.0.0",
4+
"description": "Benchmark for vue.js framework",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "vue"
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+
"@vue/compiler-sfc": "^3.0.0-alpha.4",
24+
"vue-loader": "^16.0.0-alpha.1",
25+
"webpack": "^4.41.4",
26+
"webpack-cli": "^3.3.10"
27+
},
28+
"dependencies": {
29+
"vue": "^3.0.0-alpha.4"
30+
}
31+
}

‎frameworks/keyed/vue-next/src/App.vue

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<div class="jumbotron">
3+
<div class="row">
4+
<div class="col-md-6">
5+
<h1>Vue.js 3.0.0-alpha4 (keyed)</h1>
6+
</div>
7+
<div class="col-md-6">
8+
<div class="row">
9+
<div class="col-sm-6 smallpad">
10+
<button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
11+
</div>
12+
<div class="col-sm-6 smallpad">
13+
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="runLots">Create 10,000 rows</button>
14+
</div>
15+
<div class="col-sm-6 smallpad">
16+
<button type="button" class="btn btn-primary btn-block" id="add" @click="add">Append 1,000 rows</button>
17+
</div>
18+
<div class="col-sm-6 smallpad">
19+
<button type="button" class="btn btn-primary btn-block" id="update" @click="update">Update every 10th row</button>
20+
</div>
21+
<div class="col-sm-6 smallpad">
22+
<button type="button" class="btn btn-primary btn-block" id="clear" @click="clear">Clear</button>
23+
</div>
24+
<div class="col-sm-6 smallpad">
25+
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="swapRows">Swap Rows</button>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</div>
31+
<table class="table table-hover table-striped test-data">
32+
<tbody>
33+
<tr
34+
v-for="row in rows"
35+
:key="row.id"
36+
:class="{'danger': row.id === selected}">
37+
<td class="col-md-1">{{row.id}}</td>
38+
<td class="col-md-4">
39+
<a @click="select(row.id)">{{row.label}}</a>
40+
</td>
41+
<td class="col-md-1">
42+
<a @click="remove(row.id)">
43+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
44+
</a>
45+
</td>
46+
<td class="col-md-6"></td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
51+
</template>
52+
53+
<script>
54+
let startTime;
55+
let lastMeasure;
56+
const startMeasure = function(name) {
57+
startTime = performance.now();
58+
lastMeasure = name;
59+
};
60+
const stopMeasure = function() {
61+
const last = lastMeasure;
62+
if (lastMeasure) {
63+
window.setTimeout(function () {
64+
lastMeasure = null;
65+
const stop = performance.now();
66+
console.log(last+" took "+(stop-startTime));
67+
}, 0);
68+
}
69+
};
70+
function _random(max) {
71+
return Math.round(Math.random()*1000)%max;
72+
}
73+
74+
export default {
75+
data: () => ({
76+
rows: [],
77+
selected: undefined,
78+
id: 1,
79+
}),
80+
methods: {
81+
buildData(count = 1000) {
82+
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"];
83+
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
84+
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
85+
const data = [];
86+
for (let i = 0; i < count; i++)
87+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
88+
return data;
89+
},
90+
91+
add() {
92+
startMeasure("add");
93+
this.rows = this.rows.concat(this.buildData(1000));
94+
stopMeasure();
95+
},
96+
remove(id) {
97+
startMeasure("remove");
98+
this.rows.splice(this.rows.findIndex(d => d.id === id), 1);
99+
stopMeasure();
100+
},
101+
select(id) {
102+
startMeasure("select");
103+
this.selected = id;
104+
stopMeasure();
105+
},
106+
run() {
107+
startMeasure("run");
108+
this.rows = this.buildData();
109+
this.selected = undefined;
110+
stopMeasure();
111+
},
112+
update() {
113+
startMeasure("update");
114+
for (let i = 0; i < this.rows.length; i += 10) {
115+
this.rows[i].label += ' !!!';
116+
}
117+
stopMeasure();
118+
},
119+
runLots() {
120+
startMeasure("runLots");
121+
this.rows = this.buildData(10000);
122+
this.selected = undefined;
123+
stopMeasure();
124+
},
125+
clear() {
126+
startMeasure("clear");
127+
this.rows = [];
128+
this.selected = undefined;
129+
stopMeasure();
130+
},
131+
swapRows() {
132+
startMeasure("swapRows");
133+
if (this.rows.length > 998) {
134+
const d1 = this.rows[1];
135+
const d998 = this.rows[998];
136+
137+
this.rows[1] = d998;
138+
this.rows[998] = d1;
139+
}
140+
stopMeasure();
141+
},
142+
143+
}
144+
}
145+
</script>

‎frameworks/keyed/vue-next/src/main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#main')

‎frameworks/keyed/vue-next/webpack.config.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const path = require('path')
2+
const { VueLoaderPlugin } = require('vue-loader')
3+
4+
module.exports = (env = {}) => ({
5+
mode: 'production',
6+
entry: path.resolve(__dirname, './src/main.js'),
7+
output: {
8+
path: path.resolve(__dirname, './dist'),
9+
publicPath: '/dist/'
10+
},
11+
resolve: {
12+
alias: {
13+
// this isn't technically needed, since the default `vue` entry for bundlers
14+
// is a simple `export * from '@vue/runtime-dom`. However having this
15+
// extra re-export somehow causes webpack to always invalidate the module
16+
// on the first HMR update and causes the page to reload.
17+
'vue': '@vue/runtime-dom'
18+
}
19+
},
20+
module: {
21+
rules: [
22+
{
23+
test: /\.vue$/,
24+
use: 'vue-loader'
25+
},
26+
]
27+
},
28+
plugins: [
29+
new VueLoaderPlugin(),
30+
],
31+
})

‎frameworks/non-keyed/svelte/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
"rollup-plugin-node-resolve": "^5.0.3",
2626
"rollup-plugin-svelte": "5.1.0",
2727
"rollup-plugin-terser": "^5.0.0",
28-
"svelte": "3.5.1"
28+
"svelte": "3.18.1"
2929
}
3030
}

‎frameworks/non-keyed/vue-next/.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/non-keyed/vue-next/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" class="container"></div>
10+
<script src='dist/main.js'></script>
11+
</body>
12+
</html>

‎frameworks/non-keyed/vue-next/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "js-framework-benchmark-vue",
3+
"version": "1.0.0",
4+
"description": "Benchmark for vue.js framework",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "vue"
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+
"@vue/compiler-sfc": "^3.0.0-alpha.4",
24+
"vue-loader": "^16.0.0-alpha.1",
25+
"webpack": "^4.41.4",
26+
"webpack-cli": "^3.3.10"
27+
},
28+
"dependencies": {
29+
"vue": "^3.0.0-alpha.4"
30+
}
31+
}

0 commit comments

Comments
 (0)