@revojs/vue 0.1.48 → 0.1.50

package/dist/client/index.d.ts

@@ -0,0 +1,33 @@
+import { Component, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+import * as _$revojs from "revojs";
+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 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>(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(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, CLIENT_ROUTER_CONTEXT, NAVIGATE_HOOK, REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useRouter, useScope, useState };

package/dist/client/{index.mjs → 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.mjs → index.js}

@@ -10,7 +10,7 @@ function vue(options) {
 		app.config.template.head.children.push({
 			tagName: "script",
 			attributes: { type: "module" },
-			children: [`import "${fromModule("./module/entry.ts")}"`]
+			children: [`import "${fromModule("./runtime/entry.js")}"`]
 		}, {
 			tagName: "script",
 			attributes: {
@@ -24,20 +24,21 @@ function vue(options) {
 			attributes: { id: "app" },
 			children: ["<!-- APP -->"]
 		});
-		addRoutes(app, fromModule("./module/routes"));
+		addRoutes(app, fromModule("./runtime/routes"));
 		addTypes(app, "revojs-vue", () => `import "@revojs/vue/types"`);
 		return {
 			variables: { SERVER_SIDE_RENDERING: options?.serverSideRendering ?? true },
 			sources: { pages: {
-				match: "**/{page,layout}.vue",
+				match: ["**/page.vue", "**/+layout.vue"],
 				entries: ["./routes"]
 			} },
 			vite: {
 				plugins: [vueCompiler(options?.compilerOption)],
 				resolve: { alias: {
-					"#vue/app": fromModule("./module/app.ts"),
-					"#vue/main": fromModule("./module/main.vue")
-				} }
+					"#vue/app": fromModule("./runtime/app.js"),
+					"#vue/main": fromModule("./runtime/main.vue")
+				} },
+				optimizeDeps: { exclude: ["vue"] }
 			}
 		};
 	} };

package/dist/runtime/app.d.ts

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

package/dist/runtime/app.js

@@ -0,0 +1,11 @@
+import Main from "#vue/main";
+import { createApp, createSSRApp } from "vue";
+import { isServerSideRendering } from "../client";
+//#region src/runtime/app.ts
+var app_default = async (scope) => {
+	const app = (isServerSideRendering ? createSSRApp(Main) : createApp(Main)).provide("REVOJS_SCOPE", scope);
+	app.config.throwUnhandledErrorInProduction = true;
+	return app;
+};
+//#endregion
+export { app_default as default };

package/dist/runtime/entry.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/{module/entry.ts → runtime/entry.js}

@@ -1,4 +1,5 @@
 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

@@ -0,0 +1,58 @@
+<template>
+    <Suspense>
+        <component :is="route" v-if="route" />
+    </Suspense>
+</template>
+
+<script setup lang="ts">
+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.d.ts

@@ -0,0 +1,8 @@
+import * as _$revojs from "revojs";
+
+//#region src/runtime/routes/[...]/get.d.ts
+declare const _default: {
+  fetch(scope: _$revojs.Scope): Promise<Response>;
+};
+//#endregion
+export { _default as default };

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

@@ -0,0 +1,21 @@
+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
+var get_default = defineRoute({ async fetch(scope) {
+	const { states } = useServer(scope);
+	let content = client;
+	if (isServerSideRendering) {
+		const app = await createApp(scope);
+		let exception;
+		app.config.errorHandler = (value) => exception = value;
+		content = content.replace("<!-- APP -->", await renderToString(app));
+		if (exception) throw exception;
+	}
+	const value = JSON.stringify(states).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+	return sendOk(scope, content.replace(`<!-- STATES -->`, value));
+} });
+//#endregion
+export { get_default as default };

package/package.json

@@ -1,41 +1,37 @@
 {
     "name": "@revojs/vue",
-    "version": "0.1.48",
+    "version": "0.1.50",
     "license": "MIT",
     "repository": "tellua/revojs",
     "files": [
-        "dist",
-        "src/types"
+        "dist"
     ],
     "type": "module",
-    "main": "./dist/index.mjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.mts",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
     "exports": {
         ".": {
-            "types": "./dist/index.d.mts",
-            "import": "./dist/index.mjs"
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
         },
         "./client": {
-            "types": "./dist/client/index.d.mts",
-            "import": "./dist/client/index.mjs"
+            "types": "./dist/client/index.d.ts",
+            "import": "./dist/client/index.js"
         },
         "./types": {
-            "types": "./src/types/index.d.ts"
+            "types": "./dist/runtime/types/index.d.ts"
         }
     },
     "scripts": {
-        "build": "tsdown",
-        "watch": "tsdown -w"
+        "build": "revojs module build"
     },
     "dependencies": {
         "@vitejs/plugin-vue": "^6.0.5",
         "revojs": "*",
-        "vue": "^3.5.31",
-        "vue-router": "^5.0.4"
+        "vue": "^3.5.32"
     },
     "devDependencies": {
-        "@revojs/tsconfig": "*",
-        "tsdown": "^0.21.7"
+        "@revojs/tsconfig": "*"
     }
 }

package/dist/client/index.d.mts

@@ -1,26 +0,0 @@
-import * as _$revojs from "revojs";
-import { Scope } from "revojs";
-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: 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: 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 const isServerSideRendering: boolean;
-declare const REFRESH_ASYNC_HOOK: _$revojs.Descriptor<(names?: Array<string>) => Promise<void>>;
-//#endregion
-export { AsyncOptions, REFRESH_ASYNC_HOOK, isServerSideRendering, refreshAsync, useAsync, useFetch, useScope, useState };

package/dist/module/app.ts

@@ -1,97 +0,0 @@
-import pages from "#pages";
-import Main from "#vue/main";
-import { isServer, Radix, Scope, useUrl, type Node } from "revojs";
-import { createApp, createSSRApp, type Component } from "vue";
-import {
-    createMemoryHistory,
-    createRouter,
-    createWebHistory,
-    RouteRecordSingleView,
-    RouterView,
-    type RouteRecordRaw,
-} from "vue-router";
-import { isServerSideRendering } from "../client";
-
-function toRoute(path: string, node: Node<Component>, index: number): RouteRecordRaw {
-    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;
-    }
-
-    const route = {
-        path,
-        children,
-        component: children.length ? (layout?.value ?? RouterView) : (node.value ?? RouterView),
-    };
-
-    return route;
-}
-
-export default async (scope: Scope) => {
-    const radix = new Radix<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);
-        }
-
-        radix.use(segments, pages[path]);
-    }
-
-    const rootNode = toRoute("/", radix.rootNode, 0);
-
-    const optionalNode = rootNode.children?.find((route) => route.path.includes("?")) as RouteRecordSingleView;
-    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);
-
-    app.config.throwUnhandledErrorInProduction = true;
-
-    if (isServer) {
-        const { pathname } = useUrl(scope);
-
-        await router.push(pathname);
-    }
-
-    await router.isReady();
-
-    return app;
-};

