Skip to content

Commit 4b5cac6

Browse files
mogera551mogera551
committed
add quel
1 parent 33f9a7f commit 4b5cac6

File tree

6 files changed

+167
-0
lines changed

6 files changed

+167
-0
lines changed

‎frameworks/non-keyed/quel/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>quel-"non-keyed"</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<myapp-main></myapp-main>
10+
11+
<script type="module">
12+
import { registComponentModules } from "./src/quel.min.js";
13+
import myappMain from "./src/myappMain.js";
14+
15+
registComponentModules({ myappMain });
16+
</script>
17+
18+
</body>
19+
</html>

‎frameworks/non-keyed/quel/package-lock.json

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "js-framework-benchmark-non-keyed-quel",
3+
"version": "1.0.0",
4+
"description": "benchmark for quel",
5+
"main": "index.js",
6+
"js-framework-benchmark": {
7+
"frameworkVersion": "0.9.51",
8+
"frameworkHomeURL": "https://github.com/mogera551/quel",
9+
"issues": [
10+
]
11+
},
12+
"scripts": {
13+
"build-dev": "echo 0",
14+
"build-prod": "echo 0"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "https://github.com/mogera551/quel.git"
19+
}
20+
}

‎frameworks/non-keyed/quel/src/buildData.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
function random(max) {
2+
return Math.round(Math.random() * 1000) % max;
3+
}
4+
5+
const A = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean",
6+
"elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
7+
"cheap", "expensive", "fancy"];
8+
const C = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
9+
const N = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse",
10+
"keyboard"];
11+
12+
let nextId = 1;
13+
14+
export function buildData(count) {
15+
const data = new Array(count);
16+
for (let i = 0; i < count; i++) {
17+
data[i] = {
18+
id: nextId++,
19+
label: `${A[random(A.length)]} ${C[random(C.length)]} ${N[random(N.length)]}`,
20+
};
21+
}
22+
return data;
23+
}

‎frameworks/non-keyed/quel/src/myappMain.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { buildData } from "./buildData.js";
2+
3+
const html = `
4+
<div class="container">
5+
<div class="jumbotron">
6+
<div class="row">
7+
<div class="col-md-6">
8+
<h1>quel-"non-keyed"</h1>
9+
</div>
10+
<div class="col-md-6">
11+
<div class="row">
12+
<div class="col-sm-6 smallpad">
13+
<button class="btn btn-primary btn-block" id="run" data-bind="run">Create 1,000 rows</button>
14+
</div>
15+
<div class="col-sm-6 smallpad">
16+
<button class="btn btn-primary btn-block" id="runlots" data-bind="runLots">Create 10,000 rows</button>
17+
</div>
18+
<div class="col-sm-6 smallpad">
19+
<button class="btn btn-primary btn-block" id="add" data-bind="add">Append 1,000 rows</button>
20+
</div>
21+
<div class="col-sm-6 smallpad">
22+
<button class="btn btn-primary btn-block" id="update" data-bind="update">Update every 10th row</button>
23+
</div>
24+
<div class="col-sm-6 smallpad">
25+
<button class="btn btn-primary btn-block" id="clear" data-bind="clear">Clear</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button class="btn btn-primary btn-block" id="swaprows" data-bind="swapRows">Swap Rows</button>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<table class="table table-hover table-striped test-data">
35+
<tbody>
36+
{{ loop:data }}
37+
<tr data-bind="class.danger:data.*.selected">
38+
<td class="col-md-1">{{ data.*.id }}</td>
39+
<td class="col-md-4"><a data-bind="select">{{ data.*.label }}</a></td>
40+
<td class="col-md-1"><a data-bind="remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
41+
<td class="col-md-6"></td>
42+
</tr>
43+
{{ end: }}
44+
</tbody>
45+
</table>
46+
</div>
47+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
48+
`;
49+
50+
class ViewModel {
51+
data = [];
52+
selected = null;
53+
54+
get "data.*.selected"() {
55+
return this["data.*"] === this.selected;
56+
}
57+
select(e, $1) {
58+
this.selected = this["data.*"];
59+
}
60+
remove(e, $1) {
61+
this.data = this.data.toSpliced($1, 1);
62+
}
63+
run() {
64+
this.data = buildData(1000);
65+
this.selected = null;
66+
}
67+
runLots() {
68+
this.data = buildData(10000);
69+
this.selected = null;
70+
}
71+
add() {
72+
this.data = this.data.concat(buildData(1000));
73+
}
74+
update() {
75+
for(let i = 0; i < this.data.length; i += 10) {
76+
this[`data.${i}.label`] += " !!!";
77+
}
78+
}
79+
clear() {
80+
this.data = [];
81+
}
82+
swapRows() {
83+
if (this.data.length > 998) {
84+
[this["data.1"], this["data.998"]] = [this["data.998"], this["data.1"]];
85+
}
86+
}
87+
$dependentProps = {
88+
"data.*.selected": ["data.*", "selected"]
89+
};
90+
}
91+
92+
export default { ViewModel, html };

‎frameworks/non-keyed/quel/src/quel.min.js

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

0 commit comments

Comments
 (0)