npm - honox - Versions diffs - 0.0.1 → 0.0.3 - Mend

honox 0.0.1 → 0.0.3

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 (25) hide show

package/README.md +57 -24
package/dist/constants.d.ts +2 -1
package/dist/constants.js +3 -1
package/dist/server/components/has-islands.d.ts +5 -0
package/dist/server/components/has-islands.js +10 -0
package/dist/server/components/index.d.ts +4 -0
package/dist/server/components/index.js +6 -0
package/dist/server/components/script.d.ts +11 -0
package/dist/server/components/script.js +31 -0
package/dist/server/factory/factory.d.ts +19 -0
package/dist/server/factory/factory.js +11 -0
package/dist/server/factory/index.d.ts +3 -0
package/dist/server/factory/index.js +5 -0
package/dist/server/index.d.ts +5 -0
package/dist/server/index.js +1 -0
package/dist/server/server.d.ts +5 -1
package/dist/server/server.js +30 -23
package/dist/vite/client.d.ts +10 -0
package/dist/vite/client.js +28 -0
package/dist/vite/index.d.ts +3 -3
package/dist/vite/index.js +10 -1
package/dist/vite/inject-importing-islands.d.ts +5 -0
package/dist/vite/inject-importing-islands.js +52 -0
package/dist/vite/island-components.js +2 -1
package/package.json +22 -10

package/README.md CHANGED Viewed

@@ -1,15 +1,15 @@
 # HonoX
