Skip to content

Commit 972edda

Browse files
EdwardIrbyEdwardIrby
committed
submitting current rc for bench
1 parent d97de0b commit 972edda

File tree

5 files changed

+372
-0
lines changed

5 files changed

+372
-0
lines changed

‎frameworks/keyed/plaited/index.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Plaited-"keyed"</title>
7+
<link href="/css/currentStyle.css" rel="stylesheet" preload />
8+
</head>
9+
10+
<body>
11+
<benchmark-island>
12+
<template shadowrootmode="open" shadowrootdelegatesfocus>
13+
<link href="/css/currentStyle.css" rel="stylesheet" />
14+
<div class="container">
15+
<div class="jumbotron">
16+
<div class="row">
17+
<div class="col-md-6">
18+
<h1>Plaited-"keyed"</h1>
19+
</div>
20+
<div class="col-md-6">
21+
<div class="row">
22+
<div class="col-sm-6 smallpad">
23+
<button type='button' class='btn btn-primary btn-block' id='run'
24+
data-trigger="click->run">Create 1,000
25+
rows</button>
26+
</div>
27+
<div class="col-sm-6 smallpad">
28+
<button type='button' class='btn btn-primary btn-block' id='runlots'
29+
data-trigger="click->runLots">Create 10,000
30+
rows</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type='button' class='btn btn-primary btn-block' id='add'
34+
data-trigger="click->add">Append 1,000
35+
rows</button>
36+
</div>
37+
<div class="col-sm-6 smallpad">
38+
<button type='button' class='btn btn-primary btn-block' id='update'
39+
data-trigger="click->update">Update every 10th
40+
row</button>
41+
</div>
42+
<div class="col-sm-6 smallpad">
43+
<button type='button' class='btn btn-primary btn-block' id='clear'
44+
data-trigger="click->clear">Clear</button>
45+
</div>
46+
<div class="col-sm-6 smallpad">
47+
<button type='button' class='btn btn-primary btn-block' id='swaprows'
48+
data-trigger="click->swapRows">Swap Rows</button>
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
<table class="table table-hover table-striped test-data">
55+
<tbody id="tbody" data-trigger="click->interact" data-target='tbody'>
56+
</tbody>
57+
</table>
58+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
59+
</div>
60+
</template>
61+
</benchmark-island>
62+
<script src='dist/main.js'></script>
63+
</body>
64+
65+
</html>

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

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

