honox 0.1.8 → 0.1.10

package/README.md

@@ -1,8 +1,8 @@
 # HonoX
 
-**HonoX** is a simple and fast - _supersonic_ - meta framework for creating full-stack websites or Web APIs - (formerly _[Sonik](https://github.com/sonikjs/sonik)_). It stands on the shoulders of giants; built on [Hono](https://hono.dev/), [Vite](https://vitejs.dev/), and UI libraries.
+**HonoX** is a simple and fast meta-framework for creating full-stack websites or Web APIs - (formerly _[Sonik](https://github.com/sonikjs/sonik)_). It stands on the shoulders of giants; built on [Hono](https://hono.dev/), [Vite](https://vitejs.dev/), and UI libraries.
 
-**Note**: _HonoX is currently in a "alpha stage". Breaking changes are introduced without following semantic versioning._
+**Note**: _HonoX is currently in the "alpha stage". Breaking changes are introduced without following semantic versioning._
 
 ## Features
 
@@ -68,9 +68,9 @@ export default defineConfig({
 
 ### Server Entry File
 
-A server entry file is required. The file is should be placed at `app/server.ts`. This file is first called by the Vite during the development or build phase.
+A server entry file is required. The file should be placed at `app/server.ts`. This file is first called by the Vite during the development or build phase.
 
-In the entry file, simply initialize your app using the `createApp()` function. `app` will be an instance of Hono, so you can use Hono's middleware and the `showRoutes()`in`hono/dev`.
+In the entry file, simply initialize your app using the `createApp()` function. `app` will be an instance of Hono, so you can use Hono's middleware and the `showRoutes()` in `hono/dev`.
 
 ```ts
 // app/server.ts
@@ -528,22 +528,32 @@ export const POST = createRoute(zValidator('form', schema), async (c) => {
 
 Alternatively, you can use a `_middleware.(ts|tsx)` file in a directory to have that middleware applied to the current route, as well as all child routes. Middleware is ran in the order that it is listed within the array.
 
-An equivilant example to the previous Hono-style middleware configuration is as follows:
-
-```tsx
-// /app/_middleware.ts
+```ts
+// /app/routes/_middleware.ts
 import { createRoute } from 'honox/factory'
-import { z } from 'zod'
-import { zValidator } from '@hono/zod-validator'
+import { logger } from 'hono/logger'
+import { secureHeaders } from 'hono/secure-headers'
 
-const schema = z.object({
-  name: z.string().max(10),
-})
+export default createRoute(logger(), secureHeaders(), ...<more-middleware>)
+```
 
-export default createRoute(zValidator('form', schema), ...<more-middleware>)
+### Trailing Slash
+
+By default, trailing slashes are removed if the root file is an index file such as `index.tsx` or `index.mdx`.
+However, if you set the `trailingSlash` option to `true` as the following, the trailing slash is not removed.
+
+```ts
+import { createApp } from 'honox/server'
+
+const app = createApp({
+  trailingSlash: true,
+})
 ```
 
-Note that is some scenarios, auto-complete for the request body within the route may be lost depending on how the middleware was written.
+Like the followings:
+
+- `trailingSlash` is `false` (default): `app/routes/path/index.mdx` => `/path`
+- `trailingSlash` is `true`: `app/routes/path/index.mdx` => `/path/`
 
 ### Using Tailwind CSS
 
@@ -694,6 +704,7 @@ If you want to use Cloudflare's Bindings in your development environment, create
 ```toml
 name = "my-project-name"
 compatibility_date = "2023-12-01"
+pages_build_output_dir = "./dist"
 
 # [vars]
 # MY_VARIABLE = "production_value"
@@ -721,9 +732,6 @@ export default defineConfig({
 })
 ```
 
-> [!NOTE]
-> The `wrangler.toml` is not used in the Cloudflare Pages production environment. Please configure Bindings from the dashboard.
-
 ## Deployment
 
 Since a HonoX instance is essentially a Hono instance, it can be deployed on any platform that Hono supports.

package/dist/server/server.d.ts

@@ -4,12 +4,13 @@ import { Env, Hono, MiddlewareHandler, NotFoundHandler, ErrorHandler } from 'hon
 import { IMPORTING_ISLANDS_ID } from '../constants.js';
 
 declare const METHODS: readonly ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
-type AppFile = {
-    default: Hono;
-};
-type InnerMeta = {
+type HasIslandFile = {
     [key in typeof IMPORTING_ISLANDS_ID]?: boolean;
 };
+type InnerMeta = {} & HasIslandFile;
+type AppFile = {
+    default: Hono;
+} & InnerMeta;
 type RouteFile = {
     default?: Function;
 } & {
@@ -17,13 +18,13 @@ type RouteFile = {
 } & InnerMeta;
 type RendererFile = {
     default: MiddlewareHandler;
-};
+} & InnerMeta;
 type NotFoundFile = {
     default: NotFoundHandler;
-};
+} & InnerMeta;
 type ErrorFile = {
     default: ErrorHandler;
-};
+} & InnerMeta;
 type MiddlewareFile = {
     default: MiddlewareHandler[];
 };
@@ -37,6 +38,11 @@ type BaseServerOptions<E extends Env = Env> = {
     root: string;
     app?: Hono<E>;
     init?: InitFunction<E>;
+    /**
+     * Appends a trailing slash to URL if the route file is an index file, e.g., `index.tsx` or `index.mdx`.
+     * @default false
+     */
+    trailingSlash?: boolean;
 };
 type ServerOptions<E extends Env = Env> = Partial<BaseServerOptions<E>>;
 declare const createApp: <E extends Env>(options: BaseServerOptions<E>) => Hono<E, hono_types.BlankSchema, "/">;

package/dist/server/server.js

@@ -14,6 +14,7 @@ const createApp = (options) => {
   const root = options.root;
   const rootRegExp = new RegExp(`^${root}`);
   const app = options.app ?? new Hono();
+  const trailingSlash = options.trailingSlash ?? false;
   if (options.init) {
     options.init(app);
   }
@@ -24,7 +25,6 @@ const createApp = (options) => {
   const RENDERER_FILE = options.RENDERER;
   const rendererList = listByDirectory(RENDERER_FILE);
   const MIDDLEWARE_FILE = options.MIDDLEWARE;
-  const middlewareList = listByDirectory(MIDDLEWARE_FILE);
   const ROUTES_FILE = options.ROUTES;
   const routesMap = sortDirectoriesByDepth(groupByDirectory(ROUTES_FILE));
   const getPaths = (currentDirectory, fileList) => {
@@ -47,28 +47,34 @@ const createApp = (options) => {
   for (const map of routesMap) {
     for (const [dir, content] of Object.entries(map)) {
       const subApp = new Hono();
+      let hasIslandComponent = false;
       const rendererPaths = getPaths(dir, rendererList);
       rendererPaths.map((path) => {
         const renderer = RENDERER_FILE[path];
+        const importingIslands = renderer[IMPORTING_ISLANDS_ID];
+        if (importingIslands) {
+          hasIslandComponent = true;
+        }
         const rendererDefault = renderer.default;
         if (rendererDefault) {
           subApp.all("*", rendererDefault);
         }
       });
-      const middlewarePaths = getPaths(dir, middlewareList);
-      middlewarePaths.map((path) => {
-        const middleware = MIDDLEWARE_FILE[path];
-        const middlewareDefault = middleware.default;
-        if (middlewareDefault) {
-          subApp.use(...middlewareDefault);
+      const middlewareFile = Object.keys(MIDDLEWARE_FILE).find(
+        (x) => new RegExp(dir + "/_middleware.tsx?").test(x)
+      );
+      if (middlewareFile) {
+        const middleware = MIDDLEWARE_FILE[middlewareFile];
+        if (middleware.default) {
+          subApp.use(...middleware.default);
         }
-      });
+      }
       let rootPath = dir.replace(rootRegExp, "");
       rootPath = filePathToPath(rootPath);
       for (const [filename, route] of Object.entries(content)) {
         const importingIslands = route[IMPORTING_ISLANDS_ID];
         const setInnerMeta = createMiddleware(async function innerMeta(c, next) {
-          c.set(IMPORTING_ISLANDS_ID, importingIslands);
+          c.set(IMPORTING_ISLANDS_ID, importingIslands ? true : hasIslandComponent);
           await next();
         });
         const routeDefault = route.default;
@@ -97,6 +103,9 @@ const createApp = (options) => {
       }
       applyNotFound(subApp, dir, notFoundMap);
       applyError(subApp, dir, errorMap);
+      if (trailingSlash) {
+        rootPath = /\/$/.test(rootPath) ? rootPath : rootPath + "/";
+      }
       app.route(rootPath, subApp);
     }
   }
@@ -108,6 +117,13 @@ function applyNotFound(app, dir, map) {
       const notFound = content[NOTFOUND_FILENAME];
       if (notFound) {
         const notFoundHandler = notFound.default;
+        const importingIslands = notFound[IMPORTING_ISLANDS_ID];
+        if (importingIslands) {
+          app.use("*", (c, next) => {
+            c.set(IMPORTING_ISLANDS_ID, true);
+            return next();
+          });
+        }
         app.get("*", (c) => {
           c.status(404);
           return notFoundHandler(c);
@@ -119,12 +135,16 @@ function applyNotFound(app, dir, map) {
 function applyError(app, dir, map) {
   for (const [mapDir, content] of Object.entries(map)) {
     if (dir === mapDir) {
-      const error = content[ERROR_FILENAME];
-      if (error) {
-        const errorHandler = error.default;
-        app.onError((error2, c) => {
+      const errorFile = content[ERROR_FILENAME];
+      if (errorFile) {
+        const errorHandler = errorFile.default;
+        app.onError(async (error, c) => {
+          const importingIslands = errorFile[IMPORTING_ISLANDS_ID];
+          if (importingIslands) {
+            c.set(IMPORTING_ISLANDS_ID, importingIslands);
+          }
           c.status(500);
-          return errorHandler(error2, c);
+          return errorHandler(error, c);
         });
       }
     }

package/dist/server/with-defaults.d.ts

@@ -14,17 +14,25 @@ declare const createApp: <E extends Env>(options?: Partial<{
         PATCH?: hono_types.H[] | undefined;
     } & {
         __importing_islands?: boolean | undefined;
-    }) | {
+    }) | ({
         default: hono.Hono<Env, hono_types.BlankSchema, "/">;
-    }>;
+    } & {
+        __importing_islands?: boolean | undefined;
+    })>;
     RENDERER: Record<string, {
         default: hono.MiddlewareHandler;
+    } & {
+        __importing_islands?: boolean | undefined;
     }>;
     NOT_FOUND: Record<string, {
         default: hono.NotFoundHandler;
+    } & {
+        __importing_islands?: boolean | undefined;
     }>;
     ERROR: Record<string, {
         default: hono.ErrorHandler;
+    } & {
+        __importing_islands?: boolean | undefined;
     }>;
     MIDDLEWARE: Record<string, {
         default: hono.MiddlewareHandler[];
@@ -32,6 +40,7 @@ declare const createApp: <E extends Env>(options?: Partial<{
     root: string;
     app?: hono.Hono<E, hono_types.BlankSchema, "/"> | undefined;
     init?: ((app: hono.Hono<E, hono_types.BlankSchema, "/">) => void) | undefined;
+    trailingSlash?: boolean | undefined;
 }> | undefined) => hono.Hono<E, hono_types.BlankSchema, "/">;
 
 export { createApp };

package/dist/server/with-defaults.js

@@ -4,6 +4,7 @@ const createApp = (options) => {
     root: options?.root ?? "/app/routes",
     app: options?.app,
     init: options?.init,
+    trailingSlash: options?.trailingSlash,
     NOT_FOUND: options?.NOT_FOUND ?? import.meta.glob("/app/routes/**/_404.(ts|tsx)", {
       eager: true
     }),

package/dist/utils/file.js

@@ -33,12 +33,15 @@ const sortDirectoriesByDepth = (directories) => {
   const sortedKeys = Object.keys(directories).sort((a, b) => {
     const depthA = a.split("/").length;
     const depthB = b.split("/").length;
-    return depthB - depthA;
+    return depthA - depthB;
   });
-  const sortedDirectories = sortedKeys.map((key) => {
-    return { [key]: directories[key] };
-  });
-  return sortedDirectories;
+  if (sortedKeys.find((x) => /.*\/routes$/.test(x))) {
+    sortedKeys.push(sortedKeys[0]);
+    sortedKeys.shift();
+  }
+  return sortedKeys.map((key) => ({
+    [key]: directories[key]
+  }));
 };
 const listByDirectory = (files) => {
   const organizedFiles = {};

package/dist/vite/inject-importing-islands.js

@@ -8,7 +8,7 @@ import { IMPORTING_ISLANDS_ID } from "../constants.js";
 const generate = _generate.default ?? _generate;
 async function injectImportingIslands() {
   const isIslandRegex = new RegExp(/\/islands\//);
-  const routesRegex = new RegExp(/routes\/.*\.[t|j]sx$/);
+  const fileRegex = new RegExp(/(routes|_renderer|_error|_404)\/.*\.[tj]sx$/);
   const cache = {};
   const walkDependencyTree = async (baseFile, dependencyFile) => {
     const depPath = dependencyFile ? path.join(path.dirname(baseFile), dependencyFile) + ".tsx" : baseFile;
@@ -32,7 +32,7 @@ async function injectImportingIslands() {
   return {
     name: "inject-importing-islands",
     async transform(sourceCode, id) {
-      if (!routesRegex.test(id)) {
+      if (!fileRegex.test(id)) {
         return;
       }
       const hasIslandsImport = (await walkDependencyTree(id)).flat().some((x) => isIslandRegex.test(normalizePath(x)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {