@revojs/vue 0.1.36 → 0.1.38

package/dist/client/index.d.mts

@@ -1,20 +1,20 @@
 import * as revojs from "revojs";
 import { Scope } from "revojs";
-import { Ref } from "vue";
+import { MaybeRefOrGetter, Ref } from "vue";
 
 //#region src/client/index.d.ts
 interface 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>): Promise<{
+declare function useState<T>(scope: Scope, name: MaybeRefOrGetter<string>): Ref<T | undefined>;
+declare function useState<T>(scope: Scope, name: MaybeRefOrGetter<string>, value: T): Ref<T>;
+declare function useAsync<T, TError = Error>(scope: Scope, name: MaybeRefOrGetter<string>, invoke: () => Promise<T>, defaultOptions?: AsyncOptions<TError>): Promise<{
   state: Ref<T | undefined, T | undefined>;
   isLoading: Ref<boolean, boolean>;
   refresh: (options?: AsyncOptions<TError>) => Promise<T | undefined>;
 }>;
-declare function useFetch<T, TError = Error>(scope: Scope, input: string | URL, options?: RequestInit & AsyncOptions<TError>): Promise<{
+declare function useFetch<T, TError = Error>(scope: Scope, input: MaybeRefOrGetter<string>, options?: RequestInit & AsyncOptions<TError>): Promise<{
   state: Ref<T | undefined, T | undefined>;
   isLoading: Ref<boolean, boolean>;
   refresh: (options?: AsyncOptions<TError> | undefined) => Promise<T | undefined>;

package/dist/client/index.mjs

@@ -1,5 +1,5 @@
 import { $fetch, defineHook, getState, isClient, isServer, setState } from "revojs";
-import { customRef, inject, onScopeDispose, ref } from "vue";
+import { customRef, inject, isRef, onScopeDispose, ref, toValue, watch } from "vue";
 
 //#region src/client/index.ts
 function useScope() {
@@ -8,15 +8,14 @@ function useScope() {
 	throw new Error();
 }
 function useState(scope, name, value) {
-	let state = getState(scope, name) ?? value;
 	return customRef((track, trigger) => ({
 		get() {
 			track();
-			return state;
+			return getState(scope, toValue(name)) ?? value;
 		},
 		set(update) {
-			state = update;
-			setState(scope, name, state);
+			console.log(toValue(name), update);
+			setState(scope, toValue(name), update);
 			trigger();
 		}
 	}));
@@ -40,7 +39,7 @@ async function useAsync(scope, name, invoke, defaultOptions) {
 	const task = refresh();
 	if (isServer) await task;
 	if (isClient) onScopeDispose(scope.registerHook(REFRESH_ASYNC_HOOK, async (names) => {
-		if (names === void 0 || names?.includes(name)) await refresh();
+		if (names === void 0 || names?.includes(toValue(name))) await refresh();
 	}));
 	return {
 		state,
@@ -48,8 +47,16 @@ async function useAsync(scope, name, invoke, defaultOptions) {
 		refresh
 	};
 }
-function useFetch(scope, input, options) {
-	return useAsync(scope, input.toString(), () => $fetch(scope, input, options), options);
+async function useFetch(scope, input, options) {
+	const { state, isLoading, refresh } = await useAsync(scope, input, () => $fetch(scope, toValue(input), options), options);
+	if (isClient && (isRef(input) || typeof input === "function")) watch(input, async (next, previous) => {
+		if (next !== previous) await refresh();
+	});
+	return {
+		state,
+		isLoading,
+		refresh
+	};
 }
 async function refreshAsync(scope, input) {
 	if (isClient) return await scope.dispatchHook(REFRESH_ASYNC_HOOK, input === void 0 ? void 0 : Array.isArray(input) ? input : [input]);

package/dist/module/app.ts

@@ -1,5 +1,5 @@
 import Main from "#alias/vue/main";
-import pages from "#virtual/pages";
+import { entries } from "#pages";
 import { isServer, Radix, Scope, useUrl, type Node } from "revojs";
 import { createApp, createSSRApp, type Component } from "vue";
 import {
@@ -45,7 +45,7 @@ function toRoute(path: string, node: Node<Component>, index: number): RouteRecor
 export default async (scope: Scope) => {
     const radix = new Radix<Component>();
 
-    for (const path in pages) {
+    for (const path in entries) {
         const segments = path.split("/");
 
         for (const attribute of segments.pop()?.split(".") ?? []) {
@@ -56,7 +56,7 @@ export default async (scope: Scope) => {
             segments.push(attribute);
         }
 
-        radix.use(segments, pages[path]);
+        radix.use(segments, entries[path]);
     }
 
     const rootNode = toRoute("/", radix.rootNode, 0);

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

@@ -1,5 +1,5 @@
 import createApp from "#alias/vue/app";
-import client from "#virtual/client";
+import client from "#client";
 import { defineRoute, sendHtml, useServer } from "revojs";
 import { renderToString } from "vue/server-renderer";
 import { isServerSideRendering } from "../../../client";
@@ -23,12 +23,16 @@ export default defineRoute({
             }
         }
 
+        const value = JSON.stringify(states)
+            .replace(/</g, "\\u003c")
+            .replace(/>/g, "\\u003e")
+            .replace(/&/g, "\\u0026")
+            .replace(/\u2028/g, "\\u2028")
+            .replace(/\u2029/g, "\\u2029");
+
         return sendHtml(
             scope,
-            content.replace(
-                "<!-- HEAD -->",
-                "<script id='STATES' type='application/json'>" + JSON.stringify(states) + "</script>",
-            ),
+            content.replace("<!-- HEAD -->", "<script id='STATES' type='application/json'>" + value + "</script>"),
         );
     },
 });

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.36",
+    "version": "0.1.38",
     "license": "MIT",
-    "repository": "coverbase/revojs",
+    "repository": "tellua/revojs",
     "files": [
         "dist",
         "src/types"

package/src/types/index.d.ts

@@ -1,4 +1,5 @@
 declare module "#alias/vue/app" {
+    import type { Scope } from "revojs";
     import type { App } from "vue";
 
     export default function createApp(scope: Scope): Promise<App>;
@@ -12,14 +13,6 @@ declare module "#alias/vue/main" {
     export default app;
 }
 
-declare module "#virtual/pages" {
-    import type { Component } from "vue";
-
-    const pages: Record<string, Component>;
-
-    export default pages;
-}
-
 declare module "*.vue" {
     import type { DefineComponent } from "vue";
 

package/src/types/pages.d.ts

@@ -0,0 +1,5 @@
+declare module "#pages" {
+    import type { Component } from "vue";
+
+    export const entries: Record<string, Component>;
+}