tombl.dev
a post-component library for building user-interfaces on the web.
fix site
+36
-26
+34
-25
index.html
+34
-25
index.html
···
7
7
<link rel="stylesheet" href="reset.css" />
8
8
<title>dhtml</title>
9
9
<script type="module">
10
-
globalThis.__DEV__ = new URLSearchParams(location.search).has('dev')
11
-
const { createRoot, html, invalidate } = await import('./src/html.js')
10
+
import { html } from './dist/index.js'
11
+
import { createRoot, invalidate } from './dist/client.js'
12
+
12
13
const root = createRoot(document.body)
13
14
Object.assign(globalThis, { createRoot, html, root })
15
+
16
+
const url = ({ href }) => html`<a href=${href}>${href}</a>`
17
+
14
18
root.render({
15
19
i: 0,
16
20
render() {
17
-
const codePre = `import { createRoot, html, invalidate } from '`
18
-
const url = new URL('src/html.js', location.href).toString()
19
-
const codePost = `'
20
-
21
-
const app = {
22
-
i: 0,
23
-
render() {
24
-
return html\`
25
-
<button
26
-
onclick=\${() => {
27
-
this.i++
28
-
invalidate(this)
29
-
}}
30
-
>
31
-
Count: \${this.i}
32
-
</button>
33
-
\`
34
-
},
35
-
}
36
-
37
-
createRoot(document.body).render(app)`
38
-
39
21
return html`
40
22
<main style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem">
41
23
<header>
···
43
25
<p>a post-component library for building user interfaces on the web.</p>
44
26
<p><a href="https://github.com/tombl/dhtml">github</a></p>
45
27
</header>
46
-
<pre>${codePre}<a href=${url}>${url}</a>${codePost}</pre>
28
+
<pre style="tab-size: 2">
29
+
${[
30
+
`import { html } from '`,
31
+
url(new URL('dist/index.js', location.href)),
32
+
`'
33
+
import { createRoot, invalidate } from '`,
34
+
url(new URL('dist/client.js', location.href)),
35
+
`'
36
+
37
+
const 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
+
53
+
createRoot(document.body).render(app)`,
54
+
]}</pre
55
+
>
47
56
<button
48
57
onclick=${() => {
49
58
this.i++
+2
-1
readme.md
+2
-1
readme.md
···
3
3
a post-component library for building user interfaces on the web.
4
4
5
5
```javascript
6
-
import { createRoot, html, invalidate } from 'https://tombl.github.io/dhtml/src/html.js'
6
+
import { html } from 'https://tombl.github.io/dhtml/dist/index.js'
7
+
import { createRoot, invalidate } from 'https://tombl.github.io/dhtml/dist/client.js'
7
8
8
9
const app = {
9
10
i: 0,