tombl.dev
a post-component library for building user-interfaces on the web.
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <link rel="icon" type="image/svg+xml" href="data:" />
7 <link rel="stylesheet" href="reset.css" />
8 <title>dhtml</title>
9 <script type="module">
10 import { html } from './dist/index.js'
11 import { createRoot, invalidate } from './dist/client.js'
12
13 const root = createRoot(document.body)
14 Object.assign(globalThis, { createRoot, html, root })
15
16 const url = ({ href }) => html`<a href=${href}>${href}</a>`
17
18 root.render({
19 i: 0,
20 render() {
21 return html`
22 <main style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem">
23 <header>
24 <h1><code>dhtml</code></h1>
25 <p>a post-component library for building user interfaces on the web.</p>
26 <p><a href="https://github.com/tombl/dhtml">github</a></p>
27 </header>
28 <pre style="tab-size: 2">
29${[
30 `import { html } from '`,
31 url(new URL('dist/index.js', location.href)),
32 `'
33import { createRoot, invalidate } from '`,
34 url(new URL('dist/client.js', location.href)),
35 `'
36
37const app = {
38 i: 0,
39 render() {
40 return html\`
41 <button
42 onclick=\${() => {
43 this.i++
44 invalidate(this)
45 }}
46 >
47 Count: \${this.i}
48 </button>
49 \`
50 },
51}
52
53createRoot(document.body).render(app)`,
54 ]}</pre
55 >
56 <button
57 onclick=${() => {
58 this.i++
59 invalidate(this)
60 }}
61 >
62 Count: ${this.i}
63 </button>
64 </main>
65 `
66 },
67 })
68 </script>
69 </head>
70 <body></body>
71</html>