Skip to content

Commit 0c7f32a

Browse files
krausestkrausest
committed
Merge branch 'eirby/plaited-7.0.0' of github.com:plaited/js-framework-benchmark into plaited-eirby/plaited-7.0.0
2 parents 76c30c7 + 8ca9aaa commit 0c7f32a

File tree

3 files changed

+172
-129
lines changed

3 files changed

+172
-129
lines changed

‎frameworks/keyed/plaited/package-lock.json

+18-53
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/plaited/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
},
66
"type": "module",
77
"dependencies": {
8-
"plaited": "5.3.0"
8+
"plaited": "7.0.0"
99
},
1010
"devDependencies": {
1111
"esbuild": "0.19.6"
@@ -17,8 +17,8 @@
1717
"shadowRootName": "js-benchmark",
1818
"buttonsInShadowRoot": true,
1919
"issues": [
20-
800,
21-
772
20+
772,
21+
800
2222
]
2323
}
24-
}
24+
}

‎frameworks/keyed/plaited/src/main.tsx

+150-72
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,175 @@
1-
import { Component, PlaitProps, FT, SugaredElement, QuerySelector } from 'plaited'
1+
import { FT, CloneCallback, defineTemplate } from "plaited";
22

3-
let did = 1
4-
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"],
3+
let did = 1;
4+
const adjectives = [
5+
"pretty",
6+
"large",
7+
"big",
8+
"small",
9+
"tall",
10+
"short",
11+
"long",
12+
"handsome",
13+
"plain",
14+
"quaint",
15+
"clean",
16+
"elegant",
17+
"easy",
18+
"angry",
19+
"crazy",
20+
"helpful",
21+
"mushy",
22+
"odd",
23+
"unsightly",
24+
"adorable",
25+
"important",
26+
"inexpensive",
27+
"cheap",
28+
"expensive",
29+
"fancy",
30+
],
531
colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"],
6-
nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
32+
nouns = [
33+
"table",
34+
"chair",
35+
"house",
36+
"bbq",
37+
"desk",
38+
"car",
39+
"pony",
40+
"cookie",
41+
"sandwich",
42+
"burger",
43+
"pizza",
44+
"mouse",
45+
"keyboard",
46+
];
747

8-
const random = (max: number) => Math.round(Math.random() * 1000) % max
48+
const random = (max: number) => Math.round(Math.random() * 1000) % max;
949

