Skip to content

Commit c868cc8

Browse files
krausestkrausest
committed
Merge branch 'cleaner-impl-svelte' of https://github.com/trueadm/js-framework-benchmark into trueadm-cleaner-impl-svelte
2 parents 6f79e4a + f29e019 commit c868cc8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+3724
-8470
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ In the webdriver-ts directory issue the following command:
261261
npm run results
262262
```
263263

264-
Now a result table should have been created which can be opened on [http://localhost:8080/webdriver-ts-results/table.html](http://localhost:8080/webdriver-ts-results/table.html).
264+
Now a result table should have been created which can be opened on [http://localhost:8080/webdriver-ts-results/dist/index.html](http://localhost:8080/webdriver-ts-results/dist/index.html).
265265
There's nothing in table except for the column vanillajs-keyed at the right end of the first table.
266266
![First Run Results](images/staticResults.png?raw=true "First Run Results")
267267

‎frameworks/keyed/svelte/src/Main.svelte

Lines changed: 158 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,122 @@
1+
<svelte:options immutable />
2+
3+
<script>
4+
let rowId = 1;
5+
let data = [];
6+
let selected = undefined;
7+
8+
const adjectives = [
9+
"pretty",
10+
"large",
11+
"big",
12+
"small",
13+
"tall",
14+
"short",
15+
"long",
16+
"handsome",
17+
"plain",
18+
"quaint",
19+
"clean",
20+
"elegant",
21+
"easy",
22+
"angry",
23+
"crazy",
24+
"helpful",
25+
"mushy",
26+
"odd",
27+
"unsightly",
28+
"adorable",
29+
"important",
30+
"inexpensive",
31+
"cheap",
32+
"expensive",
33+
"fancy",
34+
];
35+
const colours = [
36+
"red",
37+
"yellow",
38+
"blue",
39+
"green",
40+
"pink",
41+
"brown",
42+
"purple",
43+
"brown",
44+
"white",
45+
"black",
46+
"orange",
47+
];
48+
const nouns = [
49+
"table",
50+
"chair",
51+
"house",
52+
"bbq",
53+
"desk",
54+
"car",
55+
"pony",
56+
"cookie",
57+
"sandwich",
58+
"burger",
59+
"pizza",
60+
"mouse",
61+
"keyboard",
62+
];
63+
64+
const add = () => (data = [...data, ...buildData(1000)]),
65+
clear = () => {
66+
data = [];
67+
},
68+
partialUpdate = () => {
69+
const clone = data.slice();
70+
for (let i = 0; i < data.length; i += 10) {
71+
clone[i].label += " !!!";
72+
}
73+
data = clone;
74+
},
75+
remove = (row) => {
76+
const clone = data.slice();
77+
clone.splice(clone.indexOf(row), 1);
78+
data = clone;
79+
},
80+
run = () => {
81+
data = buildData(1000);
82+
},
83+
runLots = () => {
84+
data = buildData(10000);
85+
},
86+
swapRows = () => {
87+
if (data.length > 998) {
88+
const clone = data.slice();
89+
const tmp = clone[1];
90+
clone[1] = data[998];
91+
clone[998] = tmp;
92+
data = clone;
93+
}
94+
};
95+
96+
function _random(max) {
97+
return Math.round(Math.random() * 1000) % max;
98+
}
99+
100+
function createItem() {
101+
let label = `${adjectives[_random(adjectives.length)]} ${
102+
colours[_random(colours.length)]
103+
} ${nouns[_random(nouns.length)]}`;
104+
105+
return {
106+
id: rowId++,
107+
label,
108+
};
109+
}
110+
111+
function buildData(count = 1000) {
112+
const data = new Array(count);
113+
for (let i = 0; i < count; i++) {
114+
data[i] = createItem();
115+
}
116+
return data;
117+
}
118+
</script>
119+
1120
<div class="jumbotron">
2121
<div class="row">
3122
<div class="col-md-6">
@@ -6,24 +125,52 @@
6125
<div class="col-md-6">
7126
<div class="row">
8127
<div class="col-sm-6 smallpad">
9-
<button type="button" class="btn btn-primary btn-block" id="run" on:click={run}>Create 1,000 rows</button>
128+
<button
129+
type="button"
130+
class="btn btn-primary btn-block"
131+
id="run"
132+
on:click={run}>Create 1,000 rows</button
133+
>
10134
</div>
11135
<div class="col-sm-6 smallpad">
12-
<button type="button" class="btn btn-primary btn-block" id="runlots" on:click={runLots}>Create 10,000
13-
rows</button>
136+
<button
137+
type="button"
138+
class="btn btn-primary btn-block"
139+
id="runlots"
140+
on:click={runLots}>Create 10,000 rows</button
141+
>
14142
</div>
15143
<div class="col-sm-6 smallpad">
16-
<button type="button" class="btn btn-primary btn-block" id="add" on:click={add}>Append 1,000 rows</button>
144+
<button
145+
type="button"
146+
class="btn btn-primary btn-block"
147+
id="add"
148+
on:click={add}>Append 1,000 rows</button
149+
>
17150
</div>
18151
<div class="col-sm-6 smallpad">
19-
<button type="button" class="btn btn-primary btn-block" id="update" on:click={partialUpdate}>Update every
20-
10th row</button>
152+
<button
153+
type="button"
154+
class="btn btn-primary btn-block"
155+
id="update"
156+
on:click={partialUpdate}>Update every 10th row</button
157+
>
21158
</div>
22159
<div class="col-sm-6 smallpad">
23-
<button type="button" class="btn btn-primary btn-block" id="clear" on:click={clear}>Clear</button>
160+
<button
161+
type="button"
162+
class="btn btn-primary btn-block"
163+
id="clear"
164+
on:click={clear}>Clear</button
165+
>
24166
</div>
25167
<div class="col-sm-6 smallpad">
26-
<button type="button" class="btn btn-primary btn-block" id="swaprows" on:click={swapRows}>Swap Rows</button>
168+
<button
169+
type="button"
170+
class="btn btn-primary btn-block"
171+
id="swaprows"
172+
on:click={swapRows}>Swap Rows</button
173+
>
27174
</div>
28175
</div>
29176
</div>
@@ -32,9 +179,9 @@
32179
<table class="table table-hover table-striped test-data">
33180
<tbody>
34181
{#each data as row (row.id)}
35-
<tr class={selected === row.id ? 'danger' : ''}
182+
<tr class={selected === row.id ? "danger" : ""}
36183
><td class="col-md-1">{row.id}</td><td class="col-md-4"
37-
><a on:click={() => select(row.id)}>{row.label}</a></td
184+
><a on:click={() => (selected = row.id)}>{row.label}</a></td
38185
><td class="col-md-1"
39186
><a on:click={() => remove(row.id)}
40187
><span class="glyphicon glyphicon-remove" aria-hidden="true" /></a
@@ -44,51 +191,4 @@
44191
{/each}
45192
</tbody>
46193
</table>
47-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
48-
49-
<script>
50-
let rowId = 1,
51-
data = [],
52-
selected = undefined;
53-
54-
const add = () => data = data.concat(buildData(1000)),
55-
clear = () => {
56-
data = [];
57-
selected = undefined;
58-
},
59-
partialUpdate = () => {
60-
for (let i = 0; i < data.length; i += 10) {
61-
data[i].label += ' !!!';
62-
}
63-
},
64-
remove = (num) => {
65-
const idx = data.findIndex(d => d.id === num);
66-
data = [...data.slice(0, idx), ...data.slice(idx + 1)];
67-
},
68-
run = () => {
69-
data = buildData(1000);
70-
selected = undefined;
71-
},
72-
runLots = () => {
73-
data = buildData(10000);
74-
selected = undefined;
75-
},
76-
select = (id) => selected = id,
77-
swapRows = () => {
78-
if (data.length > 998) {
79-
data = [data[0], data[998], ...data.slice(2, 998), data[1], data[999]];
80-
}
81-
};
82-
83-
function _random (max) { return Math.round(Math.random() * 1000) % max; };
84-
85-
function buildData(count = 1000) {
86-
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"],
87-
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
88-
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"],
89-
data = new Array(count);
90-
for (var i = 0; i < count; i++)
91-
data[i] = { id: rowId++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] };
92-
return data;
93-
}
94-
</script>
194+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />

‎push_results.sh

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
cp webdriver-ts-results/table.html ../krausest.github.io/js-framework-benchmark/current.html
2-
cp webdriver-ts-results/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
3-
cp webdriver-ts-results/plotly*.js ../krausest.github.io/js-framework-benchmark/
1+
cp webdriver-ts-results/dist/index.html ../krausest.github.io/js-framework-benchmark/current.html
2+
cp webdriver-ts-results/dist/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
3+
cp webdriver-ts-results/dist/plotly*.js ../krausest.github.io/js-framework-benchmark/
4+
cp webdriver-ts-results/dist/index*.css ../krausest.github.io/js-framework-benchmark/
5+
cp webdriver-ts-results/dist/index*.js ../krausest.github.io/js-framework-benchmark/
46
cd ../krausest.github.io
57
git add js-framework-benchmark/current.html
68
git add js-framework-benchmark/BoxPlotTable*.js
79
git add js-framework-benchmark/plotly*.js
10+
git add js-framework-benchmark/index*.css
11+
git add js-framework-benchmark/index*.js
812
git commit -m "update results"
913
git push
1014
cd ../js-framework-benchmark/webdriver-ts

‎webdriver-ts-results/public/index.html renamed to ‎webdriver-ts-results/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
</head>
99
<body>
1010
<div id="root" class="container"></div>
11+
<script type="module" src="/src/index.tsx"></script>
1112
</body>
1213
</html>

0 commit comments

Comments
 (0)