tombl.dev
a post-component library for building user-interfaces on the web.
1import './styles.css'
2
3import { html } from 'dhtml'
4import { onUnmount } from 'dhtml/client'
5import { Database, type ID } from './db'
6import { Bus } from './util/bus'
7import { Router } from './util/router'
8
9type BusEvent = 'boards' | `board:${ID}:columns` | `column:${ID}` | `column:${ID}:cards` | `card:${ID}`
10
11export interface PageContext {
12 app: App
13}
14
15export class App {
16 router = new Router({
17 routes: {
18 '/': () => import('./pages/index'),
19 '/boards/:id': () => import('./pages/board'),
20 },
21 context: { app: this } satisfies PageContext,
22 })
23 bus = new Bus<BusEvent>('app')
24 db = new Database()
25
26 constructor() {
27 onUnmount(this, async () => {
28 this.bus.close()
29 await this.db.close()
30 })
31 }
32
33 render() {
34 return html`<main>${this.router}</main>`
35 }
36}