tombl.dev
a post-component library for building user-interfaces on the web.
1import { serve } from '@hono/node-server'
2import { serveStatic } from '@hono/node-server/serve-static'
3import { transformSync } from 'amaro'
4import { html } from 'dhtml'
5import { renderToString } from 'dhtml/server'
6import { Hono } from 'hono'
7
8const app = new Hono()
9
10app.use('/node_modules/*', serveStatic({ root: './' }))
11
12app.get('/app/:script{.+.ts}', async (c, next) => {
13 await next()
14 const { code } = transformSync(await c.res.text(), { mode: 'strip-only' })
15 c.res = c.body(code)
16 c.res.headers.set('content-type', 'text/javascript')
17 c.res.headers.delete('content-length')
18})
19app.get('/app/*', serveStatic({ root: './' }))
20
21app.get('/example', c =>
22 c.html(
23 renderToString(html`
24 <!-- ${'z'} -->
25 <p>a${'text'}b</p>
26 <a href=${'attr'} onclick="${() => {}}"></a>
27 <button ${() => 'directive'}>but</button>
28 <script>
29 ;<span>z</span>
30 </script>
31 ${{
32 render() {
33 return html`<div>${[1, 2, 3]}</div>`
34 },
35 }}
36 ${html`[${'A'}|${'B'}]`}
37 `),
38 ),
39)
40app.get('/', async c => {
41 const { app } = await import('./app/main.ts')
42
43 return c.html(
44 renderToString(html`
45 <!doctype html>
46 <html>
47 <head>
48 <title>dhtml ssr</title>
49 <script type="importmap">
50 {
51 "imports": {
52 "dhtml": "/node_modules/dhtml/index.js",
53 "dhtml/client": "/node_modules/dhtml/client.js"
54 }
55 }
56 </script>
57 </head>
58 <body>
59 ${app}
60 <script type="module" src="/app/main.ts"></script>
61 </body>
62 </html>
63 `),
64 )
65})
66
67serve(app, addr => {
68 console.log(`Listening on http://localhost:${addr.port}`)
69})