honojs/hono v3.12.0 on GitHub

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 onNotFound handler in adapters' serveStatic by @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 colorize option for showRoutes() 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 param option to $url() by @yusukebe in #1885
fix(deno): export css Helper for Deno by @yusukebe in #1892
Next by @yusukebe in #1895

New Contributors

@Th1nkK1D made their first contribution in #1825

Full Changelog: v3.11.12...v3.12.0

honojs/hono v3.12.0 on GitHub

CSRF Protection Middleware

css Helper

stream.onAbort()

onNotFound option for serveStatic

colorize option for showRoutes()