tombl.dev
a post-component library for building user-interfaces on the web.
1// @ts-check
2/// <reference types='./uibench.d.ts' />
3
4import { html, keyed } from 'dhtml'
5import { createRoot } from 'dhtml/client'
6
7/** @param {string} text */
8function tableCell(text) {
9 function onClick(e) {
10 console.log('Clicked' + text)
11 e.stopPropagation()
12 }
13 return html`<td class="TableCell" onclick=${onClick}>${text}</td>`
14}
15
16/** @param {TableItemState} data */
17function tableRow(data) {
18 return html`
19 <tr class=${data.active ? 'TableRow active' : 'TableRow'} data-id=${data.id}>
20 ${tableCell('#' + data.id)} ${data.props.map(c => tableCell(c))}
21 </tr>
22 `
23}
24
25/** @param {TableState} data */
26function table(data) {
27 return html`
28 <table class="Table">
29 <tbody>
30 ${data.items.map(item => keyed(tableRow(item), item.id))}
31 </tbody>
32 </table>
33 `
34}
35
36/** @param {AnimBoxState} data */
37function animBox(data) {
38 return html`
39 <div
40 class="AnimBox"
41 data-id=${data.id}
42 style=${`
43 border-radius: ${data.time % 10}px;
44 background: rgba(0,0,0,${0.5 + (data.time % 10) / 10});
45 `}
46 ></div>
47 `
48}
49
50/** @param {AnimState} data */
51function anim(data) {
52 return html`<div class="Anim">${data.items.map(item => keyed(animBox(item), item.id))}</div>`
53}
54
55/** @param {TreeNodeState} data */
56function treeLeaf(data) {
57 return html`<li class="TreeLeaf">${data.id}</li>`
58}
59
60/** @param {TreeNodeState} data */
61function treeNode(data) {
62 return html`
63 <ul class="TreeNode">
64 ${data.children.map(child => keyed(child.container ? treeNode(child) : treeLeaf(child), child.id))}
65 </ul>
66 `
67}
68
69/** @param {TreeState} data */
70function tree(data) {
71 return html`<div class="Tree">${treeNode(data.root)}</div>`
72}
73
74/** @param {AppState} data */
75function main(data) {
76 let section
77 switch (data.location) {
78 case 'table':
79 section = table(data.table)
80 break
81 case 'anim':
82 section = anim(data.anim)
83 break
84 case 'tree':
85 section = tree(data.tree)
86 break
87 }
88
89 return html`<div class="Main">${section}</div>`
90}
91
92const root = createRoot(document.body)
93
94uibench.init('dhtml', 'HEAD')
95uibench.run(
96 state => {
97 root.render(main(state))
98 },
99 samples => {
100 root.render(html`<pre>${JSON.stringify(samples, null, ' ')}</pre>`)
101 },
102)