honox 0.1.53 → 0.1.55

package/README.md

@@ -2,7 +2,7 @@
 
 **HonoX** is a simple and fast 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 the "alpha stage". Breaking changes are introduced without following semantic versioning._
+**Note**: _HonoX is currently in the "alpha stage". Breaking changes are introduced within the same major version, following [semantic versioning for zerover](https://semver.org/#spec-item-4)._
 
 ## Features
 

package/dist/client/client.d.ts

@@ -1,22 +1,23 @@
-import { Hydrate, CreateElement, CreateChildren, TriggerHydration } from '../types.js';
+import { CreateChildren, CreateElement, Hydrate, TriggerHydration } from "../types.js";
 
+//#region src/client/client.d.ts
 type ClientOptions = {
-    hydrate?: Hydrate;
-    createElement?: CreateElement;
-    /**
-     * 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>>;
-    /**
-     * @deprecated
-     */
-    island_root?: string;
+  hydrate?: Hydrate;
+  createElement?: CreateElement;
+  /**
+   * 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>>;
+  /**
+   * @deprecated
+   */
+  island_root?: string;
 };
 declare const createClient: (options?: ClientOptions) => Promise<void>;
-
-export { type ClientOptions, createClient };
+//#endregion
+export { ClientOptions, createClient };

package/dist/client/client.js

@@ -1,80 +1,59 @@
-import { render, createElement as createElementHono } from "hono/jsx/dom";
-import {
-  COMPONENT_EXPORT,
-  COMPONENT_NAME,
-  DATA_HONO_TEMPLATE,
-  DATA_SERIALIZED_PROPS
-} from "../constants.js";
+import { COMPONENT_EXPORT, COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
 import { filterByPattern } from "./utils/filter.js";
+import { createElement, render } from "hono/jsx/dom";
+
+//#region src/client/client.ts
 const createClient = async (options) => {
-  const FILES = options?.ISLAND_FILES ?? filterByPattern(
-    {
-      ...import.meta.glob("/app/islands/**/*.tsx"),
-      ...import.meta.glob("/app/**/*.island.tsx"),
-      ...import.meta.glob("/app/**/$*.tsx")
-    },
-    [
-      /\/[a-zA-Z0-9-]+\.tsx$/,
-      // /app/islands/**/*.tsx
-      /\/_[a-zA-Z0-9-]+\.island\.tsx$/,
-      // /app/**/_*.island.tsx
-      /\/\$[a-zA-Z0-9-]+\.tsx$/
-      // /app/**/$*.tsx
-    ]
-  );
-  const hydrateComponent = async (document2) => {
-    const filePromises = Object.keys(FILES).map(async (filePath) => {
-      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[exportName];
-          const serializedProps = element.attributes.getNamedItem(DATA_SERIALIZED_PROPS)?.value;
-          const props = JSON.parse(serializedProps ?? "{}");
-          const hydrate = options?.hydrate ?? render;
-          const createElement = options?.createElement ?? createElementHono;
-          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[`${name}`]()).default
-              );
-            }
-            props[propKey] = await createChildren(
-              maybeTemplate.content.childNodes
-            );
-            maybeTemplate = maybeTemplate.previousSibling;
-          }
-          const newElem = await createElement(Component, props);
-          await hydrate(newElem, element);
-        });
-        await Promise.all(elementPromises);
-      }
-    });
-    await Promise.all(filePromises);
-  };
-  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
+	const FILES = options?.ISLAND_FILES ?? filterByPattern({
+		...import.meta.glob("/app/islands/**/*.tsx"),
+		...import.meta.glob("/app/**/*.island.tsx"),
+		...import.meta.glob("/app/**/$*.tsx")
+	}, [
+		/\/[a-zA-Z0-9-]+\.tsx$/,
+		/\/_[a-zA-Z0-9-]+\.island\.tsx$/,
+		/\/\$[a-zA-Z0-9-]+\.tsx$/
+	]);
+	const hydrateComponent = async (document) => {
+		const filePromises = Object.keys(FILES).map(async (filePath) => {
+			const componentName = filePath;
+			const elements = document.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 Component = await (await fileCallback())[exportName];
+					const serializedProps = element.attributes.getNamedItem(DATA_SERIALIZED_PROPS)?.value;
+					const props = JSON.parse(serializedProps ?? "{}");
+					const hydrate = options?.hydrate ?? render;
+					const createElement$1 = options?.createElement ?? createElement;
+					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.js");
+							createChildren = buildCreateChildrenFn(createElement$1, async (name) => (await FILES[`${name}`]()).default);
+						}
+						props[propKey] = await createChildren(maybeTemplate.content.childNodes);
+						maybeTemplate = maybeTemplate.previousSibling;
+					}
+					await hydrate(await createElement$1(Component, props), element);
+				});
+				await Promise.all(elementPromises);
+			}
+		});
+		await Promise.all(filePromises);
+	};
+	await (options?.triggerHydration ?? (async (hydrateComponent) => {
+		if (document.querySelector("template[id^=\"H:\"], template[id^=\"E:\"]")) {
+			const { hydrateComponentHonoSuspense } = await import("./runtime.js");
+			await hydrateComponentHonoSuspense(hydrateComponent);
+		}
+		await hydrateComponent(document);
+	}))?.(hydrateComponent);
 };
