honox 0.1.4 → 0.1.6

package/README.md

@@ -1,6 +1,6 @@
 # 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://hono.dev/), and UI libraries.
+**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.
 
 **Note**: _HonoX is currently in a "alpha stage". Breaking changes are introduced without following semantic versioning._
 
@@ -261,11 +261,12 @@ 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 the 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
 import { jsxRenderer } from 'hono/jsx-renderer'
+import { HasIslands } from 'honox/server'
 
 export default jsxRenderer(({ children }) => {
   return (
@@ -308,6 +309,8 @@ export default jsxRenderer(({ children }) => {
 })
 ```
 
+**Note**: Since `<HasIslands />` can slightly affect build performance when used, it is recommended that you do not use it in the development environment, but only at build time. `<Script />` does not cause performance degradation during development, so it's better to use it.
+
 ### Client Entry File
 
 A client side entry file should be in `app/client.ts`. Simply, write `createClient()`.
@@ -321,7 +324,7 @@ createClient()
 
 ### Interactions
 
-Function components placed in `app/islands/*` are also sent to the client side. For example, you can write interactive component such as the following counter:
+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:
 
 ```tsx
 // app/islands/counter.tsx
@@ -355,6 +358,18 @@ 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.
+
+```ts
+import { useRequestContext } from 'hono/jsx-renderer'
+import Counter from '../islands/counter.tsx'
+
+export default function Component() {
+  const c = useRequestContext()
+  return <Counter init={parseInt(c.req.query('count') ?? '0', 10)} />
+}
+```
+
 ## BYOR - Bring Your Own Renderer
 
 You can bring your own renderer using a UI library like React, Preact, Solid, or others.
@@ -383,7 +398,7 @@ declare module '@hono/react-renderer' {
 }
 ```
 
-The following is an example of `app/routes/renderer.tsx`.
+The following is an example of `app/routes/_renderer.tsx`.
 
 ```tsx
 // app/routes/_renderer.tsx
@@ -447,6 +462,51 @@ export default jsxRenderer(({ children, Layout }) => {
 })
 ```
 
+#### Passing Additional Props in Nested Layouts
+
+Props passed to nested renderers do not automatically propagate to the parent renderers. To ensure that the parent layouts receive the necessary props, you should explicitly pass them from the nested <Layout /> component. Here's how you can achieve that:
+
+Let's start with our route handler:
+
+```tsx
+// app/routes/nested/index.tsx
+export default createRoute((c) => {
+  return c.render(<div>Content</div>, { title: 'Dashboard' })
+})
+```
+
+Now, let's take a look at our nested renderer:
+
+```tsx
+// app/routes/nested/_renderer.tsx
+export default jsxRenderer(({ children, Layout, title }) => {
+  return (
+    <Layout title={title}>
+      {/* Pass the title prop to the parent renderer */}
+      <main>{children}</main>
+    </Layout>
+  )
+})
+```
+
+In this setup, all the props sent to the nested renderer's <Layout /> are consumed by the parent renderer:
+
+```tsx
+// app/routes/_renderer.tsx
+export default jsxRenderer(({ children, title }) => {
+  return (
+    <html lang='en'>
+      <head>
+        <title>{title}</title> {/* Use the title prop here */}
+      </head>
+      <body>
+        {children} {/* Insert the Layout's children here */}
+      </body>
+    </html>
+  )
+})
+```
+
 ### Using Middleware
 
 You can use Hono's Middleware in each root file with the same syntax as Hono. For example, to validate a value with the [Zod Validator](https://github.com/honojs/middleware/tree/main/packages/zod-validator), do the following:

package/dist/client/client.d.ts

@@ -1,4 +1,4 @@
-import { Hydrate, CreateElement, CreateChildren } from '../types.js';
+import { Hydrate, CreateElement, CreateChildren, TriggerHydration } from '../types.js';
 
 type ClientOptions = {
     hydrate?: Hydrate;
@@ -7,6 +7,10 @@ type ClientOptions = {
      * Create "children" attribute of a component from a list of child nodes
      */
     createChildren?: CreateChildren;
+    /**
+     * Trigger hydration on your own
+     */
+    triggerHydration?: TriggerHydration;
     ISLAND_FILES?: Record<string, () => Promise<unknown>>;
     island_root?: string;
 };

package/dist/client/client.js

@@ -4,12 +4,15 @@ import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../co
 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 hydrateComponent = async () => {
+  const hydrateComponent = async (document2) => {
     const filePromises = Object.keys(FILES).map(async (filePath) => {
       const componentName = filePath.replace(root, "");
-      const elements = document.querySelectorAll(`[${COMPONENT_NAME}="${componentName}"]`);
+      const elements = document2.querySelectorAll(
+        `[${COMPONENT_NAME}="${componentName}"]:not([data-hono-hydrated])`
+      );
       if (elements) {
         const elementPromises = Array.from(elements).map(async (element) => {
+          element.setAttribute("data-hono-hydrated", "true");
           const fileCallback = FILES[filePath];
           const file = await fileCallback();
           const Component = await file.default;
@@ -22,7 +25,10 @@ const createClient = async (options) => {
             let createChildren = options?.createChildren;
             if (!createChildren) {
               const { buildCreateChildrenFn } = await import("./runtime");
-              createChildren = buildCreateChildrenFn(createElement);
+              createChildren = buildCreateChildrenFn(
+                createElement,
+                async (name) => (await FILES[`${root}${name}`]()).default
+              );
             }
             props.children = await createChildren(
               maybeTemplate.content.childNodes
@@ -36,7 +42,14 @@ const createClient = async (options) => {
     });
     await Promise.all(filePromises);
   };
-  await hydrateComponent();
+  const triggerHydration = options?.triggerHydration ?? (async (hydrateComponent2) => {
+    if (document.querySelector('template[id^="H:"], template[id^="E:"]')) {
+      const { hydrateComponentHonoSuspense } = await import("./runtime");
+      await hydrateComponentHonoSuspense(hydrateComponent2);
+    }
+    await hydrateComponent2(document);
+  });
+  await triggerHydration?.(hydrateComponent);
 };
 export {
   createClient

package/dist/client/runtime.d.ts

@@ -1,5 +1,7 @@
-import { CreateElement, CreateChildren } from '../types.js';
+import { CreateElement, CreateChildren, HydrateComponent } from '../types.js';
 
-declare const buildCreateChildrenFn: (createElement: CreateElement) => CreateChildren;
+type ImportComponent = (name: string) => Promise<Function | undefined>;
+declare const buildCreateChildrenFn: (createElement: CreateElement, importComponent: ImportComponent) => CreateChildren;
+declare const hydrateComponentHonoSuspense: (hydrateComponent: HydrateComponent) => Promise<void>;
 
-export { buildCreateChildrenFn };
+export { buildCreateChildrenFn, hydrateComponentHonoSuspense };

package/dist/client/runtime.js

@@ -1,5 +1,14 @@
 import { Suspense, use } from "hono/jsx/dom";
-const buildCreateChildrenFn = (createElement) => {
+import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
+const buildCreateChildrenFn = (createElement, importComponent) => {
+  const setChildrenFromTemplate = async (props, element) => {
+    const maybeTemplate = element.childNodes[element.childNodes.length - 1];
+    if (maybeTemplate?.nodeName === "TEMPLATE" && maybeTemplate?.getAttribute(DATA_HONO_TEMPLATE) !== null) {
+      props.children = await createChildren(
+        maybeTemplate.content.childNodes
+      );
+    }
+  };
   const createElementFromHTMLElement = async (element) => {
     const props = {
       children: await createChildren(element.childNodes)
@@ -71,13 +80,58 @@ const buildCreateChildrenFn = (createElement) => {
           })
         );
       } else {
-        children.push(await createElementFromHTMLElement(child));
+        let component = void 0;
+        const componentName = child.getAttribute(COMPONENT_NAME);
+        if (componentName) {
+          component = await importComponent(componentName);
+        }
+        if (component) {
+          const props = JSON.parse(child.getAttribute(DATA_SERIALIZED_PROPS) || "{}");
+          await setChildrenFromTemplate(props, child);
+          children.push(await createElement(component, props));
+        } else {
+          children.push(await createElementFromHTMLElement(child));
+        }
       }
     }
     return children;
   };
   return createChildren;
 };
+const hydrateComponentHonoSuspense = async (hydrateComponent) => {
+  const templates = /* @__PURE__ */ new Set();
+  const observerTargets = /* @__PURE__ */ new Set();
+  document.querySelectorAll('template[id^="H:"], template[id^="E:"]').forEach((template) => {
+    if (template.parentElement) {
+      templates.add(template);
+      observerTargets.add(template.parentElement);
+    }
+  });
+  if (observerTargets.size === 0) {
+    return;
+  }
+  const observer = new MutationObserver((mutations) => {
+    const targets = /* @__PURE__ */ new Set();
+    mutations.forEach((mutation) => {
+      if (mutation.target instanceof Element) {
+        targets.add(mutation.target);
+        mutation.removedNodes.forEach((node) => {
+          templates.delete(node);
+        });
+      }
+    });
+    targets.forEach((target) => {
+      hydrateComponent(target);
+    });
+    if (templates.size === 0) {
+      observer.disconnect();
+    }
+  });
+  observerTargets.forEach((target) => {
+    observer.observe(target, { childList: true });
+  });
+};
 export {
-  buildCreateChildrenFn
+  buildCreateChildrenFn,
+  hydrateComponentHonoSuspense
 };

package/dist/server/base.d.ts

@@ -0,0 +1,4 @@
+export { createApp } from './server.js';
+import 'hono/types';
+import 'hono';
+import '../constants.js';

package/dist/server/base.js

@@ -0,0 +1,4 @@
+import { createApp } from "./server.js";
+export {
+  createApp
+};

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

@@ -0,0 +1,11 @@
+import { FC } from 'hono/jsx';
+import { Manifest } from 'vite';
+
+type Options = {
+    src: string;
+    prod?: boolean;
+    manifest?: Manifest;
+};
+declare const Css: FC<Options>;
+
+export { Css };

package/dist/server/components/css.js

@@ -0,0 +1,38 @@
+import { Fragment, jsx } from "hono/jsx/jsx-runtime";
+const Css = async (options) => {
+  const src = options.src;
+  if (options.prod ?? import.meta.env.PROD) {
+    let manifest = options.manifest;
+    if (!manifest) {
+      const MANIFEST = import.meta.glob("/dist/.vite/manifest.json", {
+        eager: true
+      });
+      for (const [, manifestFile] of Object.entries(MANIFEST)) {
+        if (manifestFile["default"]) {
+          manifest = manifestFile["default"];
+          break;
+        }
+      }
+    }
+    if (manifest) {
+      const scriptInManifest = manifest[src.replace(/^\//, "")];
+      if (scriptInManifest) {
+        const elements = [];
+        if (scriptInManifest.css) {
+          for (const css of scriptInManifest.css) {
+            elements.push(/* @__PURE__ */ jsx("link", { href: css, rel: "stylesheet" }));
+          }
+        }
+        return /* @__PURE__ */ jsx(Fragment, { children: elements.map((element) => {
+          return /* @__PURE__ */ jsx(Fragment, { children: element });
+        }) });
+      }
+    }
+    return /* @__PURE__ */ jsx(Fragment, {});
+  } else {
+    return /* @__PURE__ */ jsx("link", { href: src, rel: "stylesheet" });
+  }
+};
+export {
+  Css
+};

package/dist/server/index.d.ts

@@ -1,8 +1,9 @@
-export { ServerOptions, createApp } from './server.js';
+export { createApp } from './with-defaults.js';
+export { ServerOptions } from './server.js';
 export { HasIslands } from './components/has-islands.js';
 export { Script } from './components/script.js';
-import 'hono/types';
 import 'hono';
+import 'hono/types';
 import '../constants.js';
 import 'hono/jsx';
 import 'vite';

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { createApp } from "./server.js";
+import { createApp } from "./with-defaults.js";
 export * from "./components/index.js";
 export {
   createApp

package/dist/server/server.d.ts

@@ -4,6 +4,9 @@ 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 = {
     [key in typeof IMPORTING_ISLANDS_ID]?: boolean;
 };
@@ -25,16 +28,17 @@ type MiddlewareFile = {
     default: MiddlewareHandler[];
 };
 type InitFunction<E extends Env = Env> = (app: Hono<E>) => void;
-type ServerOptions<E extends Env = Env> = {
-    ROUTES?: Record<string, RouteFile>;
-    RENDERER?: Record<string, RendererFile>;
-    NOT_FOUND?: Record<string, NotFoundFile>;
-    ERROR?: Record<string, ErrorFile>;
-    MIDDLEWARE?: Record<string, MiddlewareFile>;
-    root?: string;
+type BaseServerOptions<E extends Env = Env> = {
+    ROUTES: Record<string, RouteFile | AppFile>;
+    RENDERER: Record<string, RendererFile>;
+    NOT_FOUND: Record<string, NotFoundFile>;
+    ERROR: Record<string, ErrorFile>;
+    MIDDLEWARE: Record<string, MiddlewareFile>;
+    root: string;
     app?: Hono<E>;
     init?: InitFunction<E>;
 };
-declare const createApp: <E extends Env>(options?: ServerOptions<E> | undefined) => Hono<E, hono_types.BlankSchema, "/">;
+type ServerOptions<E extends Env = Env> = Partial<BaseServerOptions<E>>;
+declare const createApp: <E extends Env>(options: BaseServerOptions<E>) => Hono<E, hono_types.BlankSchema, "/">;
 
 export { type ServerOptions, createApp };

package/dist/server/server.js

@@ -11,31 +11,21 @@ const NOTFOUND_FILENAME = "_404.tsx";
 const ERROR_FILENAME = "_error.tsx";
 const METHODS = ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
 const createApp = (options) => {
-  const root = options?.root ?? "/app/routes";
+  const root = options.root;
   const rootRegExp = new RegExp(`^${root}`);
-  const app = options?.app ?? new Hono();
-  if (options?.init) {
+  const app = options.app ?? new Hono();
+  if (options.init) {
     options.init(app);
   }
-  const NOT_FOUND_FILE = options?.NOT_FOUND ?? import.meta.glob("/app/routes/**/_404.(ts|tsx)", {
-    eager: true
-  });
+  const NOT_FOUND_FILE = options.NOT_FOUND;
   const notFoundMap = groupByDirectory(NOT_FOUND_FILE);
-  const ERROR_FILE = options?.ERROR ?? import.meta.glob("/app/routes/**/_error.(ts|tsx)", {
-    eager: true
-  });
+  const ERROR_FILE = options.ERROR;
   const errorMap = groupByDirectory(ERROR_FILE);
-  const RENDERER_FILE = options?.RENDERER ?? import.meta.glob("/app/routes/**/_renderer.tsx", {
-    eager: true
-  });
+  const RENDERER_FILE = options.RENDERER;
   const rendererList = listByDirectory(RENDERER_FILE);
-  const MIDDLEWARE_FILE = options?.MIDDLEWARE ?? import.meta.glob("/app/routes/**/_middleware.(ts|tsx)", {
-    eager: true
-  });
+  const MIDDLEWARE_FILE = options.MIDDLEWARE;
   const middlewareList = listByDirectory(MIDDLEWARE_FILE);
-  const ROUTES_FILE = options?.ROUTES ?? import.meta.glob("/app/routes/**/[!_]*.(ts|tsx|mdx)", {
-    eager: true
-  });
+  const ROUTES_FILE = options.ROUTES;
   const routesMap = sortDirectoriesByDepth(groupByDirectory(ROUTES_FILE));
   const getPaths = (currentDirectory, fileList) => {
     let paths = fileList[currentDirectory] ?? [];

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

@@ -0,0 +1,37 @@
+import * as hono from 'hono';
+import { Env } from 'hono';
+import * as hono_types from 'hono/types';
+
+declare const createApp: <E extends Env>(options?: Partial<{
+    ROUTES: Record<string, ({
+        default?: Function | undefined;
+    } & {
+        GET?: hono_types.H[] | undefined;
+        POST?: hono_types.H[] | undefined;
+        PUT?: hono_types.H[] | undefined;
+        DELETE?: hono_types.H[] | undefined;
+        OPTIONS?: hono_types.H[] | undefined;
+        PATCH?: hono_types.H[] | undefined;
+    } & {
+        __importing_islands?: boolean | undefined;
+    }) | {
+        default: hono.Hono<Env, hono_types.BlankSchema, "/">;
+    }>;
+    RENDERER: Record<string, {
+        default: hono.MiddlewareHandler;
+    }>;
+    NOT_FOUND: Record<string, {
+        default: hono.NotFoundHandler;
+    }>;
+    ERROR: Record<string, {
+        default: hono.ErrorHandler;
+    }>;
+    MIDDLEWARE: Record<string, {
+        default: hono.MiddlewareHandler[];
+    }>;
+    root: string;
+    app?: hono.Hono<E, hono_types.BlankSchema, "/"> | undefined;
+    init?: ((app: hono.Hono<E, hono_types.BlankSchema, "/">) => void) | undefined;
+}> | undefined) => hono.Hono<E, hono_types.BlankSchema, "/">;
+
+export { createApp };

package/dist/server/with-defaults.js

@@ -0,0 +1,27 @@
+import { createApp as baseCreateApp } from "./server.js";
+const createApp = (options) => {
+  const newOptions = {
+    root: options?.root ?? "/app/routes",
+    app: options?.app,
+    init: options?.init,
+    NOT_FOUND: options?.NOT_FOUND ?? import.meta.glob("/app/routes/**/_404.(ts|tsx)", {
+      eager: true
+    }),
+    ERROR: options?.ERROR ?? import.meta.glob("/app/routes/**/_error.(ts|tsx)", {
+      eager: true
+    }),
+    RENDERER: options?.RENDERER ?? import.meta.glob("/app/routes/**/_renderer.tsx", {
+      eager: true
+    }),
+    MIDDLEWARE: options?.MIDDLEWARE ?? import.meta.glob("/app/routes/**/_middleware.(ts|tsx)", {
+      eager: true
+    }),
+    ROUTES: options?.ROUTES ?? import.meta.glob("/app/routes/**/[!_]*.(ts|tsx|mdx)", {
+      eager: true
+    })
+  };
+  return baseCreateApp(newOptions);
+};
+export {
+  createApp
+};

package/dist/types.d.ts

@@ -2,5 +2,9 @@
 type CreateElement = (type: any, props: any) => Node | Promise<Node>;
 type Hydrate = (children: Node, parent: Element) => void | Promise<void>;
 type CreateChildren = (childNodes: NodeListOf<ChildNode>) => Node[] | Promise<Node[]>;
+type HydrateComponent = (doc: {
+    querySelectorAll: typeof document.querySelectorAll;
+}) => Promise<void>;
+type TriggerHydration = (trigger: HydrateComponent) => void;
 
-export type { CreateChildren, CreateElement, Hydrate };
+export type { CreateChildren, CreateElement, Hydrate, HydrateComponent, TriggerHydration };

package/dist/vite/index.d.ts

@@ -1,12 +1,14 @@
 import { DevServerOptions } from '@hono/vite-dev-server';
 export { defaultOptions as devServerDefaultOptions } from '@hono/vite-dev-server';
 import { PluginOption } from 'vite';
+import { IslandComponentsOptions } from './island-components.js';
 export { islandComponents } from './island-components.js';
 
 type Options = {
     islands?: boolean;
     entry?: string;
     devServer?: DevServerOptions;
+    islandComponents?: IslandComponentsOptions;
     external?: string[];
 };
 declare const defaultOptions: Options;

package/dist/vite/index.js

@@ -23,7 +23,7 @@ function honox(options) {
     })
   );
   if (options?.islands !== false) {
-    plugins.push(islandComponents());
+    plugins.push(islandComponents(options?.islandComponents));
   }
   plugins.push(injectImportingIslands());
   plugins.push(restartOnAddUnlink());

package/dist/vite/inject-importing-islands.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
 
-declare function injectImportingIslands(): Plugin;
+declare function injectImportingIslands(): Promise<Plugin>;
 
 export { injectImportingIslands };

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

@@ -1,49 +1,68 @@
+import { readFile } from "fs/promises";
+import path from "path";
 import _generate from "@babel/generator";
 import { parse } from "@babel/parser";
-import _traverse from "@babel/traverse";
+import precinct from "precinct";
+import { normalizePath } from "vite";
 import { IMPORTING_ISLANDS_ID } from "../constants.js";
-const traverse = _traverse.default ?? _traverse;
 const generate = _generate.default ?? _generate;
-function injectImportingIslands() {
+async function injectImportingIslands() {
+  const isIslandRegex = new RegExp(/\/islands\//);
+  const routesRegex = new RegExp(/routes\/.*\.[t|j]sx$/);
+  const cache = {};
+  const walkDependencyTree = async (baseFile, dependencyFile) => {
+    const depPath = dependencyFile ? path.join(path.dirname(baseFile), dependencyFile) + ".tsx" : baseFile;
+    const deps = [depPath];
+    try {
+      if (!cache[depPath]) {
+        cache[depPath] = (await readFile(depPath, { flag: "" })).toString();
+      }
+      const currentFileDeps = precinct(cache[depPath], {
+        type: "tsx"
+      });
+      const childDeps = await Promise.all(
+        currentFileDeps.map(async (x) => await walkDependencyTree(depPath, x))
+      );
+      deps.push(...childDeps.flat());
+      return deps;
+    } catch (err) {
+      return deps;
+    }
+  };
   return {
     name: "inject-importing-islands",
-    transform(code, id) {
-      if (id.endsWith(".tsx") || id.endsWith(".jsx")) {
-        let hasIslandsImport = false;
-        const ast = parse(code, {
-          sourceType: "module",
-          plugins: ["jsx"]
-        });
-        traverse(ast, {
-          ImportDeclaration(path) {
-            if (path.node.source.value.includes("islands/")) {
-              hasIslandsImport = true;
-            }
-          }
-        });
-        if (hasIslandsImport) {
-          const hasIslandsNode = {
-            type: "ExportNamedDeclaration",
-            declaration: {
-              type: "VariableDeclaration",
-              declarations: [
-                {
-                  type: "VariableDeclarator",
-                  id: { type: "Identifier", name: IMPORTING_ISLANDS_ID },
-                  init: { type: "BooleanLiteral", value: true }
-                }
-              ],
-              kind: "const"
+    async transform(sourceCode, id) {
+      if (!routesRegex.test(id)) {
+        return;
+      }
+      const hasIslandsImport = (await walkDependencyTree(id)).flat().some((x) => isIslandRegex.test(normalizePath(x)));
+      if (!hasIslandsImport) {
+        return;
+      }
+      const ast = parse(sourceCode, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"]
+      });
+      const hasIslandsNode = {
+        type: "ExportNamedDeclaration",
+        declaration: {
+          type: "VariableDeclaration",
+          declarations: [
+            {
+              type: "VariableDeclarator",
+              id: { type: "Identifier", name: IMPORTING_ISLANDS_ID },
+              init: { type: "BooleanLiteral", value: true }
             }
-          };
-          ast.program.body.push(hasIslandsNode);
+          ],
+          kind: "const"
         }
-        const output = generate(ast, {}, code);
-        return {
-          code: output.code,
-          map: output.map
-        };
-      }
+      };
+      ast.program.body.push(hasIslandsNode);
+      const output = generate(ast, {}, sourceCode);
+      return {
+        code: output.code,
+        map: output.map
+      };
     }
   };
 }

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

@@ -1,6 +1,10 @@
 import { Plugin } from 'vite';
 
 declare const transformJsxTags: (contents: string, componentName: string) => string | undefined;
-declare function islandComponents(): Plugin;
+type IsIsland = (id: string) => boolean;
+type IslandComponentsOptions = {
+    isIsland: IsIsland;
+};
+declare function islandComponents(options?: IslandComponentsOptions): Plugin;
 
-export { islandComponents, transformJsxTags };
+export { type IslandComponentsOptions, islandComponents, transformJsxTags };

package/dist/vite/island-components.js

@@ -1,4 +1,5 @@
 import fs from "fs/promises";
+import path from "path";
 import _generate from "@babel/generator";
 const generate = _generate.default ?? _generate;
 import { parse } from "@babel/parser";
@@ -25,7 +26,7 @@ import {
   memberExpression
 } from "@babel/types";
 import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
-function addSSRCheck(funcName, componentName, isAsync = false) {
+function addSSRCheck(funcName, componentName) {
   const isSSR = memberExpression(
     memberExpression(identifier("import"), identifier("meta")),
     identifier("env.SSR")
@@ -86,11 +87,7 @@ function addSSRCheck(funcName, componentName, isAsync = false) {
     []
   );
   const returnStmt = returnStatement(conditionalExpression(isSSR, ssrElement, clientElement));
-  const functionExpr = functionExpression(null, [identifier("props")], blockStatement([returnStmt]));
-  if (isAsync) {
-    functionExpr.async = true;
-  }
-  return functionExpr;
+  return functionExpression(null, [identifier("props")], blockStatement([returnStmt]));
 }
 const transformJsxTags = (contents, componentName) => {
   const ast = parse(contents, {
@@ -98,43 +95,78 @@ const transformJsxTags = (contents, componentName) => {
     plugins: ["typescript", "jsx"]
   });
   if (ast) {
+    let wrappedFunctionId;
     traverse(ast, {
-      ExportDefaultDeclaration(path) {
-        if (path.node.declaration.type === "FunctionDeclaration") {
-          const functionId = path.node.declaration.id;
-          if (!functionId) {
-            return;
+      ExportNamedDeclaration(path2) {
+        for (const specifier of path2.node.specifiers) {
+          if (specifier.type !== "ExportSpecifier") {
+            continue;
           }
-          const isAsync = path.node.declaration.async;
-          const originalFunctionId = identifier(functionId.name + "Original");
-          const originalFunction = functionExpression(
-            null,
-            path.node.declaration.params,
-            path.node.declaration.body
-          );
-          if (isAsync) {
-            originalFunction.async = true;
+          const exportAs = specifier.exported.type === "StringLiteral" ? specifier.exported.value : specifier.exported.name;
+          if (exportAs !== "default") {
+            continue;
           }
-          path.insertBefore(
-            variableDeclaration("const", [variableDeclarator(originalFunctionId, originalFunction)])
+          const wrappedFunction = addSSRCheck(specifier.local.name, componentName);
+          const wrappedFunctionId2 = identifier("Wrapped" + specifier.local.name);
+          path2.insertBefore(
+            variableDeclaration("const", [variableDeclarator(wrappedFunctionId2, wrappedFunction)])
           );
-          const wrappedFunction = addSSRCheck(originalFunctionId.name, componentName, isAsync);
-          const wrappedFunctionId = identifier("Wrapped" + functionId.name);
-          path.replaceWith(
+          specifier.local.name = wrappedFunctionId2.name;
+        }
+      },
+      ExportDefaultDeclaration(path2) {
+        const declarationType = path2.node.declaration.type;
+        if (declarationType === "FunctionDeclaration" || declarationType === "FunctionExpression" || declarationType === "ArrowFunctionExpression" || declarationType === "Identifier") {
+          const functionName = (declarationType === "Identifier" ? path2.node.declaration.name : (declarationType === "FunctionDeclaration" || declarationType === "FunctionExpression") && path2.node.declaration.id?.name) || "__HonoIsladComponent__";
+          let originalFunctionId;
+          if (declarationType === "Identifier") {
+            originalFunctionId = path2.node.declaration;
+          } else {
+            originalFunctionId = identifier(functionName + "Original");
+            const originalFunction = path2.node.declaration.type === "FunctionExpression" || path2.node.declaration.type === "ArrowFunctionExpression" ? path2.node.declaration : functionExpression(
+              null,
+              path2.node.declaration.params,
+              path2.node.declaration.body,
+              void 0,
+              path2.node.declaration.async
+            );
+            path2.insertBefore(
+              variableDeclaration("const", [
+                variableDeclarator(originalFunctionId, originalFunction)
+              ])
+            );
+          }
+          const wrappedFunction = addSSRCheck(originalFunctionId.name, componentName);
+          wrappedFunctionId = identifier("Wrapped" + functionName);
+          path2.replaceWith(
             variableDeclaration("const", [variableDeclarator(wrappedFunctionId, wrappedFunction)])
           );
-          path.insertAfter(exportDefaultDeclaration(wrappedFunctionId));
         }
       }
     });
+    if (wrappedFunctionId) {
+      ast.program.body.push(exportDefaultDeclaration(wrappedFunctionId));
+    }
     const { code } = generate(ast);
     return code;
   }
 };
-function islandComponents() {
+function islandComponents(options) {
+  let root = "";
   return {
     name: "transform-island-components",
+    configResolved: (config) => {
+      root = config.root;
+    },
     async load(id) {
+      const defaultIsIsland = (id2) => {
+        const islandDirectoryPath = path.join(root, "app/islands");
+        return id2.startsWith(islandDirectoryPath);
+      };
+      const matchIslandPath = options?.isIsland ?? defaultIsIsland;
+      if (!matchIslandPath(id)) {
+        return;
+      }
       const match = id.match(/\/islands\/(.+?\.tsx)$/);
       if (match) {
         const componentName = match[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -41,6 +41,10 @@
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js"
     },
+    "./server/base": {
+      "types": "./dist/server/base.d.ts",
+      "import": "./dist/server/base.js"
+    },
     "./client": {
       "types": "./dist/client/index.d.ts",
       "import": "./dist/client/index.js"
@@ -69,6 +73,9 @@
       "server": [
         "./dist/server"
       ],
+      "server/base": [
+        "./dist/server/base"
+      ],
       "client": [
         "./dist/client"
       ],
@@ -99,7 +106,8 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.7.0"
+    "@hono/vite-dev-server": "^0.8.1",
+    "precinct": "^11.0.5"
   },
   "peerDependencies": {
     "hono": ">=4.*"
@@ -107,7 +115,7 @@
   "devDependencies": {
     "@hono/eslint-config": "^0.0.4",
     "@mdx-js/rollup": "^3.0.0",
-    "@playwright/test": "^1.41.0",
+    "@playwright/test": "^1.42.0",
     "@types/babel__generator": "^7",
     "@types/babel__traverse": "^7",
     "@types/node": "^20.10.5",