honox 0.1.1 → 0.1.2

package/README.md

@@ -157,7 +157,7 @@ export default app
 Or simply, you can just return JSX.
 
 ```tsx
-export default function Home() {
+export default function Home(_c: Context) {
   return <h1>Welcome!</h1>
 }
 ```

package/dist/client/client.d.ts

@@ -1,8 +1,12 @@
-import { Hydrate, CreateElement } from '../types.js';
+import { Hydrate, CreateElement, CreateChildren } from '../types.js';
 
 type ClientOptions = {
     hydrate?: Hydrate;
     createElement?: CreateElement;
+    /**
+     * Create "children" attribute of a component from a list of child nodes
+     */
+    createChildren?: CreateChildren;
     ISLAND_FILES?: Record<string, () => Promise<unknown>>;
     island_root?: string;
 };

package/dist/client/client.js

@@ -1,6 +1,6 @@
 import { render } from "hono/jsx/dom";
 import { jsx as jsxFn } from "hono/jsx/dom/jsx-runtime";
-import { COMPONENT_NAME, DATA_SERIALIZED_PROPS } from "../constants.js";
+import { COMPONENT_NAME, 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)");
   const root = options?.island_root ?? "/app/islands/";
@@ -17,6 +17,17 @@ const createClient = async (options) => {
           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 createChildren = options?.createChildren;
+            if (!createChildren) {
+              const { buildCreateChildrenFn } = await import("./runtime");
+              createChildren = buildCreateChildrenFn(createElement);
+            }
+            props.children = await createChildren(
+              maybeTemplate.content.childNodes
+            );
+          }
           const newElem = await createElement(Component, props);
           await hydrate(newElem, element);
         });

package/dist/client/runtime.d.ts

@@ -0,0 +1,5 @@
+import { CreateElement, CreateChildren } from '../types.js';
+
+declare const buildCreateChildrenFn: (createElement: CreateElement) => CreateChildren;
+
+export { buildCreateChildrenFn };

package/dist/client/runtime.js

@@ -0,0 +1,81 @@
+import { Suspense, use } from "hono/jsx/dom";
+const buildCreateChildrenFn = (createElement) => {
+  const createChildren = async (childNodes) => {
+    const children = [];
+    for (let i = 0; i < childNodes.length; i++) {
+      const child = childNodes[i];
+      if (child.nodeType === 8) {
+        continue;
+      } else if (child.nodeType === 3) {
+        children.push(child.textContent);
+      } else if (child.nodeName === "TEMPLATE" && child.id.match(/(?:H|E):\d+/)) {
+        const placeholderElement = document.createElement("hono-placeholder");
+        placeholderElement.style.display = "none";
+        let resolve;
+        const promise = new Promise((r) => resolve = r);
+        child.replaceWith = (node) => {
+          createChildren(node.childNodes).then(resolve);
+          placeholderElement.remove();
+        };
+        let fallback = [];
+        for (
+          // equivalent to i++
+          placeholderElement.appendChild(child);
+          i < childNodes.length;
+          i++
+        ) {
+          const child2 = childNodes[i];
+          if (child2.nodeType === 8) {
+            placeholderElement.appendChild(child2);
+            i--;
+            break;
+          } else if (child2.nodeType === 3) {
+            fallback.push(child2.textContent);
+          } else {
+            fallback.push(
+              await createElement(child2.nodeName, {
+                children: await createChildren(child2.childNodes)
+              })
+            );
+          }
+        }
+        const fallbackTemplates = document.querySelectorAll(
+          `[data-hono-target="${child.id}"]`
+        );
+        if (fallbackTemplates.length > 0) {
+          const fallbackTemplate = fallbackTemplates[fallbackTemplates.length - 1];
+          fallback = await createChildren(fallbackTemplate.content.childNodes);
+        }
+        if (fallback.length === 0 && child.id.startsWith("E:")) {
+          let resolve2;
+          const promise2 = new Promise((r) => resolve2 = r);
+          fallback = await createElement(Suspense, {
+            fallback: [],
+            children: [await createElement(() => use(promise2), {})]
+          });
+          placeholderElement.insertBefore = (node) => {
+            createChildren(node.childNodes).then(resolve2);
+          };
+        }
+        document.body.appendChild(placeholderElement);
+        children.push(
+          await createElement(Suspense, {
+            fallback,
+            children: [await createElement(() => use(promise), {})]
+          })
+        );
+      } else {
+        children.push(
+          await createElement(child.nodeName, {
+            children: await createChildren(child.childNodes)
+          })
+        );
+      }
+    }
+    return children;
+  };
+  return createChildren;
+};
+export {
+  buildCreateChildrenFn
+};

