@revojs/vue 0.1.49 → 0.1.50

package/dist/client/index.d.ts

@@ -1,26 +1,33 @@
+import { Component, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
 import * as _$revojs from "revojs";
-import { Scope } from "revojs";
-import { MaybeRefOrGetter, Ref } from "vue";
+import { RouterContext, Scope } from "revojs";
 
 //#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: 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<{
+declare function useRouter(): {
+  context: ShallowRef<RouterContext<Component>>;
+  navigate: (path: string) => void;
+  anchorNavigate: (event: Event) => void;
+};
+declare function useState<T>(name: MaybeRefOrGetter<string>): Ref<T | undefined>;
+declare function useState<T>(name: MaybeRefOrGetter<string>, value: T): Ref<T>;
+declare function useAsync<T, TError = Error>(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: MaybeRefOrGetter<string>, options?: RequestInit & AsyncOptions<TError>): Promise<{
+declare function useFetch<T, TError = Error>(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>;
 }>;
-declare function refreshAsync(scope: Scope, input?: string | Array<string>): Promise<void[] | undefined>;
+declare function refreshAsync(input?: string | Array<string>): Promise<void[] | undefined>;
 declare const isServerSideRendering: any;
 declare const REFRESH_ASYNC_HOOK: _$revojs.Descriptor<(names?: Array<string>) => Promise<void>>;
+declare const NAVIGATE_HOOK: _$revojs.Descriptor<_$revojs.Invoke>;
+declare const CLIENT_ROUTER_CONTEXT: _$revojs.Descriptor<ShallowRef<RouterContext<Component>>>;
 //#endregion
-export { AsyncOptions, REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useScope, useState };
+export { AsyncOptions, CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useRouter, useScope, useState };

package/dist/client/index.js

@@ -1,12 +1,33 @@
-import { $fetch, defineHook, getState, isClient, isServer, setState } from "revojs";
 import { customRef, 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() {
 	const scope = inject("REVOJS_SCOPE");
 	if (scope) return scope;
 	throw new Error();
 }
-function useState(scope, name, value) {
+function useRouter() {
+	const scope = useScope();
+	const context = scope.getContext(CLIENT_ROUTER_CONTEXT);
+	const navigate = (path) => {
+		if (isClient) {
+			if (window.location.pathname != path) window.history.pushState(window.history.state, "", path);
+			scope.dispatchHook(NAVIGATE_HOOK);
+		}
+		if (isServer) throw sendRedirect(scope, path);
+	};
+	const anchorNavigate = (event) => {
+		event.preventDefault();
+		navigate(event.currentTarget?.getAttribute("href") ?? "/");
+	};
+	return {
+		context,
+		navigate,
+		anchorNavigate
+	};
+}
+function useState(name, value) {
+	const scope = useScope();
 	return customRef((track, trigger) => ({
 		get() {
 			track();
@@ -18,8 +39,9 @@ function useState(scope, name, value) {
 		}
 	}));
 }
-async function useAsync(scope, name, invoke, defaultOptions) {
-	const state = useState(scope, name);
+async function useAsync(name, invoke, defaultOptions) {
+	const scope = useScope();
+	const state = useState(name);
 	const isLoading = ref(false);
 	const refresh = async (options) => {
 		const onCatch = options?.catch ?? defaultOptions?.catch;
@@ -45,8 +67,9 @@ async function useAsync(scope, name, invoke, defaultOptions) {
 		refresh
 	};
 }
-async function useFetch(scope, input, options) {
-	const { state, isLoading, refresh } = await useAsync(scope, input, () => $fetch(scope, toValue(input), options), options);
+async function useFetch(input, options) {
+	const scope = useScope();
+	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();
 	});
@@ -56,10 +79,13 @@ async function useFetch(scope, input, options) {
 		refresh
 	};
 }
-async function refreshAsync(scope, input) {
+async function refreshAsync(input) {
+	const scope = useScope();
 	if (isClient) return await scope.dispatchHook(REFRESH_ASYNC_HOOK, input === void 0 ? void 0 : Array.isArray(input) ? input : [input]);
 }
 const isServerSideRendering = import.meta.SERVER_SIDE_RENDERING ?? globalThis?.import?.meta?.SERVER_SIDE_RENDERING;
 const REFRESH_ASYNC_HOOK = defineHook("REFRESH_ASYNC_HOOK");
+const NAVIGATE_HOOK = defineHook("NAVIGATE_HOOK");
+const CLIENT_ROUTER_CONTEXT = defineContext("CLIENT_ROUTER_CONTEXT");
 //#endregion
-export { REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useScope, useState };
+export { CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useRouter, useScope, useState };

package/dist/index.js

@@ -29,7 +29,7 @@ function vue(options) {
 		return {
 			variables: { SERVER_SIDE_RENDERING: options?.serverSideRendering ?? true },
 			sources: { pages: {
-				match: "**/{page,layout}.vue",
+				match: ["**/page.vue", "**/+layout.vue"],
 				entries: ["./routes"]
 			} },
 			vite: {
@@ -37,7 +37,8 @@ function vue(options) {
 				resolve: { alias: {
 					"#vue/app": fromModule("./runtime/app.js"),
 					"#vue/main": fromModule("./runtime/main.vue")
-				} }
+				} },
+				optimizeDeps: { exclude: ["vue"] }
 			}
 		};
 	} };

package/dist/runtime/app.d.ts

@@ -1,5 +1,5 @@
-import { Scope } from "revojs";
 import * as _$vue from "vue";
+import { Scope } from "revojs";
 
 //#region src/runtime/app.d.ts
 declare const _default: (scope: Scope) => Promise<_$vue.App<Element>>;

package/dist/runtime/app.js

@@ -1,55 +1,10 @@
-import { Radix, isServer, useUrl } from "revojs";
-import { createApp, createSSRApp } from "vue";
-import pages from "#pages";
 import Main from "#vue/main";
-import { RouterView, createMemoryHistory, createRouter, createWebHistory } from "vue-router";
+import { createApp, createSSRApp } from "vue";
 import { isServerSideRendering } from "../client";
 //#region src/runtime/app.ts
-function toRoute(path, node, index) {
-	const layout = node.children["layout"];
-	if (layout) delete node.children["layout"];
-	const children = Object.entries(node.children).map(([path, node]) => toRoute(path, node, index + 1));
-	if (node.value && (children.length || layout)) children.push({
-		path: "",
-		component: node.value
-	});
-	if (node.type === "WILDCARD") path = ":" + node.parameter + "(.*)*";
-	if (node.type === "OPTIONAL-WILDCARD") path = ":" + node.parameter + "(.*)?";
-	if (node.type === "OPTIONAL-PARAMETER") path = ":" + node.parameter + "?";
-	if (node.type === "PARAMETER") path = ":" + node.parameter;
-	return {
-		path,
-		children,
-		component: children.length ? layout?.value ?? RouterView : node.value ?? RouterView
-	};
-}
 var app_default = async (scope) => {
-	const radix = new Radix();
-	for (const path in pages) {
-		const segments = path.split("/");
-		for (const attribute of segments.pop()?.split(".") ?? []) {
-			if (attribute === "page" || attribute === "vue") continue;
-			segments.push(attribute);
-		}
-		radix.use(segments, pages[path]);
-	}
-	const rootNode = toRoute("/", radix.rootNode, 0);
-	const optionalNode = rootNode.children?.find((route) => route.path.includes("?"));
-	if (optionalNode) rootNode.children?.push({
-		...optionalNode,
-		path: ""
-	});
-	const router = createRouter({
-		history: isServer ? createMemoryHistory() : createWebHistory(),
-		routes: [rootNode]
-	});
-	const app = (isServerSideRendering ? createSSRApp(Main) : createApp(Main)).use(router).provide("REVOJS_SCOPE", scope);
+	const app = (isServerSideRendering ? createSSRApp(Main) : createApp(Main)).provide("REVOJS_SCOPE", scope);
 	app.config.throwUnhandledErrorInProduction = true;
-	if (isServer) {
-		const { pathname } = useUrl(scope);
-		await router.push(pathname);
-	}
-	await router.isReady();
 	return app;
 };
 //#endregion

package/dist/runtime/entry.js

@@ -1,5 +1,5 @@
-import { Scope } from "revojs";
 import createApp from "#vue/app";
+import { Scope } from "revojs";
 //#region src/runtime/entry.ts
 await createApp(new Scope()).then((app) => app.mount("#app"));
 //#endregion

package/dist/runtime/main.vue

@@ -1,9 +1,58 @@
 <template>
     <Suspense>
-        <RouterView />
+        <component :is="route" v-if="route" />
     </Suspense>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import pages from "#pages";
+import { isClient, Router, RouterContext, useUrl } from "revojs";
+import { computed, h, onScopeDispose, shallowRef, type Component } from "vue";
+import { CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, useScope } from "../client";
+
+const scope = useScope();
+
+const context = shallowRef<RouterContext<Component>>();
+
+const router = new Router<Component>();
+
+for (const path in pages) {
+    const segments = path.split("/");
+
+    for (const attribute of segments.pop()?.split(".") ?? []) {
+        if (attribute === "page" || attribute === "vue") {
+            continue;
+        }
+
+        segments.push(attribute);
+    }
+
+    router.use(segments, pages[path]);
+}
+
+const route = computed(() => {
+    if (context.value?.route.value) {
+        return context.value.hooks.reduceRight(
+            (previous, hook) => h(hook, null, { default: () => previous }),
+            h(context.value.route.value),
+        );
+    }
+});
+
+const fetch = () => {
+    const next = useUrl(scope);
+
+    context.value = router.match(next.pathname.slice(1).split("/"));
+};
+
+scope.registerHook(NAVIGATE_HOOK, fetch);
+
+if (isClient) {
+    window.addEventListener("popstate", fetch);
+    onScopeDispose(() => window.removeEventListener("popstate", fetch));
+}
+
+fetch();
+
+scope.setContext(CLIENT_ROUTER_CONTEXT, context);
 </script>

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

@@ -1,6 +1,6 @@
-import { defineRoute, sendOk, useServer } from "revojs";
 import { isServerSideRendering } from "../../../client";
 import createApp from "#vue/app";
+import { defineRoute, sendOk, useServer } from "revojs";
 import client from "#client";
 import { renderToString } from "vue/server-renderer";
 //#region src/runtime/routes/[...]/get.ts

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.49",
+    "version": "0.1.50",
     "license": "MIT",
     "repository": "tellua/revojs",
     "files": [
@@ -29,8 +29,7 @@
     "dependencies": {
         "@vitejs/plugin-vue": "^6.0.5",
         "revojs": "*",
-        "vue": "^3.5.31",
-        "vue-router": "^5.0.4"
+        "vue": "^3.5.32"
     },
     "devDependencies": {
         "@revojs/tsconfig": "*"

package/dist/runtime/types/index.d.ts

@@ -1,25 +0,0 @@
-declare module "#vue/app" {
-    import type { Scope } from "revojs";
-    import type { App } from "vue";
-
-    export default function createApp(scope: Scope): Promise<App>;
-}
-
-declare module "#vue/main" {
-    import type { Component } from "vue";
-
-    const main: Component;
-
-    export default app;
-}
-
-declare module "*.vue" {
-    import type { DefineComponent } from "vue";
-
-    const component: DefineComponent<Record<string, never>, Record<string, never>, any>;
-    export default component;
-}
-
-interface ImportMeta {
-    readonly SERVER_SIDE_RENDERING: boolean;
-}

package/dist/runtime/types/pages.d.ts

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