honox 0.1.16 → 0.1.17

package/README.md

@@ -313,7 +313,7 @@ export default jsxRenderer(({ children }) => {
 
 #### nonce Attribute
 
-If you want to add a `nonce` attribute to `<Script />`, `<script />`, or `<style />` element, you can use [Security Headers Middleware](https://hono.dev/middleware/builtin/secure-headers).
+If you want to add a `nonce` attribute to `<Script />` or `<script />` element, you can use [Security Headers Middleware](https://hono.dev/middleware/builtin/secure-headers).
 
 Define the middleware:
 
@@ -322,14 +322,13 @@ Define the middleware:
 import { createRoute } from 'honox/factory'
 import { secureHeaders, NONCE } from 'hono/secure-headers'
 
-export default createRoute(
-  secureHeaders({
-    contentSecurityPolicy: {
-      scriptSrc: [NONCE],
-      styleSrc: [NONCE],
-    },
-  })
-)
+secureHeaders({
+  contentSecurityPolicy: import.meta.env.PROD
+    ? {
+        scriptSrc: [NONCE],
+      }
+    : undefined,
+})
 ```
 
 You can get the `nonce` value with `c.get('secureHeadersNonce')`:
@@ -366,7 +365,7 @@ createClient()
 
 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`.
+- Placed under `app/islands` directory or named with `$` prefix like `$componentName.tsx`.
 - It should be exported as a `default` or a proper component name that uses camel case but does not contain `_` and is not all uppercase.
 
 For example, you can write an interactive component such as the following counter:
@@ -748,7 +747,8 @@ If you want to use Cloudflare's Bindings in your development environment, create
 
 ```toml
 name = "my-project-name"
-compatibility_date = "2023-12-01"
+compatibility_date = "2024-04-01"
+compatibility_flags = [ "nodejs_compat" ]
 pages_build_output_dir = "./dist"
 
 # [vars]
@@ -783,6 +783,16 @@ Since a HonoX instance is essentially a Hono instance, it can be deployed on any
 
 ### Cloudflare Pages
 
+Add the `wrangler.toml`:
+
+```toml
+# wrangler.toml
+name = "my-project-name"
+compatibility_date = "2024-04-01"
+compatibility_flags = [ "nodejs_compat" ]
+pages_build_output_dir = "./dist"
+```
+
 Setup the `vite.config.ts`:
 
 ```ts
@@ -827,7 +837,7 @@ vite build --mode client && vite build
 Deploy with the following commands after the build. Ensure you have [Wrangler](https://developers.cloudflare.com/workers/wrangler/) installed:
 
 ```txt
-wrangler pages deploy ./dist
+wrangler pages deploy
 ```
 
 ### SSG - Static Site Generation

package/dist/client/client.d.ts

@@ -12,6 +12,9 @@ type ClientOptions = {
      */
     triggerHydration?: TriggerHydration;
     ISLAND_FILES?: Record<string, () => Promise<unknown>>;
+    /**
+     * @deprecated
+     */
     island_root?: string;
 };
 declare const createClient: (options?: ClientOptions) => Promise<void>;

package/dist/client/client.js

@@ -8,13 +8,13 @@ import {
 } from "../constants.js";
 const createClient = async (options) => {
   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)")
+    ...import.meta.glob("/app/islands/**/[a-zA-Z0-9-]+.tsx"),
+    ...import.meta.glob("/app/**/_[a-zA-Z0-9-]+.island.tsx"),
+    ...import.meta.glob("/app/**/$[a-zA-Z0-9-]+.tsx")
   };
-  const root = options?.island_root ?? "/app";
   const hydrateComponent = async (document2) => {
     const filePromises = Object.keys(FILES).map(async (filePath) => {
-      const componentName = filePath.replace(root, "");
+      const componentName = filePath;
       const elements = document2.querySelectorAll(
         `[${COMPONENT_NAME}="${componentName}"]:not([data-hono-hydrated])`
       );
@@ -40,7 +40,7 @@ const createClient = async (options) => {
               const { buildCreateChildrenFn } = await import("./runtime");
               createChildren = buildCreateChildrenFn(
                 createElement,
-                async (name) => (await FILES[`${root}${name}`]()).default
+                async (name) => (await FILES[`${name}`]()).default
               );
             }
             props[propKey] = await createChildren(

package/dist/server/components/has-islands.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'hono/jsx';
-
-declare const HasIslands: FC;
+declare const HasIslands: ({ children }: {
+    children: any;
+}) => any;
 
 export { HasIslands };

package/dist/server/components/has-islands.js

@@ -1,9 +1,12 @@
 import { Fragment, jsx } from "hono/jsx/jsx-runtime";
-import { useRequestContext } from "hono/jsx-renderer";
 import { IMPORTING_ISLANDS_ID } from "../../constants.js";
+import { contextStorage } from "../context-storage.js";
 const HasIslands = ({ children }) => {
-  const c = useRequestContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: c.get(IMPORTING_ISLANDS_ID) ? children : /* @__PURE__ */ jsx(Fragment, {}) });
+  const c = contextStorage.getStore();
+  if (!c) {
+    throw new Error("No context found");
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: c.get(IMPORTING_ISLANDS_ID) && children });
 };
 export {
   HasIslands

package/dist/server/components/index.d.ts

@@ -1,4 +1,3 @@
 export { HasIslands } from './has-islands.js';
 export { Script } from './script.js';
-import 'hono/jsx';
 import 'vite';

package/dist/server/components/script.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'hono/jsx';
 import { Manifest } from 'vite';
 
 type Options = {
@@ -8,6 +7,6 @@ type Options = {
     manifest?: Manifest;
     nonce?: string;
 };
-declare const Script: FC<Options>;
+declare const Script: (options: Options) => any;
 
 export { Script };

package/dist/server/components/script.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx } from "hono/jsx/jsx-runtime";
 import { HasIslands } from "./has-islands.js";
-const Script = async (options) => {
+const Script = (options) => {
   const src = options.src;
   if (options.prod ?? import.meta.env.PROD) {
     let manifest = options.manifest;

package/dist/server/context-storage.d.ts

@@ -0,0 +1,6 @@
+import { AsyncLocalStorage } from 'node:async_hooks';
+import { Context } from 'hono';
+
+declare const contextStorage: AsyncLocalStorage<Context<any, any, {}>>;
+
+export { contextStorage };

package/dist/server/context-storage.js

@@ -0,0 +1,5 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+const contextStorage = new AsyncLocalStorage();
+export {
+  contextStorage
+};

package/dist/server/index.d.ts

@@ -5,5 +5,4 @@ export { Script } from './components/script.js';
 import 'hono';
 import 'hono/types';
 import '../constants.js';
-import 'hono/jsx';
 import 'vite';

package/dist/server/server.js

@@ -1,12 +1,13 @@
 import { Hono } from "hono";
 import { createMiddleware } from "hono/factory";
 import { IMPORTING_ISLANDS_ID } from "../constants.js";
+import { contextStorage } from "./context-storage.js";
 import {
   filePathToPath,
   groupByDirectory,
   listByDirectory,
   sortDirectoriesByDepth
-} from "../utils/file.js";
+} from "./utils/file.js";
 const NOTFOUND_FILENAME = "_404.tsx";
 const ERROR_FILENAME = "_error.tsx";
 const METHODS = ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
@@ -16,6 +17,9 @@ const createApp = (options) => {
   const getRootPath = (dir) => filePathToPath(dir.replace(rootRegExp, ""));
   const app = options.app ?? new Hono();
   const trailingSlash = options.trailingSlash ?? false;
+  app.use(async function ShareContext(c, next) {
+    await contextStorage.run(c, () => next());
+  });
   if (options.init) {
     options.init(app);
   }

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

@@ -0,0 +1,7 @@
+declare const filePathToPath: (filePath: string) => string;
+declare const groupByDirectory: <T = unknown>(files: Record<string, T>) => Record<string, Record<string, T>>;
+declare const sortDirectoriesByDepth: <T>(directories: Record<string, T>) => Record<string, T>[];
+declare const listByDirectory: <T = unknown>(files: Record<string, T>) => Record<string, string[]>;
+declare const pathToDirectoryPath: (path: string) => string;
+
+export { filePathToPath, groupByDirectory, listByDirectory, pathToDirectoryPath, sortDirectoriesByDepth };

package/dist/server/utils/file.js

@@ -0,0 +1,76 @@
+const filePathToPath = (filePath) => {
+  filePath = filePath.replace(/\.tsx?$/g, "").replace(/\.mdx$/g, "").replace(/^\/?index$/, "/").replace(/\/index$/, "").replace(/\[\.{3}.+\]/, "*").replace(/\[(.+?)\]/g, ":$1");
+  return /^\//.test(filePath) ? filePath : "/" + filePath;
+};
+const groupByDirectory = (files) => {
+  const organizedFiles = {};
+  for (const [path, content] of Object.entries(files)) {
+    const pathParts = path.split("/");
+    const fileName = pathParts.pop();
+    const directory = pathParts.join("/");
+    if (!organizedFiles[directory]) {
+      organizedFiles[directory] = {};
+    }
+    if (fileName) {
+      organizedFiles[directory][fileName] = content;
+    }
+  }
+  for (const [directory, files2] of Object.entries(organizedFiles)) {
+    const sortedEntries = Object.entries(files2).sort(([keyA], [keyB]) => {
+      if (keyA[0] === "[" && keyB[0] !== "[") {
+        return 1;
+      }
+      if (keyA[0] !== "[" && keyB[0] === "[") {
+        return -1;
+      }
+      return keyA.localeCompare(keyB);
+    });
+    organizedFiles[directory] = Object.fromEntries(sortedEntries);
+  }
+  return organizedFiles;
+};
+const sortDirectoriesByDepth = (directories) => {
+  const sortedKeys = Object.keys(directories).sort((a, b) => {
+    const depthA = a.split("/").length;
+    const depthB = b.split("/").length;
+    return depthA - depthB || b.localeCompare(a);
+  });
+  return sortedKeys.map((key) => ({
+    [key]: directories[key]
+  }));
+};
+const listByDirectory = (files) => {
+  const organizedFiles = {};
+  for (const path of Object.keys(files)) {
+    const pathParts = path.split("/");
+    pathParts.pop();
+    const directory = pathParts.join("/");
+    if (!organizedFiles[directory]) {
+      organizedFiles[directory] = [];
+    }
+    if (!organizedFiles[directory].includes(path)) {
+      organizedFiles[directory].push(path);
+    }
+  }
+  const directories = Object.keys(organizedFiles).sort((a, b) => b.length - a.length);
+  for (const dir of directories) {
+    for (const subDir of directories) {
+      if (subDir.startsWith(dir) && subDir !== dir) {
+        const uniqueFiles = /* @__PURE__ */ new Set([...organizedFiles[subDir], ...organizedFiles[dir]]);
+        organizedFiles[subDir] = [...uniqueFiles];
+      }
+    }
+  }
+  return organizedFiles;
+};
+const pathToDirectoryPath = (path) => {
+  const dirPath = path.replace(/[^\/]+$/, "");
+  return dirPath;
+};
+export {
+  filePathToPath,
+  groupByDirectory,
+  listByDirectory,
+  pathToDirectoryPath,
+  sortDirectoriesByDepth
+};

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

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

package/dist/server/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.d.ts

@@ -1,5 +1,9 @@
 import { Plugin } from 'vite';
 
-declare function injectImportingIslands(): Promise<Plugin>;
+type InjectImportingIslandsOptions = {
+    appDir?: string;
+    islandDir?: string;
+};
+declare function injectImportingIslands(options?: InjectImportingIslandsOptions): Promise<Plugin>;
 
 export { injectImportingIslands };

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

@@ -5,13 +5,15 @@ import { parse } from "@babel/parser";
 import precinct from "precinct";
 import { normalizePath } from "vite";
 import { IMPORTING_ISLANDS_ID } from "../constants.js";
+import { matchIslandComponentId } from "./utils/path.js";
 const generate = _generate.default ?? _generate;
-async function injectImportingIslands() {
-  const isIslandRegex = new RegExp(/(\/islands\/|\_[a-zA-Z0-9[-]+\.island\.[tj]sx$)/);
-  const fileRegex = new RegExp(/(routes|_renderer|_error|_404)\/.*\.[tj]sx$/);
+async function injectImportingIslands(options) {
+  let appPath = "";
+  const islandDir = options?.islandDir ?? "/app/islands";
+  let root = "";
   const cache = {};
-  const walkDependencyTree = async (baseFile, dependencyFile) => {
-    const depPath = dependencyFile ? path.join(path.dirname(baseFile), dependencyFile) + ".tsx" : baseFile;
+  const walkDependencyTree = async (baseFile, resolve, dependencyFile) => {
+    const depPath = dependencyFile ? typeof dependencyFile === "string" ? path.join(path.dirname(baseFile), dependencyFile) + ".tsx" : dependencyFile["id"] : baseFile;
     const deps = [depPath];
     try {
       if (!cache[depPath]) {
@@ -21,7 +23,10 @@ async function injectImportingIslands() {
         type: "tsx"
       });
       const childDeps = await Promise.all(
-        currentFileDeps.map(async (x) => await walkDependencyTree(depPath, x))
+        currentFileDeps.map(async (file) => {
+          const resolvedId = await resolve(file, baseFile);
+          return await walkDependencyTree(depPath, resolve, resolvedId ?? file);
+        })
       );
       deps.push(...childDeps.flat());
       return deps;
@@ -31,11 +36,20 @@ async function injectImportingIslands() {
   };
   return {
     name: "inject-importing-islands",
+    configResolved: async (config) => {
+      appPath = path.join(config.root, options?.appDir ?? "/app");
+      root = config.root;
+    },
     async transform(sourceCode, id) {
-      if (!fileRegex.test(id)) {
+      if (!path.resolve(id).startsWith(appPath)) {
         return;
       }
-      const hasIslandsImport = (await walkDependencyTree(id)).flat().some((x) => isIslandRegex.test(normalizePath(x)));
+      const hasIslandsImport = (await Promise.all(
+        (await walkDependencyTree(id, async (id2) => await this.resolve(id2))).flat().map(async (x) => {
+          const rootPath = "/" + path.relative(root, normalizePath(x)).replace(/\\/g, "/");
+          return matchIslandComponentId(rootPath, islandDir);
+        })
+      )).some((matched) => matched);
       if (!hasIslandsImport) {
         return;
       }

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

@@ -3,7 +3,11 @@ import { Plugin } from 'vite';
 declare const transformJsxTags: (contents: string, componentName: string) => string | undefined;
 type IsIsland = (id: string) => boolean;
 type IslandComponentsOptions = {
+    /**
+     * @deprecated
+     */
     isIsland?: IsIsland;
+    islandDir?: string;
     reactApiImportSource?: string;
 };
 declare function islandComponents(options?: IslandComponentsOptions): Plugin;

package/dist/vite/island-components.js

@@ -29,9 +29,7 @@ import {
   exportSpecifier
 } from "@babel/types";
 import { parse as parseJsonc } from "jsonc-parser";
-function isComponentName(name) {
-  return /^[A-Z][A-Z0-9]*[a-z][A-Za-z0-9]*$/.test(name);
-}
+import { matchIslandComponentId, isComponentName } from "./utils/path.js";
 function addSSRCheck(funcName, componentName, componentExport) {
   const isSSR = memberExpression(
     memberExpression(identifier("import"), identifier("meta")),
@@ -158,6 +156,7 @@ const transformJsxTags = (contents, componentName) => {
 function islandComponents(options) {
   let root = "";
   let reactApiImportSource = options?.reactApiImportSource;
+  const islandDir = options?.islandDir ?? "/app/islands";
   return {
     name: "transform-island-components",
     configResolved: async (config) => {
@@ -177,7 +176,7 @@ function islandComponents(options) {
       }
     },
     async load(id) {
-      if (/\/honox\/.*?\/vite\/components\//.test(id)) {
+      if (/\/honox\/.*?\/(?:server|vite)\/components\//.test(id)) {
         if (!reactApiImportSource) {
           return;
         }
@@ -187,15 +186,8 @@ function islandComponents(options) {
           map: null
         };
       }
-      const defaultIsIsland = (id2) => {
-        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$)|(\/routes\/.*\_[a-zA-Z0-9[-]+\.island\.tsx$)/);
+      const rootPath = "/" + path.relative(root, id).replace(/\\/g, "/");
+      const match = matchIslandComponentId(rootPath, islandDir);
       if (match) {
         const componentName = match[0];
         const contents = await fs.readFile(id, "utf-8");

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

@@ -1,5 +1,7 @@
+import fs from "fs";
+import os from "os";
 import path from "path";
-import { transformJsxTags, islandComponents } from "./island-components";
+import { transformJsxTags, islandComponents } from "./island-components.js";
 describe("transformJsxTags", () => {
   it("Should add component-wrapper and component-name attribute", () => {
     const code = `export default function Badge() {
@@ -215,22 +217,46 @@ export { utilityFn, WrappedExportViaVariable as default };`
 });
 describe("options", () => {
   describe("reactApiImportSource", () => {
-    const component = path.resolve(__dirname, "../vite/components/honox-island.tsx").replace(/\\/g, "/");
-    it("use 'hono/jsx' by default", async () => {
-      const plugin = islandComponents();
-      await plugin.configResolved({ root: "root" });
-      const res = await plugin.load(component);
-      expect(res.code).toMatch(/'hono\/jsx'/);
-      expect(res.code).not.toMatch(/'react'/);
+    describe("vite/components", () => {
+      const component = path.resolve(__dirname, "../vite/components/honox-island.tsx").replace(/\\/g, "/");
+      it("use 'hono/jsx' by default", async () => {
+        const plugin = islandComponents();
+        await plugin.configResolved({ root: "root" });
+        const res = await plugin.load(component);
+        expect(res.code).toMatch(/'hono\/jsx'/);
+        expect(res.code).not.toMatch(/'react'/);
+      });
+      it("enable to specify 'react'", async () => {
+        const plugin = islandComponents({
+          reactApiImportSource: "react"
+        });
+        await plugin.configResolved({ root: "root" });
+        const res = await plugin.load(component);
+        expect(res.code).not.toMatch(/'hono\/jsx'/);
+        expect(res.code).toMatch(/'react'/);
+      });
     });
-    it("enable to specify 'react'", async () => {
-      const plugin = islandComponents({
-        reactApiImportSource: "react"
+    describe("server/components", () => {
+      const tmpdir = os.tmpdir();
+      const component = path.resolve(tmpdir, "honox/dist/server/components/has-islands.js").replace(/\\/g, "/");
+      fs.mkdirSync(path.dirname(component), { recursive: true });
+      fs.writeFileSync(component, "import { jsx } from 'hono/jsx/jsx-runtime'");
+      it("use 'hono/jsx' by default", async () => {
+        const plugin = islandComponents();
+        await plugin.configResolved({ root: "root" });
+        const res = await plugin.load(component);
+        expect(res.code).toMatch(/'hono\/jsx\/jsx-runtime'/);
+        expect(res.code).not.toMatch(/'react\/jsx-runtime'/);
+      });
+      it("enable to specify 'react'", async () => {
+        const plugin = islandComponents({
+          reactApiImportSource: "react"
+        });
+        await plugin.configResolved({ root: "root" });
+        const res = await plugin.load(component);
+        expect(res.code).not.toMatch(/'hono\/jsx\/jsx-runtime'/);
+        expect(res.code).toMatch(/'react\/jsx-runtime'/);
       });
-      await plugin.configResolved({ root: "root" });
-      const res = await plugin.load(component);
-      expect(res.code).not.toMatch(/'hono\/jsx'/);
-      expect(res.code).toMatch(/'react'/);
     });
   });
 });

package/dist/vite/utils/path.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Check if the name is a valid component name
+ *
+ * @param name - The name to check
+ * @returns true if the name is a valid component name
+ * @example
+ * isComponentName('Badge') // true
+ * isComponentName('BadgeComponent') // true
+ * isComponentName('badge') // false
+ * isComponentName('MIN') // false
+ * isComponentName('Badge_Component') // false
+ */
+declare function isComponentName(name: string): boolean;
+/**
+ * Matches when id is the filename of Island component
+ *
+ * @param id - The id to match
+ * @returns The result object if id is matched or null
+ */
+declare function matchIslandComponentId(id: string, islandDir?: string): RegExpMatchArray | null;
+
+export { isComponentName, matchIslandComponentId };

package/dist/vite/utils/path.js

@@ -0,0 +1,13 @@
+function isComponentName(name) {
+  return /^[A-Z][A-Z0-9]*[a-z][A-Za-z0-9]*$/.test(name);
+}
+function matchIslandComponentId(id, islandDir = "/islands") {
+  const regExp = new RegExp(
+    `^${islandDir}/.+?.tsx$|.*/(?:_[a-zA-Z0-9-]+.island.tsx$|\\$[a-zA-Z0-9-]+.tsx$)`
+  );
+  return id.match(regExp);
+}
+export {
+  isComponentName,
+  matchIslandComponentId
+};

package/dist/vite/utils/path.test.d.ts

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

package/dist/vite/utils/path.test.js

@@ -0,0 +1,48 @@
+import { matchIslandComponentId } from "./path";
+describe("matchIslandComponentId", () => {
+  describe("match", () => {
+    const paths = [
+      "/islands/counter.tsx",
+      "/islands/directory/counter.tsx",
+      "/routes/$counter.tsx",
+      "/routes/directory/$counter.tsx",
+      "/routes/_counter.island.tsx",
+      "/routes/directory/_counter.island.tsx",
+      "/$counter.tsx",
+      "/directory/$counter.tsx",
+      "/_counter.island.tsx",
+      "/directory/_counter.island.tsx"
+    ];
+    paths.forEach((path) => {
+      it(`Should match ${path}`, () => {
+        const match = matchIslandComponentId(path);
+        expect(match).not.toBeNull();
+        expect(match[0]).toBe(path);
+      });
+    });
+  });
+  describe("not match", () => {
+    const paths = [
+      "/routes/directory/component.tsx",
+      "/routes/directory/foo$component.tsx",
+      "/routes/directory/foo_component.island.tsx",
+      "/routes/directory/component.island.tsx",
+      "/directory/islands/component.tsx"
+    ];
+    paths.forEach((path) => {
+      it(`Should not match ${path}`, () => {
+        const match = matchIslandComponentId(path);
+        expect(match).toBeNull();
+      });
+    });
+  });
+  describe("not match - with `islandDir`", () => {
+    const paths = ["/islands/component.tsx"];
+    paths.forEach((path) => {
+      it(`Should not match ${path}`, () => {
+        const match = matchIslandComponentId(path, "/directory/islands");
+        expect(match).toBeNull();
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -112,7 +112,7 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.12.0",
+    "@hono/vite-dev-server": "^0.12.1",
     "jsonc-parser": "^3.2.1",
     "precinct": "^12.0.2"
   },
@@ -128,7 +128,7 @@
     "@types/node": "^20.10.5",
     "eslint": "^8.56.0",
     "glob": "^10.3.10",
-    "hono": "^4.3.2",
+    "hono": "^4.3.4",
     "np": "7.7.0",
     "prettier": "^3.1.1",
     "publint": "^0.2.7",