Skip to content

Commit ead54ad

Browse files
krausestkrausest
committed
Merge branch 'birkskyum-add-vue-pinia'
2 parents fc69997 + b472bb4 commit ead54ad

File tree

8 files changed

+1993
-0
lines changed

8 files changed

+1993
-0
lines changed

‎frameworks/keyed/vue-pinia/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 3</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-pinia/package-lock.json‎

Lines changed: 1669 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "js-framework-benchmark-vue-next",
3+
"version": "1.0.0",
4+
"description": "Benchmark for vue.js framework",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "vue:pinia",
7+
"frameworkHomeURL": "https://vue.js.org/"
8+
},
9+
"scripts": {
10+
"build-dev": "webpack --mode development --watch",
11+
"build-prod": "webpack --mode production"
12+
},
13+
"keywords": [
14+
"vue"
15+
],
16+
"author": "Stefan Krause",
17+
"license": "Apache-2.0",
18+
"homepage": "https://github.com/krausest/js-framework-benchmark",
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/krausest/js-framework-benchmark.git"
22+
},
23+
"devDependencies": {
24+
"@vue/compiler-sfc": "3.3.4",
25+
"vue-loader": "17.2.2",
26+
"webpack": "5.88.1",
27+
"webpack-cli": "5.1.4"
28+
},
29+
"dependencies": {
30+
"pinia": "^2.1.7",
31+
"vue": "3.3.4"
32+
}
33+
}

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script setup>
2+
import { useStore } from './store'
3+
4+
const store = useStore()
5+
const run = store.run
6+
const runLots = store.runLots
7+
const add = store.add
8+
const update = store.update
9+
const clear = store.clear
10+
const swapRows = store.swapRows
11+
const select = store.select
12+
const remove = store.remove
13+
</script>
14+
15+
<template>
16+
<div class="jumbotron">
17+
<div class="row">
18+
<div class="col-md-6">
19+
<h1>Vue.js 3 (keyed)</h1>
20+
</div>
21+
<div class="col-md-6">
22+
<div class="row">
23+
<div class="col-sm-6 smallpad">
24+
<button
25+
type="button"
26+
class="btn btn-primary btn-block"
27+
id="run"
28+
@click="run"
29+
>
30+
Create 1,000 rows
31+
</button>
32+
</div>
33+
<div class="col-sm-6 smallpad">
34+
<button
35+
type="button"
36+
class="btn btn-primary btn-block"
37+
id="runlots"
38+
@click="runLots"
39+
>
40+
Create 10,000 rows
41+
</button>
42+
</div>
43+
<div class="col-sm-6 smallpad">
44+
<button
45+
type="button"
46+
class="btn btn-primary btn-block"
47+
id="add"
48+
@click="add"
49+
>
50+
Append 1,000 rows
51+
</button>
52+
</div>
53+
<div class="col-sm-6 smallpad">
54+
<button
55+
type="button"
56+
class="btn btn-primary btn-block"
57+
id="update"
58+
@click="update"
59+
>
60+
Update every 10th row
61+
</button>
62+
</div>
63+
<div class="col-sm-6 smallpad">
64+
<button
65+
type="button"
66+
class="btn btn-primary btn-block"
67+
id="clear"
68+
@click="clear"
69+
>
70+
Clear
71+
</button>
72+
</div>
73+
<div class="col-sm-6 smallpad">
74+
<button
75+
type="button"
76+
class="btn btn-primary btn-block"
77+
id="swaprows"
78+
@click="swapRows"
79+
>
80+
Swap Rows
81+
</button>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
<table class="table table-hover table-striped test-data">
88+
<tbody>
89+
<tr
90+
v-for="{ id, label } of store.rows"
91+
:key="id"
92+
:class="{ danger: id === store.selected }"
93+
:data-label="label"
94+
v-memo="[label, id === store.selected]"
95+
>
96+
<td class="col-md-1">{{ id }}</td>
97+
<td class="col-md-4">
98+
<a @click="select(id)">{{ label }}</a>
99+
</td>
100+
<td class="col-md-1">
101+
<a @click="remove(id)">
102+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
103+
</a>
104+
</td>
105+
<td class="col-md-6"></td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
<span
110+
class="preloadicon glyphicon glyphicon-remove"
111+
aria-hidden="true"
112+
></span>
113+
</template>