10-
type DataItem = { id: number, label: string }
11-
type Data = DataItem[]
50+
type DataItem = { id: number; label: string };
51+
type Data = DataItem[];
1252
const buildData = (count: number): Data => {
13-
const data = []
53+
const data = [];
1454
for (let i = 0; i < count; i++) {
1555
data.push({
1656
id: did++,
17-
label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`
18-
})
57+
label: `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`,
58+
});
1959
}
20-
return data
21-
}
60+
return data;
61+
};
2262

23-
const Button:FT<{ id: string, value?: number}> = (attrs) => (
63+
const Button: FT<{ id: string; value?: number }> = (attrs) => (
2464
<div className="col-sm-6 smallpad">
25-
<button type='button' className='btn btn-primary btn-block' {...attrs} />
65+
<button type="button" className="btn btn-primary btn-block" {...attrs} />
2666
</div>
27-
)
67+
);
2868

29-
const template = <><link href="/css/currentStyle.css" rel="stylesheet" />
30-
<div className="container">
31-
<div className="jumbotron"><div className="row">
32-
<div className="col-md-6"><h1>Plaited-"keyed"</h1></div>
33-
<div className="col-md-6"><div className="row">
34-
<Button data-trigger={{ click: 'run' }} id='run' value={1000}>Create 1,000 rows</Button>
35-
<Button data-trigger={{ click: 'run' }} id='runlots' value={10000}>Create 10,000 rows</Button>
36-
<Button data-trigger={{ click: 'add' }} id='add' value={1000}>Append 1,000 rows</Button>
37-
<Button data-trigger={{ click: 'update' }} id='update'>Update every 10th row</Button>
38-
<Button data-trigger={{ click: 'clear' }} id='clear'>Clear</Button>
39-
<Button data-trigger={{ click: 'swapRows' }} id='swaprows'>Swap Rows</Button>
40-
</div></div>
41-
</div></div>
42-
<table className="table table-hover table-striped test-data"><tbody id="tbody" data-target='tbody' data-trigger={{click: 'interact'}}/></table>
43-
</div>
44-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
45-
<template data-target='template'>
46-
<tr data-target="row">
47-
<td className='col-md-1' data-target="id"></td>
48-
<td className='col-md-4'><a data-target='label'></a></td>
49-
<td className='col-md-1'><a><span className='glyphicon glyphicon-remove' aria-hidden='true' data-target='delete'></span></a></td>
50-
<td className='col-md-6'></td>
69+
const shadowDom = (
70+
<>
71+
<link href="/css/currentStyle.css" rel="stylesheet" />
72+
<div className="container">
73+
<div className="jumbotron">
74+
<div className="row">
75+
<div className="col-md-6">
76+
<h1>Plaited-"keyed"</h1>
77+
</div>
78+
<div className="col-md-6">
79+
<div className="row">
80+
<Button p-trigger={{ click: "run" }} id="run" value={1000}>
81+
Create 1,000 rows
82+
</Button>
83+
<Button p-trigger={{ click: "run" }} id="runlots" value={10000}>
84+
Create 10,000 rows
85+
</Button>
86+
<Button p-trigger={{ click: "add" }} id="add" value={1000}>
87+
Append 1,000 rows
88+
</Button>
89+
<Button p-trigger={{ click: "update" }} id="update">
90+
Update every 10th row
91+
</Button>
92+
<Button p-trigger={{ click: "clear" }} id="clear">
93+
Clear
94+
</Button>
95+
<Button p-trigger={{ click: "swapRows" }} id="swaprows">
96+
Swap Rows
97+
</Button>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<table className="table table-hover table-striped test-data">
103+
<tbody id="tbody" p-target="tbody" p-trigger={{ click: "interact" }} />
104+
</table>
105+
</div>
106+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
107+
</>
108+
);
109+
110+
const row = (
111+
<tr p-target="row">
112+
<td className="col-md-1" p-target="id"></td>
113+
<td className="col-md-4">
114+
<a p-target="label"></a>
115+
</td>
116+
<td className="col-md-1">
117+
<a>
118+
<span className="glyphicon glyphicon-remove" aria-hidden="true" p-target="delete"></span>
119+
</a>
120+
</td>
121+
<td className="col-md-6"></td>
51122
</tr>
52-
</template></>
123+
);
53124

54-
const forEachRow = ($: QuerySelector, data: DataItem)=> {
55-
$('row')[0].attr('data-target', `${data.id}`)
56-
$('id')[0].render(`${data.id}`)
57-
$('label')[0].render(data.label)
58-
}
125+
const forEachRow: CloneCallback<DataItem> = ($, data) => {
126+
$("row")[0].attr("p-target", `${data.id}`);
127+
$("id")[0].render(<>{data.id}</>);
128+
$("label")[0].render(<>{data.label}</>);
129+
};
59130

60-
class BenchMark extends Component({
61-
tag: 'js-benchmark',
62-
template,
63-
}){
64-
plait({ feedback, $ }: PlaitProps) {
65-
let selected = -1
66-
const [tbody] = $('tbody')
67-
const cb = $('template')[0].clone<DataItem>(forEachRow)
68-
feedback({
69-
add(evt: MouseEvent& { target: HTMLButtonElement }){tbody.insert('beforeend',...buildData(parseInt(evt.target.value)).map(cb))},
70-
run(evt: MouseEvent& { target: HTMLButtonElement }){tbody.render(...buildData(parseInt(evt.target.value)).map(cb))},
71-
clear(){tbody.replaceChildren()},
131+
defineTemplate({
132+
tag: "js-benchmark",
133+
shadowDom,
134+
bProgram({ $ }) {
135+
let selected = -1;
136+
const cb = $.clone(row, forEachRow);
137+
return {
138+
add(evt: MouseEvent & { target: HTMLButtonElement }) {
139+
$("table")[0].insert("beforeend", ...buildData(parseInt(evt.target.value)).map(cb));
140+
},
141+
run(evt: MouseEvent & { target: HTMLButtonElement }) {
142+
$("table")[0].render(...buildData(parseInt(evt.target.value)).map(cb));
143+
},
144+
clear() {
145+
$("table")[0].replaceChildren();
146+
},
72147
interact(evt: MouseEvent & { target: HTMLElement }) {
73-
const target = evt.target
74-
if (target.dataset.target === 'delete') return target.closest('tr').remove()
75-
if(target.dataset.target === 'label') {
76-
if (selected > -1) {$(`${selected}`)[0]?.attr('class', null)}
77-
const row = target.closest<SugaredElement>('tr')
78-
row.attr('class', 'danger')
79-
selected = parseInt(row.dataset.target)
148+
const target = evt.target;
149+
const pTarget = target.getAttribute("p-target");
150+
if (pTarget === "delete") return target.closest("tr").remove();
151+
if (pTarget === "label") {
152+
if (selected > -1) {
153+
$(`${selected}`)[0]?.attr("class", null);
154+
}
155+
const row = target.closest<ReturnType<typeof $>[number]>("tr");
156+
row.attr("class", "danger");
157+
selected = parseInt(row.getAttribute("p-target"));
80158
}
81159
},
82160
swapRows() {
83-
const rows = Array.from($('tbody')[0].childNodes)
84-
tbody.insertBefore(rows[1], rows[999])
85-
tbody.insertBefore(rows[998], rows[2])
161+
const [tbody] = $("table");
162+
const rows = Array.from($("tbody")[0].childNodes);
163+
tbody.insertBefore(rows[1], rows[999]);
164+
tbody.insertBefore(rows[998], rows[2]);
86165
},
87166
update() {
88-
const labels = $('label')
89-
const length = labels.length
167+
const labels = $("label");
168+
const length = labels.length;
90169
for (let i = 0; i < length; i += 10) {
91-
labels[i].insert('beforeend', ' !!!')
170+
labels[i].insert("beforeend", " !!!");
92171
}
93172
},
94-
})
95-
}
96-
}
97-
customElements.define(BenchMark.tag, BenchMark)
173+
};
174+
},
175+
});

0 commit comments

Comments
 (0)