@revojs/vue 0.2.64 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { type FetchOptions } from "@revojs/server";
 import { type RouterContext, type Scope } from "revojs";
+import type { StandardSchemaV1 } from "@standard-schema/spec";
 import type { Awaitable } from "revojs/shared";
 import { type Component, type ComputedRef, type MaybeRefOrGetter, type Ref, type ShallowRef, type WatchSource, type WritableComputedRef } from "vue";
 export type AsyncStatus = "idle" | "pending" | "success" | "error";
@@ -78,9 +79,24 @@ export declare function useRouter(): {
 };
 export declare function useState<T>(name: MaybeRefOrGetter<string>): Ref<T | undefined>;
 export declare function useState<T>(name: MaybeRefOrGetter<string>, value: T): Ref<T>;
+export declare function useStateVersion(scope: Scope, name: string): Ref<number, number>;
+export declare function writeState<T>(scope: Scope, name: string, value: T): void;
 export declare function useAsync<T, TError = Error>(name: MaybeRefOrGetter<string>, invoke: (context: AsyncContext) => Awaitable<T>, options?: AsyncOptions<T, TError>): Promise<AsyncResult<T, TError>> & AsyncResult<T, TError>;
 export declare function useFetch<T, TError = Error>(input: MaybeRefOrGetter<string>, options?: FetchOptions & AsyncOptions<T, TError>): Promise<AsyncResult<T, TError>> & AsyncResult<T, TError>;
 export declare function refreshAsync(input?: string | Array<string>): Promise<void[] | undefined>;