package/dist/module/main.vue

@@ -1,9 +0,0 @@
-<template>
-    <Suspense>
-        <RouterView />
-    </Suspense>
-</template>
-
-<script setup lang="ts">
-import { RouterView } from "vue-router";
-</script>

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

@@ -1,35 +0,0 @@
-import client from "#client";
-import createApp from "#vue/app";
-import { defineRoute, sendOk, useServer } from "revojs";
-import { renderToString } from "vue/server-renderer";
-import { isServerSideRendering } from "../../../client";
-
-export default defineRoute({
-    async fetch(scope) {
-        const { states } = useServer(scope);
-
-        let content = client;
-
-        if (isServerSideRendering) {
-            const app = await createApp(scope);
-
-            let exception;
-            app.config.errorHandler = (value) => (exception = value);
-
-            content = content.replace("<!-- APP -->", await renderToString(app));
-
-            if (exception) {
-                throw exception;
-            }
-        }
-
-        const value = JSON.stringify(states)
-            .replace(/</g, "\\u003c")
-            .replace(/>/g, "\\u003e")
-            .replace(/&/g, "\\u0026")
-            .replace(/\u2028/g, "\\u2028")
-            .replace(/\u2029/g, "\\u2029");
-
-        return sendOk(scope, content.replace(`<!-- STATES -->`, value));
-    },
-});

package/src/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/src/types/pages.d.ts

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