Skip to content

Commit eaa57b1

Browse files
abishekatpabishekatp
committed
dev: arrowjs implementation
1 parent 5d756ad commit eaa57b1

File tree

4 files changed

+158
-0
lines changed

4 files changed

+158
-0
lines changed

‎frameworks/keyed/arrowjs/index.html

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

0 commit comments

Comments
 (0)