-**HonoX** is a simple and fast meta framework for creating websites and Web APIs with Server-Side Rendering - (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://hono.dev/), and UI libraries.
-**Note**: _HonoX is currently in a "beta stage". There will be breaking changes without any announcement. Don't use it in production. However, feel free to try it in your hobby project and give us your feedback!_
+**Note**: _HonoX is currently in a "beta stage". Breaking changes are introduced without following semantic versioning._
 ## Features
-- **File-based routing** - You can create a large app by separating concerns.
+- **File-based routing** - You can create a large application like Next.js.
 - **Fast SSR** - Rendering is ultra-fast thanks to Hono.
 - **BYOR** - You can bring your own renderer, not only one using hono/jsx.
-- **Island hydration** - If you want interactions, create an island. JavaScript is hydrated only for it.
+- **Islands hydration** - If you want interactions, create an island. JavaScript is hydrated only for it.
 - **Middleware** - It works as Hono, so you can use a lot of Hono's middleware.
 ## Get Started - Basic
@@ -154,7 +154,7 @@ Before writing `_renderer.tsx`, write the Renderer type definition in `global.d.
 ```ts
 // app/global.d.ts
-import 'hono'
+import type {} from 'hono'
 type Head = {
   title?: string
@@ -179,7 +179,7 @@ export default jsxRenderer(({ children, title }) => {
       <head>
         <meta charset='UTF-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-        {title ? <title>{title}</title> : ''}
+        {title ? <title>{title}</title> : <></>}
       </head>
       <body>{children}</body>
     </html>
@@ -245,7 +245,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 can also load the JavaScript file for the production according to the variable `import.meta.env.PROD`.
+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
@@ -258,7 +258,9 @@ export default jsxRenderer(({ children }) => {
         <meta charset='UTF-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
         {import.meta.env.PROD ? (
-          <script type='module' src='/static/client.js'></script>
+          <HasIslands>
+            <script type='module' src='/static/client.js'></script>
+          </HasIslands>
         ) : (
           <script type='module' src='/app/client.ts'></script>
         )}
@@ -269,6 +271,27 @@ export default jsxRenderer(({ children }) => {
 })
 ```
+If you have a manifest file in `dist/.vite/manifest.json`, you can easily write it using `<Script />`.
+```tsx
+// app/routes/_renderer.tsx
+import { jsxRenderer } from 'hono/jsx-renderer'
+import { Script } from 'honox/server'
+export default jsxRenderer(({ children }) => {
+  return (
+    <html lang='en'>
+      <head>
+        <meta charset='UTF-8' />
+        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+        <Script src='/app/client.ts' />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+})
+```
 ### Client Entry File
 A client side entry file should be in `app/client.ts`. Simply, write `createClient()`.
@@ -320,7 +343,7 @@ export default createRoute((c) => {
 You can bring your own renderer using a UI library like React, Preact, Solid, or others.
-**Note**: We cannot provide technical support for the renderer you bring.
+**Note**: We may not provide supports for the renderer you bring.
 ### React case
@@ -389,6 +412,25 @@ createClient({
 ## Guides
+### Nested Layouts
+If you are using the JSX Renderer middleware, you can nest layouts using ` <Layout />`.
+```tsx
+// app/routes/posts/_renderer.tsx
+import { jsxRenderer } from 'hono/jsx-renderer'
+export default jsxRenderer(({ children, Layout }) => {
+  return (
+    <Layout>
+      <nav>Posts Menu</nav>
+      <div>{children}</div>
+    </Layout>
+  )
+})
+```
 ### 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:
@@ -533,6 +575,7 @@ Since a HonoX instance is essentially a Hono instance, it can be deployed on any
 Setup the `vite.config.ts`:
 ```ts
+// vite.config.ts
 import { defineConfig } from 'vite'
 import honox from 'honox/vite'
 import pages from '@hono/vite-cloudflare-pages'
@@ -546,25 +589,15 @@ If you want to include client side scripts and assets:
 ```ts
 // vite.config.ts
-import { defineConfig } from 'vite'
-import honox from 'honox/vite'
 import pages from '@hono/vite-cloudflare-pages'
+import honox from 'honox/vite'
+import client from 'honox/vite/client'
+import { defineConfig } from 'vite'
 export default defineConfig(({ mode }) => {
   if (mode === 'client') {
     return {
-      build: {
-        rollupOptions: {
-          input: ['./app/client.ts'],
-          output: {
-            entryFileNames: 'static/client.js',
-            chunkFileNames: 'static/assets/[name]-[hash].js',
-            assetFileNames: 'static/assets/[name].[ext]',
-          },
-        },
-        emptyOutDir: false,
-        copyPublicDir: false,
-      },
+      plugins: [client()],
     }
   } else {
     return {
@@ -577,7 +610,7 @@ export default defineConfig(({ mode }) => {
 Build command (including a client):
 ```txt
-vite build && vite build --mode 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:

package/dist/constants.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 declare const COMPONENT_NAME = "component-name";
 declare const DATA_SERIALIZED_PROPS = "data-serialized-props";
+declare const IMPORTING_ISLANDS_ID: "__importing_islands";
-export { COMPONENT_NAME, DATA_SERIALIZED_PROPS };
+export { COMPONENT_NAME, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/constants.js CHANGED Viewed

@@ -1,6 +1,8 @@
 const COMPONENT_NAME = "component-name";
 const DATA_SERIALIZED_PROPS = "data-serialized-props";
+const IMPORTING_ISLANDS_ID = "__importing_islands";
 export {
   COMPONENT_NAME,
-  DATA_SERIALIZED_PROPS
+  DATA_SERIALIZED_PROPS,
+  IMPORTING_ISLANDS_ID
 };

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

@@ -0,0 +1,5 @@
+import { FC } from 'hono/jsx';
+declare const HasIslands: FC;
+export { HasIslands };

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

@@ -0,0 +1,10 @@
+import { Fragment, jsx } from "hono/jsx/jsx-runtime";
+import { useRequestContext } from "hono/jsx-renderer";
+import { IMPORTING_ISLANDS_ID } from "../../constants.js";
+const HasIslands = ({ children }) => {
+  const c = useRequestContext();
+  return /* @__PURE__ */ jsx(Fragment, { children: c.get(IMPORTING_ISLANDS_ID) ? children : /* @__PURE__ */ jsx(Fragment, {}) });
+};
+export {
+  HasIslands
+};

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

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

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

@@ -0,0 +1,6 @@
+import { HasIslands } from "./has-islands.js";
+import { Script } from "./script.js";
+export {
+  HasIslands,
+  Script
+};

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

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

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

@@ -0,0 +1,31 @@
+import { Fragment, jsx } from "hono/jsx/jsx-runtime";
+import { HasIslands } from "./has-islands.js";
+const Script = 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) {
+        return /* @__PURE__ */ jsx(HasIslands, { children: /* @__PURE__ */ jsx("script", { type: "module", src: `/${scriptInManifest.file}` }) });
+      }
+    }
+    return /* @__PURE__ */ jsx(Fragment, {});
+  } else {
+    return /* @__PURE__ */ jsx("script", { type: "module", src });
+  }
+};
+export {
+  Script
+};

package/dist/server/factory/factory.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import * as hono_types from 'hono/types';
+import * as hono from 'hono';
+import { Env, Hono } from 'hono';
+declare const createRoute: {
+    <I extends hono.Input = {}>(handler1: hono_types.H<Env, any, I>): [hono_types.H<Env, any, I>];
+    <I_1 extends hono.Input = {}, I2 extends hono.Input = I_1, R extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_1, R>, handler2: hono_types.H<Env, any, I2, R>): [hono_types.H<Env, any, I_1, R>, hono_types.H<Env, any, I2, R>];
+    <I_2 extends hono.Input = {}, I2_1 extends hono.Input = I_2, I3 extends hono.Input = I_2 & I2_1, R_1 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_2, R_1>, handler2: hono_types.H<Env, any, I2_1, R_1>, handler3: hono_types.H<Env, any, I3, R_1>): [hono_types.H<Env, any, I_2, R_1>, hono_types.H<Env, any, I2_1, R_1>, hono_types.H<Env, any, I3, R_1>];
+    <I_3 extends hono.Input = {}, I2_2 extends hono.Input = I_3, I3_1 extends hono.Input = I_3 & I2_2, I4 extends hono.Input = I_3 & I2_2 & I3_1, R_2 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_3, R_2>, handler2: hono_types.H<Env, any, I2_2, R_2>, handler3: hono_types.H<Env, any, I3_1, R_2>, handler4: hono_types.H<Env, any, I4, R_2>): [hono_types.H<Env, any, I_3, R_2>, hono_types.H<Env, any, I2_2, R_2>, hono_types.H<Env, any, I3_1, R_2>, hono_types.H<Env, any, I4, R_2>];
+    <I_4 extends hono.Input = {}, I2_3 extends hono.Input = I_4, I3_2 extends hono.Input = I_4 & I2_3, I4_1 extends hono.Input = I_4 & I2_3 & I3_2, I5 extends hono.Input = I_4 & I2_3 & I3_2 & I4_1, R_3 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_4, R_3>, handler2: hono_types.H<Env, any, I2_3, R_3>, handler3: hono_types.H<Env, any, I3_2, R_3>, handler4: hono_types.H<Env, any, I4_1, R_3>, handler5: hono_types.H<Env, any, I5, R_3>): [hono_types.H<Env, any, I_4, R_3>, hono_types.H<Env, any, I2_3, R_3>, hono_types.H<Env, any, I3_2, R_3>, hono_types.H<Env, any, I4_1, R_3>, hono_types.H<Env, any, I5, R_3>];
+    <I_5 extends hono.Input = {}, I2_4 extends hono.Input = I_5, I3_3 extends hono.Input = I_5 & I2_4, I4_2 extends hono.Input = I_5 & I2_4 & I3_3, I5_1 extends hono.Input = I_5 & I2_4 & I3_3 & I4_2, I6 extends hono.Input = I_5 & I2_4 & I3_3 & I4_2 & I5_1, R_4 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_5, R_4>, handler2: hono_types.H<Env, any, I2_4, R_4>, handler3: hono_types.H<Env, any, I3_3, R_4>, handler4: hono_types.H<Env, any, I4_2, R_4>, handler5: hono_types.H<Env, any, I5_1, R_4>, handler6: hono_types.H<Env, any, I6, R_4>): [hono_types.H<Env, any, I_5, R_4>, hono_types.H<Env, any, I2_4, R_4>, hono_types.H<Env, any, I3_3, R_4>, hono_types.H<Env, any, I4_2, R_4>, hono_types.H<Env, any, I5_1, R_4>, hono_types.H<Env, any, I6, R_4>];
+    <I_6 extends hono.Input = {}, I2_5 extends hono.Input = I_6, I3_4 extends hono.Input = I_6 & I2_5, I4_3 extends hono.Input = I_6 & I2_5 & I3_4, I5_2 extends hono.Input = I_6 & I2_5 & I3_4 & I4_3, I6_1 extends hono.Input = I_6 & I2_5 & I3_4 & I4_3 & I5_2, I7 extends hono.Input = I_6 & I2_5 & I3_4 & I4_3 & I5_2 & I6_1, R_5 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_6, R_5>, handler2: hono_types.H<Env, any, I2_5, R_5>, handler3: hono_types.H<Env, any, I3_4, R_5>, handler4: hono_types.H<Env, any, I4_3, R_5>, handler5: hono_types.H<Env, any, I5_2, R_5>, handler6: hono_types.H<Env, any, I6_1, R_5>, handler7: hono_types.H<Env, any, I7, R_5>): [hono_types.H<Env, any, I_6, R_5>, hono_types.H<Env, any, I2_5, R_5>, hono_types.H<Env, any, I3_4, R_5>, hono_types.H<Env, any, I4_3, R_5>, hono_types.H<Env, any, I5_2, R_5>, hono_types.H<Env, any, I6_1, R_5>, hono_types.H<Env, any, I7, R_5>];
+    <I_7 extends hono.Input = {}, I2_6 extends hono.Input = I_7, I3_5 extends hono.Input = I_7 & I2_6, I4_4 extends hono.Input = I_7 & I2_6 & I3_5, I5_3 extends hono.Input = I_7 & I2_6 & I3_5 & I4_4, I6_2 extends hono.Input = I_7 & I2_6 & I3_5 & I4_4 & I5_3, I7_1 extends hono.Input = I_7 & I2_6 & I3_5 & I4_4 & I5_3 & I6_2, I8 extends hono.Input = I_7 & I2_6 & I3_5 & I4_4 & I5_3 & I6_2 & I7_1, R_6 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_7, R_6>, handler2: hono_types.H<Env, any, I2_6, R_6>, handler3: hono_types.H<Env, any, I3_5, R_6>, handler4: hono_types.H<Env, any, I4_4, R_6>, handler5: hono_types.H<Env, any, I5_3, R_6>, handler6: hono_types.H<Env, any, I6_2, R_6>, handler7: hono_types.H<Env, any, I7_1, R_6>, handler8: hono_types.H<Env, any, I8, R_6>): [hono_types.H<Env, any, I_7, R_6>, hono_types.H<Env, any, I2_6, R_6>, hono_types.H<Env, any, I3_5, R_6>, hono_types.H<Env, any, I4_4, R_6>, hono_types.H<Env, any, I5_3, R_6>, hono_types.H<Env, any, I6_2, R_6>, hono_types.H<Env, any, I7_1, R_6>, hono_types.H<Env, any, I8, R_6>];
+    <I_8 extends hono.Input = {}, I2_7 extends hono.Input = I_8, I3_6 extends hono.Input = I_8 & I2_7, I4_5 extends hono.Input = I_8 & I2_7 & I3_6, I5_4 extends hono.Input = I_8 & I2_7 & I3_6 & I4_5, I6_3 extends hono.Input = I_8 & I2_7 & I3_6 & I4_5 & I5_4, I7_2 extends hono.Input = I_8 & I2_7 & I3_6 & I4_5 & I5_4 & I6_3, I8_1 extends hono.Input = I_8 & I2_7 & I3_6 & I4_5 & I5_4 & I6_3 & I7_2, I9 extends hono.Input = I_8 & I2_7 & I3_6 & I4_5 & I5_4 & I6_3 & I7_2 & I8_1, R_7 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_8, R_7>, handler2: hono_types.H<Env, any, I2_7, R_7>, handler3: hono_types.H<Env, any, I3_6, R_7>, handler4: hono_types.H<Env, any, I4_5, R_7>, handler5: hono_types.H<Env, any, I5_4, R_7>, handler6: hono_types.H<Env, any, I6_3, R_7>, handler7: hono_types.H<Env, any, I7_2, R_7>, handler8: hono_types.H<Env, any, I8_1, R_7>, handler9: hono_types.H<Env, any, I9, R_7>): [hono_types.H<Env, any, I_8, R_7>, hono_types.H<Env, any, I2_7, R_7>, hono_types.H<Env, any, I3_6, R_7>, hono_types.H<Env, any, I4_5, R_7>, hono_types.H<Env, any, I5_4, R_7>, hono_types.H<Env, any, I6_3, R_7>, hono_types.H<Env, any, I7_2, R_7>, hono_types.H<Env, any, I8_1, R_7>, hono_types.H<Env, any, I9, R_7>];
+    <I_9 extends hono.Input = {}, I2_8 extends hono.Input = I_9, I3_7 extends hono.Input = I_9 & I2_8, I4_6 extends hono.Input = I_9 & I2_8 & I3_7, I5_5 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6, I6_4 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6 & I5_5, I7_3 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6 & I5_5 & I6_4, I8_2 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6 & I5_5 & I6_4 & I7_3, I9_1 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6 & I5_5 & I6_4 & I7_3 & I8_2, I10 extends hono.Input = I_9 & I2_8 & I3_7 & I4_6 & I5_5 & I6_4 & I7_3 & I8_2 & I9_1, R_8 extends hono_types.HandlerResponse<any> = any>(handler1: hono_types.H<Env, any, I_9, R_8>, handler2: hono_types.H<Env, any, I2_8, R_8>, handler3: hono_types.H<Env, any, I3_7, R_8>, handler4: hono_types.H<Env, any, I4_6, R_8>, handler5: hono_types.H<Env, any, I5_5, R_8>, handler6: hono_types.H<Env, any, I6_4, R_8>, handler7: hono_types.H<Env, any, I7_3, R_8>, handler8: hono_types.H<Env, any, I8_2, R_8>, handler9: hono_types.H<Env, any, I9_1, R_8>, handler10: hono_types.H<Env, any, I10, R_8>): [hono_types.H<Env, any, I_9, R_8>, hono_types.H<Env, any, I2_8, R_8>, hono_types.H<Env, any, I3_7, R_8>, hono_types.H<Env, any, I4_6, R_8>, hono_types.H<Env, any, I5_5, R_8>, hono_types.H<Env, any, I6_4, R_8>, hono_types.H<Env, any, I7_3, R_8>, hono_types.H<Env, any, I8_2, R_8>, hono_types.H<Env, any, I9_1, R_8>, hono_types.H<Env, any, I10, R_8>];
+};
+declare const createHono: () => Hono<Env, hono_types.BlankSchema, "/">;
+export { createHono, createRoute };

