honox 0.1.39 → 0.1.41
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 +81 -0
- package/dist/server/server.js +1 -1
- package/dist/server/utils/file.js +1 -1
- package/dist/server/with-defaults.js +3 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -44,8 +44,15 @@ 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`
|
|
51
|
+
│ │ ├── blog
|
|
52
|
+
│ │ │ ├── index.tsx // matches /blog
|
|
53
|
+
│ │ │ └── (content)
|
|
54
|
+
│ │ │ ├── _renderer.tsx // renderer definition for routes inside this directory
|
|
55
|
+
│ │ │ └── [name].tsx // matches `/blog/:name`
|
|
49
56
|
│ │ └── index.tsx // matches `/`
|
|
50
57
|
│ └── server.ts // server entry file
|
|
51
58
|
├── package.json
|
|
@@ -536,6 +543,60 @@ Adjust `tsconfig.json` jsx factory function option.
|
|
|
536
543
|
|
|
537
544
|
```
|
|
538
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
|
+
|
|
539
600
|
## Guides
|
|
540
601
|
|
|
541
602
|
### Nested Layouts
|
|
@@ -650,6 +711,26 @@ Like the followings:
|
|
|
650
711
|
- `trailingSlash` is `false` (default): `app/routes/path/index.mdx` => `/path`
|
|
651
712
|
- `trailingSlash` is `true`: `app/routes/path/index.mdx` => `/path/`
|
|
652
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
|
+
|
|
653
734
|
### Using Tailwind CSS
|
|
654
735
|
|
|
655
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
|
@@ -81,7 +81,7 @@ const createApp = (options) => {
|
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
const middlewareFile = Object.keys(MIDDLEWARE_FILE).find((x) => {
|
|
84
|
-
const replacedDir = dir.replaceAll("[", "\\[").
|
|
84
|
+
const replacedDir = dir.replaceAll("[", "\\[").replaceAll("]", "\\]").replaceAll("(", "\\(").replaceAll(")", "\\)");
|
|
85
85
|
return new RegExp(replacedDir + "/_middleware.tsx?").test(x);
|
|
86
86
|
});
|
|
87
87
|
if (middlewareFile) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const filePathToPath = (filePath) => {
|
|
2
|
-
filePath = filePath.replace(/\.tsx?$/g, "").replace(/\.mdx?$/g, "").replace(/^\/?index$/, "/").replace(/\/index$/, "").replace(/\[\.{3}.+\]/, "*").replace(/\[(.+?)\]/g, ":$1");
|
|
2
|
+
filePath = filePath.replace(/\.tsx?$/g, "").replace(/\.mdx?$/g, "").replace(/^\/?index$/, "/").replace(/\/index$/, "").replace(/\[\.{3}.+\]/, "*").replace(/\((.+?)\)/g, "").replace(/\[(.+?)\]/g, ":$1").replace(/\/\//g, "/");
|
|
3
3
|
return /^\//.test(filePath) ? filePath : "/" + filePath;
|
|
4
4
|
};
|
|
5
5
|
const groupByDirectory = (files) => {
|
|
@@ -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.41",
|
|
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
|
},
|