+export declare function useAction<TInput extends Array<unknown>, TResult>(invoke: (...input: TInput) => Promise<TResult>): {
+    isLoading: Ref<boolean, boolean>;
+    error: ShallowRef<unknown, unknown>;
+    execute: (...input: TInput) => Promise<TResult>;
+};
+export declare function useForm<TSchema extends StandardSchemaV1>(schema: TSchema, defaults: StandardSchemaV1.InferInput<TSchema>, invoke: (value: StandardSchemaV1.InferOutput<TSchema>) => Promise<void>): {
+    form: Ref<StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferInput<TSchema>>;
+    issues: ShallowRef<readonly StandardSchemaV1.Issue[] | undefined, readonly StandardSchemaV1.Issue[] | undefined>;
+    isLoading: Ref<boolean, boolean>;
+    error: ShallowRef<unknown, unknown>;
+    execute: () => Promise<void>;
+    reset: () => void;
+};
 export declare function useWebSocket(url: MaybeRefOrGetter<string>, options?: WebSocketOptions): {
     status: Ref<WebSocketStatus, WebSocketStatus>;
     send: (data: string | Blob | BufferSource) => boolean;
@@ -92,4 +108,5 @@ export declare const NAVIGATE_HOOK: import("revojs").Descriptor<import("revojs")
 export declare const ASYNC_CONTEXT: import("revojs").Descriptor<AsyncRegistry>;
 export declare const REFRESH_ASYNC_HOOK: import("revojs").Descriptor<import("revojs").Hook<void | string[], Promise<void>>>;
 export declare const CLIENT_ERROR_CONTEXT: import("revojs").Descriptor<ShallowRef<Error>>;
+export declare const STATE_VERSION_CONTEXT: import("revojs").Descriptor<Map<string, Ref<number, number>>>;
 export declare const CLIENT_ROUTER_CONTEXT: import("revojs").Descriptor<ShallowRef<RouterContext<Component>>>;

package/dist/index.js

@@ -1,8 +1,8 @@
 import pages from "#pages";
 import { isClient, isServer, isServerSideRendering } from "#variables";
 import { fetch, getState, sendRedirect, setState, useUrl } from "@revojs/server";
-import { Router, defineContext, defineHook, dispatchHook, getContext, registerHook, setContext } from "revojs";
-import { Suspense, computed, createApp, createCommentVNode, createSSRApp, customRef, defineAsyncComponent, defineComponent, getCurrentInstance, getCurrentScope, h, inject, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, ref, shallowRef, toValue, warn, watch } from "vue";
+import { Router, defineContext, defineHook, dispatchHook, getContext, registerHook, setContext, useRouteResolverContext } from "revojs";
+import { Suspense, computed, createApp, createCommentVNode, createSSRApp, customRef, defineAsyncComponent, defineComponent, getCurrentInstance, getCurrentScope, h, inject, onErrorCaptured, onMounted, onScopeDispose, onServerPrefetch, ref, shallowRef, toRaw, toValue, warn, watch } from "vue";
 //#region src/index.ts
 var AsyncEntry = class {
 	scope;
@@ -24,7 +24,7 @@ var AsyncEntry = class {
 	}
 	write(value) {
 		this.data.value = value;
-		setState(this.scope, this.key, value);
+		writeState(this.scope, this.key, value);
 	}
 	cancel(reason) {
 		const controller = this.controller;
@@ -86,8 +86,13 @@ function useRouter() {
 	const navigate = (route) => {
 		if (isClient) {
 			const url = new URL(route, globalThis.location.href);
+			const pathname = globalThis.location.pathname;
 			if (url.href !== globalThis.location.href) globalThis.history.pushState(globalThis.history.state, "", url);
-			dispatchHook(scope, NAVIGATE_HOOK);
+			(async () => {
+				await dispatchHook(scope, NAVIGATE_HOOK);
+				if (url.hash) globalThis.document.getElementById(decodeURIComponent(url.hash.slice(1)))?.scrollIntoView();
+				else if (url.pathname !== pathname) globalThis.scrollTo(0, 0);
+			})();
 		}
 		if (isServer) throw sendRedirect(scope, route);
 	};
@@ -108,14 +113,29 @@ function useState(name, value) {
 	return customRef((track, trigger) => ({
 		get() {
 			track();
+			useStateVersion(scope, toValue(name)).value;
 			return getState(scope, toValue(name)) ?? value;
 		},
 		set(update) {
-			setState(scope, toValue(name), update);
+			writeState(scope, toValue(name), update);
 			trigger();
 		}
 	}));
 }
+function useStateVersion(scope, name) {
+	let versions = getContext(scope, STATE_VERSION_CONTEXT);
+	if (!Object.hasOwn(scope.context, STATE_VERSION_CONTEXT)) versions = setContext(scope, STATE_VERSION_CONTEXT, /* @__PURE__ */ new Map());
+	let version = versions.get(name);
+	if (version === void 0) {
+		version = ref(0);
+		versions.set(name, version);
+	}
+	return version;
+}
+function writeState(scope, name, value) {
+	setState(scope, name, value);
+	useStateVersion(scope, name).value += 1;
+}
 function useAsync(name, invoke, options) {
 	const scope = useScope();
 	const registry = useAsyncContext(scope);
@@ -150,7 +170,6 @@ function useAsync(name, invoke, options) {
 			}
 		} catch (error) {
 			if (entry.controller === controller) {
-				entry.write(void 0);
 				entry.error.value = error;
 				entry.status.value = "error";
 				await options?.catch?.(error);
@@ -233,6 +252,60 @@ async function refreshAsync(input) {
 	const scope = useScope();
 	if (isClient) return await dispatchHook(scope, REFRESH_ASYNC_HOOK, input === void 0 ? void 0 : Array.isArray(input) ? input : [input]);
 }
+function useAction(invoke) {
+	const isLoading = ref(false);
+	const error = shallowRef();
+	let running;
+	const run = async (...input) => {
+		isLoading.value = true;
+		error.value = void 0;
+		try {
+			return await invoke(...input);
+		} catch (cause) {
+			error.value = cause;
+			throw cause;
+		} finally {
+			isLoading.value = false;
+			running = void 0;
+		}
+	};
+	const execute = async (...input) => {
+		running ??= run(...input);
+		return await running;
+	};
+	return {
+		isLoading,
+		error,
+		execute
+	};
+}
+function useForm(schema, defaults, invoke) {
+	const form = ref(structuredClone(defaults));
+	const issues = shallowRef();
+	const action = useAction(invoke);
+	const execute = async () => {
+		if (action.isLoading.value) return;
+		const result = await schema["~standard"].validate(toRaw(form.value));
+		if (result.issues) {
+			issues.value = result.issues;
+			return;
+		}
+		issues.value = void 0;
+		await action.execute(result.value);
+	};
+	const reset = () => {
+		form.value = structuredClone(defaults);
+		issues.value = void 0;
+	};
+	return {
+		form,
+		issues,
+		isLoading: action.isLoading,
+		error: action.error,
+		execute,
+		reset
+	};
+}
 function useWebSocket(url, options = {}) {
 	const status = ref("closed");
 	const minDelay = options.minDelay ?? 1e3;
@@ -324,19 +397,44 @@ async function createVueApp(scope) {
 	const router = new Router();
 	const error = shallowRef();
 	const context = shallowRef();
+	const loaders = /* @__PURE__ */ new Map();
 	for (const entries of Object.values(pages)) for (const [path, resolve] of Object.entries(entries)) {
 		const segments = path.split("/");
 		for (const attribute of segments.pop()?.split(".") ?? []) {
 			if (attribute === "page") continue;
 			segments.push(attribute);
 		}
-		router.use(segments, defineAsyncComponent(resolve));
+		const component = defineAsyncComponent(resolve);
+		loaders.set(component, resolve);
+		router.use(segments, component);
 	}
 	const registry = new AsyncRegistry(isClient && isServerSideRendering);
+	let navigation = 0;
 	const resolve = async () => {
+		navigation += 1;
+		const current = navigation;
 		const path = useUrl(scope).pathname.replace(/^\/+/, "").replace(/\/+$/, "");
 		const segments = path === "" ? [] : path.split("/");
-		context.value = await router.resolve(scope, segments);
+		const resolved = await router.resolve(scope, segments);
+		if (current === navigation) {
+			error.value = void 0;
+			context.value = resolved;
+		}
+	};
+	const preload = async (href) => {
+		const path = new URL(href, globalThis.location.href).pathname.replace(/^\/+/, "").replace(/\/+$/, "");
+		const segments = path === "" ? [] : path.split("/");
+		const resolver = useRouteResolverContext(scope);
+		let resolved = segments;
+		if (typeof resolver === "function") resolved = await resolver(segments);
+		if (resolved === false) return;
+		const { match, hooks } = router.match(resolved);
+		const chunks = new Array();
+		for (const component of [...hooks, match]) {
+			const load = component ? loaders.get(component) : void 0;
+			if (load) chunks.push(load());
+		}
+		await Promise.allSettled(chunks);
 	};
 	const navigate = async () => {
 		registry.isHydrating = false;
@@ -347,7 +445,13 @@ async function createVueApp(scope) {
 	setContext(scope, CLIENT_ERROR_CONTEXT, error);
 	setContext(scope, CLIENT_ROUTER_CONTEXT, context);
 	await resolve();
-	const app = (isServerSideRendering ? createSSRApp(h(Main, { popstate: navigate })) : createApp(h(Main, { popstate: navigate }))).provide("REVOJS_SCOPE", scope);
+	const app = (isServerSideRendering ? createSSRApp(h(Main, {
+		popstate: navigate,
+		preload
+	})) : createApp(h(Main, {
+		popstate: navigate,
+		preload
+	}))).provide("REVOJS_SCOPE", scope);
 	app.config.warnHandler = (message, instance, trace) => {
 		if (message.includes("Invalid vnode type when creating vnode") || message.includes("Component <Anonymous> is missing template or render function")) return;
 		warn(message, instance, trace);
@@ -357,11 +461,17 @@ async function createVueApp(scope) {
 }
 var Main = defineComponent({
 	name: "Main",
-	props: { popstate: {
-		type: Function,
-		required: true
-	} },
-	setup({ popstate }) {
+	props: {
+		popstate: {
+			type: Function,
+			required: true
+		},
+		preload: {
+			type: Function,
+			required: true
+		}
+	},
+	setup({ popstate, preload }) {
 		const scope = useScope();
 		const error = useError(scope);
 		const context = useClientRouterContext(scope);
@@ -378,24 +488,40 @@ var Main = defineComponent({
 				event.preventDefault();
 				navigate(url.pathname + url.search + url.hash);
 			};
+			const preloaded = /* @__PURE__ */ new Set();
+			const preloadLink = (anchor) => {
+				const url = new URL(anchor.href);
+				if (url.origin !== globalThis.location.origin || anchor.hasAttribute("download") || anchor.relList.contains("external") || preloaded.has(url.pathname)) return;
+				preloaded.add(url.pathname);
+				preload(url.pathname);
+			};
+			const preloadVisible = () => {
+				for (const anchor of globalThis.document.querySelectorAll("a[href]")) if (anchor instanceof HTMLAnchorElement) preloadLink(anchor);
+			};
+			const schedulePreload = () => {
+				if ("requestIdleCallback" in globalThis) {
+					requestIdleCallback(preloadVisible);
+					return;
+				}
+				setTimeout(preloadVisible, 1e3);
+			};
+			const hover = (event) => {
+				const anchor = event.target instanceof Element ? event.target.closest("a[href]") : null;
+				if (anchor instanceof HTMLAnchorElement) preloadLink(anchor);
+			};
 			globalThis.addEventListener("popstate", popstate);
 			globalThis.document.addEventListener("click", click);
+			globalThis.document.addEventListener("pointerover", hover);
+			globalThis.document.addEventListener("focusin", hover);
+			const unregister = registerHook(scope, NAVIGATE_HOOK, schedulePreload);
 			onScopeDispose(() => {
 				globalThis.removeEventListener("popstate", popstate);
 				globalThis.document.removeEventListener("click", click);
+				globalThis.document.removeEventListener("pointerover", hover);
+				globalThis.document.removeEventListener("focusin", hover);
+				unregister();
 			});
-			onMounted(() => {
-				const preload = async () => {
-					const chunks = new Array();
-					for (const entries of Object.values(pages)) for (const load of Object.values(entries)) chunks.push(load());
-					await Promise.allSettled(chunks);
-				};
-				if ("requestIdleCallback" in globalThis) {
-					requestIdleCallback(() => void preload());
-					return;
-				}
-				setTimeout(() => void preload(), 1e3);
-			});
+			onMounted(schedulePreload);
 		}
 		onErrorCaptured((value) => {
 			error.value = value;
@@ -408,6 +534,7 @@ var NAVIGATE_HOOK = defineHook("NAVIGATE_HOOK");
 var ASYNC_CONTEXT = defineContext("ASYNC_CONTEXT");
 var REFRESH_ASYNC_HOOK = defineHook("REFRESH_ASYNC_HOOK");
 var CLIENT_ERROR_CONTEXT = defineContext("CLIENT_ERROR_CONTEXT");
+var STATE_VERSION_CONTEXT = defineContext("STATE_VERSION_CONTEXT");
 var CLIENT_ROUTER_CONTEXT = defineContext("CLIENT_ROUTER_CONTEXT");
 //#endregion
-export { ASYNC_CONTEXT, AsyncEntry, AsyncRegistry, CLIENT_ERROR_CONTEXT, CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, REFRESH_ASYNC_HOOK, createVueApp, isRouterNavigation, refreshAsync, useAsync, useAsyncContext, useClientRouterContext, useError, useFetch, useRouter, useScope, useState, useWebSocket };
+export { ASYNC_CONTEXT, AsyncEntry, AsyncRegistry, CLIENT_ERROR_CONTEXT, CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, REFRESH_ASYNC_HOOK, STATE_VERSION_CONTEXT, createVueApp, isRouterNavigation, refreshAsync, useAction, useAsync, useAsyncContext, useClientRouterContext, useError, useFetch, useForm, useRouter, useScope, useState, useStateVersion, useWebSocket, writeState };

package/dist/routes/[...]/get.js

@@ -1,6 +1,6 @@
 import { createVueApp, useError } from "../../index.js";
 import { isServerSideRendering } from "#variables";
-import { defineRoute, sendOk, useServer } from "@revojs/server";
+import { FetchError, defineRoute, sendOk, useServer } from "@revojs/server";
 import client from "#client";
 import manifest from "#client/manifest";
 import { renderToString } from "vue/server-renderer";
@@ -16,9 +16,11 @@ var get_default = defineRoute({ async fetch(scope) {
 			const html = await renderToString(app, context);
 			content = content.replace("<!-- APP -->", () => html);
 		} catch (error) {
+			if (captured.value instanceof FetchError) throw captured.value.response;
 			throw captured.value ?? error;
 		}
 		if (captured.value instanceof Response) throw captured.value;
+		if (captured.value instanceof FetchError) throw captured.value.response;
 		let body = "";
 		let container = "";
 		for (const [target, teleport] of Object.entries(context.teleports ?? {})) if (target.toLowerCase() === "body") body += teleport;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/vue",
-    "version": "0.2.64",
+    "version": "0.3.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -32,14 +32,14 @@
         "watch": "vite build --watch"
     },
     "dependencies": {
-        "@revojs/client": "*",
-        "@revojs/server": "*",
+        "@revojs/client": "0.3.0",
+        "@revojs/server": "0.3.0",
         "@standard-schema/spec": "^1.1.0",
         "@vitejs/plugin-vue": "^6.0.9",
-        "revojs": "*",
+        "revojs": "0.3.0",
         "vue": "^3.5.43"
     },
     "devDependencies": {
-        "@revojs/tsconfig": "*"
+        "@revojs/tsconfig": "0.3.0"
     }
 }