npm - honox - Versions diffs - 0.1.15 → 0.1.17 - Mend

honox 0.1.15 → 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/README.md +60 -10
package/dist/client/client.d.ts +3 -0
package/dist/client/client.js +21 -10
package/dist/constants.d.ts +2 -1
package/dist/constants.js +2 -0
package/dist/server/components/has-islands.d.ts +3 -3
package/dist/server/components/has-islands.js +6 -3
package/dist/server/components/index.d.ts +0 -1
package/dist/server/components/script.d.ts +2 -2
package/dist/server/components/script.js +4 -3
package/dist/server/context-storage.d.ts +6 -0
package/dist/server/context-storage.js +5 -0
package/dist/server/index.d.ts +0 -1
package/dist/server/server.js +5 -1
package/dist/server/utils/file.d.ts +7 -0
package/dist/server/utils/file.js +76 -0
package/dist/server/utils/file.test.d.ts +2 -0
package/dist/server/utils/file.test.js +123 -0
package/dist/vite/components/honox-island.d.ts +8 -0
package/dist/vite/components/honox-island.js +56 -0
package/dist/vite/components/index.d.ts +1 -0
package/dist/vite/components/index.js +4 -0
package/dist/vite/components.d.ts +7 -0
package/dist/vite/components.js +36 -0
package/dist/vite/inject-importing-islands.d.ts +5 -1
package/dist/vite/inject-importing-islands.js +22 -8
package/dist/vite/island-components.d.ts +6 -1
package/dist/vite/island-components.js +90 -89
package/dist/vite/island-components.test.js +175 -15
package/dist/vite/utils/path.d.ts +22 -0
package/dist/vite/utils/path.js +13 -0
package/dist/vite/utils/path.test.d.ts +2 -0
package/dist/vite/utils/path.test.js +48 -0
package/package.json +11 -3

package/README.md CHANGED Viewed

@@ -131,7 +131,7 @@ export default createRoute((c) => {
 })
 ```
-#### 2. Using Hono instance
+#### 2. Using a Hono instance
 You can create API endpoints by exporting an instance of the Hono object.
@@ -311,9 +311,48 @@ 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.
+#### nonce Attribute
+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:
+```ts
+// app/routes/_middleware.ts
+import { createRoute } from 'honox/factory'
+import { secureHeaders, NONCE } from 'hono/secure-headers'
+secureHeaders({
+  contentSecurityPolicy: import.meta.env.PROD
+    ? {
+        scriptSrc: [NONCE],
+      }
+    : undefined,
+})
+```
+You can get the `nonce` value with `c.get('secureHeadersNonce')`:
+```tsx
+// app/routes/_renderer.tsx
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Script } from 'honox/server'
+export default jsxRenderer(({ children }, c) => {
+  return (
+    <html lang='en'>
+      <head>
+        <Script src='/app/client.ts' async nonce={c.get('secureHeadersNonce')} />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+})
+```
 ### Client Entry File
-A client side entry file should be in `app/client.ts`. Simply, write `createClient()`.
+A client-side entry file should be in `app/client.ts`. Simply, write `createClient()`.
 ```ts
 // app/client.ts
@@ -326,8 +365,8 @@ 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`.
-- Should `export default function`.
+- 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:
@@ -379,7 +418,7 @@ export default function Component() {
 You can bring your own renderer using a UI library like React, Preact, Solid, or others.
-**Note**: We may not provide supports for the renderer you bring.
+**Note**: We may not provide support for the renderer you bring.
 ### React case
@@ -531,7 +570,7 @@ 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.
+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 run in the order that it is listed within the array.
 ```ts
 // /app/routes/_middleware.ts
@@ -708,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]
@@ -743,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
@@ -756,7 +806,7 @@ export default defineConfig({
 })
 ```
-If you want to include client side scripts and assets:
+If you want to include client-side scripts and assets:
 ```ts
 // vite.config.ts
@@ -787,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
@@ -808,7 +858,7 @@ export default defineConfig(() => {
 })
 ```
-If you want to include client side scripts and assets:
+If you want to include client-side scripts and assets:
 ```ts
 // vite.config.ts

package/dist/client/client.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,41 +1,52 @@
 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";
