Skip to content

Commit 86bdd98

Browse files
krausestkrausest
committed
Merge branch 'Nefsen402-destam-dom'
2 parents e80bd6d + 853d5c3 commit 86bdd98

File tree

3 files changed

+89
-92
lines changed

3 files changed

+89
-92
lines changed

‎frameworks/keyed/destam-dom/package-lock.json‎

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

‎frameworks/keyed/destam-dom/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
"url": "https://github.com/krausest/js-framework-benchmark.git"
2121
},
2222
"dependencies": {
23-
"destam": "^0.1.0",
24-
"destam-dom": "^0.6.0"
23+
"destam": "^0.2.0",
24+
"destam-dom": "^0.7.2"
2525
},
2626
"devDependencies": {
2727
"@babel/parser": "^7.24.1",

‎frameworks/keyed/destam-dom/src/main.jsx‎

Lines changed: 76 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -13,91 +13,86 @@ const Button = ({ id, text, fn }) =>
1313
<button id={ id } class='btn btn-primary btn-block' type='button' $onclick={ fn }>{ text }</button>
1414
</div>
1515

16-
const App = () => {
17-
const
18-
array = OArray(),
19-
selected = Observer.mutable(null),
20-
run = () => {
21-
array.splice(0, array.length);
22-
appendData(1000);
23-
},
24-
runLots = () => {
25-
array.splice(0, array.length);
26-
appendData(10000)
27-
},
28-
add = () => appendData(1000),
29-
update = () => {
30-
for(let i = 0, len = array.length; i < len; i += 10)
31-
array[i].label.set(array[i].label.get() + ' !!!');
32-
},
33-
swapRows = () => {
34-
if (array.length > 998) {
35-
atomic (() => {
36-
let tmp = array[1];
37-
array[1] = array[998];
38-
array[998] = tmp;
39-
});
40-
}
41-
},
42-
clear = () => {
43-
array.splice(0, array.length);
44-
},
45-
remove = idx => {
46-
array.splice(idx, 1);
47-
},
48-
select = idx => {
49-
selected.set(array[idx]);
50-
};
51-
52-
function appendData(count) {
53-
const arr = Array(count);
54-
for (let i = 0; i < count; i++) {
55-
let label = Observer.mutable(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
56-
57-
const dom =
58-
<tr class={selected.map(sel => sel === dom ? "danger": "")}>
59-
<td class='col-md-1' $textContent={ idCounter++ } />
60-
<td class='col-md-4'><a $clickHandler={1} $textContent={ label } /></td>
61-
<td class='col-md-1'><a $clickHandler={2}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
62-
<td class='col-md-6'/>
63-
</tr>;
64-
65-
dom.label = label;
66-
arr[i] = dom;
16+
const
17+
array = OArray(),
18+
selected = Observer.mutable(null),
19+
selector = selected.selector('danger', null),
20+
run = () => {
21+
array.splice(0, array.length);
22+
appendData(1000);
23+
},
24+
runLots = () => {
25+
array.splice(0, array.length);
26+
appendData(10000)
27+
},
28+
add = () => appendData(1000),
29+
update = () => {
30+
for(let i = 0, len = array.length; i < len; i += 10)
31+
array[i].label.set(array[i].label.get() + ' !!!');
32+
},
33+
swapRows = () => {
34+
if (array.length > 998) {
35+
atomic (() => {
36+
let tmp = array[1];
37+
array[1] = array[998];
38+
array[998] = tmp;
39+
});
6740
}
41+
},
42+
clear = () => {
43+
array.splice(0, array.length);
44+
},
45+
remove = idx => {
46+
array.splice(idx, 1);
47+
},
48+
select = idx => {
49+
selected.set(array[idx].label);
50+
};
6851

69-
array.push(...arr);
70-
}
52+
function appendData(count) {
53+
const arr = Array(count);
54+
for (let i = 0; i < count; i++) {
55+
let label = Observer.mutable(`${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`);
7156

72-
return <div class='container'>
73-
<div class='jumbotron'><div class='row'>
74-
<div class='col-md-6'><h1>Destam-Dom Keyed</h1></div>
75-
<div class='col-md-6'><div class='row'>
76-
<Button id='run' text='Create 1,000 rows' fn={ run } />
77-
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
78-
<Button id='add' text='Append 1,000 rows' fn={ add } />
79-
<Button id='update' text='Update every 10th row' fn={ update } />
80-
<Button id='clear' text='Clear' fn={ clear } />
81-
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
82-
</div></div>
83-
</div></div>
84-
<table class='table table-hover table-striped test-data'><tbody $onclick={ev => {
85-
let handler;
86-
let e = ev.target;
87-
while (e.parentElement.tagName !== "TBODY") {
88-
if (e.clickHandler) handler = e.clickHandler;
89-
e = e.parentElement;
90-
}
57+
const dom =
58+
<tr class={selector(label)}>
59+
<td class='col-md-1' $textContent={ idCounter++ } />
60+
<td class='col-md-4'><a $clickHandler={select} $textContent={ label } /></td>
61+
<td class='col-md-1'><a $clickHandler={remove}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>
62+
<td class='col-md-6'/>
63+
</tr>;
9164

92-
if (!handler) return;
65+
dom.label = label;
66+
arr[i] = dom;
67+
}
9368

94-
let i = Array.prototype.indexOf.call(e.parentElement.children, e);
95-
[null, select, remove][handler](i);
96-
}}>
97-
{array}
98-
</tbody></table>
99-
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
100-
</div>;
69+
array.push(...arr);
10170
}
10271

103-
mount(document.body, App());
72+
mount(document.body, <div class='container'>
73+
<div class='jumbotron'><div class='row'>
74+
<div class='col-md-6'><h1>Destam-Dom Keyed</h1></div>
75+
<div class='col-md-6'><div class='row'>
76+
<Button id='run' text='Create 1,000 rows' fn={ run } />
77+
<Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
78+
<Button id='add' text='Append 1,000 rows' fn={ add } />
79+
<Button id='update' text='Update every 10th row' fn={ update } />
80+
<Button id='clear' text='Clear' fn={ clear } />
81+
<Button id='swaprows' text='Swap Rows' fn={ swapRows } />
82+
</div></div>
83+
</div></div>
84+
<table class='table table-hover table-striped test-data'><tbody $onclick={ev => {
85+
let handler;
86+
let e = ev.target;
87+
while (e.parentElement.tagName !== "TBODY") {
88+
if (e.clickHandler) handler = e.clickHandler;
89+
e = e.parentElement;
90+
}
91+
92+
if (!handler) return;
93+
handler(Array.prototype.indexOf.call(e.parentElement.children, e));
94+
}}>
95+
{array}
96+
</tbody></table>
97+
<span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
98+
</div>);

0 commit comments

Comments
 (0)