package/dist/server/factory/factory.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { Hono } from "hono";
+import { createFactory } from "hono/factory";
+const factory = createFactory();
+const createRoute = factory.createHandlers;
+const createHono = () => {
+  return new Hono();
+};
+export {
+  createHono,
+  createRoute
+};

package/dist/server/factory/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { createHono, createRoute } from './factory.js';
+import 'hono/types';
+import 'hono';

package/dist/server/factory/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { createRoute, createHono } from "./factory.js";
+export {
+  createHono,
+  createRoute
+};

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

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

package/dist/server/index.js CHANGED Viewed

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

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

@@ -1,13 +1,17 @@
 import * as hono_types from 'hono/types';
 import { H } from 'hono/types';
 import { Env, Hono, MiddlewareHandler, NotFoundHandler, ErrorHandler } from 'hono';
+import { IMPORTING_ISLANDS_ID } from '../constants.js';
 declare const METHODS: readonly ["GET", "POST", "PUT", "DELETE", "OPTIONS", "PATCH"];
+type InnerMeta = {
+    [key in typeof IMPORTING_ISLANDS_ID]?: boolean;
+};
 type RouteFile = {
     default?: Function;
 } & {
     [M in (typeof METHODS)[number]]?: H[];
-};
+} & InnerMeta;
 type RendererFile = {
     default: MiddlewareHandler;
 };

