hono
hono copied to clipboard
honojs
[PoC]: SPA option for JSX Renderer
This is just a PoC. There are many issues in making this a reality, but I think this is an interesting idea.
Usage
import { Hono } from '../../src'
import { jsxRenderer } from '../../src/middleware/jsx-renderer'
const app = new Hono()
app.get(
'*',
jsxRenderer(
({ children }) => {
return (
<html>
<body>
<header>
<a href='/'>Top</a>
<a href='/about'>About</a>
<a href='/posts/1'>Post 1</a>
</header>
{children}
</body>
</html>
)
},
{
spa: true,
}
)
)
app.get('/', (c) => {
return c.render(
<div>
<h1>Top</h1>
<p>{dummyText1}</p>
</div>
)
})
app.get('/about', (c) => {
return c.render(
<div>
<h1>About</h1>
<p>{dummyText2}</p>
</div>
)
})
app.get('/posts/:id', (c) => {
return c.render(
<div>
<h1>Post {c.req.param('id')}</h1>
<p>{dummyText3}</p>
</div>
)
})
Demo page
Screen cast
https://github.com/honojs/hono/assets/10682/b51ab2bc-55de-4aff-8777-720fb05617c5
