honox 0.1.10 → 0.1.12

package/README.md

@@ -241,7 +241,7 @@ Let's create an application that includes a client side. Here, we will use hono/
 
 ### Project Structure
 
-The below is the project structure of a minimal application including a client side:
+Below is the project structure of a minimal application including a client side:
 
 ```txt
 .
@@ -261,7 +261,7 @@ The below is the project structure of a minimal application including a client s
 
 ### Renderer
 
-This is a `_renderer.tsx`, which will load the `/app/client.ts` entry file for the client. It will load the JavaScript file for the production according to the variable `import.meta.env.PROD`. And renders the inside of `<HasIslands />` if there are islands on that page.
+This is a `_renderer.tsx`, which will load the `/app/client.ts` entry file for the client. It will load the JavaScript file for production according to the variable `import.meta.env.PROD`. And renders the inside of `<HasIslands />` if there are islands on that page.
 
 ```tsx
 // app/routes/_renderer.tsx
@@ -324,7 +324,12 @@ createClient()
 
 ### Interactions
 
-Function components placed in `app/islands/*` - Island components - are also sent to the client side. For example, you can write interactive component such as the following counter:
+If you want to add interactions to your page, create Island components. Islands components should be:
+
+- Placed under `app/islands` directory or named with `_` prefix and `island.tsx` suffix like `_componentName.island.tsx`.
+- Should `default export function`.
+
+For example, you can write an interactive component such as the following counter:
 
 ```tsx
 // app/islands/counter.tsx
@@ -341,7 +346,7 @@ export default function Counter() {
 }
 ```
 
-When you load the component in a route file, it is rendered as Server-Side rendering and JavaScript is also send to the client-side.
+When you load the component in a route file, it is rendered as Server-Side rendering and JavaScript is also sent to the client side.
 
 ```tsx
 // app/routes/index.tsx
@@ -358,7 +363,7 @@ export default createRoute((c) => {
 })
 ```
 
-**Note**: You cannot access a Context object in Island components. Therefore, you should pass the value from components outside of Island.
+**Note**: You cannot access a Context object in Island components. Therefore, you should pass the value from components outside of the Island.
 
 ```ts
 import { useRequestContext } from 'hono/jsx-renderer'
@@ -779,7 +784,7 @@ Build command (including a client):
 vite build --mode client && vite build
 ```
 
