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, hydrate, invalidate } from './dist/client.js'
12 import { renderToString } from './dist/server.js'
13
14 const url = ({ href }) => html`<a href=${href}>${href}</a>`
15
16 const code = [
17 `import { html } from '`,
18 url(new URL('dist/index.js', location.href)),
19 `'
20import { createRoot, invalidate } from '`,
21 url(new URL('dist/client.js', location.href)),
22 `'
23
24const app = {
25 i: 0,
26 render() {
27 return html\`
28 <button
29 onclick=\${() => {
30 this.i++
31 invalidate(this)
32 }}
33 >
34 Count: \${this.i}
35 </button>
36 \`
37 },
38}
39
40createRoot(document.body).render(app)`,
41 ]
42
43 const app = {
44 i: 0,
45 render() {
46 return html`
47 <main style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem">
48 <header>
49 <h1><code>dhtml</code></h1>
50 <p>a post-component library for building user interfaces on the web.</p>
51 <p><a href="https://github.com/tombl/dhtml">github</a></p>
52 </header>
53 <pre style="tab-size: 2">${code}</pre>
54 <button
55 onclick=${() => {
56 this.i++
57 invalidate(this)
58 }}
59 >
60 Count: ${this.i}
61 </button>
62 </main>
63 `
64 },
65 }
66
67 if (new URLSearchParams(location.search).has('ssr')) {
68 navigator.clipboard.writeText(renderToString(app).replaceAll(location.origin, 'https://tombl.github.io/dhtml'))
69 }
70
71 let root
72 if (document.body.childElementCount === 0) {
73 root = createRoot(document.body)
74 root.render(app)
75 } else {
76 root = hydrate(document.body, app)
77 }
78
79 Object.assign(globalThis, { createRoot, html, root })
80 </script>
81 </head>
82 <body>
83 <?[>
84 <main style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem">
85 <header>
86 <h1><code>dhtml</code></h1>
87 <p>a post-component library for building user interfaces on the web.</p>
88 <p><a href="https://github.com/tombl/dhtml">github</a></p>
89 </header>
90 <pre
91 style="tab-size: 2"
92 ><?[><?[>import { html } from '<?]><?[><a href="https://tombl.github.io/dhtml/dist/index.js"><?[>https://tombl.github.io/dhtml/dist/index.js<?]></a><?]><?[>'
93import { createRoot, invalidate } from '<?]><?[><a href="https://tombl.github.io/dhtml/dist/client.js"><?[>https://tombl.github.io/dhtml/dist/client.js<?]></a><?]><?[>'
94
95const app = {
96 i: 0,
97 render() {
98 return html`
99 <button
100 onclick=${() => {
101 this.i++
102 invalidate(this)
103 }}
104 >
105 Count: ${this.i}
106 </button>
107 `
108 },
109}
110
111createRoot(document.body).render(app)<?]><?]></pre>
112 <button>Count: <?[>0<?]></button>
113 </main>
114 <?]>
115 </body>
116</html>