reactive-route 0.0.1-alpha.25 → 0.0.1-alpha.27

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Dmitry
+Copyright (c) 2025-present Dmitry
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/adapters/vue.d.ts

@@ -0,0 +1,3 @@
+import { TypeAdapters } from 'reactive-route';
+export declare const adapters: TypeAdapters;
+//# sourceMappingURL=vue.d.ts.map

package/dist/adapters/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../packages/adapters/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,eAAO,MAAM,QAAQ,EAAE,YAYtB,CAAC"}

package/dist/cjs/adapters/vue/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/adapters/vue.ts
+var vue_exports = {};
+__export(vue_exports, {
+  adapters: () => adapters
+});
+module.exports = __toCommonJS(vue_exports);
+var import_vue = require("vue");
+var adapters = {
+  batch: (cb) => cb(),
+  autorun: import_vue.watchEffect,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      if (obj.hasOwnProperty(variableKey)) {
+        delete obj[variableKey];
+      }
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable: import_vue.reactive
+};

package/dist/cjs/adapters/vue/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/cjs/index.js

@@ -187,12 +187,8 @@ function replaceDynamicValues({
 }
 
 // packages/core/createRouter.ts
-function createRouter({
-  routes,
-  adapters,
-  lifecycleParams
-}) {
-  const router = adapters.makeObservable({
+function createRouter(config) {
+  const router = config.adapters.makeObservable({
     routesHistory: [],
     currentRoute: {},
     isRedirecting: false,
@@ -200,10 +196,13 @@ function createRouter({
     restoreFromURL: void 0,
     restoreFromServer: void 0,
     get adapters() {
-      return adapters;
+      return config.adapters;
     },
     get routes() {
-      return routes;
+      return config.routes;
+    },
+    get lifecycleParams() {
+      return config.lifecycleParams;
     }
   });
   router.restoreFromServer = function restoreFromServer(obj) {
@@ -211,23 +210,23 @@ function createRouter({
       router.routesHistory.push(...obj.routesHistory || []);
       Object.assign(router.currentRoute, obj.currentRoute);
     });
-    const preloadedRouteName = Object.keys(routes).find(
+    const preloadedRouteName = Object.keys(router.routes).find(
       (routeName) => router.currentRoute.name === routeName
     );
-    return loadComponentToConfig({ route: routes[preloadedRouteName] });
+    return loadComponentToConfig({ route: router.routes[preloadedRouteName] });
   };
   router.restoreFromURL = function restoreFromURL(params) {
-    return router.redirect(getInitialRoute({ routes, ...params }));
+    return router.redirect(getInitialRoute({ routes: router.routes, ...params }));
   };
-  router.redirect = async function redirect(config) {
-    const { route: routeName, noHistoryPush } = config;
+  router.redirect = async function redirect(config2) {
+    const { route: routeName, noHistoryPush } = config2;
     let currentRoute;
     let currentPathname;
     let currentUrl;
     let currentSearch;
     let currentQuery;
     if (router.currentRoute?.name) {
-      currentRoute = routes[router.currentRoute.name];
+      currentRoute = router.routes[router.currentRoute.name];
       currentPathname = replaceDynamicValues({
         route: currentRoute,
         params: router.currentRoute.params
@@ -236,18 +235,18 @@ function createRouter({
       currentSearch = queryString.stringify(router.currentRoute.query);
       currentUrl = `${currentPathname}${currentSearch ? `?${currentSearch}` : ""}`;
     }
-    const nextRoute = routes[routeName];
+    const nextRoute = router.routes[routeName];
     const nextPathname = replaceDynamicValues({
       route: nextRoute,
-      params: "params" in config ? config.params : void 0
+      params: "params" in config2 ? config2.params : void 0
     });
     let nextQuery;
     let nextUrl = nextPathname;
     let nextSearch;
-    if ("query" in config && config.query) {
+    if ("query" in config2 && config2.query) {
       const clearedQuery = getQueryValues({
         route: nextRoute,
-        pathname: `${nextPathname}?${queryString.stringify(config.query)}`
+        pathname: `${nextPathname}?${queryString.stringify(config2.query)}`
       });
       if (Object.keys(clearedQuery).length > 0) {
         nextQuery = clearedQuery;
@@ -279,7 +278,7 @@ function createRouter({
       router.isRedirecting = true;
     });
     try {
-      const config2 = {
+      const config3 = {
         nextUrl,
         nextRoute,
         nextQuery,
@@ -292,7 +291,7 @@ function createRouter({
         currentPathname,
         redirect: (redirectConfig2) => {
           if (constants.isClient) return redirectConfig2;
-          const redirectRoute = routes[redirectConfig2.route];
+          const redirectRoute = router.routes[redirectConfig2.route];
           const redirectParams = "params" in redirectConfig2 && redirectConfig2.params ? redirectConfig2.params : void 0;
           let redirectUrl = replaceDynamicValues({
             params: redirectParams,
@@ -313,10 +312,10 @@ function createRouter({
           throw new PreventError(`Redirect to ${nextUrl} was prevented`);
         }
       };
-      await currentRoute?.beforeLeave?.(config2, ...lifecycleParams || []);
-      const redirectConfig = await nextRoute.beforeEnter?.(config2, ...lifecycleParams || []);
+      await currentRoute?.beforeLeave?.(config3, ...router.lifecycleParams || []);
+      const redirectConfig = await nextRoute.beforeEnter?.(config3, ...router.lifecycleParams || []);
       if (redirectConfig) return redirect(redirectConfig);
-      await loadComponentToConfig({ route: routes[nextRoute.name] });
+      await loadComponentToConfig({ route: router.routes[nextRoute.name] });
     } catch (error) {
       if (error instanceof PreventError) {
         return Promise.resolve();
@@ -325,15 +324,15 @@ function createRouter({
         throw error;
       }
       console.error(error);
-      await loadComponentToConfig({ route: routes.internalError });
+      await loadComponentToConfig({ route: router.routes.internalError });
       router.adapters.batch(() => {
         router.adapters.replaceObject(router.currentRoute, {
-          name: routes.internalError.name,
-          path: routes.internalError.path,
-          props: routes[routes.internalError.name].props,
+          name: router.routes.internalError.name,
+          path: router.routes.internalError.path,
+          props: router.routes[router.routes.internalError.name].props,
           query: router.adapters.makeObservable({}),
           params: router.adapters.makeObservable({}),
-          pageId: routes[routes.internalError.name].pageId
+          pageId: router.routes[router.routes.internalError.name].pageId
         });
         router.isRedirecting = false;
       });
@@ -343,10 +342,10 @@ function createRouter({
       router.adapters.replaceObject(router.currentRoute, {
         name: nextRoute.name,
         path: nextRoute.path,
-        props: routes[nextRoute.name].props,
+        props: router.routes[nextRoute.name].props,
         query: getQueryValues({ route: nextRoute, pathname: nextUrl }),
         params: getDynamicValues({ route: nextRoute, pathname: nextUrl }),
-        pageId: routes[nextRoute.name].pageId
+        pageId: router.routes[nextRoute.name].pageId
       });
       const lastUrl = router.routesHistory[router.routesHistory.length - 1];
       if (lastUrl !== nextUrl) {
@@ -355,7 +354,7 @@ function createRouter({
       if (history && !noHistoryPush) {
         history.push({
           hash: history.location.hash,
-          search: "query" in config ? `?${queryString.stringify(config.query)}` : "",
+          search: "query" in config2 ? `?${queryString.stringify(config2.query)}` : "",
           pathname: nextPathname
         });
       }

package/dist/cjs/vue/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/vue/index.ts
+var vue_exports = {};
+__export(vue_exports, {
+  Router: () => Router
+});
+module.exports = __toCommonJS(vue_exports);
+
+// packages/vue/Router.ts
+var import_reactive_route = require("reactive-route");
+var import_vue = require("vue");
+var Router = (0, import_vue.defineComponent)({
+  name: "ReactiveRouteRouter",
+  props: {
+    // We keep the type generic via TS, but at runtime it's just any
+    router: { type: Object, required: true },
+    beforeSetPageComponent: { type: Function, required: false },
+    beforeUpdatePageComponent: { type: Function, required: false },
+    beforeMount: { type: Function, required: false }
+  },
+  // TS helper, runtime ignored
+  setup(props) {
+    const disposerRef = (0, import_vue.reactive)({ current: null });
+    const config = props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    });
+    function redirectOnHistoryPop() {
+      if (!import_reactive_route.history) return;
+      import_reactive_route.history.listen((params) => {
+        if (params.action !== "POP") return;
+        const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
+        if (previousRoutePathname === params.location.pathname) {
+          props.router.routesHistory.pop();
+        }
+        void props.router.restoreFromURL({
+          pathname: import_reactive_route.history.location.pathname,
+          noHistoryPush: true
+        });
+      });
+    }
+    function setLoadedComponent() {
+      const currentRouteName = props.router.currentRoute.name;
+      const currentRoutePage = props.router.currentRoute.pageId;
+      const componentConfig = props.router.routes[currentRouteName];
+      let preventRedirect = false;
+      if (props.router.isRedirecting) preventRedirect = true;
+      else if (config.loadedComponentName === currentRouteName) {
+        preventRedirect = true;
+      } else if (config.loadedComponentPage != null && currentRouteName != null) {
+        if (config.loadedComponentPage === currentRoutePage) {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          preventRedirect = true;
+        }
+      }
+      if (preventRedirect) return;
+      props.router.adapters.batch(() => {
+        if (config.loadedComponentName) {
+          props.beforeUpdatePageComponent?.();
+        }
+        props.beforeSetPageComponent?.(componentConfig);
+        props.router.adapters.batch(() => {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          config.loadedComponentName = currentRouteName;
+          config.loadedComponentPage = componentConfig.pageId;
+        });
+      });
+    }
+    setLoadedComponent();
+    (0, import_vue.onMounted)(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      if (props.router.adapters.immediateSetComponent) {
+        props.router.adapters.batch(() => {
+          setLoadedComponent();
+        });
+      }
+      const disposer = props.router.adapters.autorun(() => setLoadedComponent());
+      if (typeof disposer === "function") disposerRef.current = disposer;
+    });
+    (0, import_vue.onBeforeUnmount)(() => {
+      disposerRef.current?.();
+    });
+    return () => {
+      if (!config.loadedComponentName) return null;
+      const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+      if (!LoadedComponent) return null;
+      return (0, import_vue.h)(LoadedComponent, { ...config.currentProps || {}, router: props.router });
+    };
+  }
+});

package/dist/cjs/vue/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/core/createRouter.d.ts

@@ -1,7 +1,7 @@
 import { TypeAdapters } from './types/TypeAdapters';
 import { TypeRoute } from './types/TypeRoute';
 import { TypeRouter } from './types/TypeRouter';
-export declare function createRouter<TRoutes extends Record<string | 'notFound' | 'internalError', TypeRoute>>({ routes, adapters, lifecycleParams, }: {
+export declare function createRouter<TRoutes extends Record<string | 'notFound' | 'internalError', TypeRoute>>(config: {
     routes: TRoutes;
     adapters: TypeAdapters;
     lifecycleParams?: Array<any>;

package/dist/core/createRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createRouter.d.ts","sourceRoot":"","sources":["../../packages/core/createRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAYhD,wBAAgB,YAAY,CAC1B,OAAO,SAAS,MAAM,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,EAAE,SAAS,CAAC,EACxE,EACA,MAAM,EACN,QAAQ,EACR,eAAe,GAChB,EAAE;IACD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CAC9B,GAAG,UAAU,CAAC,OAAO,CAAC,CAoPtB"}
+{"version":3,"file":"createRouter.d.ts","sourceRoot":"","sources":["../../packages/core/createRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAYhD,wBAAgB,YAAY,CAC1B,OAAO,SAAS,MAAM,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,EAAE,SAAS,CAAC,EACxE,MAAM,EAAE;IACR,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CAC9B,GAAG,UAAU,CAAC,OAAO,CAAC,CAuPtB"}

package/dist/core/types/TypeRouter.d.ts

@@ -17,5 +17,6 @@ export type TypeRouter<TRoutes extends Record<string | 'notFound' | 'internalErr
         routesHistory: Array<string>;
         currentRoute: TypeCurrentRoute<TRoutes[keyof TRoutes]>;
     }): Promise<void>;
+    lifecycleParams?: Array<any>;
 };
 //# sourceMappingURL=TypeRouter.d.ts.map

package/dist/core/types/TypeRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeRouter.d.ts","sourceRoot":"","sources":["../../../packages/core/types/TypeRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,MAAM,UAAU,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,EAAE,SAAS,CAAC,IAAI;IACjG,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC;IACvD,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,UAAU,SAAS,MAAM,OAAO,EACvC,MAAM,EAAE,kBAAkB,CAAC,OAAO,EAAE,UAAU,CAAC,GAC9C,OAAO,CAAC,IAAI,CAAC,CAAC;IACjB,cAAc,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrF,iBAAiB,CAAC,GAAG,EAAE;QACrB,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC;KACxD,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnB,CAAC"}
+{"version":3,"file":"TypeRouter.d.ts","sourceRoot":"","sources":["../../../packages/core/types/TypeRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,MAAM,UAAU,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,EAAE,SAAS,CAAC,IAAI;IACjG,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC;IACvD,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,UAAU,SAAS,MAAM,OAAO,EACvC,MAAM,EAAE,kBAAkB,CAAC,OAAO,EAAE,UAAU,CAAC,GAC9C,OAAO,CAAC,IAAI,CAAC,CAAC;IACjB,cAAc,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrF,iBAAiB,CAAC,GAAG,EAAE;QACrB,aAAa,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAC7B,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC;KACxD,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;CAC9B,CAAC"}

package/dist/esm/adapters/vue/index.js

@@ -0,0 +1,18 @@
+// packages/adapters/vue.ts
+import { reactive, watchEffect } from "vue";
+var adapters = {
+  batch: (cb) => cb(),
+  autorun: watchEffect,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      if (obj.hasOwnProperty(variableKey)) {
+        delete obj[variableKey];
+      }
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable: reactive
+};
+export {
+  adapters
+};

package/dist/esm/adapters/vue/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/esm/index.js

@@ -156,12 +156,8 @@ function replaceDynamicValues({
 }
 
 // packages/core/createRouter.ts
-function createRouter({
-  routes,
-  adapters,
-  lifecycleParams
-}) {
-  const router = adapters.makeObservable({
+function createRouter(config) {
+  const router = config.adapters.makeObservable({
     routesHistory: [],
     currentRoute: {},
     isRedirecting: false,
@@ -169,10 +165,13 @@ function createRouter({
     restoreFromURL: void 0,
     restoreFromServer: void 0,
     get adapters() {
-      return adapters;
+      return config.adapters;
     },
     get routes() {
-      return routes;
+      return config.routes;
+    },
+    get lifecycleParams() {
+      return config.lifecycleParams;
     }
   });
   router.restoreFromServer = function restoreFromServer(obj) {
@@ -180,23 +179,23 @@ function createRouter({
       router.routesHistory.push(...obj.routesHistory || []);
       Object.assign(router.currentRoute, obj.currentRoute);
     });
-    const preloadedRouteName = Object.keys(routes).find(
+    const preloadedRouteName = Object.keys(router.routes).find(
       (routeName) => router.currentRoute.name === routeName
     );
-    return loadComponentToConfig({ route: routes[preloadedRouteName] });
+    return loadComponentToConfig({ route: router.routes[preloadedRouteName] });
   };
   router.restoreFromURL = function restoreFromURL(params) {
-    return router.redirect(getInitialRoute({ routes, ...params }));
+    return router.redirect(getInitialRoute({ routes: router.routes, ...params }));
   };
-  router.redirect = async function redirect(config) {
-    const { route: routeName, noHistoryPush } = config;
+  router.redirect = async function redirect(config2) {
+    const { route: routeName, noHistoryPush } = config2;
     let currentRoute;
     let currentPathname;
     let currentUrl;
     let currentSearch;
     let currentQuery;
     if (router.currentRoute?.name) {
-      currentRoute = routes[router.currentRoute.name];
+      currentRoute = router.routes[router.currentRoute.name];
       currentPathname = replaceDynamicValues({
         route: currentRoute,
         params: router.currentRoute.params
@@ -205,18 +204,18 @@ function createRouter({
       currentSearch = queryString.stringify(router.currentRoute.query);
       currentUrl = `${currentPathname}${currentSearch ? `?${currentSearch}` : ""}`;
     }
-    const nextRoute = routes[routeName];
+    const nextRoute = router.routes[routeName];
     const nextPathname = replaceDynamicValues({
       route: nextRoute,
-      params: "params" in config ? config.params : void 0
+      params: "params" in config2 ? config2.params : void 0
     });
     let nextQuery;
     let nextUrl = nextPathname;
     let nextSearch;
-    if ("query" in config && config.query) {
+    if ("query" in config2 && config2.query) {
       const clearedQuery = getQueryValues({
         route: nextRoute,
-        pathname: `${nextPathname}?${queryString.stringify(config.query)}`
+        pathname: `${nextPathname}?${queryString.stringify(config2.query)}`
       });
       if (Object.keys(clearedQuery).length > 0) {
         nextQuery = clearedQuery;
@@ -248,7 +247,7 @@ function createRouter({
       router.isRedirecting = true;
     });
     try {
-      const config2 = {
+      const config3 = {
         nextUrl,
         nextRoute,
         nextQuery,
@@ -261,7 +260,7 @@ function createRouter({
         currentPathname,
         redirect: (redirectConfig2) => {
           if (constants.isClient) return redirectConfig2;
-          const redirectRoute = routes[redirectConfig2.route];
+          const redirectRoute = router.routes[redirectConfig2.route];
           const redirectParams = "params" in redirectConfig2 && redirectConfig2.params ? redirectConfig2.params : void 0;
           let redirectUrl = replaceDynamicValues({
             params: redirectParams,
@@ -282,10 +281,10 @@ function createRouter({
           throw new PreventError(`Redirect to ${nextUrl} was prevented`);
         }
       };
-      await currentRoute?.beforeLeave?.(config2, ...lifecycleParams || []);
-      const redirectConfig = await nextRoute.beforeEnter?.(config2, ...lifecycleParams || []);
+      await currentRoute?.beforeLeave?.(config3, ...router.lifecycleParams || []);
+      const redirectConfig = await nextRoute.beforeEnter?.(config3, ...router.lifecycleParams || []);
       if (redirectConfig) return redirect(redirectConfig);
-      await loadComponentToConfig({ route: routes[nextRoute.name] });
+      await loadComponentToConfig({ route: router.routes[nextRoute.name] });
     } catch (error) {
       if (error instanceof PreventError) {
         return Promise.resolve();
@@ -294,15 +293,15 @@ function createRouter({
         throw error;
       }
       console.error(error);
-      await loadComponentToConfig({ route: routes.internalError });
+      await loadComponentToConfig({ route: router.routes.internalError });
       router.adapters.batch(() => {
         router.adapters.replaceObject(router.currentRoute, {
-          name: routes.internalError.name,
-          path: routes.internalError.path,
-          props: routes[routes.internalError.name].props,
+          name: router.routes.internalError.name,
+          path: router.routes.internalError.path,
+          props: router.routes[router.routes.internalError.name].props,
           query: router.adapters.makeObservable({}),
           params: router.adapters.makeObservable({}),
-          pageId: routes[routes.internalError.name].pageId
+          pageId: router.routes[router.routes.internalError.name].pageId
         });
         router.isRedirecting = false;
       });
@@ -312,10 +311,10 @@ function createRouter({
       router.adapters.replaceObject(router.currentRoute, {
         name: nextRoute.name,
         path: nextRoute.path,
-        props: routes[nextRoute.name].props,
+        props: router.routes[nextRoute.name].props,
         query: getQueryValues({ route: nextRoute, pathname: nextUrl }),
         params: getDynamicValues({ route: nextRoute, pathname: nextUrl }),
-        pageId: routes[nextRoute.name].pageId
+        pageId: router.routes[nextRoute.name].pageId
       });
       const lastUrl = router.routesHistory[router.routesHistory.length - 1];
       if (lastUrl !== nextUrl) {
@@ -324,7 +323,7 @@ function createRouter({
       if (history && !noHistoryPush) {
         history.push({
           hash: history.location.hash,
-          search: "query" in config ? `?${queryString.stringify(config.query)}` : "",
+          search: "query" in config2 ? `?${queryString.stringify(config2.query)}` : "",
           pathname: nextPathname
         });
       }

package/dist/esm/vue/index.js

@@ -0,0 +1,93 @@
+// packages/vue/Router.ts
+import { history } from "reactive-route";
+import { defineComponent, h, onBeforeUnmount, onMounted, reactive } from "vue";
+var Router = defineComponent({
+  name: "ReactiveRouteRouter",
+  props: {
+    // We keep the type generic via TS, but at runtime it's just any
+    router: { type: Object, required: true },
+    beforeSetPageComponent: { type: Function, required: false },
+    beforeUpdatePageComponent: { type: Function, required: false },
+    beforeMount: { type: Function, required: false }
+  },
+  // TS helper, runtime ignored
+  setup(props) {
+    const disposerRef = reactive({ current: null });
+    const config = props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    });
+    function redirectOnHistoryPop() {
+      if (!history) return;
+      history.listen((params) => {
+        if (params.action !== "POP") return;
+        const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
+        if (previousRoutePathname === params.location.pathname) {
+          props.router.routesHistory.pop();
+        }
+        void props.router.restoreFromURL({
+          pathname: history.location.pathname,
+          noHistoryPush: true
+        });
+      });
+    }
+    function setLoadedComponent() {
+      const currentRouteName = props.router.currentRoute.name;
+      const currentRoutePage = props.router.currentRoute.pageId;
+      const componentConfig = props.router.routes[currentRouteName];
+      let preventRedirect = false;
+      if (props.router.isRedirecting) preventRedirect = true;
+      else if (config.loadedComponentName === currentRouteName) {
+        preventRedirect = true;
+      } else if (config.loadedComponentPage != null && currentRouteName != null) {
+        if (config.loadedComponentPage === currentRoutePage) {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          preventRedirect = true;
+        }
+      }
+      if (preventRedirect) return;
+      props.router.adapters.batch(() => {
+        if (config.loadedComponentName) {
+          props.beforeUpdatePageComponent?.();
+        }
+        props.beforeSetPageComponent?.(componentConfig);
+        props.router.adapters.batch(() => {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          config.loadedComponentName = currentRouteName;
+          config.loadedComponentPage = componentConfig.pageId;
+        });
+      });
+    }
+    setLoadedComponent();
+    onMounted(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      if (props.router.adapters.immediateSetComponent) {
+        props.router.adapters.batch(() => {
+          setLoadedComponent();
+        });
+      }
+      const disposer = props.router.adapters.autorun(() => setLoadedComponent());
+      if (typeof disposer === "function") disposerRef.current = disposer;
+    });
+    onBeforeUnmount(() => {
+      disposerRef.current?.();
+    });
+    return () => {
+      if (!config.loadedComponentName) return null;
+      const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+      if (!LoadedComponent) return null;
+      return h(LoadedComponent, { ...config.currentProps || {}, router: props.router });
+    };
+  }
+});
+export {
+  Router
+};

package/dist/esm/vue/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/tsconfig.types.react.tsbuildinfo

@@ -1 +1 @@
-{"root":["../packages/adapters/kr-observable-preact.ts","../packages/adapters/kr-observable-react.ts","../packages/adapters/kr-observable-solid.ts","../packages/adapters/mobx-preact.ts","../packages/adapters/mobx-react.ts","../packages/adapters/mobx-solid.ts","../packages/adapters/solid.ts","../packages/core/createRouter.ts","../packages/core/createRoutes.ts","../packages/core/index.ts","../packages/core/types/TypeAdapters.ts","../packages/core/types/TypeCurrentRoute.ts","../packages/core/types/TypeLifecycleConfig.ts","../packages/core/types/TypePropsRouter.ts","../packages/core/types/TypeRedirectParams.ts","../packages/core/types/TypeRoute.ts","../packages/core/types/TypeRouteRaw.ts","../packages/core/types/TypeRouter.ts","../packages/core/types/TypeValidator.ts","../packages/core/utils/PreventError.ts","../packages/core/utils/RedirectError.ts","../packages/core/utils/addNames.ts","../packages/core/utils/constants.ts","../packages/core/utils/dynamic.ts","../packages/core/utils/findRouteByPathname.ts","../packages/core/utils/getDynamicValues.ts","../packages/core/utils/getInitialRoute.ts","../packages/core/utils/getQueryValues.ts","../packages/core/utils/getTypedEntries.ts","../packages/core/utils/history.ts","../packages/core/utils/loadComponentToConfig.ts","../packages/core/utils/queryString.ts","../packages/core/utils/replaceDynamicValues.ts","../packages/preact/Router.tsx","../packages/preact/index.ts","../packages/react/Router.tsx","../packages/react/index.ts"],"version":"5.9.2"}
+{"root":["../packages/declarations.d.ts","../packages/adapters/kr-observable-preact.ts","../packages/adapters/kr-observable-react.ts","../packages/adapters/kr-observable-solid.ts","../packages/adapters/mobx-preact.ts","../packages/adapters/mobx-react.ts","../packages/adapters/mobx-solid.ts","../packages/adapters/solid.ts","../packages/adapters/vue.ts","../packages/core/createRouter.ts","../packages/core/createRoutes.ts","../packages/core/index.ts","../packages/core/types/TypeAdapters.ts","../packages/core/types/TypeCurrentRoute.ts","../packages/core/types/TypeLifecycleConfig.ts","../packages/core/types/TypePropsRouter.ts","../packages/core/types/TypeRedirectParams.ts","../packages/core/types/TypeRoute.ts","../packages/core/types/TypeRouteRaw.ts","../packages/core/types/TypeRouter.ts","../packages/core/types/TypeValidator.ts","../packages/core/utils/PreventError.ts","../packages/core/utils/RedirectError.ts","../packages/core/utils/addNames.ts","../packages/core/utils/constants.ts","../packages/core/utils/dynamic.ts","../packages/core/utils/findRouteByPathname.ts","../packages/core/utils/getDynamicValues.ts","../packages/core/utils/getInitialRoute.ts","../packages/core/utils/getQueryValues.ts","../packages/core/utils/getTypedEntries.ts","../packages/core/utils/history.ts","../packages/core/utils/loadComponentToConfig.ts","../packages/core/utils/queryString.ts","../packages/core/utils/replaceDynamicValues.ts","../packages/preact/Router.tsx","../packages/preact/index.ts","../packages/react/Router.tsx","../packages/react/index.ts","../packages/vue/Router.ts","../packages/vue/index.ts"],"version":"5.9.2"}

package/dist/vue/Router.d.ts

@@ -0,0 +1,4 @@
+export declare const Router: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Router.d.ts.map