‎frameworks/keyed/plaited/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"scripts": {
3+
"build-dev": "esbuild src/main.tsx --bundle --outfile=dist/main.js --watch",
4+
"build-prod": "esbuild src/main.tsx --bundle --outfile=dist/main.js --minify"
5+
},
6+
"type": "module",
7+
"dependencies": {
8+
"plaited": "1.0.3-rc"
9+
},
10+
"devDependencies": {
11+
"esbuild": "0.17.15"
12+
},
13+
"js-framework-benchmark": {
14+
"frameworkVersionFromPackage": "plaited",
15+
"frameworkHomeURL": "https://github.com/plaited/plaited",
16+
"useShadowRoot": true,
17+
"shadowRootName": "benchmark-island",
18+
"buttonsInShadowRoot": true
19+
}
20+
}

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { isle, PlaitProps, useStore } from 'plaited'
2+
3+
type RowAttrs = { id: number; label: string; selected: boolean }
4+
const TableRow = (item: RowAttrs) => {
5+
return (
6+
<tr
7+
id={item.id}
8+
class={item.selected ? 'danger' : ''}
9+
data-target={`row-${item.id}`}
10+
>
11+
<td class='col-md-1'>{item.id}</td>
12+
<td class='col-md-4'>
13+
<a data-target={`label-${item.id}`}>{item.label}</a>
14+
</td>
15+
<td data-id={item.id} class='col-md-1' data-interaction='delete'>
16+
<a>
17+
<span class='glyphicon glyphicon-remove' aria-hidden='true'>
18+
</span>
19+
</a>
20+
</td>
21+
<td class='col-md-6'></td>
22+
</tr>
23+
)
24+
}
25+
26+
isle(
27+
{ tag: 'benchmark-island' },
28+
(base) =>
29+
class extends base {
30+
plait({ feedback, $, trigger }: PlaitProps) {
31+
const adjectives = [
32+
'pretty',
33+
'large',
34+
'big',
35+
'small',
36+
'tall',
37+
'short',
38+
'long',
39+
'handsome',
40+
'plain',
41+
'quaint',
42+
'clean',
43+
'elegant',
44+
'easy',
45+
'angry',
46+
'crazy',
47+
'helpful',
48+
'mushy',
49+
'odd',
50+
'unsightly',
51+
'adorable',
52+
'important',
53+
'inexpensive',
54+
'cheap',
55+
'expensive',
56+
'fancy',
57+
]
58+
const colours = [
59+
'red',
60+
'yellow',
61+
'blue',
62+
'green',
63+
'pink',
64+
'brown',
65+
'purple',
66+
'brown',
67+
'white',
68+
'black',
69+
'orange',
70+
]
71+
const nouns = [
72+
'table',
73+
'chair',
74+
'house',
75+
'bbq',
76+
'desk',
77+
'car',
78+
'pony',
79+
'cookie',
80+
'sandwich',
81+
'burger',
82+
'pizza',
83+
'mouse',
84+
'keyboard',
85+
]
86+
const [getSelected, setSelected] = useStore(-1)
87+
const random = (max: number) => {
88+
return Math.round(Math.random() * 1000) % max
89+
}
90+
const tbody = $('tbody')
91+
let did = parseInt(tbody?.lastElementChild?.id)|| 1
92+
const buildData = (count: number) => {
93+
const data = []
94+
for (let i = 0; i < count; i++) {
95+
data.push({
96+
id: did++,
97+
label: `${adjectives[random(adjectives.length)]} ${
98+
colours[random(colours.length)]
99+
} ${nouns[random(nouns.length)]}`,
100+
selected: false,
101+
})
102+
}
103+
return data
104+
}
105+
feedback({
106+
add() {
107+
tbody?.render(
108+
<>{buildData(1000).map((d) => <TableRow {...d} />)}</>,
109+
'beforeend',
110+
)
111+
},
112+
run() {
113+
tbody?.render(
114+
<>{buildData(1000).map((data) => <TableRow {...data} />)}</>,
115+
)
116+
},
117+
runLots() {
118+
tbody?.render(
119+
<>{buildData(10000).map((data) => <TableRow {...data} />)}</>,
120+
)
121+
},
122+
clear() {
123+
tbody.replaceChildren()
124+
},
125+
interact(e: MouseEvent) {
126+
const td = (e.target as HTMLElement)?.closest<HTMLTableCellElement>(
127+
'td',
128+
)
129+
if (td) {
130+
const interaction = td.dataset.interaction
131+
const id = parseInt((td.parentNode as Element).id)
132+
133+
if (interaction === 'delete') {
134+
trigger({ type: 'delete', detail: { id } })
135+
} else {
136+
trigger({ type: 'select', detail: { id } })
137+
}
138+
}
139+
},
140+
delete({ id }: { id: string }) {
141+
$(`row-${id}`)?.remove()
142+
},
143+
select({ id }: { id: string }) {
144+
const cur = getSelected()
145+
if (cur > -1) {
146+
$(`row-${cur}`)?.attr('class', '')
147+
}
148+
$(`row-${id}`)?.attr('class', 'danger')
149+
setSelected(parseInt(id))
150+
},
151+
swapRows() {
152+
const rows = $('row', {all:true, mod:'^='})
153+
tbody?.insertBefore(rows[1], rows[999])
154+
tbody?.insertBefore(rows[998], rows[2])
155+
},
156+
update() {
157+
const labels = $('label', {all:true, mod:'^='})
158+
const length = labels.length
159+
for (let i = 0; i < length; i += 10) {
160+
labels[i].innerHTML = labels[i].textContent + ' !!!'
161+
}
162+
},
163+
})
164+
}
165+
},
166+
)()

‎frameworks/keyed/plaited/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2022",
4+
"module": "ES2022",
5+
"jsx": "react-jsx",
6+
"jsxImportSource": "@plaited/jsx",
7+
"moduleResolution": "nodenext",
8+
"lib": ["dom", "es2022"]
9+
}
10+
}

0 commit comments

Comments
 (0)