@revojs/vue 0.1.55 → 0.1.57

package/dist/client/index.js

@@ -1,4 +1,4 @@
-import { customRef, inject, isRef, onScopeDispose, ref, toValue, watch } from "vue";
+import { customRef, getCurrentScope, inject, isRef, onScopeDispose, ref, toValue, watch } from "vue";
 import { defineContext, defineHook, fetch, getState, isClient, isServer, sendRedirect, setState } from "revojs";
 //#region src/client/index.ts
 function useScope() {
@@ -72,9 +72,12 @@ async function useAsync(name, invoke, defaultOptions) {
 }
 async function useFetch(input, options) {
 	const scope = useScope();
+	const effectScope = getCurrentScope();
 	const { state, isLoading, refresh } = await useAsync(input, () => fetch(scope, toValue(input), options), options);
-	if (isClient && (isRef(input) || typeof input === "function")) watch(input, async (next, previous) => {
-		if (next !== previous) await refresh();
+	if (isClient && (isRef(input) || typeof input === "function")) effectScope?.run(() => {
+		watch(input, async (next, previous) => {
+			if (next !== previous) await refresh();
+		}, { flush: "post" });
 	});
 	return {
 		state,

package/dist/runtime/main.vue

@@ -1,5 +1,5 @@
 <template>
-    <Suspense>
+    <Suspense :key>
         <component :is="route" v-if="route" />
     </Suspense>
 </template>
@@ -10,12 +10,25 @@ import { isClient, Router, RouterContext, useUrl } from "revojs";
 import { computed, h, onErrorCaptured, onScopeDispose, shallowRef, type Component } from "vue";
 import { CLIENT_ERROR_CONTEXT, CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, useScope } from "../client";
 
+const router = new Router<Component>();
+
 const scope = useScope();
 
 const error = shallowRef<Error>();
 const context = shallowRef<RouterContext<Component>>();
 
-const router = new Router<Component>();
+const key = computed(() => context.value?.segments.join("/"));
+
+const route = computed(() => {
+    if (!context.value?.route) {
+        return;
+    }
+
+    return context.value.hooks.reduceRight(
+        (previous, hook) => h(hook, null, { default: () => (error.value === undefined ? previous : undefined) }),
+        h(context.value.route),
+    );
+});
 
 for (const path in pages) {
     const segments = path.split("/");
@@ -33,20 +46,6 @@ for (const path in pages) {
     }
 }
 
-const route = computed(() => {
-    if (context.value?.route) {
-        const route = h(context.value.route);
-
-        return context.value.hooks.reduceRight(
-            (previous, hook) =>
-                h(hook, null, {
-                    default: () => (error.value === undefined ? previous : undefined),
-                }),
-            route,
-        );
-    }
-});
-
 const fetch = () => {
     const next = useUrl(scope);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.55",
+    "version": "0.1.57",
     "license": "MIT",
     "repository": "tellua/revojs",
     "files": [