Skip to content

Commit 5120731

Browse files
krausestkrausest
committed
Merge branch 'abishekatp-arrowjs'
2 parents 27f641d + 0e5a203 commit 5120731

File tree

10 files changed

+308
-0
lines changed

10 files changed

+308
-0
lines changed

‎frameworks/keyed/arrowjs/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>ArrowJS • Keyed</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
9+
</head>
10+
11+
<body>
12+
<div id="arrow"></div>
13+
<script type="module" src="src/Main.js"></script>
14+
</body>
15+
16+
</html>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "js-framework-benchmark-arrowjs",
3+
"version": "1.0.0",
4+
"description": "ArrowJs demo",
5+
"js-framework-benchmark": {
6+
"frameworkVersion": "1.0.0-alpha.9",
7+
"frameworkHomeURL": "https://www.arrow-js.com/"
8+
},
9+
"scripts": {
10+
"build-dev": "exit 0",
11+
"build-prod": "exit 0"
12+
},
13+
"keywords": [
14+
"arrowjs"
15+
],
16+
"author": "Abishek P",
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+
}

‎frameworks/keyed/arrowjs/src/Main.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { reactive, html } from './arrow.js';
2+
let data = reactive({
3+
items: [],
4+
selected: undefined,
5+
});
6+
7+
let rowId = 1;
8+
const add = () => data.items = data.items.concat(buildData(1000)),
9+
clear = () => {
10+
data.items = [];
11+
data.selected = undefined;
12+
},
13+
partialUpdate = () => {
14+
for (let i = 0; i < data.items.length; i += 10) {
15+
data.items[i].label += ' !!!';
16+
}
17+
},
18+
remove = (num) => {
19+
const idx = data.items.findIndex(d => d.id === num);
20+
data.items.splice(idx, 1);
21+
},
22+
run = () => {
23+
data.items = buildData(1000);
24+
data.selected = undefined;
25+
},
26+
runLots = () => {
27+
data.items = buildData(10000);
28+
data.selected = undefined;
29+
},
30+
select = (id) => data.selected = id,
31+
swapRows = () => {
32+
if (data.items.length > 998) {
33+
data.items = [data.items[0], data.items[998], ...data.items.slice(2, 998), data.items[1], data.items[999]];
34+
}
35+
};
36+
37+
function _random(max) { return Math.round(Math.random() * 1000) % max; };
38+
39+
function buildData(count = 1000) {
40+
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"],
41+
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
42+
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"],
43+
data = new Array(count);
44+
for (var i = 0; i < count; i++)
45+
data[i] = { id: rowId++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] };
46+
return data;
47+
}
48+
html`<div>
49+
<div class="jumbotron">
50+
<div class="row">
51+
<div class="col-md-6">
52+
<h1>Arrowjs (keyed)</h1>
53+
</div>
54+
<div class="col-md-6">
55+
<div class="row">
56+
<div class="col-sm-6 smallpad">
57+
<button type="button" class="btn btn-primary btn-block" id="run" @click="${run}">Create 1,000 rows</button>
58+
</div>
59+
<div class="col-sm-6 smallpad">
60+
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="${runLots}">Create 10,000
61+
rows</button>
62+
</div>
63+
<div class="col-sm-6 smallpad">
64+
<button type="button" class="btn btn-primary btn-block" id="add" @click="${add}">Append 1,000 rows</button>
65+
</div>
66+
<div class="col-sm-6 smallpad">
67+
<button type="button" class="btn btn-primary btn-block" id="update" @click="${partialUpdate}">Update every
68+
10th row</button>
69+
</div>
70+
<div class="col-sm-6 smallpad">
71+
<button type="button" class="btn btn-primary btn-block" id="clear" @click="${clear}">Clear</button>
72+
</div>
73+
<div class="col-sm-6 smallpad">
74+
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="${swapRows}">Swap Rows</button>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<table class="table table-hover table-striped test-data">
81+
<tbody>
82+
${() =>
83+
data.items.map((row) => html`<tr class="${() => data.selected === row.id ? 'danger' : ''}">
84+
<td class="col-md-1">${row.id}</td>
85+
<td class="col-md-4">
86+
<a @click="${() => select(row.id)}">${() => row.label}</a>
87+
</td>
88+
<td class="col-md-1">
89+
<a @click="${() => remove(row.id)}">
90+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
91+
</a>
92+
</td>
93+
<td class="col-md-6"/>
94+
</tr>`.key(row.id)
95+
)}
96+
</tbody>
97+
</table>
98+
</div>
99+
`(document.getElementById('arrow'))