+
+//#endregion
+export { createClient };

package/dist/client/index.d.ts

@@ -1,2 +1,2 @@
-export { ClientOptions, createClient } from './client.js';
-import '../types.js';
+import { ClientOptions, createClient } from "./client.js";
+export { type ClientOptions, createClient };

package/dist/client/index.js

@@ -1,4 +1,3 @@
 import { createClient } from "./client.js";
-export {
-  createClient
-};
+
+export { createClient };

package/dist/client/runtime.d.ts

@@ -1,7 +1,8 @@
-import { CreateElement, CreateChildren, HydrateComponent } from '../types.js';
+import { CreateChildren, CreateElement, HydrateComponent } from "../types.js";
 
+//#region src/client/runtime.d.ts
 type ImportComponent = (name: string) => Promise<Function | undefined>;
 declare const buildCreateChildrenFn: (createElement: CreateElement, importComponent: ImportComponent) => CreateChildren;
 declare const hydrateComponentHonoSuspense: (hydrateComponent: HydrateComponent) => Promise<void>;
-
-export { buildCreateChildrenFn, hydrateComponentHonoSuspense };
+//#endregion
+export { buildCreateChildrenFn, hydrateComponentHonoSuspense };

package/dist/client/runtime.js

@@ -1,146 +1,115 @@
-import { Suspense, use } from "hono/jsx/dom";
 import { COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS } from "../constants.js";
+import { Suspense, use } from "hono/jsx/dom";
+
+//#region src/client/runtime.ts
 const buildCreateChildrenFn = (createElement, importComponent) => {
-  let keyIndex = 0;
-  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)
-    };
-    const attributes = element.attributes;
-    for (let i = 0; i < attributes.length; i++) {
-      props[attributes[i].name] = attributes[i].value;
-    }
-    return createElement(element.nodeName, {
-      key: ++keyIndex,
-      ...props
-    });
-  };
-  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 createElementFromHTMLElement(child2));
-          }
-        }
-        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 {
-        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, {
-              key: ++keyIndex,
-              ...props
-            })
-          );
-        } else {
-          children.push(await createElementFromHTMLElement(child));
-        }
-      }
-    }
-    return children;
-  };
-  return createChildren;
+	let keyIndex = 0;
+	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) };
+		const attributes = element.attributes;
+		for (let i = 0; i < attributes.length; i++) props[attributes[i].name] = attributes[i].value;
+		return createElement(element.nodeName, {
+			key: ++keyIndex,
+			...props
+		});
+	};
+	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 (placeholderElement.appendChild(child); i < childNodes.length; i++) {
+					const child = childNodes[i];
+					if (child.nodeType === 8) {
+						placeholderElement.appendChild(child);
+						i--;
+						break;
+					} else if (child.nodeType === 3) fallback.push(child.textContent);
+					else fallback.push(await createElementFromHTMLElement(child));
+				}
+				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 resolve;
+					const promise = new Promise((r) => resolve = r);
+					fallback = await createElement(Suspense, {
+						fallback: [],
+						children: [await createElement(() => use(promise), {})]
+					});
+					placeholderElement.insertBefore = ((node) => {
+						createChildren(node.childNodes).then(resolve);
+					});
+				}
+				document.body.appendChild(placeholderElement);
+				children.push(await createElement(Suspense, {
+					fallback,
+					children: [await createElement(() => use(promise), {})]
+				}));
+			} else {
+				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, {
+						key: ++keyIndex,
+						...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,
-  hydrateComponentHonoSuspense
+	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 });
+	});
 };
