honox 0.1.40 → 0.1.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/dist/server/server.js +20 -5
- package/dist/server/with-defaults.js +3 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -44,6 +44,8 @@ Below is a typical project structure for a HonoX application.
|
|
|
44
44
|
│ │ ├── _404.tsx // not found page
|
|
45
45
|
│ │ ├── _error.tsx // error page
|
|
46
46
|
│ │ ├── _renderer.tsx // renderer definition
|
|
47
|
+
│ │ ├── merch
|
|
48
|
+
│ │ │ └── [...slug].tsx // matches `/merch/:category`, `/merch/:category/:item`, `/merch/:category/:item/:variant`
|
|
47
49
|
│ │ ├── about
|
|
48
50
|
│ │ │ └── [name].tsx // matches `/about/:name`
|
|
49
51
|
│ │ ├── blog
|
|
@@ -541,6 +543,60 @@ Adjust `tsconfig.json` jsx factory function option.
|
|
|
541
543
|
|
|
542
544
|
```
|
|
543
545
|
|
|
546
|
+
#### Use React with `<Script />`
|
|
547
|
+
|
|
548
|
+
If you export a manifest file in `dist/.vite/manifest.json`, you can easily write some codes using `<Script />`.
|
|
549
|
+
|
|
550
|
+
```tsx
|
|
551
|
+
// app/routes/_renderer.tsx
|
|
552
|
+
import { reactRenderer } from '@hono/react-renderer'
|
|
553
|
+
import { Script } from 'honox/server'
|
|
554
|
+
|
|
555
|
+
export default reactRenderer(({ children, title }) => {
|
|
556
|
+
return (
|
|
557
|
+
<html lang='en'>
|
|
558
|
+
<head>
|
|
559
|
+
<meta charSet='UTF-8' />
|
|
560
|
+
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
|
|
561
|
+
<Script src='/app/client.ts' async />
|
|
562
|
+
{title ? <title>{title}</title> : ''}
|
|
563
|
+
</head>
|
|
564
|
+
<body>{children}</body>
|
|
565
|
+
</html>
|
|
566
|
+
)
|
|
567
|
+
})
|
|
568
|
+
```
|
|
569
|
+
|
|
570
|
+
Configure react in `vite.config.ts`.
|
|
571
|
+
|
|
572
|
+
```ts
|
|
573
|
+
// vite.config.ts
|
|
574
|
+
import build from '@hono/vite-build/cloudflare-pages'
|
|
575
|
+
import honox from 'honox/vite'
|
|
576
|
+
import { defineConfig } from 'vite'
|
|
577
|
+
|
|
578
|
+
export default defineConfig(({ mode }) => {
|
|
579
|
+
if (mode === 'client') {
|
|
580
|
+
return {
|
|
581
|
+
build: {
|
|
582
|
+
rollupOptions: {
|
|
583
|
+
input: ['./app/client.ts'],
|
|
584
|
+
},
|
|
585
|
+
manifest: true,
|
|
586
|
+
emptyOutDir: false,
|
|
587
|
+
},
|
|
588
|
+
}
|
|
589
|
+
} else {
|
|
590
|
+
return {
|
|
591
|
+
ssr: {
|
|
592
|
+
external: ['react', 'react-dom'],
|
|
593
|
+
},
|
|
594
|
+
plugins: [honox(), build()],
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
})
|
|
598
|
+
```
|
|
599
|
+
|
|
544
600
|
## Guides
|
|
545
601
|
|
|
546
602
|
### Nested Layouts
|
|
@@ -655,6 +711,26 @@ Like the followings:
|
|
|
655
711
|
- `trailingSlash` is `false` (default): `app/routes/path/index.mdx` => `/path`
|
|
656
712
|
- `trailingSlash` is `true`: `app/routes/path/index.mdx` => `/path/`
|
|
657
713
|
|
|
714
|
+
### Excluding Files and Directories from Routes
|
|
715
|
+
|
|
716
|
+
By default, directories and files starting with `-` are excluded from routes.
|
|
717
|
+
|
|
718
|
+
Example:
|
|
719
|
+
|
|
720
|
+
```
|
|
721
|
+
routes/
|
|
722
|
+
├── posts.tsx
|
|
723
|
+
├── -post-list.tsx // 👈🏼 ignored
|
|
724
|
+
├── -components/ // 👈🏼 ignored
|
|
725
|
+
│ ├── header.tsx // 👈🏼 ignored
|
|
726
|
+
│ ├── footer.tsx // 👈🏼 ignored
|
|
727
|
+
│ └── ...
|
|
728
|
+
```
|
|
729
|
+
|
|
730
|
+
In this example, `routes/posts.tsx` is routed to `/posts`, but other items starting with `-` are not routed.
|
|
731
|
+
|
|
732
|
+
This feature is useful for colocation.
|
|
733
|
+
|
|
658
734
|
### Using Tailwind CSS
|
|
659
735
|
|
|
660
736
|
Given that HonoX is Vite-centric, if you wish to utilize [Tailwind CSS](https://tailwindcss.com/), basically adhere to [the official instructions](https://tailwindcss.com/docs/installation/using-vite).
|
package/dist/server/server.js
CHANGED
|
@@ -17,6 +17,7 @@ const createApp = (options) => {
|
|
|
17
17
|
const getRootPath = (dir) => filePathToPath(dir.replace(rootRegExp, ""));
|
|
18
18
|
const app = options.app ?? new Hono();
|
|
19
19
|
const trailingSlash = options.trailingSlash ?? false;
|
|
20
|
+
const appliedMiddleware = /* @__PURE__ */ new Set();
|
|
20
21
|
app.use(async function ShareContext(c, next) {
|
|
21
22
|
await contextStorage.run(c, () => next());
|
|
22
23
|
});
|
|
@@ -80,13 +81,27 @@ const createApp = (options) => {
|
|
|
80
81
|
subApp.all("*", rendererDefault);
|
|
81
82
|
}
|
|
82
83
|
});
|
|
83
|
-
const
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
84
|
+
const escapeDir = (directory) => directory.replaceAll("[", "\\[").replaceAll("]", "\\]").replaceAll("(", "\\(").replaceAll(")", "\\)");
|
|
85
|
+
const findMiddleware = (directory) => Object.keys(MIDDLEWARE_FILE).find(
|
|
86
|
+
(x) => new RegExp(escapeDir(directory) + "/_middleware.tsx?").test(x)
|
|
87
|
+
);
|
|
88
|
+
let middlewareFile = findMiddleware(dir);
|
|
89
|
+
if (!middlewareFile) {
|
|
90
|
+
const dirParts = dir.split("/");
|
|
91
|
+
for (let i = dirParts.length - 1; i >= 0; i--) {
|
|
92
|
+
const parentDir = dirParts.slice(0, i).join("/");
|
|
93
|
+
middlewareFile = findMiddleware(parentDir);
|
|
94
|
+
if (middlewareFile) break;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
87
97
|
if (middlewareFile) {
|
|
88
98
|
const middleware = MIDDLEWARE_FILE[middlewareFile];
|
|
89
|
-
|
|
99
|
+
const middlewareDir = middlewareFile.replace("/_middleware.tsx", "").replace("/_middleware.ts", "");
|
|
100
|
+
const shouldApply = middlewareDir === dir || !appliedMiddleware.has(middlewareFile) && dir.startsWith(middlewareDir + "/");
|
|
101
|
+
if (middleware.default && shouldApply) {
|
|
102
|
+
if (!appliedMiddleware.has(middlewareFile)) {
|
|
103
|
+
appliedMiddleware.add(middlewareFile);
|
|
104
|
+
}
|
|
90
105
|
subApp.use(...middleware.default);
|
|
91
106
|
}
|
|
92
107
|
}
|
|
@@ -19,8 +19,9 @@ const createApp = (options) => {
|
|
|
19
19
|
}),
|
|
20
20
|
ROUTES: options?.ROUTES ?? import.meta.glob(
|
|
21
21
|
[
|
|
22
|
-
"/app/routes/**/!(_
|
|
23
|
-
"/app/routes/.well-known/**/!(_
|
|
22
|
+
"/app/routes/**/!(_*|-*|$*|*.test|*.spec).(ts|tsx|md|mdx)",
|
|
23
|
+
"/app/routes/.well-known/**/!(_*|-*|$*|*.test|*.spec).(ts|tsx|md|mdx)",
|
|
24
|
+
"!/app/routes/**/-*/**/*"
|
|
24
25
|
],
|
|
25
26
|
{
|
|
26
27
|
eager: true
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "honox",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.42",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"@babel/parser": "7.25.6",
|
|
114
114
|
"@babel/traverse": "7.25.6",
|
|
115
115
|
"@babel/types": "7.25.6",
|
|
116
|
-
"@hono/vite-dev-server": "0.19.
|
|
116
|
+
"@hono/vite-dev-server": "0.19.1",
|
|
117
117
|
"jsonc-parser": "3.3.1",
|
|
118
118
|
"precinct": "12.1.2"
|
|
119
119
|
},
|