Skip to content

Commit fe8ed20

Browse files
filipsobolfilipsobol
committed
Add vue-next and update Svelte to latest version
1 parent bca401f commit fe8ed20

File tree

8 files changed

+326
-1
lines changed

8 files changed

+326
-1
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: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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-prod": "webpack -p"
10+
},
11+
"keywords": [
12+
"vue"
13+
],
14+
"author": "Stefan Krause",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/krausest/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/krausest/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"@vue/compiler-sfc": "^3.0.0-alpha.4",
23+
"css-loader": "^3.4.0",
24+
"file-loader": "^5.0.2",
25+
"mini-css-extract-plugin": "^0.9.0",
26+
"url-loader": "^3.0.0",
27+
"vue-loader": "^16.0.0-alpha.1",
28+
"webpack": "^4.41.4",
29+
"webpack-cli": "^3.3.10",
30+
"webpack-dev-server": "^3.10.1"
31+
},
32+
"dependencies": {
33+
"vue": "^3.0.0-alpha.4"
34+
}
35+
}

‎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.es6.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/src/store.es6.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
'use strict';
2+
3+
function _random(max) {
4+
return Math.round(Math.random()*1000)%max;
5+
}
6+
7+
export class Store {
8+
constructor() {
9+
this.data = [];
10+
this.selected = undefined;
11+
this.id = 1;
12+
}
13+
buildData(count = 1000) {
14+
var 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"];
15+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
16+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
17+
var data = [];
18+
for (var i = 0; i < count; i++)
19+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
20+
return data;
21+
}
22+
updateData(mod = 10) {
23+
// Just assigning setting each tenth this.data doesn't cause a redraw, the following does:
24+
var newData = [...this.data];
25+
26+
for (let i = 0; i < newData.length; i += 10) {
27+
newData[i].label += ' !!!';
28+
}
29+
this.data = newData;
30+
}
31+
delete(id) {
32+
const idx = this.data.findIndex(d => d.id==id);
33+
this.data = this.data.slice(0, idx).concat(this.data.slice(idx + 1))
34+
}
35+
run() {
36+
this.data = this.buildData();
37+
this.selected = undefined;
38+
}
39+
add() {
40+
this.data = this.data.concat(this.buildData(1000));
41+
}
42+
update() {
43+
this.updateData();
44+
}
45+
select(id) {
46+
this.selected = id;
47+
}
48+
runLots() {
49+
this.data = this.buildData(10000);
50+
this.selected = undefined;
51+
}
52+
clear() {
53+
this.data = [];
54+
this.selected = undefined;
55+
}
56+
swapRows() {
57+
if(this.data.length > 998) {
58+
let d1 = this.data[1];
59+
let d998 = this.data[998];
60+
61+
var newData = this.data.map(function(data, i) {
62+
if(i === 1) {
63+
return d998;
64+
}
65+
else if(i === 998) {
66+
return d1;
67+
}
68+
return data;
69+
});
70+
this.data = newData;
71+
}
72+
}
73+
}

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

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

0 commit comments

Comments
 (0)