Skip to content

Commit 42faa06

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/SahAssar/js-framework-benchmark into SahAssar-master
2 parents c77cbbd + 246afdf commit 42faa06

5 files changed

Lines changed: 277 additions & 0 deletions

File tree

‎frameworks/keyed/skruv/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!doctype html>
2+
<title>Skruv</title>
3+
<link href="/css/currentStyle.css" rel="stylesheet" />
4+
<script src="src/index.js" type="module"></script>

‎frameworks/keyed/skruv/package-lock.json‎

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

‎frameworks/keyed/skruv/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "skruv-v0.0.5-1-js-benchmark",
3+
"version": "1.0.0",
4+
"description": "skruv v0.0.5-1 js benchmark",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersionFromPackage": "skruv"
8+
},
9+
"dependencies": {
10+
"skruv": "0.0.5-1"
11+
},
12+
"keywords": [
13+
"skruv"
14+
],
15+
"author": "Svante Richter",
16+
"license": "MIT"
17+
}

‎frameworks/keyed/skruv/src/index.js‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import { renderNode } from '../node_modules/skruv/vDOM.js'
2+
import { createState } from '../node_modules/skruv/state.js'
3+
import get from '../node_modules/skruv/cache.js'
4+
import { body, table, tbody, tr, td, span, div, button, h1, a } from '../node_modules/skruv/html.js'
5+
import { buildData } from "./store.js"
6+
7+
const updateRow = (id, label) => ({
8+
id,
9+
label: label + " !!!",
10+
})
11+
12+
const append1K = () => {
13+
state.data = state.data.concat(buildData(1000))
14+
}
15+
16+
const create1K = () => {
17+
state.data = buildData(1000)
18+
}
19+
20+
const create10K = () => {
21+
state.data = buildData(10000)
22+
}
23+
24+
const clearAllRows = () => {
25+
state.data = []
26+
}
27+
28+
const deleteRow = (id) => {
29+
state.data = state.data.filter((d) => d.id.num !== id)
30+
}
31+
32+
const updateEveryTenth = () => {
33+
state.data = state.data.map((d, i) => (i % 10 === 0 ? updateRow(d.id, d.label) : d))
34+
state.selected = undefined
35+
}
36+
37+
const selectRow = (id) => {
38+
state.selected = id
39+
}
40+
41+
const swapRows = () => {
42+
if (state.data.length <= 998) return
43+
44+
const temp = state.data[1].toJSON
45+
state.data[1] = state.data[998].toJSON
46+
state.data[998] = temp
47+
}
48+
49+
const Row = (data, selected) =>
50+
tr({ key: data.id, class: selected ? "danger" : "", }, [
51+
td({ class: "col-md-1" }, data.id.num),
52+
td({ class: "col-md-4" },
53+
a({ onclick: () => selectRow(data.id.num) }, data.label),
54+
),
55+
td({ class: "col-md-1" },
56+
a({ onclick: () => deleteRow(data.id.num) },
57+
span({
58+
class: "glyphicon glyphicon-remove",
59+
"aria-hidden": "true",
60+
})
61+
),
62+
),
63+
td({ class: "col-md-6" }),
64+
])
65+
66+
const vView = () => body({},
67+
div({ class: "container" }, [
68+
div({ class: "jumbotron" },
69+
div({ class: "row" }, [
70+
div({ class: "col-md-6" }, h1({}, "Skruv")),
71+
div({ class: "col-md-6" },
72+
div({ class: "row" }, [
73+
div({ class: "col-sm-6 smallpad" },
74+
button({
75+
type: "button",
76+
class: "btn btn-primary btn-block",
77+
id: "run",
78+
onclick: create1K,
79+
},
80+
"Create 1,000 rows"
81+
)
82+
),
83+
div({ class: "col-sm-6 smallpad" },
84+
button({
85+
type: "button",
86+
class: "btn btn-primary btn-block",
87+
id: "runlots",
88+
onclick: create10K,
89+
},
90+
"Create 10,000 rows"
91+
)
92+
),
93+
div({ class: "col-sm-6 smallpad" },
94+
button({
95+
type: "button",
96+
class: "btn btn-primary btn-block",
97+
id: "add",
98+
onclick: append1K,
99+
},
100+
"Append 1,000 rows"
101+
)
102+
),
103+
div({ class: "col-sm-6 smallpad" },
104+
button({
105+
type: "button",
106+
class: "btn btn-primary btn-block",
107+
id: "update",
108+
onclick: updateEveryTenth,
109+
},
110+
"Update every 10th row"
111+
)
112+
),
113+
div({ class: "col-sm-6 smallpad" },
114+
button({
115+
type: "button",
116+
class: "btn btn-primary btn-block",
117+
id: "clear",
118+
onclick: clearAllRows,
119+
},
120+
"Clear"
121+
)
122+
),
123+
div({ class: "col-sm-6 smallpad" },
124+
button({
125+
type: "button",
126+
class: "btn btn-primary btn-block",
127+
id: "swaprows",
128+
onclick: swapRows,
129+
},
130+
"Swap Rows"
131+
)
132+
)
133+
])
134+
)]
135+
)
136+
),
137+
table({ class: "table table-hover table-striped test-data" },
138+
tbody({}, state.data.toJSON.map((data) => get(Row)(data, data.id.num === state.selected))
139+
)
140+
),
141+
span({
142+
class: "preloadicon glyphicon glyphicon-remove",
143+
"aria-hidden": "true",
144+
})
145+
])
146+
)
147+
148+
let root = document.body
149+
150+
const render = () => { root = renderNode(vView, root) }
151+
152+
let scheduled = false
153+
export const view = () => {
154+
if (scheduled) return
155+
scheduled = true
156+
window.requestAnimationFrame(() => {
157+
scheduled = false
158+
render()
159+
})
160+
}
161+
162+
view()
163+
164+
const state = createState({
165+
data: [],
166+
selected: false,
167+
}, view)

‎frameworks/keyed/skruv/src/store.js‎

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

0 commit comments

Comments
 (0)