+import {
+  COMPONENT_NAME,
+  COMPONENT_EXPORT,
+  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)"),
-    ...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])`
       );
       if (elements) {
         const elementPromises = Array.from(elements).map(async (element) => {
           element.setAttribute("data-hono-hydrated", "true");
+          const exportName = element.getAttribute(COMPONENT_EXPORT) || "default";
           const fileCallback = FILES[filePath];
           const file = await fileCallback();
-          const Component = await file.default;
+          const Component = await file[exportName];
           const serializedProps = element.attributes.getNamedItem(DATA_SERIALIZED_PROPS)?.value;
           const props = JSON.parse(serializedProps ?? "{}");
           const hydrate = options?.hydrate ?? render;
           const createElement = options?.createElement ?? jsxFn;
-          const maybeTemplate = element.childNodes[element.childNodes.length - 1];
-          if (maybeTemplate?.nodeName === "TEMPLATE" && maybeTemplate?.attributes.getNamedItem(DATA_HONO_TEMPLATE) !== null) {
+          let maybeTemplate = element.childNodes[element.childNodes.length - 1];
+          while (maybeTemplate?.nodeName === "TEMPLATE") {
+            const propKey = maybeTemplate.getAttribute(DATA_HONO_TEMPLATE);
+            if (propKey == null) {
+              break;
+            }
             let createChildren = options?.createChildren;
             if (!createChildren) {
               const { buildCreateChildrenFn } = await import("./runtime");
               createChildren = buildCreateChildrenFn(
                 createElement,
-                async (name) => (await FILES[`${root}${name}`]()).default
+                async (name) => (await FILES[`${name}`]()).default
               );
             }
-            props.children = await createChildren(
+            props[propKey] = await createChildren(
               maybeTemplate.content.childNodes
             );
+            maybeTemplate = maybeTemplate.previousSibling;
           }
           const newElem = await createElement(Component, props);
           await hydrate(newElem, element);

package/dist/constants.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 declare const COMPONENT_NAME = "component-name";
+declare const COMPONENT_EXPORT = "component-export";
 declare const DATA_SERIALIZED_PROPS = "data-serialized-props";
 declare const DATA_HONO_TEMPLATE = "data-hono-template";
 declare const IMPORTING_ISLANDS_ID: "__importing_islands";
-export { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };
+export { COMPONENT_EXPORT, COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/constants.js CHANGED Viewed

@@ -1,8 +1,10 @@
 const COMPONENT_NAME = "component-name";
+const COMPONENT_EXPORT = "component-export";
 const DATA_SERIALIZED_PROPS = "data-serialized-props";
 const DATA_HONO_TEMPLATE = "data-hono-template";
 const IMPORTING_ISLANDS_ID = "__importing_islands";
 export {
+  COMPONENT_EXPORT,
   COMPONENT_NAME,
   DATA_HONO_TEMPLATE,
   DATA_SERIALIZED_PROPS,

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/server/components/script.js CHANGED Viewed

@@ -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;
@@ -23,14 +23,15 @@ const Script = async (options) => {
           {
             type: "module",
             async: !!options.async,
-            src: `/${scriptInManifest.file}`
+            src: `/${scriptInManifest.file}`,
+            nonce: options.nonce
           }
         ) });
       }
     }
     return /* @__PURE__ */ jsx(Fragment, {});
   } else {
-    return /* @__PURE__ */ jsx("script", { type: "module", async: !!options.async, src });
+    return /* @__PURE__ */ jsx("script", { type: "module", async: !!options.async, src, nonce: options.nonce });
   }
 };
 export {

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

@@ -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 ADDED Viewed

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

package/dist/server/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/dist/server/utils/file.test.js ADDED Viewed

@@ -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/components/honox-island.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+declare const HonoXIsland: ({ componentName, componentExport, Component, props, }: {
+    componentName: string;
+    componentExport: string;
+    Component: Function;
+    props: any;
+}) => JSX.Element;
+export { HonoXIsland };

package/dist/vite/components/honox-island.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+import { createContext, useContext, isValidElement } from "hono/jsx";
+import {
+  COMPONENT_NAME,
+  COMPONENT_EXPORT,
+  DATA_SERIALIZED_PROPS,
+  DATA_HONO_TEMPLATE
+} from "../../constants";
+const inIsland = Symbol();
+const inChildren = Symbol();
+const IslandContext = createContext({
+  [inIsland]: false,
+  [inChildren]: false
+});
+const isElementPropValue = (value) => Array.isArray(value) ? value.some(isElementPropValue) : typeof value === "object" && isValidElement(value);
+const HonoXIsland = ({
+  componentName,
+  componentExport,
+  Component,
+  props
+}) => {
+  const elementProps = {};
+  const restProps = {};
+  for (const key in props) {
+    const value = props[key];
+    if (isElementPropValue(value)) {
+      elementProps[key] = value;
+    } else {
+      restProps[key] = value;
+    }
+  }
+  const islandState = useContext(IslandContext);
+  return islandState[inChildren] || !islandState[inIsland] ? (
+    // top-level or slot content
+    /* @__PURE__ */ jsxs(
+      "honox-island",
+      {
+        ...{
+          [COMPONENT_NAME]: componentName,
+          [COMPONENT_EXPORT]: componentExport || void 0,
+          [DATA_SERIALIZED_PROPS]: JSON.stringify(restProps)
+        },
+        children: [
+          /* @__PURE__ */ jsx(IslandContext.Provider, { value: { ...islandState, [inIsland]: true }, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
+          Object.entries(elementProps).map(([key, children]) => /* @__PURE__ */ jsx("template", { ...{ [DATA_HONO_TEMPLATE]: key }, children: /* @__PURE__ */ jsx(IslandContext.Provider, { value: { ...islandState, [inChildren]: true }, children }) }))
+        ]
+      }
+    )
+  ) : (
+    // nested component
+    /* @__PURE__ */ jsx(Component, { ...props })
+  );
+};
+export {
+  HonoXIsland
+};

package/dist/vite/components/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { HonoXIsland } from './honox-island.js';

package/dist/vite/components/index.js ADDED Viewed

@@ -0,0 +1,4 @@
+import { HonoXIsland } from "./honox-island.js";
+export {
+  HonoXIsland
+};

package/dist/vite/components.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare const HonoXIsland: ({ componentName, Component, props, }: {
+    componentName: string;
+    Component: Function;
+    props: any;
+}) => JSX.Element;
+export { HonoXIsland };