Hono v3.12.0 is now available! Let's take a look at the new features.
CSRF Protection Middleware
This release introduces CSRF Protection Middleware. It is easy to use and can prevent CSRF attacks by simply writing like the following:
import { csrf } from 'hono/csrf'
// ...
app.use('*', csrf())CSRF Protection Middleware compares the Origin header value with the request URL. This is the same method used by SvelteKit and is valid in many situations except when using older browsers.
Thanks to @usualoma! And, the original idea for CSRF Protection was suggested by @htunnicliff. Thanks!
css Helper
We created a built-in CSS in JS(X). It's "hono/css".
The css helper can be used with JSX. You can write the CSS in a css template literal tag and specify the returned value as the class value and it will be applied to that element.
app.get('/', (c) => {
const headerClass = css`
background-color: orange;
color: white;
padding: 1rem;
`
return c.html(
<html>
<head>
<Style />
</head>
<body>
<h1 class={headerClass}>Hello!</h1>
</body>
</html>
)
})If you use VS Code, you can use vscode-styled-components for Syntax highlighting and IntelliSense for css tagged literals.
By combining keyframes and JSX rendering, you can create a like button without JavaScript!
Also, you can use a CSS-generating design tool such as Figma to create components even if you are not a CSS guru.
You can use other CSS in JS libraries in Hono, such as Panda CSS. However, hono/css can be used by simply importing the hono package, and Async components and Suspense are also supported.
Thanks to @usualoma!
stream.onAbort()
c.stream() is now deprecated and you should use stream() in Streaming Helper. And, stream.abort() has been added.
app.get('/stream', (c) => {
return stream(c, async (stream) => {
stream.onAbort(() => {
console.log('Aborted!')
})
// ...
})
})Thanks to @sor4chi!
onNotFound option for serveStatic
Cloudflare Workers, Deno, and Bun serveStatic now have an onNotFound option. You can write a handle when a file is not found.
app.get(
'/static/*',
serveStatic({
onNotFound: (path, c) => {
console.log(`${path} is not found, you access ${c.req.path}`)
}
})
)Thanks to @Th1nkK1D!
colorize option for showRoutes()
The colorize option has been added to the showRoutes function in hono/dev. If you set this value to false, the output will not be colored, which can be used when you want to log output, etc.
import { showRoutes } from 'hono/dev'
showRoutes(app, {
colorize: false
})Other new features
- feat(dev): add
getRouterName() - feat(helper): export SSEStreamingApi and SSEMessage. Thanks to @thanks to @watany-dev!
- feat(client): add param option to
$url()
All Updates
- fix: move
c.stream*to helper by @sor4chi in #1846 - feat(middleware/csrf): Introduce CSRF middleware by @usualoma in #1823
- feat(dev): add
getRouterName()by @yusukebe in #1841 - feat: Add
onNotFoundhandler in adapters'serveStaticby @Th1nkK1D in #1825 - feat(helper): export SSEStreamingApi and SSEMessage. by @watany-dev in #1863
- fix(hono-base): fixed a typo by @yusukebe in #1877
- feat: pass context to onNotFound callback in serveStatic by @sor4chi in #1865
- feat: introduce css Helper by @yusukebe in #1850
- feat(dev): add
colorizeoption forshowRoutes()by @yusukebe in #1886 - feat: implement stream.onAbort by @sor4chi in #1871
- refactor: cloudflare workers' serve-static module by @sor4chi in #1887
- feat(client): add
paramoption to$url()by @yusukebe in #1885 - fix(deno): export css Helper for Deno by @yusukebe in #1892
- Next by @yusukebe in #1895
New Contributors
Full Changelog: v3.11.12...v3.12.0