hono-router

hono-router is a script that generates a file-based router for Hono, a small, simple, and ultrafast web framework for the Edges. It automatically creates routes based on your file structure and exports, making it easier to organize and maintain your Hono application.

Features

• Automatically generates routes based on your file structure
• Supports dynamic routes (e.g., [id].ts becomes :id in the route)
• Allows co-location of component files with routes
• Watches for file changes and regenerates the router
• Sorts routes to prioritize static paths over dynamic paths
• Supports multiple HTTP methods (GET, PUT, POST, DELETE, PATCH)
• Can be run with Bun for fast execution

Installation

1npm install hono-router

Usage

1. Create a directory structure for your routes and components. For example:

src/
  routes/
    index.ts
    users/
      index.ts
      [id].ts
      UserList.tsx
    posts/
      index.ts
      [id].ts
      PostEditor.tsx

2. In your route files, export functions for the HTTP methods you want to handle. For example, in src/routes/users/[id].ts:

1import { Context } from 'hono';
2
3export const onRequestGet = (c: Context) => {
4	const id = c.req.param('id');
5	return c.json({ message: `Get user ${id}` });
6};
7
8export const onRequestPut = (c: Context) => {
9	const id = c.req.param('id');
10	return c.json({ message: `Update user ${id}` });
11};

3. Run the router generator script:

1bunx hono-router src/routes router.ts

or

1npx hono-router src/routes router.ts

This will generate a router.ts file with all your routes.

4. In your main Hono app file, import and use the generated router:

1import { Hono } from 'hono';
2import { loadRoutes } from './router';
3
4const app = new Hono();
5loadRoutes(app);
6
7export default app;

Component Integration

hono-router allows you to co-locate component files with your routes. Any TypeScript or TypeScript JSX (.tsx) files that start with a capital letter are ignored by the router generation process. This enables you to keep your components close to the routes that use them without affecting the routing logic.

For example:

• src/routes/users/UserList.tsx will be ignored by the router
• src/routes/users/index.ts will be processed for route generation

This feature helps in maintaining a clean and organized project structure where components and their associated routes are kept together.

Watch Mode

The script automatically watches for changes in your routes directory and regenerates the router file when changes are detected.

Supported HTTP Methods

The generator supports the following HTTP methods:

• GET
• PUT
• POST
• DELETE
• PATCH

To use these methods, export functions with the corresponding names in your route files:

• onRequestGet
• onRequestPut
• onRequestPost
• onRequestDelete
• onRequestPatch

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the ISC License.