@revojs/vue 0.1.7 → 0.1.8

package/dist/client/index.d.ts

@@ -1,6 +1,22 @@
+import { Ref } from "vue";
 import { Scope } from "revojs";
 
 //#region src/client/index.d.ts
+type AsyncOptions<T> = {
+  catch?: (error: T) => void | Promise<void>;
+};
 declare function useScope(): Scope;
+declare function useState<T>(scope: Scope, name: string): Ref<T | undefined>;
+declare function useState<T>(scope: Scope, name: string, value: T): Ref<T>;
+declare function useAsync<T, TError = Error>(scope: Scope, name: string, invoke: () => Promise<T>, defaultOptions?: AsyncOptions<TError>): {
+  state: Ref<T | undefined, T | undefined>;
+  isLoading: Ref<boolean, boolean>;
+  execute: (options?: AsyncOptions<TError>) => Promise<T | undefined>;
+};
+declare function useFetch<T, TError = Error>(scope: Scope, input: string | URL, options?: RequestInit & AsyncOptions<TError>): {
+  state: Ref<T | undefined, T | undefined>;
+  isLoading: Ref<boolean, boolean>;
+  execute: (options?: AsyncOptions<TError> | undefined) => Promise<T | undefined>;
+};
 //#endregion
-export { useScope };
+export { AsyncOptions, useAsync, useFetch, useScope, useState };

package/dist/client/index.js

@@ -1,4 +1,5 @@
-import { inject } from "vue";
+import { $fetch, getState, setState } from "../dist-DM3hv3cX.js";
+import { inject, onServerPrefetch, ref, watch } from "vue";
 
 //#region src/client/index.ts
 function useScope() {
@@ -6,6 +7,37 @@ function useScope() {
 	if (scope) return scope;
 	throw new Error();
 }
+function useState(scope, name, value) {
+	const state = ref(getState(scope, name) ?? value);
+	watch(state, (value$1) => setState(scope, name, value$1), { immediate: true });
+	return state;
+}
+function useAsync(scope, name, invoke, defaultOptions) {
+	const state = useState(scope, name);
+	const isLoading = ref(false);
+	const execute = async (options) => {
+		const onCatch = options?.catch ?? defaultOptions?.catch;
+		isLoading.value = true;
+		try {
+			state.value = await invoke();
+		} catch (error) {
+			onCatch?.(error);
+		} finally {
+			isLoading.value = false;
+		}
+		return state.value;
+	};
+	const task = execute();
+	if (import.meta.server) onServerPrefetch(async () => await task);
+	return {
+		state,
+		isLoading,
+		execute
+	};
+}
+function useFetch(scope, input, options) {
+	return useAsync(scope, input.toString(), () => $fetch(scope, input, options), options);
+}
 
 //#endregion
-export { useScope };
+export { useAsync, useFetch, useScope, useState };

package/dist/dist-DM3hv3cX.js

@@ -0,0 +1,89 @@
+//#region ../revojs/dist/index.js
+function useServer(scope) {
+	return scope.getContext(SERVER_CONTEXT);
+}
+function getState(scope, name) {
+	if (import.meta.server) {
+		const { states } = useServer(scope);
+		return states[name];
+	} else {
+		if (STATES === void 0) {
+			const element = document.getElementById("STATES");
+			STATES = element?.textContent ? JSON.parse(element.textContent) : {};
+		}
+		return STATES[name];
+	}
+}
+function setState(scope, name, value) {
+	if (import.meta.server) {
+		const { states } = useServer(scope);
+		states[name] = value;
+	} else {
+		if (STATES === void 0) {
+			const element = document.getElementById("STATES");
+			STATES = element?.textContent ? JSON.parse(element.textContent) : {};
+		}
+		STATES[name] = value;
+	}
+}
+const ROUTER_CONTEXT = defineContext("ROUTER_CONTEXT");
+const SERVER_CONTEXT = defineContext("SERVER_CONTEXT");
+let STATES;
+var StopEvent = class extends Event {
+	constructor() {
+		super("stop");
+	}
+};
+var Scope = class extends EventTarget {
+	parentScope;
+	context;
+	constructor(parentScope) {
+		super();
+		this.parentScope = parentScope;
+		this.parentScope?.onStop(() => this.stop());
+		this.context = {};
+	}
+	getContext(input) {
+		let scope = this;
+		while (scope) {
+			if (scope.context[input]) return scope.context[input];
+			scope = scope.parentScope;
+		}
+		return {};
+	}
+	setContext(input, value) {
+		this.context[input] = value;
+	}
+	onStop(input) {
+		this.addEventListener("stop", input, { once: true });
+	}
+	stop() {
+		return this.dispatchEvent(new StopEvent());
+	}
+};
+function defineContext(name) {
+	return name;
+}
+async function $fetch(scope, input, options) {
+	let response;
+	if (import.meta.server) {
+		const { states, request, variables } = useServer(scope);
+		const next = new Scope();
+		next.setContext(SERVER_CONTEXT, {
+			states,
+			request: new Request(new URL(input.toString(), request.url), options),
+			response: { headers: new Headers() },
+			variables
+		});
+		response = await (await import("#virtual/server")).default.fetch(next);
+	}
+	response ??= await fetch(input, options);
+	if (response.ok === false) throw response;
+	switch (response.headers.get("Content-Type")?.split(";").shift() ?? "") {
+		case "application/json": return response.json();
+		default: return response;
+	}
+}
+
+//#endregion
+export { $fetch, getState, setState };

package/dist/index.js

@@ -1,13 +1,6 @@
+import "./dist-DM3hv3cX.js";
 import { addAssets, addRoutes, useKit } from "@revojs/kit";
 
-//#region ../revojs/dist/index.js
-const ROUTER_CONTEXT = defineContext("ROUTER_CONTEXT");
-const SERVER_CONTEXT = defineContext("SERVER_CONTEXT");
-function defineContext(name) {
-	return name;
-}
-
-//#endregion
 //#region src/index.ts
 function addPages(app, path) {
 	app.config.sources.pages?.entries.push(path);

package/dist/module/index.html

@@ -4,6 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vue</title>
+        <!-- STATES -->
     </head>
     <body>
         <div id="app"><!-- MAIN --></div>

package/dist/module/routes/[...]/index.get.ts

@@ -1,10 +1,19 @@
-import { defineRoute, sendHtml } from "revojs";
+import { defineRoute, sendHtml, useServer } from "revojs";
 import { renderToString } from "vue/server-renderer";
 import createApp from "#alias/vue/app";
 import client from "#virtual/client";
 
 export default defineRoute({
     async fetch(scope) {
-        return sendHtml(scope, client.replace("<!-- MAIN -->", await renderToString(await createApp(scope))));
+        const { states } = useServer(scope);
+
+        const content = client
+            .replace("<!-- MAIN -->", await renderToString(await createApp(scope)))
+            .replace(
+                "<!-- STATES -->",
+                "<script id='STATES' type='application/json'>" + JSON.stringify(states) + "</script>"
+            );
+
+        return sendHtml(scope, content);
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",