honox 0.1.5 → 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.
@@ -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/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/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";
@@ -96,8 +97,8 @@ const transformJsxTags = (contents, componentName) => {
   if (ast) {
     let wrappedFunctionId;
     traverse(ast, {
-      ExportNamedDeclaration(path) {
-        for (const specifier of path.node.specifiers) {
+      ExportNamedDeclaration(path2) {
+        for (const specifier of path2.node.specifiers) {
           if (specifier.type !== "ExportSpecifier") {
             continue;
           }
@@ -107,29 +108,29 @@ const transformJsxTags = (contents, componentName) => {
           }
           const wrappedFunction = addSSRCheck(specifier.local.name, componentName);
           const wrappedFunctionId2 = identifier("Wrapped" + specifier.local.name);
-          path.insertBefore(
+          path2.insertBefore(
             variableDeclaration("const", [variableDeclarator(wrappedFunctionId2, wrappedFunction)])
           );
           specifier.local.name = wrappedFunctionId2.name;
         }
       },
-      ExportDefaultDeclaration(path) {
-        const declarationType = path.node.declaration.type;
+      ExportDefaultDeclaration(path2) {
+        const declarationType = path2.node.declaration.type;
         if (declarationType === "FunctionDeclaration" || declarationType === "FunctionExpression" || declarationType === "ArrowFunctionExpression" || declarationType === "Identifier") {
-          const functionName = (declarationType === "Identifier" ? path.node.declaration.name : (declarationType === "FunctionDeclaration" || declarationType === "FunctionExpression") && path.node.declaration.id?.name) || "__HonoIsladComponent__";
+          const functionName = (declarationType === "Identifier" ? path2.node.declaration.name : (declarationType === "FunctionDeclaration" || declarationType === "FunctionExpression") && path2.node.declaration.id?.name) || "__HonoIsladComponent__";
           let originalFunctionId;
           if (declarationType === "Identifier") {
-            originalFunctionId = path.node.declaration;
+            originalFunctionId = path2.node.declaration;
           } else {
             originalFunctionId = identifier(functionName + "Original");
-            const originalFunction = path.node.declaration.type === "FunctionExpression" || path.node.declaration.type === "ArrowFunctionExpression" ? path.node.declaration : functionExpression(
+            const originalFunction = path2.node.declaration.type === "FunctionExpression" || path2.node.declaration.type === "ArrowFunctionExpression" ? path2.node.declaration : functionExpression(
               null,
-              path.node.declaration.params,
-              path.node.declaration.body,
+              path2.node.declaration.params,
+              path2.node.declaration.body,
               void 0,
-              path.node.declaration.async
+              path2.node.declaration.async
             );
-            path.insertBefore(
+            path2.insertBefore(
               variableDeclaration("const", [
                 variableDeclarator(originalFunctionId, originalFunction)
               ])
@@ -137,7 +138,7 @@ const transformJsxTags = (contents, componentName) => {
           }
           const wrappedFunction = addSSRCheck(originalFunctionId.name, componentName);
           wrappedFunctionId = identifier("Wrapped" + functionName);
-          path.replaceWith(
+          path2.replaceWith(
             variableDeclaration("const", [variableDeclarator(wrappedFunctionId, wrappedFunction)])
           );
         }
@@ -150,10 +151,22 @@ const transformJsxTags = (contents, componentName) => {
     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.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -106,7 +106,8 @@
     "@babel/parser": "^7.23.6",
     "@babel/traverse": "^7.23.6",
     "@babel/types": "^7.23.6",
-    "@hono/vite-dev-server": "^0.7.1"
+    "@hono/vite-dev-server": "^0.8.1",
+    "precinct": "^11.0.5"
   },
   "peerDependencies": {
     "hono": ">=4.*"
@@ -114,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",