-Deploy with the following commands after build. Ensure you have [Wrangler](https://developers.cloudflare.com/workers/wrangler/) installed:
+Deploy with the following commands after the build. Ensure you have [Wrangler](https://developers.cloudflare.com/workers/wrangler/) installed:
 
 ```txt
 wrangler pages deploy ./dist

package/dist/client/client.js

@@ -2,8 +2,11 @@ import { render } from "hono/jsx/dom";
 import { jsx as jsxFn } from "hono/jsx/dom/jsx-runtime";
 import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
 const createClient = async (options) => {
-  const FILES = options?.ISLAND_FILES ?? import.meta.glob("/app/islands/**/[a-zA-Z0-9[-]+.(tsx|ts)");
-  const root = options?.island_root ?? "/app/islands/";
+  const FILES = options?.ISLAND_FILES ?? {
+    ...import.meta.glob("/app/islands/**/[a-zA-Z0-9[-]+.(tsx|ts)"),
+    ...import.meta.glob("/app/routes/**/_[a-zA-Z0-9[-]+.island.(tsx|ts)")
+  };
+  const root = options?.island_root ?? "/app";
   const hydrateComponent = async (document2) => {
     const filePromises = Object.keys(FILES).map(async (filePath) => {
       const componentName = filePath.replace(root, "");

package/dist/server/server.js

@@ -13,6 +13,7 @@ const METHODS = ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
 const createApp = (options) => {
   const root = options.root;
   const rootRegExp = new RegExp(`^${root}`);
+  const getRootPath = (dir) => filePathToPath(dir.replace(rootRegExp, ""));
   const app = options.app ?? new Hono();
   const trailingSlash = options.trailingSlash ?? false;
   if (options.init) {
@@ -69,8 +70,6 @@ const createApp = (options) => {
           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) {
@@ -101,14 +100,21 @@ const createApp = (options) => {
           });
         }
       }
-      applyNotFound(subApp, dir, notFoundMap);
       applyError(subApp, dir, errorMap);
+      let rootPath = getRootPath(dir);
       if (trailingSlash) {
         rootPath = /\/$/.test(rootPath) ? rootPath : rootPath + "/";
       }
       app.route(rootPath, subApp);
     }
   }
+  for (const map of routesMap.reverse()) {
+    const dir = Object.entries(map)[0][0];
+    const subApp = new Hono();
+    applyNotFound(subApp, dir, notFoundMap);
+    const rootPath = getRootPath(dir);
+    app.route(rootPath, subApp);
+  }
   return app;
 };
 function applyNotFound(app, dir, map) {

package/dist/utils/file.js

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

package/dist/utils/file.test.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/file.test.js

@@ -0,0 +1,123 @@
+import {
+  filePathToPath,
+  groupByDirectory,
+  listByDirectory,
+  pathToDirectoryPath,
+  sortDirectoriesByDepth
+} from "./file";
+describe("filePathToPath", () => {
+  it("Should return a correct path", () => {
+    expect(filePathToPath("index.tsx")).toBe("/");
+    expect(filePathToPath("index.get.tsx")).toBe("/index.get");
+    expect(filePathToPath("about.tsx")).toBe("/about");
+    expect(filePathToPath("about/index.tsx")).toBe("/about");
+    expect(filePathToPath("about/me")).toBe("/about/me");
+    expect(filePathToPath("about/me/index.tsx")).toBe("/about/me");
+    expect(filePathToPath("about/me/address.tsx")).toBe("/about/me/address");
+    expect(filePathToPath("/index.tsx")).toBe("/");
+    expect(filePathToPath("/index.get.tsx")).toBe("/index.get");
+    expect(filePathToPath("/about.tsx")).toBe("/about");
+    expect(filePathToPath("/about/index.tsx")).toBe("/about");
+    expect(filePathToPath("/about/me")).toBe("/about/me");
+    expect(filePathToPath("/about/me/index.tsx")).toBe("/about/me");
+    expect(filePathToPath("/about/me/address.tsx")).toBe("/about/me/address");
+    expect(filePathToPath("/about/[name].tsx")).toBe("/about/:name");
+    expect(filePathToPath("/about/[...foo].tsx")).toBe("/about/*");
+    expect(filePathToPath("/about/[name]/address.tsx")).toBe("/about/:name/address");
+    expect(filePathToPath("/about/[arg1]/[arg2]")).toBe("/about/:arg1/:arg2");
+  });
+});
+describe("groupByDirectory", () => {
+  const files = {
+    "/app/routes/index.tsx": "file1",
+    "/app/routes/about.tsx": "file2",
+    "/app/routes/blog/index.tsx": "file3",
+    "/app/routes/blog/about.tsx": "file4",
+    "/app/routes/blog/posts/index.tsx": "file5",
+    "/app/routes/blog/posts/comments.tsx": "file6"
+  };
+  it("Should group by directories", () => {
+    expect(groupByDirectory(files)).toEqual({
+      "/app/routes": {
+        "index.tsx": "file1",
+        "about.tsx": "file2"
+      },
+      "/app/routes/blog": {
+        "index.tsx": "file3",
+        "about.tsx": "file4"
+      },
+      "/app/routes/blog/posts": {
+        "index.tsx": "file5",
+        "comments.tsx": "file6"
+      }
+    });
+  });
+});
+describe("sortDirectoriesByDepth", () => {
+  it("Should sort directories by the depth", () => {
+    expect(
+      sortDirectoriesByDepth({
+        "/dir": {
+          "index.tsx": "file1"
+        },
+        "/dir/blog/[id]": {
+          "index.tsx": "file2"
+        },
+        "/dir/blog/posts": {
+          "index.tsx": "file3"
+        },
+        "/dir/blog": {
+          "index.tsx": "file4"
+        }
+      })
+    ).toStrictEqual([
+      {
+        "/dir": {
+          "index.tsx": "file1"
+        }
+      },
+      {
+        "/dir/blog": {
+          "index.tsx": "file4"
+        }
+      },
+      {
+        "/dir/blog/posts": {
+          "index.tsx": "file3"
+        }
+      },
+      {
+        "/dir/blog/[id]": {
+          "index.tsx": "file2"
+        }
+      }
+    ]);
+  });
+});
+describe("listByDirectory", () => {
+  it("Should list files by their directory", () => {
+    const files = {
+      "/app/routes/blog/posts/_renderer.tsx": "foo3",
+      "/app/routes/_renderer.tsx": "foo",
+      "/app/routes/blog/_renderer.tsx": "foo2"
+    };
+    const result = listByDirectory(files);
+    expect(result).toEqual({
+      "/app/routes": ["/app/routes/_renderer.tsx"],
+      "/app/routes/blog": ["/app/routes/blog/_renderer.tsx", "/app/routes/_renderer.tsx"],
+      "/app/routes/blog/posts": [
+        "/app/routes/blog/posts/_renderer.tsx",
+        "/app/routes/blog/_renderer.tsx",
+        "/app/routes/_renderer.tsx"
+      ]
+    });
+  });
+});
+describe("pathToDirectoryPath", () => {
+  it("Should return the directory path", () => {
+    expect(pathToDirectoryPath("/")).toBe("/");
+    expect(pathToDirectoryPath("/about.tsx")).toBe("/");
+    expect(pathToDirectoryPath("/posts/index.tsx")).toBe("/posts/");
+    expect(pathToDirectoryPath("/posts/authors/index.tsx")).toBe("/posts/authors/");
+  });
+});

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

@@ -7,7 +7,7 @@ import { normalizePath } from "vite";
 import { IMPORTING_ISLANDS_ID } from "../constants.js";
 const generate = _generate.default ?? _generate;
 async function injectImportingIslands() {
-  const isIslandRegex = new RegExp(/\/islands\//);
+  const isIslandRegex = new RegExp(/(\/islands\/|\_[a-zA-Z0-9[-]+\.island\.[tj]sx$)/);
   const fileRegex = new RegExp(/(routes|_renderer|_error|_404)\/.*\.[tj]sx$/);
   const cache = {};
   const walkDependencyTree = async (baseFile, dependencyFile) => {

package/dist/vite/island-components.js

@@ -160,16 +160,16 @@ function islandComponents(options) {
     },
     async load(id) {
       const defaultIsIsland = (id2) => {
-        const islandDirectoryPath = path.join(root, "app/islands");
+        const islandDirectoryPath = path.join(root, "app");
         return path.resolve(id2).startsWith(islandDirectoryPath);
       };
       const matchIslandPath = options?.isIsland ?? defaultIsIsland;
       if (!matchIslandPath(id)) {
         return;
       }
-      const match = id.match(/\/islands\/(.+?\.tsx)$/);
+      const match = id.match(/(\/islands\/.+?\.tsx$)|(\/routes\/.*\_[a-zA-Z0-9[-]+\.island\.tsx$)/);
       if (match) {
-        const componentName = match[1];
+        const componentName = match[0];
         const contents = await fs.readFile(id, "utf-8");
         const code = transformJsxTags(contents, componentName);
         if (code) {

package/dist/vite/island-components.test.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/vite/island-components.test.js

@@ -0,0 +1,102 @@
+import { transformJsxTags } from "./island-components";
+describe("transformJsxTags", () => {
+  it("Should add component-wrapper and component-name attribute", () => {
+    const code = `export default function Badge() {
+      return <h1>Hello</h1>
+    }`;
+    const result = transformJsxTags(code, "Badge.tsx");
+    expect(result).toBe(
+      `const BadgeOriginal = function () {
+  return <h1>Hello</h1>;
+};
+const WrappedBadge = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="Badge.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><BadgeOriginal {...props}></BadgeOriginal>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <BadgeOriginal {...props}></BadgeOriginal>;
+};
+export default WrappedBadge;`
+    );
+  });
+  it("Should not transform if it is blank", () => {
+    const code = transformJsxTags("", "Badge.tsx");
+    expect(code).toBe("");
+  });
+  it("async", () => {
+    const code = `export default async function AsyncComponent() {
+      return <h1>Hello</h1>
+    }`;
+    const result = transformJsxTags(code, "AsyncComponent.tsx");
+    expect(result).toBe(
+      `const AsyncComponentOriginal = async function () {
+  return <h1>Hello</h1>;
+};
+const WrappedAsyncComponent = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="AsyncComponent.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><AsyncComponentOriginal {...props}></AsyncComponentOriginal>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <AsyncComponentOriginal {...props}></AsyncComponentOriginal>;
+};
+export default WrappedAsyncComponent;`
+    );
+  });
+  it("unnamed", () => {
+    const code = `export default async function() {
+      return <h1>Hello</h1>
+    }`;
+    const result = transformJsxTags(code, "UnnamedComponent.tsx");
+    expect(result).toBe(
+      `const __HonoIsladComponent__Original = async function () {
+  return <h1>Hello</h1>;
+};
+const Wrapped__HonoIsladComponent__ = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="UnnamedComponent.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>;
+};
+export default Wrapped__HonoIsladComponent__;`
+    );
+  });
+  it("arrow - block", () => {
+    const code = `export default () => {
+      return <h1>Hello</h1>
+    }`;
+    const result = transformJsxTags(code, "UnnamedComponent.tsx");
+    expect(result).toBe(
+      `const __HonoIsladComponent__Original = () => {
+  return <h1>Hello</h1>;
+};
+const Wrapped__HonoIsladComponent__ = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="UnnamedComponent.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>;
+};
+export default Wrapped__HonoIsladComponent__;`
+    );
+  });
+  it("arrow - expression", () => {
+    const code = "export default () => <h1>Hello</h1>";
+    const result = transformJsxTags(code, "UnnamedComponent.tsx");
+    expect(result).toBe(
+      `const __HonoIsladComponent__Original = () => <h1>Hello</h1>;
+const Wrapped__HonoIsladComponent__ = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="UnnamedComponent.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <__HonoIsladComponent__Original {...props}></__HonoIsladComponent__Original>;
+};
+export default Wrapped__HonoIsladComponent__;`
+    );
+  });
+  it("export via variable", () => {
+    const code = "export default ExportViaVariable";
+    const result = transformJsxTags(code, "ExportViaVariable.tsx");
+    expect(result).toBe(
+      `const WrappedExportViaVariable = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="ExportViaVariable.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><ExportViaVariable {...props}></ExportViaVariable>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <ExportViaVariable {...props}></ExportViaVariable>;
+};
+export default WrappedExportViaVariable;`
+    );
+  });
+  it("export via specifier", () => {
+    const code = `const utilityFn = () => {}
+const ExportViaVariable = () => <h1>Hello</h1>
+export { utilityFn, ExportViaVariable as default }`;
+    const result = transformJsxTags(code, "ExportViaVariable.tsx");
+    expect(result).toBe(
+      `const utilityFn = () => {};
+const ExportViaVariable = () => <h1>Hello</h1>;
+const WrappedExportViaVariable = function (props) {
+  return import.meta.env.SSR ? <honox-island component-name="ExportViaVariable.tsx" data-serialized-props={JSON.stringify(Object.fromEntries(Object.entries(props).filter(([key]) => key !== "children")))}><ExportViaVariable {...props}></ExportViaVariable>{props.children ? <template data-hono-template="">{props.children}</template> : null}</honox-island> : <ExportViaVariable {...props}></ExportViaVariable>;
+};
+export { utilityFn, WrappedExportViaVariable as default };`
+    );
+  });
+});

package/package.json

@@ -1,24 +1,22 @@
 {
   "name": "honox",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
     "test": "bun typecheck && bun test:unit && bun test:integration && bun test:e2e",
-    "test:unit": "vitest --run test/unit",
-    "test:integration": "bun test:integration:api && bun test:integration:hono-jsx",
-    "test:integration:hono-jsx": "vitest run -c ./test/hono-jsx/vitest.config.ts ./test/hono-jsx/integration.test.ts",
-    "test:integration:hono-jsx:watch": "vitest -c ./test/hono-jsx/vitest.config.ts ./test/hono-jsx/integration.test.ts",
-    "test:integration:api": "vitest run -c ./test/api/vitest.config.ts ./test/api/integration.test.ts",
-    "test:e2e": "playwright test -c ./test/hono-jsx/playwright.config.ts ./test/hono-jsx/e2e.test.ts",
-    "test:yarn": "yarn test:unit && yarn test:integration:api && yarn test:integration:hono-jsx && yarn test:e2e",
+    "test:unit": "vitest --run ./src",
+    "test:integration": "bun test:integration:api && bun test:integration:apps",
+    "test:integration:api": "vitest --run ./test-integration/api.test.ts",
+    "test:integration:apps": "vitest --run -c ./test-integration/vitest.config.ts ./test-integration/apps.test.ts",
+    "test:e2e": "playwright test -c ./test-e2e/playwright.config.ts ./test-e2e/e2e.test.ts",
     "typecheck": "tsc --noEmit",
     "build": "tsup && publint",
     "watch": "tsup --watch",
-    "lint": "eslint --ext js,ts src test",
-    "lint:fix": "eslint --ext js,ts src test --fix",
-    "format": "prettier --check \"src/**/*.{js,ts}\" \"test/**/*.{js,ts}\"",
-    "format:fix": "prettier --write \"src/**/*.{js,ts}\" \"test/**/*.{js,ts}\"",
+    "lint": "eslint --ext js,ts src mocks test-integration test-e2e",
+    "lint:fix": "eslint --ext js,ts src mocks test-integration test-e2e --fix",
+    "format": "prettier --check \"src/**/*.{js,ts}\" \"mocks/**/*.{js,ts}\" \"test-*/**/*.{js,ts}\"",
+    "format:fix": "prettier --write \"src/**/*.{js,ts}\" \"mocks/**/*.{js,ts}\" \"test-*/**/*.{js,ts}\"",
     "prerelease": "bun run test && bun run build",
     "release": "np"
   },
@@ -107,7 +105,7 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.9.0",
+    "@hono/vite-dev-server": "^0.11.0",
     "precinct": "^11.0.5"
   },
   "peerDependencies": {
@@ -128,8 +126,8 @@
     "publint": "^0.2.7",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vite": "^5.2.8",
+    "vitest": "^1.4.0"
   },
   "engines": {
     "node": ">=18.14.1"