Gathering detailed insights and metrics for hono-jsx-router
Gathering detailed insights and metrics for hono-jsx-router
Installations
npm install hono-jsx-routerDeveloper Guide
BETA
Typescript
No
Module System
ESM
Min. Node Version
>=16.0.0
Node Version
20.2.0
NPM Version
9.6.6
Score
71.8
Supply Chain
99.4
Quality
78.3
Maintenance
50
Vulnerability
100
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
3,108
Last Day
1
Last Week
1
Last Month
19
Last Year
693
Bundle Size
278.00 B
Minified
205.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.5.0
Package Id
hono-jsx-router@1.5.0
Unpacked Size
8.00 MB
Size
2.93 MB
File Count
34
NPM Version
9.6.6
Node Version
20.2.0
Published on
Jun 13, 2023
Total Downloads
Cumulative downloads
Total Downloads
3,108
Last Day
0%
1
Compared to previous day
Last Week
0%
1
Compared to previous week
Last Month
-83.5%
19
Compared to previous month
Last Year
-71.3%
693
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
JSXRouter
JSXRouter is a file-based router for Hono.js with the JSX middleware.
Table of Contents
Installation
1npm i --save hono-jsx-router
Usage
1import { Hono } from 'hono'; 2import { JSXRouter } from 'hono-jsx-router'; 3 4const jsxRouter: JSXRouter<any> = new JSXRouter({ 5 config: { 6 // JSXRouter config 7 } 8}); 9 10const app = new Hono({ 11 router: jsxRouter 12}); 13 14jsxRouter.applyRoutes();
Config
package.json:
1{ 2 //... 3 "scripts": { 4 "build": "npx jsx-combine" 5 }, 6 "dependencies": { 7 "hono": "^3.2.0", 8 "hono-jsx-router": "^1.3.0" 9 }, 10 "jsxRouter": { 11 "path": "src/routes" 12 } 13}
index.ts:
1import { Hono } from 'hono';
2import { JSXRouter } from 'hono-jsx-router';
3
4const jsxRouter: JSXRouter<any> = new JSXRouter({
5 config: {
6 layout: {
7 // layout config
8 props: {
9 // props that can be passed to layouts
10 }
11 },
12 page: {
13 // page config
14 props: {
15 // props that can be passed to pages
16 }
17 }
18 }
19});
20
21const app = new Hono({
22 router: jsxRouter
23});
24
25jsxRouter.applyRoutes();The props object can take strings or functions as values. If the value is a function, the Context object is passed to it.
Pages
In the directory configured as path in your package.json, place JSX files (.tsx). If you configure path to be ./src/routes, then JSXRouter will serve the files found there, The names should reflect the desired route. For example, if you have a file called about.tsx, and you are using JSXRouter at / of your site, this file will be served at /about.
Subfolders
You can have multiple folders as needed, for when you need multiple subpages under /about, you can create an about folder and put as many subpages there that you need.
Wildcards
You can also add files that has a wildcard in its name to catch all routes that aren't handled by sibling files. So you can have a directory structure like:
src/routes/about/
./index.tsx
./other_page.tsx
./*.tsx
You will end up with routes to /about/, /about/other_page/, and /about/*. The wildcard does not override the other two routes here.
Layout
You can provide a common layout in a file called _layout.tsx. This will be used to wrap every page in the directory. Here is an example layout:
1import { html } from 'hono/html'; 2export default (props: { children?: any }) => { 3 return html`<!DOCTYPE html> 4<html lang="EN-US"> 5 <head> 6 <meta charSet="utf-8" /> 7 <meta name="viewport" content="width=device-width" /> 8 <meta name="theme-color" media="(prefers-color-scheme: light)" content="lightgray" /> 9 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="gray" /> 10 <title>Example Site</title> 11 <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" /> 12 </head> 13 <body>${props.children}</body> 14</html>`; 15};
It is recommended to create a components directory alongside your routes directory, placing JSX files there to be imported into your pages. For example, say you have src/components/Header.tsx, it could contain something like this:
1export default (props: { children?: any }) => { 2 return ( 3 <header> 4 <a href="/">Home</a> 5 <a href="/about">About</a> 6 <a href="/blog">Blog</a> 7 </header> 8 ) 9}
Then you can use it in a page, like src/routes/index.tsx:
1import Header from '../components/Header'; 2export default (props: {}) => { 3 return (<> 4 <Header /> 5 <h1>Home</h1> 6 <p>Hello world!</p> 7 </>) 8};
Context
Each page has access to Hono's Context object via props. Declare it like this to use it:
1import type { Context } from 'hono'; 2export default (props: { c: Context }) => { 3 // ... 4};
Fallback Routers
When using the basic import of JSXRouter, it will use Hono's LinearRouter to handle routes not found in the file structure. You can pick a different router depending on your use case by importing from one of the presets:
- LinearRouter:
import { JSXRouter } from 'hono-jsx-router/linear'; - PatternRouter:
import { JSXRouter } from 'hono-jsx-router/pattern'; - RegExpRouter:
import { JSXRouter } from 'hono-jsx-router/reg-exp'; - SmartRouter*:
import { JSXRouter } from 'hono-jsx-router/smart'; - TrieRouter:
import { JSXRouter } from 'hono-jsx-router/trie';
*When using the SmartRouter, you will need to specify the routers it should pick from:
1import { Hono } from 'hono'; 2import { JSXRouter } from 'hono-jsx-router/smart'; 3 4const jsxRouter: JSXRouter<any> = new JSXRouter({ 5 config: { 6 // JSXRouter config 7 }, 8 routers: [ 9 new RegExpRouter(), 10 new TrieRouter() 11 ] 12});
Query Parameters
A JSX page can receive query parameters. To access them, add params to your props argument, like below:
1export default (props: { params:? Record<string, string[]> }) => { 2 //... 3};
Then you can access the query parameters anywhere in the page. For example, if a user browses to /?foo=bar&abc=xyz, you can access these query parameters like so:
1export default (props: { params:? Record<string, string[]> }) => { 2 return (<> 3 <h1>Home</h1> 4 <p>Hello world!</p> 5 <p>You query for foo is {props.params.foo[0]} and your query for abc is {props.params.abc[0]}.</p> 6 </>) 7};
This will result in the following HTML:
1<h1>Home</h1> 2<p>Hello world!</p> 3<p>You query for foo is bar and your query for abc is xyz.</p>
Since the params are string arrays (string[]), if there are multiple instances of a key in a query, all of the values can be accessed in order by index. Internally, this uses HonoRequest.queries().
Known Issues
- Need to add a way to set per page
<head>attributes. - Subfolder layouts are not currently supported, but is a planned feature.
No vulnerabilities found.
No security vulnerabilities found.