package/dist/constants.d.ts

@@ -1,5 +1,6 @@
 declare const COMPONENT_NAME = "component-name";
 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_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };
+export { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/constants.js

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

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

@@ -3,6 +3,7 @@ import { Manifest } from 'vite';
 
 type Options = {
     src: string;
+    async?: boolean;
     prod?: boolean;
     manifest?: Manifest;
 };

package/dist/server/components/script.js

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

package/dist/server/server.js

@@ -87,7 +87,7 @@ const createApp = (options) => {
         if (typeof routeDefault === "function") {
           subApp.get(path, setInnerMeta);
           subApp.get(path, (c) => {
-            return c.render(routeDefault(), route);
+            return c.render(routeDefault(c), route);
           });
         }
       }

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 /** JSX */
 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[]>;
 
-export type { CreateElement, Hydrate };
+export type { CreateChildren, CreateElement, Hydrate };

package/dist/utils/file.js

@@ -1,5 +1,5 @@
 const filePathToPath = (filePath) => {
-  filePath = filePath.replace(/\.tsx?$/g, "").replace(/\.mdx$/g, "").replace(/^\/?index/, "/").replace(/\/index/, "").replace(/\[\.{3}.+\]/, "*").replace(/\[(.+)\]/, ":$1");
+  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) => {

package/dist/vite/island-components.js

@@ -24,13 +24,25 @@ import {
   conditionalExpression,
   memberExpression
 } from "@babel/types";
-import { COMPONENT_NAME, DATA_SERIALIZED_PROPS } from "../constants.js";
+import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
 function addSSRCheck(funcName, componentName, isAsync = false) {
   const isSSR = memberExpression(
     memberExpression(identifier("import"), identifier("meta")),
     identifier("env.SSR")
   );
-  const serializedProps = callExpression(identifier("JSON.stringify"), [identifier("props")]);
+  const serializedProps = callExpression(identifier("JSON.stringify"), [
+    callExpression(memberExpression(identifier("Object"), identifier("fromEntries")), [
+      callExpression(
+        memberExpression(
+          callExpression(memberExpression(identifier("Object"), identifier("entries")), [
+            identifier("props")
+          ]),
+          identifier("filter")
+        ),
+        [identifier('([key]) => key !== "children"')]
+      )
+    ])
+  ]);
   const ssrElement = jsxElement(
     jsxOpeningElement(
       jsxIdentifier("honox-island"),
@@ -50,6 +62,21 @@ function addSSRCheck(funcName, componentName, isAsync = false) {
         ),
         jsxClosingElement(jsxIdentifier(funcName)),
         []
+      ),
+      jsxExpressionContainer(
+        conditionalExpression(
+          memberExpression(identifier("props"), identifier("children")),
+          jsxElement(
+            jsxOpeningElement(
+              jsxIdentifier("template"),
+              [jsxAttribute(jsxIdentifier(DATA_HONO_TEMPLATE), stringLiteral(""))],
+              false
+            ),
+            jsxClosingElement(jsxIdentifier("template")),
+            [jsxExpressionContainer(memberExpression(identifier("props"), identifier("children")))]
+          ),
+          identifier("null")
+        )
       )
     ]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "honox",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.js",
   "type": "module",
   "scripts": {
@@ -113,7 +113,7 @@
     "@types/node": "^20.10.5",
     "eslint": "^8.56.0",
     "glob": "^10.3.10",
-    "hono": "^4.0.1",
+    "hono": "^4.0.3",
     "np": "7.7.0",
     "prettier": "^3.1.1",
     "publint": "^0.2.7",