revojs 0.0.80 → 0.0.81

package/dist/html/index.d.ts

@@ -67,6 +67,14 @@ export interface CustomElement<TEvents extends Events, TAttributes extends Attri
 export interface CustomElementConstructor<TEvents extends Events, TAttributes extends Attributes> {
     new (): CustomElement<TEvents, TAttributes>;
 }
+export declare class ViewTransitionEvent extends Event {
+    readonly name: string;
+    constructor(name: string);
+}
+export declare class AfterViewTransitionEvent extends Event {
+    readonly name: string;
+    constructor(name: string);
+}
 export declare class MountedEvent extends Event {
     constructor();
 }
@@ -88,7 +96,8 @@ 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(scope: Scope, viewTransition: string, name: string): () => string;
 export declare function isClient(): boolean;
 export declare function isServer(): boolean;
 export declare function preventDefault(event: Event): void;
@@ -97,6 +106,10 @@ export declare function stopImmediatePropagation(event: Event): void;
 export declare const components: Map<string, ComponentConstructor<Events, Attributes>>;
 export declare const HOST_CONTEXT: import("..").Descriptor<HostContext>;
 declare global {
+    interface ElementEventMap {
+        viewTransition: ViewTransitionEvent;
+        afterViewTransition: AfterViewTransitionEvent;
+    }
     interface HTMLElementEventMap {
         mounted: MountedEvent;
     }

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);
@@ -520,6 +520,20 @@ const ROUTE_CONTEXT = defineContext("ROUTE_CONTEXT");
 
 //#endregion
 //#region src/html/index.ts
+var ViewTransitionEvent = class extends Event {
+	name;
+	constructor(name) {
+		super("viewTransition");
+		this.name = name;
+	}
+};
+var AfterViewTransitionEvent = class extends Event {
+	name;
+	constructor(name) {
+		super("afterViewTransition");
+		this.name = name;
+	}
+};
 var MountedEvent = class extends Event {
 	constructor() {
 		super("mounted");
@@ -800,10 +814,25 @@ 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) {
+		document.dispatchEvent(new ViewTransitionEvent(name));
+		return document.startViewTransition(invoke).finished.finally(() => document.dispatchEvent(new AfterViewTransitionEvent(name)));
+	}
 	return invoke();
 }
+function onViewTransition(scope, viewTransition, name) {
+	const state = createState(name);
+	if (isClient()) {
+		useEvent(scope, document, "viewTransition", (event) => {
+			if (event.name === viewTransition) state.value = name;
+		});
+		useEvent(scope, document, "afterViewTransition", (event) => {
+			if (event.name === viewTransition) state.value = "none";
+		});
+	}
+	return () => `view-transition-name: ${state.value}`;
+}
 function isClient() {
 	return typeof window !== "undefined";
 }
@@ -834,11 +863,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 +887,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 +896,14 @@ 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();
+			document.dispatchEvent(new AfterViewTransitionEvent("navigate"));
+		});
+		requestAnimationFrame(() => document.dispatchEvent(new AfterViewTransitionEvent("navigate")));
+	}
 	return useRouter(scope);
 }
 function useRouter(scope, context) {
@@ -951,4 +980,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, AfterViewTransitionEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, ViewTransitionEvent, activeCompute, 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/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.81",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",