From 0b8cb6000cbbe403f5f49410eb51e743b9e90cb4 Mon Sep 17 00:00:00 2001 From: Yusuke Wada Date: Tue, 29 Sep 2026 12:48:11 +0900 Subject: [PATCH] docs: use the @hono/* adapter packages --- docs/api/hono.md | 2 +- docs/getting-started/aws-lambda.md | 24 +++++++++++------------ docs/getting-started/basic.md | 4 ++-- docs/getting-started/bun.md | 8 ++++++-- docs/getting-started/cloudflare-pages.md | 2 +- docs/getting-started/deno.md | 8 ++++++-- docs/getting-started/lambda-edge.md | 14 ++++++------- docs/getting-started/netlify.md | 4 ++-- docs/getting-started/nextjs.md | 4 +++- docs/getting-started/service-worker.md | 12 ++++++------ docs/helpers/conninfo.md | 16 ++++++++------- docs/helpers/ssg.md | 6 +++--- docs/helpers/websocket.md | 12 +++++++----- docs/middleware/builtin/combine.md | 2 +- docs/middleware/builtin/ip-restriction.md | 4 ++-- 15 files changed, 68 insertions(+), 54 deletions(-) diff --git a/docs/api/hono.md b/docs/api/hono.md index 61ad0913e..b861a2f08 100644 --- a/docs/api/hono.md +++ b/docs/api/hono.md @@ -69,7 +69,7 @@ If both a parent app and its routes have `onError` handlers, the route-level han ## fire() ::: warning -**`app.fire()` is deprecated**. Use `fire()` from `hono/service-worker` instead. See the [Service Worker documentation](/docs/getting-started/service-worker) for details. +**`app.fire()` is deprecated**. Use `fire()` from `@hono/service-worker` instead. See the [Service Worker documentation](/docs/getting-started/service-worker) for details. ::: `app.fire()` automatically adds a global `fetch` event listener. diff --git a/docs/getting-started/aws-lambda.md b/docs/getting-started/aws-lambda.md index ef70774f0..398415e36 100644 --- a/docs/getting-started/aws-lambda.md +++ b/docs/getting-started/aws-lambda.md @@ -19,7 +19,7 @@ Initialize your project with the `cdk` CLI. mkdir my-app cd my-app cdk init app -l typescript -npm i hono +npm i hono @hono/aws-lambda npm i -D esbuild mkdir lambda touch lambda/index.ts @@ -29,7 +29,7 @@ touch lambda/index.ts mkdir my-app cd my-app cdk init app -l typescript -yarn add hono +yarn add hono @hono/aws-lambda yarn add -D esbuild mkdir lambda touch lambda/index.ts @@ -39,7 +39,7 @@ touch lambda/index.ts mkdir my-app cd my-app cdk init app -l typescript -pnpm add hono +pnpm add hono @hono/aws-lambda pnpm add -D esbuild mkdir lambda touch lambda/index.ts @@ -49,7 +49,7 @@ touch lambda/index.ts mkdir my-app cd my-app cdk init app -l typescript -bun add hono +bun add hono @hono/aws-lambda bun add -D esbuild mkdir lambda touch lambda/index.ts @@ -63,7 +63,7 @@ Edit `lambda/index.ts`. ```ts import { Hono } from 'hono' -import { handle } from 'hono/aws-lambda' +import { handle } from '@hono/aws-lambda' const app = new Hono() @@ -128,8 +128,8 @@ In Hono, you can access the AWS Lambda Events and Context by binding the `Lambda ```ts import { Hono } from 'hono' -import type { LambdaEvent, LambdaContext } from 'hono/aws-lambda' -import { handle } from 'hono/aws-lambda' +import type { LambdaEvent, LambdaContext } from '@hono/aws-lambda' +import { handle } from '@hono/aws-lambda' type Bindings = { event: LambdaEvent @@ -154,8 +154,8 @@ In Hono, you can access the AWS Lambda request context by binding the `LambdaEve ```ts import { Hono } from 'hono' -import type { LambdaEvent } from 'hono/aws-lambda' -import { handle } from 'hono/aws-lambda' +import type { LambdaEvent } from '@hono/aws-lambda' +import { handle } from '@hono/aws-lambda' type Bindings = { event: LambdaEvent @@ -177,8 +177,8 @@ you can access the AWS Lambda request context by binding the `ApiGatewayRequestC ```ts import { Hono } from 'hono' -import type { ApiGatewayRequestContext } from 'hono/aws-lambda' -import { handle } from 'hono/aws-lambda' +import type { ApiGatewayRequestContext } from '@hono/aws-lambda' +import { handle } from '@hono/aws-lambda' type Bindings = { requestContext: ApiGatewayRequestContext @@ -209,7 +209,7 @@ Typically, the implementation requires writing chunks to NodeJS.WritableStream u ```ts import { Hono } from 'hono' -import { streamHandle } from 'hono/aws-lambda' +import { streamHandle } from '@hono/aws-lambda' import { streamText } from 'hono/streaming' const app = new Hono() diff --git a/docs/getting-started/basic.md b/docs/getting-started/basic.md index 14f21d2e2..eca5c2fd2 100644 --- a/docs/getting-started/basic.md +++ b/docs/getting-started/basic.md @@ -232,10 +232,10 @@ And, you can make your own middleware. ## Adapter There are Adapters for platform-dependent functions, e.g., handling static files or WebSocket. -For example, to handle WebSocket in Cloudflare Workers, import `hono/cloudflare-workers`. +They are published as separate packages. For example, to handle WebSocket in Cloudflare Workers, install and import `@hono/cloudflare-workers`. ```ts -import { upgradeWebSocket } from 'hono/cloudflare-workers' +import { upgradeWebSocket } from '@hono/cloudflare-workers' app.get( '/ws', diff --git a/docs/getting-started/bun.md b/docs/getting-started/bun.md index 53a014d74..38b3f2746 100644 --- a/docs/getting-started/bun.md +++ b/docs/getting-started/bun.md @@ -90,10 +90,14 @@ export default { // [!code ++] ## Serve static files -To serve static files, use `serveStatic` which is imported from `hono/bun`. +To serve static files, use `serveStatic` from the `@hono/bun` package. + +```sh +bun add @hono/bun +``` ```ts -import { serveStatic } from 'hono/bun' +import { serveStatic } from '@hono/bun' const app = new Hono() diff --git a/docs/getting-started/cloudflare-pages.md b/docs/getting-started/cloudflare-pages.md index 9908657a4..2b2bbad08 100644 --- a/docs/getting-started/cloudflare-pages.md +++ b/docs/getting-started/cloudflare-pages.md @@ -1,7 +1,7 @@ # Cloudflare Pages ::: warning -For new projects, Cloudflare now recommends using [Cloudflare Workers](/docs/getting-started/cloudflare-workers) instead of Cloudflare Pages. Workers supports static assets and offers a broader set of features. If you are starting a new full-stack application, see [Cloudflare Workers + Vite](/docs/getting-started/cloudflare-workers-vite), which is the successor to this Pages setup. +For new projects, Cloudflare now recommends using [Cloudflare Workers](/docs/getting-started/cloudflare-workers) instead of Cloudflare Pages. Workers supports static assets and offers a broader set of features. If you are starting a new full-stack application, see [Cloudflare Workers + Vite](/docs/getting-started/cloudflare-workers-vite), which is the successor to this Pages setup. The `hono/cloudflare-pages` adapter is deprecated and will be removed in Hono v5. ::: [Cloudflare Pages](https://pages.cloudflare.com) is an edge platform for full-stack web applications. diff --git a/docs/getting-started/deno.md b/docs/getting-started/deno.md index db64b3027..5a55b734d 100644 --- a/docs/getting-started/deno.md +++ b/docs/getting-started/deno.md @@ -58,11 +58,15 @@ Deno.serve({ port: 8787 }, app.fetch) // [!code ++] ## Serve static files -To serve static files, use `serveStatic` imported from `hono/deno`. +To serve static files, use `serveStatic` from the `@hono/deno` package. + +```sh +deno add jsr:@hono/deno +``` ```ts import { Hono } from 'hono' -import { serveStatic } from 'hono/deno' +import { serveStatic } from '@hono/deno' const app = new Hono() diff --git a/docs/getting-started/lambda-edge.md b/docs/getting-started/lambda-edge.md index ac5cecdc7..e09c2c0fd 100644 --- a/docs/getting-started/lambda-edge.md +++ b/docs/getting-started/lambda-edge.md @@ -18,7 +18,7 @@ Initialize your project with the `cdk` CLI. mkdir my-app cd my-app cdk init app -l typescript -npm i hono +npm i hono @hono/lambda-edge mkdir lambda ``` @@ -26,7 +26,7 @@ mkdir lambda mkdir my-app cd my-app cdk init app -l typescript -yarn add hono +yarn add hono @hono/lambda-edge mkdir lambda ``` @@ -34,7 +34,7 @@ mkdir lambda mkdir my-app cd my-app cdk init app -l typescript -pnpm add hono +pnpm add hono @hono/lambda-edge mkdir lambda ``` @@ -42,7 +42,7 @@ mkdir lambda mkdir my-app cd my-app cdk init app -l typescript -bun add hono +bun add hono @hono/lambda-edge mkdir lambda ``` @@ -54,7 +54,7 @@ Edit `lambda/index_edge.ts`. ```ts import { Hono } from 'hono' -import { handle } from 'hono/lambda-edge' +import { handle } from '@hono/lambda-edge' const app = new Hono() @@ -135,8 +135,8 @@ If you want to add Basic Auth and continue with request processing after verific ```ts import { Hono } from 'hono' import { basicAuth } from 'hono/basic-auth' -import type { Callback, CloudFrontRequest } from 'hono/lambda-edge' -import { handle } from 'hono/lambda-edge' +import type { Callback, CloudFrontRequest } from '@hono/lambda-edge' +import { handle } from '@hono/lambda-edge' type Bindings = { callback: Callback diff --git a/docs/getting-started/netlify.md b/docs/getting-started/netlify.md index 2a9126d9b..49ce1c181 100644 --- a/docs/getting-started/netlify.md +++ b/docs/getting-started/netlify.md @@ -42,7 +42,7 @@ Edit `netlify/edge-functions/index.ts`: ```ts import { Hono } from 'jsr:@hono/hono' -import { handle } from 'jsr:@hono/hono/netlify' +import { handle } from 'jsr:@hono/netlify' const app = new Hono() @@ -75,7 +75,7 @@ You can access the Netlify's `Context` through `c.env`: ```ts import { Hono } from 'jsr:@hono/hono' -import { handle } from 'jsr:@hono/hono/netlify' +import { handle } from 'jsr:@hono/netlify' // Import the type definition import type { Context } from 'https://edge.netlify.com/' diff --git a/docs/getting-started/nextjs.md b/docs/getting-started/nextjs.md index cb9382e72..8dbf1ee31 100644 --- a/docs/getting-started/nextjs.md +++ b/docs/getting-started/nextjs.md @@ -67,7 +67,7 @@ If you use the App Router, Edit `app/api/[[...route]]/route.ts`. Refer to the [S ```ts import { Hono } from 'hono' -import { handle } from 'hono/vercel' +import { handle } from '@hono/vercel' const app = new Hono().basePath('/api') @@ -78,6 +78,8 @@ app.get('/hello', (c) => { }) export const GET = handle(app) + +`handle` comes from the `@hono/vercel` package, which the starter installs. On an existing project, add it with `npm i @hono/vercel`. export const POST = handle(app) ``` diff --git a/docs/getting-started/service-worker.md b/docs/getting-started/service-worker.md index 449429f27..e4e41aef7 100644 --- a/docs/getting-started/service-worker.md +++ b/docs/getting-started/service-worker.md @@ -46,22 +46,22 @@ Next, install the necessary modules. ::: code-group ```sh [npm] -npm i hono +npm i hono @hono/service-worker npm i -D vite ``` ```sh [yarn] -yarn add hono +yarn add hono @hono/service-worker yarn add -D vite ``` ```sh [pnpm] -pnpm add hono +pnpm add hono @hono/service-worker pnpm add -D vite ``` ```sh [bun] -bun add hono +bun add hono @hono/service-worker bun add -D vite ``` @@ -118,7 +118,7 @@ In `sw.ts`, create an application using Hono and register it to the `fetch` even declare const self: ServiceWorkerGlobalScope import { Hono } from 'hono' -import { handle } from 'hono/service-worker' +import { handle } from '@hono/service-worker' const app = new Hono().basePath('/sw') app.get('/', (c) => c.text('Hello World')) @@ -132,7 +132,7 @@ The `fire()` function automatically calls `addEventListener('fetch', handle(app) ```ts import { Hono } from 'hono' -import { fire } from 'hono/service-worker' +import { fire } from '@hono/service-worker' const app = new Hono().basePath('/sw') app.get('/', (c) => c.text('Hello World')) diff --git a/docs/helpers/conninfo.md b/docs/helpers/conninfo.md index d00486fe0..93904e4d2 100644 --- a/docs/helpers/conninfo.md +++ b/docs/helpers/conninfo.md @@ -4,41 +4,43 @@ The ConnInfo Helper helps you to get the connection information. For example, yo ## Import +The adapter for each runtime is a separate package (`@hono/cloudflare-workers`, `@hono/deno`, `@hono/bun`, ...). Install the one for your runtime. + ::: code-group ```ts [Cloudflare Workers] import { Hono } from 'hono' -import { getConnInfo } from 'hono/cloudflare-workers' +import { getConnInfo } from '@hono/cloudflare-workers' ``` ```ts [Deno] import { Hono } from 'hono' -import { getConnInfo } from 'hono/deno' +import { getConnInfo } from '@hono/deno' ``` ```ts [Bun] import { Hono } from 'hono' -import { getConnInfo } from 'hono/bun' +import { getConnInfo } from '@hono/bun' ``` ```ts [Vercel] import { Hono } from 'hono' -import { getConnInfo } from 'hono/vercel' +import { getConnInfo } from '@hono/vercel' ``` ```ts [AWS Lambda] import { Hono } from 'hono' -import { getConnInfo } from 'hono/aws-lambda' +import { getConnInfo } from '@hono/aws-lambda' ``` ```ts [Netlify] import { Hono } from 'hono' -import { getConnInfo } from 'hono/netlify' +import { getConnInfo } from '@hono/netlify' ``` ```ts [Lambda@Edge] import { Hono } from 'hono' -import { getConnInfo } from 'hono/lambda-edge' +import { getConnInfo } from '@hono/lambda-edge' ``` ```ts [Node.js] diff --git a/docs/helpers/ssg.md b/docs/helpers/ssg.md index 6a3e90aed..4f7d1cc47 100644 --- a/docs/helpers/ssg.md +++ b/docs/helpers/ssg.md @@ -98,12 +98,12 @@ export interface FileSystemModule { ### Using adapters for Deno and Bun -If you want to use SSG on Deno or Bun, a `toSSG` function is provided for each file system. +If you want to use SSG on Deno or Bun, a `toSSG` function is provided by the `@hono/deno` and `@hono/bun` packages. For Deno: ```ts -import { toSSG } from 'hono/deno' +import { toSSG } from '@hono/deno' toSSG(app) // The second argument is an option typed `ToSSGOptions`. ``` @@ -111,7 +111,7 @@ toSSG(app) // The second argument is an option typed `ToSSGOptions`. For Bun: ```ts -import { toSSG } from 'hono/bun' +import { toSSG } from '@hono/bun' toSSG(app) // The second argument is an option typed `ToSSGOptions`. ``` diff --git a/docs/helpers/websocket.md b/docs/helpers/websocket.md index 9bb5843fd..f0a370e10 100644 --- a/docs/helpers/websocket.md +++ b/docs/helpers/websocket.md @@ -5,21 +5,23 @@ Currently Cloudflare Workers / Pages, Deno, Bun, and Node.js adapters are availa ## Import +The adapter for each runtime is a separate package (`@hono/cloudflare-workers`, `@hono/deno`, `@hono/bun`, ...). Install the one for your runtime. + ::: code-group ```ts [Cloudflare Workers] import { Hono } from 'hono' -import { upgradeWebSocket } from 'hono/cloudflare-workers' +import { upgradeWebSocket } from '@hono/cloudflare-workers' ``` ```ts [Deno] import { Hono } from 'hono' -import { upgradeWebSocket } from 'hono/deno' +import { upgradeWebSocket } from '@hono/deno' ``` ```ts [Bun] import { Hono } from 'hono' -import { upgradeWebSocket, websocket } from 'hono/bun' +import { upgradeWebSocket, websocket } from '@hono/bun' // ... @@ -108,7 +110,7 @@ See the examples using WebSocket Helper. ```ts // server.ts import { Hono } from 'hono' -import { upgradeWebSocket } from 'hono/cloudflare-workers' +import { upgradeWebSocket } from '@hono/cloudflare-workers' const app = new Hono().get( '/ws', @@ -143,7 +145,7 @@ ws.addEventListener('open', () => { ```tsx import { Hono } from 'hono' -import { upgradeWebSocket, websocket } from 'hono/bun' +import { upgradeWebSocket, websocket } from '@hono/bun' import { html } from 'hono/html' const app = new Hono() diff --git a/docs/middleware/builtin/combine.md b/docs/middleware/builtin/combine.md index 829bfad1b..4a63f107d 100644 --- a/docs/middleware/builtin/combine.md +++ b/docs/middleware/builtin/combine.md @@ -20,7 +20,7 @@ Here's an example of complex access control rules using Combine Middleware. ```ts import { Hono } from 'hono' import { bearerAuth } from 'hono/bearer-auth' -import { getConnInfo } from 'hono/cloudflare-workers' +import { getConnInfo } from '@hono/cloudflare-workers' import { every, some } from 'hono/combine' import { ipRestriction } from 'hono/ip-restriction' import { rateLimit } from '@/my-rate-limit' diff --git a/docs/middleware/builtin/ip-restriction.md b/docs/middleware/builtin/ip-restriction.md index f328a61d4..72132685e 100644 --- a/docs/middleware/builtin/ip-restriction.md +++ b/docs/middleware/builtin/ip-restriction.md @@ -15,7 +15,7 @@ For your application running on Bun, if you want to allow access only from local ```ts import { Hono } from 'hono' -import { getConnInfo } from 'hono/bun' +import { getConnInfo } from '@hono/bun' import { ipRestriction } from 'hono/ip-restriction' const app = new Hono() @@ -34,7 +34,7 @@ app.get('/', (c) => c.text('Hello Hono!')) Pass the `getConninfo` from the [ConnInfo helper](/docs/helpers/conninfo) appropriate for your environment as the first argument of `ipRestriction`. For example, for Deno, it would look like this: ```ts -import { getConnInfo } from 'hono/deno' +import { getConnInfo } from '@hono/deno' import { ipRestriction } from 'hono/ip-restriction' //...