honox 0.1.4 → 0.1.5

package/README.md

@@ -383,7 +383,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

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/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/island-components.js

@@ -25,7 +25,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 +86,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,35 +94,58 @@ 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(path) {
+        for (const specifier of path.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;
           }
+          const wrappedFunction = addSSRCheck(specifier.local.name, componentName);
+          const wrappedFunctionId2 = identifier("Wrapped" + specifier.local.name);
           path.insertBefore(
-            variableDeclaration("const", [variableDeclarator(originalFunctionId, originalFunction)])
+            variableDeclaration("const", [variableDeclarator(wrappedFunctionId2, wrappedFunction)])
           );
-          const wrappedFunction = addSSRCheck(originalFunctionId.name, componentName, isAsync);
-          const wrappedFunctionId = identifier("Wrapped" + functionId.name);
+          specifier.local.name = wrappedFunctionId2.name;
+        }
+      },
+      ExportDefaultDeclaration(path) {
+        const declarationType = path.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__";
+          let originalFunctionId;
+          if (declarationType === "Identifier") {
+            originalFunctionId = path.node.declaration;
+          } else {
+            originalFunctionId = identifier(functionName + "Original");
+            const originalFunction = path.node.declaration.type === "FunctionExpression" || path.node.declaration.type === "ArrowFunctionExpression" ? path.node.declaration : functionExpression(
+              null,
+              path.node.declaration.params,
+              path.node.declaration.body,
+              void 0,
+              path.node.declaration.async
+            );
+            path.insertBefore(
+              variableDeclaration("const", [
+                variableDeclarator(originalFunctionId, originalFunction)
+              ])
+            );
+          }
+          const wrappedFunction = addSSRCheck(originalFunctionId.name, componentName);
+          wrappedFunctionId = identifier("Wrapped" + functionName);
           path.replaceWith(
             variableDeclaration("const", [variableDeclarator(wrappedFunctionId, wrappedFunction)])
           );
-          path.insertAfter(exportDefaultDeclaration(wrappedFunctionId));
         }
       }
     });
+    if (wrappedFunctionId) {
+      ast.program.body.push(exportDefaultDeclaration(wrappedFunctionId));
+    }
     const { code } = generate(ast);
     return code;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "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,7 @@
     "@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.7.1"
   },
   "peerDependencies": {
     "hono": ">=4.*"