revojs 0.0.28 → 0.0.30

package/dist/index.js

@@ -252,14 +252,15 @@ const renderToString = async (scope, slot) => {
 		if (typeof slot === "object") {
 			if (Array.isArray(slot)) return await Promise.all(slot.map((slot$1) => renderToString(scope, slot$1))).then((chunks) => chunks.join(""));
 			if (isTemplate(slot)) {
-				const customElement = components.get(slot.tag);
+				const CustomElement = components.get(slot.tag);
 				const prefix = Object.entries(slot.attributes).reduce((chunks, [name, value]) => {
 					if (!name.startsWith("on")) chunks.push(`${name}='${toString(value)}'`);
 					return chunks;
 				}, [slot.tag]).join(" ");
 				const children = await renderToString(scope, slot.children);
-				if (customElement) {
-					const element = new customElement(slot.attributes, scope);
+				if (CustomElement) {
+					const element = new CustomElement(slot.attributes, scope);
+					scope.onStop(() => element.scope.stop());
 					const template = await renderToString(element.scope, await element.setup());
 					if (element.shadowRoot) {
 						const shadow = await renderToString(element.scope, {
@@ -556,7 +557,7 @@ var Radix = class Radix {
 	children;
 	constructor(input) {
 		this.input = input;
-		this.children = new Map();
+		this.children = {};
 	}
 	insert = (path, value) => {
 		let node = this;
@@ -566,10 +567,10 @@ var Radix = class Radix {
 				input = segment.substring(1);
 				segment = ":";
 			}
-			let childNode = node.children.get(segment);
+			let childNode = node.children[segment];
 			if (childNode === void 0) {
 				childNode = new Radix(input);
-				node.children.set(segment, childNode);
+				node.children[segment] = childNode;
 			}
 			node = childNode;
 		}
@@ -580,7 +581,7 @@ var Radix = class Radix {
 		let node = this;
 		const match = { inputs: {} };
 		for (const segment of path.split("/")) {
-			node = node?.children.get(segment) ?? node?.children.get(":");
+			node = node?.children[segment] ?? node?.children[":"];
 			if (node?.input) match.inputs[node.input] = segment;
 		}
 		match.value = node?.value;
@@ -597,7 +598,7 @@ const fileName = (path) => {
 	return path.split("/").pop()?.split(".").slice(0, -1).join(".");
 };
 const toPath = (value) => {
-	const path = (value.startsWith("/") ? value : "/" + value).replaceAll(/\/index/g, "").replaceAll(/\[(.*)\]/g, (_, name) => ":" + name);
+	const path = (value.startsWith("/") ? value : "/" + value).replaceAll(/\/index/g, "").replaceAll(/\[(.*?)\]/g, (_, name) => ":" + name);
 	const route = path.startsWith("/") ? path : "/" + path;
 	const split = route.split(".");
 	return split.length === 3 ? [split.at(0), split.at(1)] : [split.at(0)];
@@ -629,8 +630,12 @@ const createRuntime = async () => {
 			if (typeof route === "object") return route.fetch(event);
 			if (route) {
 				const scope = new Scope();
-				scope.setContext(RUNTIME_CONTEXT, { event });
-				return sendHtml(event, await renderToString(scope, await import("#virtual/client").then((module) => module.index)));
+				try {
+					scope.setContext(RUNTIME_CONTEXT, { event });
+					return sendHtml(event, await renderToString(scope, await import("#virtual/client").then((module) => module.index)));
+				} finally {
+					scope.stop();
+				}
 			}
 		} }));
 	}
@@ -658,9 +663,9 @@ const createRuntime = async () => {
 					if (response) return response;
 				}
 				return sendText(event, "Not found");
-			} catch (response) {
-				if (response instanceof Response) return response;
-				throw response;
+			} catch (exception) {
+				if (exception instanceof Response) return exception;
+				throw exception;
 			}
 		}
 	};
@@ -669,73 +674,128 @@ const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 
 //#endregion
 //#region src/router/index.tsx
-const ROUTE_CONTEXT = defineContext("ROUTE_CONTEXT");
-const navigate = (url) => {
-	if (isClient()) {
-		const state = window.history.state;
-		window.history.pushState(state, "", url);
-		window.dispatchEvent(new PopStateEvent("popstate", { state }));
+var NavigateEvent = class extends Event {
+	constructor() {
+		super("navigate");
 	}
 };
-const anchorNavigate = (event) => {
-	event.preventDefault();
-	navigate(event.currentTarget?.getAttribute("href") ?? "/");
-};
-const Outlet = defineComponent({
-	name: "x-outlet",
-	shadowRoot: false,
-	setup: async ({ scope }) => {
-		const { event } = scope.getContext(RUNTIME_CONTEXT);
-		const radix = new Radix();
-		const routes = await getRoutes();
-		for (const path in routes) {
-			const [name] = toPath(path);
-			if (name) radix.insert(name, routes[path]);
+const ROUTER_CONTEXT = defineContext("ROUTER_CONTEXT");
+const createRouter = async (input) => {
+	const routes = await import("#virtual/routes").then((module) => module.index);
+	const navigator = new EventTarget();
+	const radix = new Radix();
+	const route = createState();
+	const inputs = createState();
+	const options = defu(input, { routes });
+	for (const path in options.routes) {
+		const [name] = toPath(path);
+		if (name) {
+			const value = options.routes[path];
+			if (value) radix.insert(name, value);
 		}
-		const url = createState(new URL(event ? event.request.url : window.location.href));
-		if (isClient()) useEvent(scope, window, "popstate", () => url.value = new URL(window.location.href));
-		return async () => {
-			const { value, inputs } = radix.match(url.value.pathname);
-			const Page = await value?.();
-			if (Page) {
-				scope.setContext(ROUTE_CONTEXT, { inputs });
-				return /* @__PURE__ */ h(Page, inputs);
-			}
+	}
+	const registerRouterContext = async (scope) => {
+		const { event } = scope.getContext(RUNTIME_CONTEXT);
+		const fetch$1 = async () => {
+			const url = new URL(event ? event.request.url : window.location.href);
+			const match = radix.match(url.pathname);
+			inputs.value = match.inputs;
+			const Page$1 = await match.value?.();
+			if (Page$1) route.value = /* @__PURE__ */ h(Page$1, inputs.value);
 		};
+		if (isClient()) useEvent(scope, window, "popstate", () => navigator.dispatchEvent(new NavigateEvent()));
+		if (event) inputs.value = event.context.inputs;
+		await fetch$1().then(() => useEvent(scope, navigator, "navigate", fetch$1));
+		scope.setContext(ROUTER_CONTEXT, {
+			options,
+			navigator,
+			radix,
+			route,
+			inputs
+		});
+		return useRouter(scope);
+	};
+	return {
+		ROUTER_CONTEXT,
+		registerRouterContext
+	};
+};
+const useRouter = (scope, context) => {
+	const { route, inputs, navigator } = scope.getContext(context ?? ROUTER_CONTEXT);
+	const navigate = (path) => {
+		if (isClient()) window.history.pushState(window.history.state, "", path);
+		navigator.dispatchEvent(new NavigateEvent());
+	};
+	const anchorNavigate = (event) => {
+		event.preventDefault();
+		navigate(event.currentTarget?.getAttribute("href") ?? "/");
+	};
+	return {
+		route,
+		inputs,
+		navigator,
+		navigate,
+		anchorNavigate
+	};
+};
+const Page = defineComponent({
+	name: "x-page",
+	shadowRoot: false,
+	setup: ({ scope }) => {
+		const { route } = scope.getContext(ROUTER_CONTEXT);
+		if (route === void 0) return;
+		return () => route.value;
 	}
 });
 
 //#endregion
 //#region src/locale/index.ts
-const createLocaleContext = (options) => {
-	const LOCALE_CONTEXT = defineContext("LOCALE_CONTEXT");
-	const registerLocaleContext = (scope) => {
-		scope.setContext(LOCALE_CONTEXT, options);
+const LOCALE_CONTEXT = defineContext("LOCALE_CONTEXT");
+const createLocale = async (input) => {
+	const locales = await import("#virtual/locales").then((module) => module.index);
+	const locale = createState();
+	const messages = createState();
+	const options = defu(input, { locales });
+	const registerLocaleContext = async (scope) => {
+		const { inputs, navigator, navigate } = useRouter(scope);
+		const fetch$1 = async () => {
+			if (options.input) {
+				locale.value = inputs.value?.[options.input];
+				if (locale.value !== void 0 && !(locale.value in locales)) navigate("/" + (options.defaultLocale ?? ""));
+			}
+			locale.value ??= options.defaultLocale;
+			if (locale.value) {
+				const target = locales[locale.value];
+				messages.value = typeof target === "function" ? await target() : target;
+			}
+		};
+		await fetch$1().then(() => useEvent(scope, navigator, "navigate", fetch$1));
+		scope.setContext(LOCALE_CONTEXT, {
+			locale,
+			messages,
+			options
+		});
+		return useLocale(scope);
 	};
 	return {
 		LOCALE_CONTEXT,
 		registerLocaleContext
 	};
 };
-const useLocaleContext = async (scope, context) => {
-	const { event } = scope.getContext(RUNTIME_CONTEXT);
-	const { inputs } = scope.getContext(ROUTE_CONTEXT);
-	const { locales, defaultLocale, cookie, input } = scope.getContext(context);
-	const entries = await import("#virtual/locales").then((module) => module.index);
-	let locale = defaultLocale;
-	let set;
-	if (cookie) {
-		if (event) set = getCookies(event)[cookie];
-	}
-	if (input) if (event) set = event.context.variables[input];
-	else set = inputs[input];
-	if (set) locale = set;
-	if (locale) locales[locale] = await entries[locale]?.() ?? {};
+const useLocale = (scope, context) => {
+	const { locale, messages } = scope.getContext(context ?? LOCALE_CONTEXT);
 	const $ = (key) => {
-		if (locale) return locales[locale]?.[key] ?? key;
-		return key;
+		return () => messages.value?.[key] ?? key;
+	};
+	const prefix = (input) => {
+		return () => `/${locale.value}` + (input ?? "");
+	};
+	return {
+		locale,
+		messages,
+		prefix,
+		$
 	};
-	return { $ };
 };
 
 //#endregion
@@ -832,4 +892,4 @@ const markdownToSlot = (input, options) => {
 };
 
 //#endregion
-export { $fetch, Compute, Handler, MountedEvent, Outlet, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, Scope, StopEvent, activeCompute, anchorNavigate, components, createApp, createCompute, createElement, createEvent, createLocaleContext, createMemo, createRuntime, createState, defineComponent, defineContext, defineRoute, fileName, fromValue, getAssets, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, navigate, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString, useEvent, useLocaleContext };
+export { $fetch, Compute, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, RUNTIME_CONTEXT, Radix, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createEvent, createLocale, createMemo, createRouter, createRuntime, createState, defineComponent, defineContext, defineRoute, fileName, fromValue, getAssets, getCookies, getCustomElement, getGlobalStyles, getMimeType, getRequestUrl, getRoutes, getSetCookies, getVariables, isClient, isServer, isTemplate, markdownToSlot, preventDefault, registerComponent, renderToNode, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, stopImmediatePropagation, stopPropagation, targets, toCustomElement, toFragment, toPath, toString, useEvent, useLocale, useRouter };

package/dist/locale/index.d.ts

@@ -1,15 +1,28 @@
-import { type Descriptor, Scope } from "../signals";
-export type Locales = Record<string, Record<string, string>>;
-export type LocaleOptions<T extends Locales> = {
+import { type Descriptor, Scope, type State } from "../signals";
+export type Locales = Record<string, Record<string, string> | (() => Promise<Record<string, string>>)>;
+export type LocaleOptions<T extends Locales = Locales> = {
     locales: T;
     defaultLocale?: keyof T;
-    cookie?: string;
     input?: string;
 };
-export declare const createLocaleContext: <T extends LocaleOptions<Locales>>(options: T) => {
-    LOCALE_CONTEXT: Descriptor<T>;
-    registerLocaleContext: (scope: Scope) => void;
+export type LocaleContext<T extends LocaleOptions = LocaleOptions> = {
+    locale: State<string>;
+    messages: State<Record<string, string>>;
+    options: T;
 };
-export declare const useLocaleContext: <T extends LocaleOptions<Locales>>(scope: Scope, context: Descriptor<T>) => Promise<{
-    $: (key: keyof T["locales"][keyof T["locales"]]) => string | number | symbol | keyof T["locales"][keyof T["locales"]];
+export declare const LOCALE_CONTEXT: Descriptor<LocaleContext<LocaleOptions<Locales>>>;
+export declare const createLocale: <T extends LocaleOptions>(input?: Partial<T>) => Promise<{
+    LOCALE_CONTEXT: Descriptor<LocaleContext<T>>;
+    registerLocaleContext: (scope: Scope) => Promise<{
+        locale: State<string>;
+        messages: State<Record<string, string>>;
+        prefix: (input?: string) => () => string;
+        $: (key: never) => () => string | number | symbol;
+    }>;
 }>;
+export declare const useLocale: <T extends LocaleContext>(scope: Scope, context?: Descriptor<T>) => {
+    locale: State<string>;
+    messages: State<Record<string, string>>;
+    prefix: (input?: string) => () => string;
+    $: (key: keyof T["options"]["locales"][keyof T["options"]["locales"]]) => () => string | number | symbol;
+};

package/dist/radix/index.d.ts

@@ -5,7 +5,7 @@ export type Match<T> = {
 export declare class Radix<T> {
     value?: T;
     input?: string;
-    children: Map<string, Radix<T>>;
+    children: Record<string, Radix<T>>;
     constructor(input?: string);
     insert: (path: string, value: T) => this;
     match: (path: string) => Match<T>;

package/dist/router/index.d.ts

@@ -1,7 +1,41 @@
-import { type ComponentConstructor } from "../html";
-export declare const ROUTE_CONTEXT: import("..").Descriptor<{
-    inputs: Record<string, string>;
+import { type Attributes, type ComponentConstructor, type Events, type Slot } from "../html";
+import { Radix } from "../radix";
+import { type Descriptor, Scope, type State } from "../signals";
+export type Routes = Record<string, () => Promise<ComponentConstructor<Events, Attributes>>>;
+export type RouterOptions<T extends Routes = Routes> = {
+    routes: T;
+};
+export type RouterContext<T extends RouterOptions = RouterOptions> = {
+    options: T;
+    navigator: EventTarget;
+    radix: Radix<() => Promise<ComponentConstructor<Events, Attributes>>>;
+    route: State<Slot | undefined>;
+    inputs: State<Record<string, string> | undefined>;
+};
+export declare class NavigateEvent extends Event {
+    constructor();
+}
+export declare const ROUTER_CONTEXT: Descriptor<RouterContext<RouterOptions<Routes>>>;
+export declare const createRouter: <T extends RouterOptions>(input?: Partial<T>) => Promise<{
+    ROUTER_CONTEXT: Descriptor<RouterContext<T>>;
+    registerRouterContext: (scope: Scope) => Promise<{
+        route: State<unknown>;
+        inputs: State<Record<string, string> | undefined>;
+        navigator: EventTarget;
+        navigate: (path: string) => void;
+        anchorNavigate: (event: Event) => void;
+    }>;
 }>;
-export declare const navigate: (url: string) => void;
-export declare const anchorNavigate: (event: Event) => void;
-export declare const Outlet: ComponentConstructor<{}, {}>;
+export declare const useRouter: <T extends RouterContext>(scope: Scope, context?: Descriptor<T>) => {
+    route: State<unknown>;
+    inputs: State<Record<string, string> | undefined>;
+    navigator: EventTarget;
+    navigate: (path: string) => void;
+    anchorNavigate: (event: Event) => void;
+};
+export declare const Page: ComponentConstructor<{}, {}>;
+declare global {
+    interface ElementEventMap {
+        navigate: NavigateEvent;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "revojs",
-    "version": "0.0.28",
+    "version": "0.0.30",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",