revojs 0.0.80 → 0.0.82

package/dist/html/index.d.ts

@@ -88,12 +88,14 @@ export declare function useEvent<T extends keyof ElementEventMap>(scope: Scope,
 export declare function useEvent<T extends keyof WindowEventMap>(scope: Scope, target: Window | undefined | null, event: T, input: EventListener<WindowEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare function useEvent<T extends keyof HTMLElementEventMap>(scope: Scope, target: Document | HTMLElement | undefined | null, event: T, input: EventListener<HTMLElementEventMap[T]>, options?: AddEventListenerOptions): void;
 export declare function onMounted(scope: Scope, event: EventListener<MountedEvent>): void;
-export declare function startViewTransition(invoke: ViewTransitionUpdateCallback): Promise<void>;
+export declare function startViewTransition(name: string, invoke: ViewTransitionUpdateCallback): Promise<void>;
+export declare function onViewTransition<T>(name: string, value: T): () => T | undefined;
 export declare function isClient(): boolean;
 export declare function isServer(): boolean;
 export declare function preventDefault(event: Event): void;
 export declare function stopPropagation(event: Event): void;
 export declare function stopImmediatePropagation(event: Event): void;
+export declare const activeViewTransition: State<string | undefined>;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;
 export declare const HOST_CONTEXT: import("..").Descriptor<HostContext>;
 declare global {

package/dist/index.js

@@ -443,7 +443,7 @@ function useAsync(scope, invoke, options) {
 		isLoading.value = true;
 		try {
 			const result = await invoke();
-			if (options?.viewTransition) await startViewTransition(() => state.value = result);
+			if (options?.viewTransition) await startViewTransition(options.viewTransition, () => state.value = result);
 			else state.value = result;
 		} catch (error) {
 			options?.catch?.(error);
@@ -800,10 +800,18 @@ function onMounted(scope, event) {
 		useEvent(scope, host, "mounted", event);
 	}
 }
-async function startViewTransition(invoke) {
-	if (isClient() && document.startViewTransition !== void 0) return document.startViewTransition(invoke).updateCallbackDone;
+async function startViewTransition(name, invoke) {
+	if (isClient() && document.startViewTransition !== void 0) {
+		activeViewTransition.value = name;
+		return document.startViewTransition(invoke).finished.finally(() => activeViewTransition.value = void 0);
+	}
 	return invoke();
 }
+function onViewTransition(name, value) {
+	return () => {
+		if (activeViewTransition.value === name && isClient()) return value;
+	};
+}
 function isClient() {
 	return typeof window !== "undefined";
 }
@@ -819,6 +827,7 @@ function stopPropagation(event) {
 function stopImmediatePropagation(event) {
 	event.stopImmediatePropagation();
 }
+const activeViewTransition = createState();
 const components = /* @__PURE__ */ new Map();
 const HOST_CONTEXT = defineContext("HOST_CONTEXT");
 
@@ -834,11 +843,6 @@ var AfterNavigateEvent = class extends Event {
 		super("afterNavigate");
 	}
 };
-var AfterNavigateTransitionEvent = class extends Event {
-	constructor() {
-		super("afterNavigateTransition");
-	}
-};
 function provideRouterContext(scope, options) {
 	const url = createState();
 	const route = createState();
@@ -863,7 +867,6 @@ function provideRouterContext(scope, options) {
 			navigator.dispatchEvent(new AfterNavigateEvent());
 		}
 	};
-	if (isClient()) useEvent(scope, window, "popstate", fetch$1);
 	scope.setContext(ROUTE_CONTEXT, { inputs: createState() });
 	scope.setContext(ROUTER_CONTEXT, {
 		options,
@@ -873,8 +876,8 @@ function provideRouterContext(scope, options) {
 		route
 	});
 	fetch$1();
-	useEvent(scope, navigator, "navigate", () => startViewTransition(fetch$1).finally(() => navigator.dispatchEvent(new AfterNavigateTransitionEvent())));
-	if (isClient()) requestAnimationFrame(() => navigator.dispatchEvent(new AfterNavigateTransitionEvent()));
+	useEvent(scope, navigator, "navigate", () => startViewTransition("navigate", fetch$1));
+	if (isClient()) useEvent(scope, window, "popstate", fetch$1);
 	return useRouter(scope);
 }
 function useRouter(scope, context) {
@@ -951,4 +954,4 @@ function useLocale(scope, context) {
 const LOCALE_CONTEXT = defineContext("LOCALE_CONTEXT");
 
 //#endregion
-export { $fetch, AfterNavigateEvent, AfterNavigateTransitionEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, activeCompute, components, createApp, createCompute, createElement, createMemo, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mergeObjects, mimeType, onMounted, 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, 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 };

package/dist/jsx/index.js

@@ -1,7 +1,44 @@
 //#region src/signals/index.ts
+var Handler = class Handler {
+	get(target, key) {
+		const compute = activeCompute;
+		if (compute) {
+			const computes = targets.get(target) ?? /* @__PURE__ */ new Map();
+			const set = computes.get(key) ?? /* @__PURE__ */ new Set();
+			computes.set(key, set.add(compute));
+			targets.set(target, computes);
+			compute.parentScope?.onStop(() => {
+				set.delete(compute);
+				if (set.size === 0) {
+					computes.delete(key);
+					if (computes.size === 0) targets.delete(target);
+				}
+			});
+		}
+		const value = Reflect.get(target, key);
+		if (value) {
+			if (typeof value === "function" && !value.prototype) return value.bind(target);
+			if (typeof value === "object") {
+				const tag = Object.prototype.toString.call(value);
+				if (tag === "[object Object]" || tag === "[object Array]" || tag === "[object Map]" || tag === "[object Set]" || tag === "[object WeakMap]" || tag === "[object WeakSet]") return new Proxy(value, new Handler());
+			}
+		}
+		return value;
+	}
+	set(target, key, value) {
+		const result = Reflect.set(target, key, value);
+		for (const compute of targets.get(target)?.get(key) ?? []) compute.run();
+		return result;
+	}
+};
+function createState(value) {
+	return new Proxy({ value }, new Handler());
+}
 function defineContext(key) {
 	return key;
 }
+let activeCompute;
+const targets = /* @__PURE__ */ new WeakMap();
 
 //#endregion
 //#region src/runtime/index.ts
@@ -29,6 +66,7 @@ function createElement(input, attributes, ...children) {
 		children
 	});
 }
+const activeViewTransition = createState();
 const HOST_CONTEXT = defineContext("HOST_CONTEXT");
 
 //#endregion

package/dist/router/index.d.ts

@@ -17,9 +17,6 @@ export declare class NavigateEvent extends Event {
 export declare class AfterNavigateEvent extends Event {
     constructor();
 }
-export declare class AfterNavigateTransitionEvent extends Event {
-    constructor();
-}
 export declare function provideRouterContext(scope: Scope, options: RouterOptions): {
     url: State<URL | undefined>;
     route: State<unknown>;
@@ -44,6 +41,5 @@ declare global {
     interface ElementEventMap {
         navigate: NavigateEvent;
         afterNavigate: AfterNavigateEvent;
-        afterNavigateTransition: AfterNavigateTransitionEvent;
     }
 }

package/dist/runtime/index.d.ts

@@ -22,7 +22,7 @@ export type RouteContext = {
     inputs: State<Record<string, string>>;
 };
 export type AsyncOptions = {
-    viewTransition?: boolean;
+    viewTransition?: string;
     catch?: (error: unknown) => void | Promise<void>;
 };
 export declare function isRoute<T>(value?: T): value is Route & T;

package/package.json

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