Releases: honojs/hono
v4.0.7
v4.0.6
What's Changed
- chore: use official deno installer by @ryuapp in #2250
- fix(reg-exp-router): use matchers[METHOD_NAME_ALL] as fallback for unknown method by @usualoma in #2255
- test: add router/common.case.test.ts by @usualoma in #2258
- fix: assign value to element's property for input, textarea, select by @usualoma in #2261
- perf(jsx/dom): update textContent only when content changes by @usualoma in #2264
- fix(stream): avoid hang up when stream helper's callback throw error by @sor4chi in #2262
- fix(serve-static): support extensionless files and refactor by @yusukebe in #2260
Full Changelog: v4.0.5...v4.0.6
v4.0.5
What's Changed
- fix: Dot-containing paths do not correctly receive extension completion. by @watany-dev in #2243
- refactor(context): skip jsx type import by @usualoma in #2248
- feat(jsx/dom): support namespace for svg and mathml elements by @usualoma in #2241
Full Changelog: v4.0.4...v4.0.5
v4.0.4
What's Changed
- docs(contribution): add install flag
--frozen-lockfile
by @ryuapp in #2229 - refactor(jsx): shorten use hook a bit by @usualoma in #2231
- fix(jsx/dom): fix finding element to insert before by @usualoma in #2230
- feat(jsx): support HtmlEscapedString in html tag function by @usualoma in #2233
- chore(package.json): remove
@edge
forcompute
by @yusukebe in #2235 - fix(jwt): import cookie helper correctly by @yusukebe in #2238
- fix(ssg): path of already extention by @watany-dev in #2236
- fix(validator): use the cached content by @yusukebe in #2234
Full Changelog: v4.0.3...v4.0.4
v4.0.3
What's Changed
- fix(jsx-renderer): support async component by @yusukebe in #2211
- fix(context): Inherit current status if not specified by @usualoma in #2218
- fix(hono-base): custom not found with middleware like compress by @yusukebe in #2220
- refactor: jsx streaming by @usualoma in #2216
Full Changelog: v4.0.2...v4.0.3
v4.0.2
This is a patch release. But, it includes a minor feature.
SSG helper now generates HTML files only if they are handling GET or ALL methods.
What's Changed
- fix:
createHandler
Response Types (handler x1) by @nakasyou in #2192 - fix(jsx/dom): Do not call insertBefore if the element position does not change by @usualoma in #2196
- refactor(ssg): filter SSG Route by @watany-dev in #2181
- refactor(ssg): check
c.env
variables to disable/enable SSG by @usualoma in #2179 - Fix regex pattern with length limit at replaceUrlParam by @the-fukui in #2193
- docs(readme): tweak by @yusukebe in #2204
- fix(router): LinearRouter and PatternRouter support regexp quantifiers by @yusukebe in #2209
New Contributors
- @the-fukui made their first contribution in #2193
Full Changelog: v4.0.1...v4.0.2
v4.0.1
What's Changed
- fix(context): remove duplicate definition of render method by @usualoma in #2191
- refactor(ssg): create request from saved requestInit in order to avoid memory leak warnings by @usualoma in #2186
- feat(sse): Allow sending retry for SSE connection by @watany-dev in #2188
Full Changelog: v4.0.0...v4.0.1
v4.0.0
Going to full-stack.
Hono v4.0.0 is out! This major update includes some breaking changes and the addition of three major features.
- Static Site Generation
- Client Components
- File-based Routing
So Hono is going to full-stack. Let's take a look at the three features.
1. Static Site Generation
We introduce SSG Helper. With it you can generate static pages of your Hono applications.
To use this, create a separate file build.ts
from the application and call the toSSG()
function in it.
import fs from 'node:fs/promises'
import { toSSG } from 'hono/ssg'
import app from './src/index'
toSSG(app, fs)
There are adapters for Bun and Deno, so you can write shorter for Bun, for example.
import { toSSG } from 'hono/bun'
import app from './src/index'
toSSG(app)
And, just run it.
bun ./build.ts
Then HTML is generated.
$ ls static
about.html index.html
You can easily deploy this page to Cloudflare Pages, etc.
$ wrangler pages deploy static
With Vite
We have created a plugin @hono/vite-ssg
for Vite. By using this, you will be able to develop and build a static sites with just the vite
command.
The configuration is the following:
import build from '@hono/vite-ssg'
import devServer from '@hono/vite-dev-server'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
build(),
devServer({
entry: 'src/index.tsx'
})
]
})
If you want to develope, just run the command:
vite
If you want to build, just run the command:
vite build
In combination with the deployment mentioned above to Cloudflare Pages, you can develop, SSG build, and deploy non-stop. And each of them is extremely fast (the video is 2x faster).
2. Client Components
hono/jsx
was originally designed to run server-side as an alternative to template engines such as Mustache. Server-side JSX is an interesting experiment, creating a new stack to combine with HTMX and Alpine.js. But that's not all.
Now, hono/jsx
runs on the client as well. We call it hono/jsx/dom
or Client Components.
The exact same code as React runs with Hono's JSX.
import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
function App() {
return (
<html>
<body>
<Counter />
</body>
</html>
)
}
const root = document.getElementById('root')
render(<App />, root)
The Hooks listed below are also implemented and you can create Client Components just like in React.
- useContext
- useEffect
- useState
- useCallback
- use
- startTransition
- useDeferredValue
- useMemo
- useLayoutEffect
- Memo
- isValidElement
startViewTransition
family
In addition, the original APIs, startViewTransition
family make the View Transition API easy to use.
import { useState, startViewTransition } from 'hono/jsx'
import { Style, css, keyframes } from 'hono/css'
const fadeIn = keyframes`
from { opacity: 0; }
to { opacity: 1; }
`
const App = () => {
const [showTitleImage, setShowTitleImage] = useState(false)
return (
<>
<button onClick={() => startViewTransition(() => setShowTitleImage((state) => !state))}>Click!</button>
<div>
{!showTitleImage ? (
<img src="https://hono.dev/images/logo.png" />
) : (
<div
class={css`
animation: ${fadeIn} 1s;
background: url('https://hono.dev/images/logo-large.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 500px;
height: 200px;
`}
/>
)}
</div>
</>
)
}
You can easily create the animation.
Ultra-small
The hono/jsx/dom
is fast and ultra-small. It has a smaller JSX runtime dedicated to the DOM in addition to the common server and client ones. Just specify hono/jsx/dom
instead of hono/jsx
in tsconfig.json
.
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx/dom"
The above counter example is 2.8KB with Brotli compression.
In comparison, React is 47.3 KB for the same thing.
3. File-based Routing
Last is File-based Routing. This is not included in the hono package, but is provided in a separate package.
It is named HonoX.
HonoX
HonoX has the following features.
- File-based routing - You can create a large application like Next.js.
- Fast SSR - Rendering is ultra-fast thanks to Hono.
- BYOR - You can bring your own renderer, not only one using hono/jsx.
- Islands hydration - If you want interactions, create an island. JavaScript is hydrated only for it.
- Middleware - It works as Hono, so you can use a lot of Hono's middleware.
You can try it now. One of create-hono's starter templates named "x-base" uses HonoX.
For detailed usage, please see the following HonoX repository.
https://github.com/honojs/honox
The core is still tiny
The addition of this feature has no impact on the core. "Hello World" in hono/tiny is still small, only 12KB minified.
Other new features
- feat(base): Set Default Path to
'*'
forapp.use()
- #1753 - feat(hono-base):
app.on
supports multiple paths - #1923 - feat(css): Introduce pseudo global selector and class name based extend syntax - #1928
- feat(jsx-renderer): Nested Layouts via Renderer - #1945
- feat!: validator throws error rathar than return
c.json()
- #2021 - feat: introduce Accepts Helper - #2001
- feat(serve-static):
mimes
option for serve-static - #2094 - feat!(validator): supports transformation - #2130
Breaking Changes
There are several breaking changes. Please see the Migration Guide below.
https://github.com/honojs/hono/blob/main/docs/MIGRATION.md
Thanks
Thanks to all contributors. Great job on all the hard work!
All Updates
- feat(base): Set Default Path to '*' for app.use() by @watany-dev in #1753
- feat: Introduce jsx/dom by @usualoma in #1917
- ci: enables CI in the v4 branch by @yusukebe in #1933
- feat(hono-base):
app.on
supports multiple paths by @yusukebe in #1923 - feat!: remove deprecated features by @yusukebe in #1934
- fix(jsx/dom): fix cleanup for deps by @usualoma in #1936
- refactor(jsx/dom): replace existing content by render() by @usualoma in #1938
- feat(css): Introduce pseudo global selector and class name based extend syntax by @usualoma in #1928
- feat: Introducing a New SSG Adaptor/Helper by @watany-dev in #1904
- chore(helper): Add experimental flag the SSG features by @watany-dev in #1967
- refactor: remove unnecessary
import
by @yusukebe in #1969 - refactor: remove and fix comments by @yusukebe in #1970
- ci: remove lagon runtime tests and other lagon things by @yusukebe in #1971
- refactor(ssg): SSG works without
node:path
by @nakasyou in #1965 - feat(factory): remove
deprecated
fromFactory
andcreateHandlers
by @yusukebe in #1979 - fix(ssg): fix path parser bug & refactor code by @EdamAme-x in #1976
- feat(ssg): Implement Dynamic File Extension on MIME Type and Enhanced Response Handling by @watany-dev in #1968
- feat(jsx/dom): rewrite renderer to use virtual tree by @usualoma in #1981
- refactor: faster for loop by @EdamAme-x in #1989
- feat!(cloudflare-workers): make
manifest
required by @yusukebe in #1984 - chore: enables lint and format for
.tsx
by @yusukebe in #1994 - feat(jsx/dom): provide jsx-runtime and jsx-dev-runtime via jsx/dom by @usualoma in #1986
- fix(types): correct
c.get()
inference by @yusukebe in #1995 - feat(jsx/dom): startTransition() and useTransition() by @usualoma in #1996
- refactor(jsx): export components and hook function from top level 'hono/jsx' by @usualoma in #1997
- feat(ssg): Ignore Dynamic Route by @watany-dev in #1990
- feat: Added
ssgParams
middleware by @nakasyou in https://github.com/honojs/ho...
v3.12.12
v3.12.11
What's Changed
- fix(html): Remove circular dependencies in
hono/html
by @javascripter in #2143 - fix(types):
MergeSchemePath
infers param types correctly by @yusukebe in #2152
New Contributors
- @javascripter made their first contribution in #2143
Full Changelog: v3.12.10...v3.12.11