Skip to content

Commit 483b238

Browse files
mogera551mogera551
committed
update quel to 0.13.1, add keyed/quel
1 parent 34e0337 commit 483b238

File tree

10 files changed

+177
-8
lines changed

10 files changed

+177
-8
lines changed

‎frameworks/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-"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 { registerComponentModules as register } from "./src/quel.min.js";
13+
import * as myappMain from "./src/myappMain.js";
14+
15+
register({ myappMain });
16+
</script>
17+
18+
</body>
19+
</html>

‎frameworks/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/keyed/quel/package.json

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

‎frameworks/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/keyed/quel/src/myappMain.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { buildData } from "./buildData.js";
2+
3+
export 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+
export class ViewModel {
51+
data = [];
52+
selectedIndex;
53+
54+
get "data.*.selected"() {
55+
return this.$1 === this.selectedIndex;
56+
}
57+
set "data.*.selected"(value) {
58+
if (value) {
59+
this.selectedIndex = this.$1;
60+
}
61+
}
62+
select(e, $1) {
63+
if (typeof this.selectedIndex !== "undefined") {
64+
this[`data.${this.selectedIndex}.selected`] = false;
65+
}
66+
this[`data.${$1}.selected`] = true;
67+
}
68+
remove(e, $1) {
69+
this.data = this.data.toSpliced($1, 1);
70+
}
71+
run() {
72+
this.data = buildData(1000);
73+
this.selectedIndex = undefined;
74+
}
75+
runLots() {
76+
this.data = buildData(10000);
77+
this.selectedIndex = undefined;
78+
}
79+
add() {
80+
this.data = this.data.concat(buildData(1000));
81+
}
82+
update() {
83+
for(let i = 0; i < this.data.length; i += 10) {
84+
this[`data.${i}.label`] += " !!!";
85+
}
86+
}
87+
clear() {
88+
this.data = [];
89+
}
90+
swapRows() {
91+
if (this.data.length > 998) {
92+
[this["data.1"], this["data.998"]] = [this["data.998"], this["data.1"]];
93+
}
94+
}
95+
}

‎frameworks/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.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
<myapp-main></myapp-main>
1010

1111
<script type="module">
12-
import { registComponentModules } from "./src/quel.min.js";
13-
import myappMain from "./src/myappMain.js";
12+
import { registerComponentModules as register } from "./src/quel.min.js";
13+
import * as myappMain from "./src/myappMain.js";
1414

15-
registComponentModules({ myappMain });
15+
register({ myappMain });
1616
</script>
1717

1818
</body>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "benchmark for quel",
55
"main": "index.js",
66
"js-framework-benchmark": {
7-
"frameworkVersion": "0.9.51",
7+
"frameworkVersion": "0.13.1",
88
"frameworkHomeURL": "https://github.com/mogera551/quel",
99
"issues": [1139]
1010
},

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { buildData } from "./buildData.js";
22

3-
const html = `
3+
export const html = `
44
<div class="container">
55
<div class="jumbotron">
66
<div class="row">
@@ -47,7 +47,7 @@ const html = `
4747
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
4848
`;
4949

50-
class ViewModel {
50+
export class ViewModel {
5151
data = [];
5252
selectedIndex;
5353

@@ -94,4 +94,4 @@ class ViewModel {
9494
}
9595
}
9696

97-
export default { ViewModel, html };
97+
export const moduleConfig = { useKeyed:false }

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

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

0 commit comments

Comments
 (0)