+
+//#endregion
+export { buildCreateChildrenFn, hydrateComponentHonoSuspense };

package/dist/client/utils/filter.d.ts

@@ -1,3 +1,4 @@
+//#region src/client/utils/filter.d.ts
 declare const filterByPattern: <T>(files: Record<string, T>, patterns: RegExp[]) => Record<string, T>;
-
-export { filterByPattern };
+//#endregion
+export { filterByPattern };

package/dist/client/utils/filter.js

@@ -1,8 +1,7 @@
+//#region src/client/utils/filter.ts
 const filterByPattern = (files, patterns) => {
-  return Object.fromEntries(
-    Object.entries(files).filter(([path]) => patterns.some((pattern) => pattern.test(path)))
-  );
-};
-export {
-  filterByPattern
+	return Object.fromEntries(Object.entries(files).filter(([path]) => patterns.some((pattern) => pattern.test(path))));
 };
+
+//#endregion
+export { filterByPattern };

package/dist/constants.d.ts

@@ -1,7 +1,8 @@
+//#region src/constants.d.ts
 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_EXPORT, COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };
+//#endregion
+export { COMPONENT_EXPORT, COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/constants.js

@@ -1,12 +1,9 @@
+//#region src/constants.ts
 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,
-  IMPORTING_ISLANDS_ID
-};
+
+//#endregion
+export { COMPONENT_EXPORT, COMPONENT_NAME, DATA_HONO_TEMPLATE, DATA_SERIALIZED_PROPS, IMPORTING_ISLANDS_ID };

package/dist/factory/factory.d.ts

@@ -1,8 +1,9 @@
-import * as hono_types from 'hono/types';
-import * as hono_factory from 'hono/factory';
-import { Env, Hono } from 'hono';
+import { Env, Hono } from "hono";
+import * as hono_factory0 from "hono/factory";
+import * as hono_types0 from "hono/types";
 
-declare const createRoute: hono_factory.CreateHandlersInterface<Env, string>;
-declare const createHono: () => Hono<Env, hono_types.BlankSchema, "/">;
-
-export { createHono, createRoute };
+//#region src/factory/factory.d.ts
+declare const createRoute: hono_factory0.CreateHandlersInterface<Env, string>;
+declare const createHono: () => Hono<Env, hono_types0.BlankSchema, "/">;
+//#endregion
+export { createHono, createRoute };

package/dist/factory/factory.js

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

package/dist/factory/index.d.ts

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

package/dist/factory/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/server/base.d.ts

@@ -1,4 +1,2 @@
-export { createApp } from './server.js';
-import 'hono';
-import 'hono/types';
-import '../constants.js';
+import { createApp } from "./server.js";
+export { createApp };

package/dist/server/base.js

@@ -1,4 +1,3 @@
 import { createApp } from "./server.js";
-export {
-  createApp
-};
+
+export { createApp };

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

@@ -1,5 +1,8 @@
-declare const HasIslands: ({ children }: {
-    children: any;
+//#region src/server/components/has-islands.d.ts
+declare const HasIslands: ({
+  children
+}: {
+  children: any;
 }) => any;
-
-export { HasIslands };
+//#endregion
+export { HasIslands };