package/dist/server/server.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Hono } from "hono";
+import { createMiddleware } from "hono/factory";
+import { IMPORTING_ISLANDS_ID } from "../constants.js";
 import {
   filePathToPath,
   groupByDirectory,
   listByDirectory,
-  pathToDirectoryPath,
   sortDirectoriesByDepth
 } from "../utils/file.js";
 const NOTFOUND_FILENAME = "_404.tsx";
@@ -28,10 +29,12 @@ const createApp = (options) => {
     eager: true
   });
   const rendererList = listByDirectory(RENDERER_FILE);
-  const applyRenderer = (rendererFile) => {
+  const applyRenderer = (app2, rendererFile) => {
     const renderer = RENDERER_FILE[rendererFile];
-    const path = pathToDirectoryPath(rendererFile).replace(rootRegExp, "");
-    app.all(`${filePathToPath(path)}*`, renderer.default);
+    const rendererDefault = renderer["default"];
+    if (rendererDefault) {
+      app2.all("*", rendererDefault);
+    }
   };
   const ROUTES_FILE = options?.ROUTES ?? import.meta.glob("/app/routes/**/[!_]*.(ts|tsx|mdx)", {
     eager: true
@@ -40,30 +43,31 @@ const createApp = (options) => {
   for (const map of routesMap) {
     for (const [dir, content] of Object.entries(map)) {
       const subApp = new Hono();
-      let rendererFiles = rendererList[dir];
-      if (rendererFiles) {
-        applyRenderer(rendererFiles[0]);
-      }
-      if (!rendererFiles) {
-        const dirPaths = dir.split("/");
-        const getRendererPaths = (paths) => {
-          rendererFiles = rendererList[paths.join("/")];
-          if (!rendererFiles) {
-            paths.pop();
-            if (paths.length) {
-              getRendererPaths(paths);
-            }
+      let rendererPaths = rendererList[dir] ?? [];
+      const getRendererPaths = (paths) => {
+        rendererPaths = rendererList[paths.join("/")];
+        if (!rendererPaths) {
+          paths.pop();
+          if (paths.length) {
+            getRendererPaths(paths);
           }
-          return rendererFiles;
-        };
-        rendererFiles = getRendererPaths(dirPaths);
-        if (rendererFiles) {
-          applyRenderer(rendererFiles[0]);
         }
-      }
+        return rendererPaths ?? [];
+      };
+      const dirPaths = dir.split("/");
+      rendererPaths = getRendererPaths(dirPaths);
+      rendererPaths.sort((a, b) => a.split("/").length - b.split("/").length);
+      rendererPaths.map((path) => {
+        applyRenderer(subApp, path);
+      });
       let rootPath = dir.replace(rootRegExp, "");
       rootPath = filePathToPath(rootPath);
       for (const [filename, route] of Object.entries(content)) {
+        const importingIslands = route[IMPORTING_ISLANDS_ID];
+        const setInnerMeta = createMiddleware(async function innerMeta(c, next) {
+          c.set(IMPORTING_ISLANDS_ID, importingIslands);
+          await next();
+        });
         const routeDefault = route.default;
         const path = filePathToPath(filename);
         if (routeDefault && "fetch" in routeDefault) {
@@ -72,13 +76,16 @@ const createApp = (options) => {
         for (const m of METHODS) {
           const handlers = route[m];
           if (handlers) {
+            subApp.on(m, path, setInnerMeta);
             subApp.on(m, path, ...handlers);
           }
         }
         if (routeDefault && Array.isArray(routeDefault)) {
+          subApp.get(path, setInnerMeta);
           subApp.get(path, ...routeDefault);
         }
         if (typeof routeDefault === "function") {
+          subApp.get(path, setInnerMeta);
           subApp.get(path, (c) => {
             return c.render(routeDefault(), route);
           });

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

@@ -0,0 +1,10 @@
+import { Plugin } from 'vite';
+type Options = {
+    jsxImportSource?: string;
+    assetsDir?: string;
+};
+declare const defaultOptions: Options;
+declare function client(options?: Options): Plugin;
+export { client as default, defaultOptions };

package/dist/vite/client.js ADDED Viewed

@@ -0,0 +1,28 @@
+const defaultOptions = {
+  jsxImportSource: "hono/jsx/dom",
+  assetsDir: "static"
+};
+function client(options) {
+  return {
+    name: "honox-vite-client",
+    config: () => {
+      return {
+        build: {
+          rollupOptions: {
+            input: ["/app/client.ts"]
+          },
+          assetsDir: options?.assetsDir ?? defaultOptions.assetsDir,
+          manifest: true
+        },
+        esbuild: {
+          jsxImportSource: options?.jsxImportSource ?? defaultOptions.jsxImportSource
+        }
+      };
+    }
+  };
+}
+var client_default = client;
+export {
+  client_default as default,
+  defaultOptions
+};

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

@@ -3,13 +3,13 @@ export { defaultOptions as devServerDefaultOptions } from '@hono/vite-dev-server
 import { PluginOption } from 'vite';
 export { islandComponents } from './island-components.js';
-type HonoXOptions = {
+type Options = {
     islands?: boolean;
     entry?: string;
     devServer?: DevServerOptions;
     external?: string[];
 };
-declare const defaultOptions: HonoXOptions;
-declare function honox(options?: HonoXOptions): PluginOption[];
+declare const defaultOptions: Options;
+declare function honox(options?: Options): PluginOption[];
 export { honox as default, defaultOptions };

package/dist/vite/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import path from "path";
 import devServer, { defaultOptions as devServerDefaultOptions } from "@hono/vite-dev-server";
+import { injectImportingIslands } from "./inject-importing-islands.js";
 import { islandComponents } from "./island-components.js";
 const defaultOptions = {
   islands: true,
@@ -23,9 +24,17 @@ function honox(options) {
   if (options?.islands !== false) {
     plugins.push(islandComponents());
   }
+  plugins.push(injectImportingIslands());
   return [
     {
-      name: "honox-vite-config"
+      name: "honox-vite-config",
+      config: () => {
+        return {
+          ssr: {
+            noExternal: true
+          }
+        };
+      }
     },
     ...plugins
   ];

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

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

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

@@ -0,0 +1,52 @@
+import _generate from "@babel/generator";
+import { parse } from "@babel/parser";
+import _traverse from "@babel/traverse";
+import { IMPORTING_ISLANDS_ID } from "../constants.js";
+const traverse = _traverse.default ?? _traverse;
+const generate = _generate.default ?? _generate;
+function injectImportingIslands() {
+  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"
+            }
+          };
+          ast.program.body.push(hasIslandsNode);
+        }
+        const output = generate(ast, {}, code);
+        return {
+          code: output.code,
+          map: output.map
+        };
+      }
+    }
+  };
+}
+export {
+  injectImportingIslands
+};

package/dist/vite/island-components.js CHANGED Viewed

@@ -75,8 +75,9 @@ const transformJsxTags = (contents, componentName) => {
       ExportDefaultDeclaration(path) {
         if (path.node.declaration.type === "FunctionDeclaration") {
           const functionId = path.node.declaration.id;
-          if (!functionId)
+          if (!functionId) {
             return;
+          }
           const isAsync = path.node.declaration.async;
           const originalFunctionId = identifier(functionId.name + "Original");
           const originalFunction = functionExpression(

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -8,15 +8,18 @@
     "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",
     "typecheck": "tsc --noEmit",
     "build": "tsup && publint",
     "watch": "tsup --watch",
-    "lint": "eslint src/**.ts",
-    "lint:fix": "eslint src/**.ts --fix",
-    "prerelease": "yarn test && yarn build",
-    "release": "np --no-yarn"
+    "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}\"",
+    "prerelease": "bun run test && bun run build",
+    "release": "np"
   },
   "files": [
     "dist"
@@ -49,6 +52,10 @@
     "./vite": {
       "types": "./dist/vite/index.d.ts",
       "import": "./dist/vite/index.js"
+    },
+    "./vite/client": {
+      "types": "./dist/vite/client.d.ts",
+      "import": "./dist/vite/client.js"
     }
   },
   "typesVersions": {
@@ -70,6 +77,9 @@
       ],
       "vite": [
         "./dist/vite"
+      ],
+      "vite/client": [
+        "./dist/vite/client"
       ]
     }
   },
@@ -89,10 +99,10 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.4.1"
+    "@hono/vite-dev-server": "^0.5.0"
   },
   "devDependencies": {
-    "@hono/eslint-config": "^0.0.3",
+    "@hono/eslint-config": "^0.0.4",
     "@mdx-js/rollup": "^3.0.0",
     "@playwright/test": "^1.41.0",
     "@types/babel__generator": "^7",
@@ -100,8 +110,8 @@
     "@types/node": "^20.10.5",
     "eslint": "^8.56.0",
     "glob": "^10.3.10",
-    "hono": "4.0.0-rc.2",
-    "np": "^9.2.0",
+    "hono": "4.0.0-rc.4",
+    "np": "7.7.0",
     "prettier": "^3.1.1",
     "publint": "^0.2.7",
     "tsup": "^8.0.1",
@@ -109,8 +119,10 @@
     "vite": "^5.0.12",
     "vitest": "^1.2.1"
   },
-  "packageManager": "yarn@4.0.2",
   "engines": {
     "node": ">=18.14.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   }
 }