‎frameworks/keyed/vue-pinia/src/data.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
let ID = 1
2+
3+
function _random(max) {
4+
return Math.round(Math.random() * 1000) % max
5+
}
6+
7+
export function buildData(count = 1000) {
8+
const adjectives = [
9+
'pretty',
10+
'large',
11+
'big',
12+
'small',
13+
'tall',
14+
'short',
15+
'long',
16+
'handsome',
17+
'plain',
18+
'quaint',
19+
'clean',
20+
'elegant',
21+
'easy',
22+
'angry',
23+
'crazy',
24+
'helpful',
25+
'mushy',
26+
'odd',
27+
'unsightly',
28+
'adorable',
29+
'important',
30+
'inexpensive',
31+
'cheap',
32+
'expensive',
33+
'fancy'
34+
]
35+
const colours = [
36+
'red',
37+
'yellow',
38+
'blue',
39+
'green',
40+
'pink',
41+
'brown',
42+
'purple',
43+
'brown',
44+
'white',
45+
'black',
46+
'orange'
47+
]
48+
const nouns = [
49+
'table',
50+
'chair',
51+
'house',
52+
'bbq',
53+
'desk',
54+
'car',
55+
'pony',
56+
'cookie',
57+
'sandwich',
58+
'burger',
59+
'pizza',
60+
'mouse',
61+
'keyboard'
62+
]
63+
const data = []
64+
for (let i = 0; i < count; i++)
65+
data.push({
66+
id: ID++,
67+
label:
68+
adjectives[_random(adjectives.length)] +
69+
' ' +
70+
colours[_random(colours.length)] +
71+
' ' +
72+
nouns[_random(nouns.length)]
73+
})
74+
return data
75+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { createApp } from 'vue'
2+
import { createPinia } from 'pinia'
3+
import App from './App.vue'
4+
5+
const app = createApp(App)
6+
app.use(createPinia())
7+
app.mount('#main')
8+

‎frameworks/keyed/vue-pinia/src/store.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { defineStore } from 'pinia'
2+
import { buildData } from './data'
3+
4+
export const useStore = defineStore({
5+
id: 'main',
6+
state: () => ({
7+
selected: undefined,
8+
rows: [],
9+
}),
10+
actions: {
11+
setRows(update) {
12+
this.rows = update
13+
},
14+
add() {
15+
this.rows = this.rows.concat(buildData(1000))
16+
},
17+
remove(id) {
18+
const index = this.rows.findIndex((d) => d.id === id)
19+
if (index > -1) {
20+
this.rows.splice(index, 1)
21+
}
22+
},
23+
select(id) {
24+
this.selected = id
25+
},
26+
run() {
27+
this.setRows(buildData())
28+
this.selected = undefined
29+
},
30+
update() {
31+
for (let i = 0; i < this.rows.length; i += 10) {
32+
this.rows[i].label += ' !!!'
33+
}
34+
},
35+
runLots() {
36+
this.setRows(buildData(10000))
37+
this.selected = undefined
38+
},
39+
clear() {
40+
this.setRows([])
41+
this.selected = undefined
42+
},
43+
swapRows() {
44+
if (this.rows.length > 998) {
45+
const d1 = this.rows[1]
46+
const d998 = this.rows[998]
47+
this.rows[1] = d998
48+
this.rows[998] = d1
49+
}
50+
},
51+
},
52+
})

‎frameworks/keyed/vue-pinia/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+
})

0 commit comments

Comments
 (0)