Summary
This release includes BREAKING CHANGES.
[BREAKING CHANGES] JSX Middleware
his obsolete, removed. Usejsxinstead.- Don't write
app.use('*', jsx()). It's not needed. - If you want to return HTML, use
c.html()
You can write as below:
import { Hono } from 'hono'
import { jsx } from 'hono/jsx'
const app = new Hono()
app.get('/', (c) => {
return c.html(
'<!doctype html>' +
(
<html>
<body>
<p>Hono!</p>
</body>
</html>
)
)
})
app.fire()html Middleware
We've added html Middleware. It's powerful to use with JSX middleware. For more information, see documentation
import { Hono } from 'hono'
import { html } from 'hono/html'
import { jsx } from 'hono/jsx'
const app = new Hono()
interface SiteData {
title: string
children?: any
}
const Layout = (props: SiteData) => html`<!DOCTYPE html>
<html>
<head>
<title>${props.title}</title>
</head>
<body>
${props.children}
</body>
</html>`
const Content = (props: { siteData: SiteData; name: string }) => (
<Layout {...props.siteData}>
<h1>Hello {props.name}</h1>
</Layout>
)
app.get('/:name', (c) => {
const { name } = c.req.param()
const props = {
name: name,
siteData: {
title: 'JSX with html sample',
},
}
return c.html(<Content {...props} />)
})
app.fire()Others
- Implemented
Fragmentfor JSX middleware.
What's Changed
- feat(middleware/jsx): We need Fragment. by @usualoma in #310
- feat: Introduce html template literals tag. by @usualoma in #312
- feat(utils/html): Introduce a function
raw. by @usualoma in #316 - [BREAKING] refactor(jsx):
htojsx, removehby @yusukebe in #318 - refactor(html): make
htmlas middleware by @yusukebe in #319
Full Changelog: v1.4.6...v1.4.7