revojs 0.0.83 → 0.0.85

package/dist/html/index.d.ts

@@ -1,3 +1,4 @@
+import { type Mergeable } from "../app";
 import { type HtmlAttributes } from "../jsx";
 import { Scope, type State, type Value } from "../signals";
 export type TypeOf<T> = {
@@ -80,11 +81,11 @@ export declare function isComponent<T>(value?: T): value is ComponentConstructor
 export declare function useHost(scope: Scope): HostContext;
 export declare function createElement<TEvents extends Events, TAttributes extends Attributes>(input: string | ((attributes: AttributeInput<Attributes>) => Slot) | ComponentConstructor<TEvents, TAttributes>, attributes?: AttributeInput<TAttributes>, ...children: Array<Slot>): Slot;
 export declare function toString(slot: Slot): string;
-export declare function toArray(hydration: Hydration): Array<Node>;
+export declare function toArray(hydration: Hydration): Array<Comment | Text | Element>;
 export declare function toRange(hydration: Hydration): Range;
 export declare function toFragment(hydration: Hydration): DocumentFragment;
 export declare function hydrate(scope: Scope, parentNode: Node, slot: Slot, index: number, previous?: Hydration): Hydration;
-export declare function renderToString(scope: Scope, slot: Slot): Promise<string>;
+export declare function renderToString(scope: Scope, slot: Slot, defaults?: Record<string, Mergeable<Template>>): Promise<string>;
 export declare function defineComponent<TEvents extends Events, TAttributes extends Attributes>(options: ComponentOptions<TEvents, TAttributes>): ComponentConstructor<TEvents, TAttributes>;
 export declare function toCustomElement<TEvents extends Events, TAttributes extends Attributes>(Component: ComponentConstructor<TEvents, TAttributes>): CustomElementConstructor<TEvents, TAttributes>;
 export declare function registerComponent<TEvents extends Events, TAttributes extends Attributes>(component: ComponentConstructor<TEvents, TAttributes>): ComponentConstructor<TEvents, TAttributes>;

package/dist/index.js

@@ -1,11 +1,13 @@
 //#region src/app/index.ts
 function mergeObjects(base, input) {
+	if (input === null || input === void 0) return mergeObjects(base, {});
 	const object = structuredClone(input);
 	for (const key in base) {
 		if (key === "__proto__" || key === "constructor") continue;
 		const value = base[key];
 		if (value === null || value === void 0) continue;
-		if (typeof value === "object" && typeof object[key] === "object") object[key] = mergeObjects(value, object[key]);
+		if (Array.isArray(value) && Array.isArray(object[key])) object[key] = [...value, ...object[key]];
+		else if (typeof value === "object" && typeof object[key] === "object") object[key] = mergeObjects(value, object[key]);
 		else object[key] = value;
 	}
 	return object;
@@ -240,7 +242,7 @@ var Radix = class Radix {
 		this.input = input;
 		this.children = {};
 	}
-	insert = (path, value) => {
+	insert(path, value) {
 		let node = this;
 		for (let segment of path.split("/")) {
 			let input;
@@ -257,8 +259,8 @@ var Radix = class Radix {
 		}
 		node.value = value;
 		return this;
-	};
-	match = (path) => {
+	}
+	match(path) {
 		let node = this;
 		const match = { inputs: {} };
 		for (const segment of path.split("/")) {
@@ -267,7 +269,7 @@ var Radix = class Radix {
 		}
 		match.value = node?.value;
 		return match;
-	};
+	}
 };
 
 //#endregion
@@ -419,7 +421,8 @@ async function $fetch(scope, input, options) {
 		const next = new Scope();
 		const url = new URL(input.toString(), request.url);
 		next.setContext(RUNTIME_CONTEXT, {
-			tasks: new Array(),
+			tasks: [],
+			states: {},
 			request: new Request(url, options),
 			response: { headers: new Headers() },
 			variables
@@ -435,15 +438,31 @@ async function $fetch(scope, input, options) {
 		default: return response;
 	}
 }
-function useAsync(scope, invoke, options) {
+function useState(scope, name, value) {
+	const state = createState(value);
+	if (isClient()) {
+		if (STATES === void 0) {
+			const element = document.getElementById("STATES");
+			STATES = element?.textContent ? JSON.parse(element.textContent) : {};
+		}
+		state.value = STATES[name];
+		createCompute(scope, () => STATES && (STATES[name] = state.value));
+	}
+	if (isServer()) {
+		const { states } = useRuntime(scope);
+		states[name] = state;
+	}
+	return state;
+}
+function useAsync(scope, name, invoke, options) {
 	const { tasks } = useRuntime(scope);
-	const state = createState();
+	const state = useState(scope, name);
 	const isLoading = createState(false);
 	const execute = async () => {
 		isLoading.value = true;
 		try {
 			const result = await invoke();
-			if (options?.viewTransition) await startViewTransition(options.viewTransition, () => state.value = result);
+			if (JSON.stringify(state.value ?? {}) !== JSON.stringify(result)) if (options?.viewTransition) await startViewTransition(options.viewTransition, () => state.value = result);
 			else state.value = result;
 		} catch (error) {
 			options?.catch?.(error);
@@ -461,7 +480,7 @@ function useAsync(scope, invoke, options) {
 	};
 }
 function useFetch(scope, input, options) {
-	return useAsync(scope, async () => await $fetch(scope, input, options), options);
+	return useAsync(scope, input.toString(), () => $fetch(scope, input, options), options);
 }
 async function createRuntime() {
 	const radix = new Radix();
@@ -469,10 +488,25 @@ async function createRuntime() {
 	const routes = await import("#virtual/routes").then((module) => module.default);
 	for (const path in routes) {
 		const [name, method] = toPath(path);
-		radix.insert((method ?? "GET").toUpperCase() + name, defineRoute({ fetch: async (event) => {
+		radix.insert((method ?? "GET").toUpperCase() + name, defineRoute({ fetch: async (scope) => {
 			const route = routes[path];
-			if (isRoute(route)) return route.fetch(event);
-			return sendHtml(event, await renderToString(event, await import("#virtual/client").then((module) => module.client)));
+			if (isRoute(route)) return route.fetch(scope);
+			const { states } = useRuntime(scope);
+			const content = await renderToString(scope, await import("#virtual/client").then((module) => module.client), { head: { children: ["<!--STATES-->"] } });
+			const entries = Object.entries(states).reduce((states$1, [name$1, state]) => {
+				return {
+					...states$1,
+					[name$1]: state.value
+				};
+			}, {});
+			return sendHtml(scope, content.replace("<!--STATES-->", await renderToString(scope, {
+				tag: "script",
+				attributes: {
+					id: "STATES",
+					type: "application/json"
+				},
+				children: [JSON.stringify(entries)]
+			})));
 		} }));
 	}
 	const assets = await import("#virtual/assets").then((module) => module.default);
@@ -515,6 +549,7 @@ async function createRuntime() {
 		}
 	};
 }
+let STATES;
 const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 const ROUTE_CONTEXT = defineContext("ROUTE_CONTEXT");
 
@@ -566,7 +601,7 @@ function toString(slot) {
 	}
 }
 function toArray(hydration) {
-	if (Array.isArray(hydration)) return hydration.reduce((items, child) => items.concat(toArray(child)), new Array());
+	if (Array.isArray(hydration)) return hydration.reduce((items, child) => items.concat(toArray(child)), []);
 	return [hydration];
 }
 function toRange(hydration) {
@@ -646,43 +681,44 @@ function hydrate(scope, parentNode, slot, index, previous) {
 	if (parentNode.childNodes.item(index) === null) parentNode.appendChild(toFragment(hydration));
 	return hydration;
 }
-async function renderToString(scope, slot) {
+async function renderToString(scope, slot, defaults) {
 	const { tasks } = useRuntime(scope);
 	if (typeof slot === "number" || typeof slot === "bigint" || typeof slot === "boolean" || typeof slot === "string" || typeof slot === "symbol") return slot.toString();
 	if (typeof slot === "function") {
 		let input = slot;
 		while (typeof input === "function") input = await input();
-		return await renderToString(scope, input);
+		return await renderToString(scope, input, defaults);
 	}
 	if (Array.isArray(slot)) {
 		let items = "";
-		for (const childSlot of slot) items += await renderToString(scope, childSlot);
+		for (const childSlot of slot) items += await renderToString(scope, childSlot, defaults);
 		if (items === "") return "<!---->";
 		return items;
 	}
 	if (isTemplate(slot)) {
-		const CustomElement = components.get(slot.tag);
-		const prefix = Object.entries(slot.attributes).reduce((chunks, [name, value]) => {
+		const merge = mergeObjects(slot, defaults?.[slot.tag]);
+		const CustomElement = components.get(merge.tag);
+		const prefix = Object.entries(merge.attributes).reduce((chunks, [name, value]) => {
 			if (value && !name.startsWith("on")) chunks.push(`${name}='${toString(value)}'`);
 			return chunks;
-		}, [slot.tag]).join(" ");
+		}, [merge.tag]).join(" ");
 		let content = `<${prefix}>`;
 		if (CustomElement) {
-			const element = new CustomElement(slot.attributes, scope);
+			const element = new CustomElement(merge.attributes, scope);
 			const result = element.setup();
 			while (tasks.length) await tasks.shift();
-			const template = await renderToString(element.scope, result);
+			const template = await renderToString(element.scope, result, defaults);
 			if (element.shadowRoot) {
 				const shadow = {
 					tag: "template",
 					attributes: { shadowRootMode: element.shadowRoot.mode },
 					children: [template]
 				};
-				content += await renderToString(element.scope, shadow);
+				content += await renderToString(element.scope, shadow, defaults);
 			} else content += template;
 		}
-		for (const childSlot of slot.children) content += await renderToString(scope, childSlot);
-		content += `</${slot.tag}>`;
+		for (const childSlot of merge.children) content += await renderToString(scope, childSlot, defaults);
+		content += `</${merge.tag}>`;
 		return content;
 	}
 	return "<!---->";
@@ -959,4 +995,4 @@ function useLocale(scope, context) {
 const LOCALE_CONTEXT = defineContext("LOCALE_CONTEXT");
 
 //#endregion
-export { $fetch, AfterNavigateEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, activeCompute, activeViewTransition, components, createApp, createCompute, createElement, createMemo, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mergeObjects, mimeType, onMounted, onViewTransition, preventDefault, provideLocaleContext, provideRouterContext, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, startViewTransition, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, untrack, useAsync, useCookies, useEvent, useFetch, useHost, useLocale, useQuery, useRoute, useRouter, useRuntime, useSetCookies, useUrl };
+export { $fetch, AfterNavigateEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, STATES, Scope, StopEvent, activeCompute, activeViewTransition, components, createApp, createCompute, createElement, createMemo, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mergeObjects, mimeType, onMounted, onViewTransition, preventDefault, provideLocaleContext, provideRouterContext, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, startViewTransition, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, untrack, useAsync, useCookies, useEvent, useFetch, useHost, useLocale, useQuery, useRoute, useRouter, useRuntime, useSetCookies, useState, useUrl };

package/dist/radix/index.d.ts

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

package/dist/runtime/index.d.ts

@@ -14,6 +14,7 @@ export type Runtime = {
 };
 export type RuntimeContext<T = Record<string, unknown>> = {
     tasks: Array<Promise<unknown>>;
+    states: Record<string, State<unknown>>;
     request: Request;
     response: ResponseOptions;
     variables: T;
@@ -21,9 +22,9 @@ export type RuntimeContext<T = Record<string, unknown>> = {
 export type RouteContext = {
     inputs: State<Record<string, string>>;
 };
-export type AsyncOptions = {
+export type AsyncOptions<T> = {
     viewTransition?: string;
-    catch?: (error: unknown) => void | Promise<void>;
+    catch?: (error: T) => void | Promise<void>;
 };
 export declare function isRoute<T>(value?: T): value is Route & T;
 export declare function useRuntime<T = Record<string, unknown>>(scope: Scope): RuntimeContext<T>;
@@ -33,16 +34,19 @@ export declare function defineMiddleware(middleware: Middleware): Middleware;
 export declare function fileName(path: string): string | undefined;
 export declare function toPath(value: string): (string | undefined)[];
 export declare function $fetch<T>(scope: Scope, input: string | URL, options?: RequestInit): Promise<T>;
-export declare function useAsync<T>(scope: Scope, invoke: () => Promise<T>, options?: AsyncOptions): {
+export declare function useState<T>(scope: Scope, name: string): State<T | undefined>;
+export declare function useState<T>(scope: Scope, name: string, value: T): State<T>;
+export declare function useAsync<T, TError = Error>(scope: Scope, name: string, invoke: () => Promise<T>, options?: AsyncOptions<TError>): {
     state: State<T | undefined>;
     isLoading: State<boolean>;
     execute: () => Promise<T | undefined>;
 };
-export declare function useFetch<T>(scope: Scope, input: string | URL, options?: RequestInit & AsyncOptions): {
+export declare function useFetch<T, TError = Error>(scope: Scope, input: string | URL, options?: RequestInit & AsyncOptions<TError>): {
     state: State<T | undefined>;
     isLoading: State<boolean>;
     execute: () => Promise<T | undefined>;
 };
 export declare function createRuntime(): Promise<Runtime>;
+export declare let STATES: Record<string, unknown>;
 export declare const RUNTIME_CONTEXT: import("..").Descriptor<RuntimeContext<Record<string, unknown>>>;
 export declare const ROUTE_CONTEXT: import("..").Descriptor<RouteContext>;

package/package.json

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