‎frameworks/keyed/arrowjs/src/arrow.js

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

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>ArrowJS • Non-Keyed</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" />
8+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
9+
</head>
10+
11+
<body>
12+
<div id="arrow"></div>
13+
<script type="module" src="src/Main.js"></script>
14+
</body>
15+
16+
</html>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "js-framework-benchmark-arrowjs",
3+
"version": "1.0.0",
4+
"description": "ArrowJs demo",
5+
"js-framework-benchmark": {
6+
"frameworkVersion": "1.0.0-alpha.9",
7+
"frameworkHomeURL": "https://www.arrow-js.com/"
8+
},
9+
"scripts": {
10+
"build-dev": "exit 0",
11+
"build-prod": "exit 0"
12+
},
13+
"keywords": [
14+
"arrowjs"
15+
],
16+
"author": "Abishek P",
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+
}

‎frameworks/non-keyed/arrowjs/src/Main.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { reactive, html } from './arrow.js';
2+
let data = reactive({
3+
items: [],
4+
selected: undefined,
5+
});
6+
7+
let rowId = 1;
8+
const add = () => data.items = data.items.concat(buildData(1000)),
9+
clear = () => {
10+
data.items = [];
11+
data.selected = undefined;
12+
},
13+
partialUpdate = () => {
14+
for (let i = 0; i < data.items.length; i += 10) {
15+
data.items[i].label += ' !!!';
16+
}
17+
},
18+
remove = (num) => {
19+
const idx = data.items.findIndex(d => d.id === num);
20+
data.items.splice(idx, 1);
21+
},
22+
run = () => {
23+
data.items = buildData(1000);
24+
data.selected = undefined;
25+
},
26+
runLots = () => {
27+
data.items = buildData(10000);
28+
data.selected = undefined;
29+
},
30+
select = (id) => data.selected = id,
31+
swapRows = () => {
32+
if (data.items.length > 998) {
33+
data.items = [data.items[0], data.items[998], ...data.items.slice(2, 998), data.items[1], data.items[999]];
34+
}
35+
};
36+
37+
function _random(max) { return Math.round(Math.random() * 1000) % max; };
38+
39+
function buildData(count = 1000) {
40+
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"],
41+
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
42+
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"],
43+
data = new Array(count);
44+
for (var i = 0; i < count; i++)
45+
data[i] = { id: rowId++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] };
46+
return data;
47+
}
48+
html`<div>
49+
<div class="jumbotron">
50+
<div class="row">
51+
<div class="col-md-6">
52+
<h1>Arrowjs (Non-keyed)</h1>
53+
</div>
54+
<div class="col-md-6">
55+
<div class="row">
56+
<div class="col-sm-6 smallpad">
57+
<button type="button" class="btn btn-primary btn-block" id="run" @click="${run}">Create 1,000 rows</button>
58+
</div>
59+
<div class="col-sm-6 smallpad">
60+
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="${runLots}">Create 10,000
61+
rows</button>
62+
</div>
63+
<div class="col-sm-6 smallpad">
64+
<button type="button" class="btn btn-primary btn-block" id="add" @click="${add}">Append 1,000 rows</button>
65+
</div>
66+
<div class="col-sm-6 smallpad">
67+
<button type="button" class="btn btn-primary btn-block" id="update" @click="${partialUpdate}">Update every
68+
10th row</button>
69+
</div>
70+
<div class="col-sm-6 smallpad">
71+
<button type="button" class="btn btn-primary btn-block" id="clear" @click="${clear}">Clear</button>
72+
</div>
73+
<div class="col-sm-6 smallpad">
74+
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="${swapRows}">Swap Rows</button>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<table class="table table-hover table-striped test-data">
81+
<tbody>
82+
${() =>
83+
data.items.map((row) => html`<tr class="${() => data.selected === row.id ? 'danger' : ''}">
84+
<td class="col-md-1">${row.id}</td>
85+
<td class="col-md-4">
86+
<a @click="${() => select(row.id)}">${row.label}</a>
87+
</td>
88+
<td class="col-md-1">
89+
<a @click="${() => remove(row.id)}">
90+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
91+
</a>
92+
</td>
93+
<td class="col-md-6"/>
94+
</tr>`
95+
)}
96+
</tbody>
97+
</table>
98+
</div>
99+
`(document.getElementById('arrow'))

0 commit comments

Comments
 (0)