reactive-route 0.0.1-alpha.21 → 0.0.1-alpha.23

package/README.md

@@ -4,6 +4,7 @@
 [![npm](https://img.shields.io/npm/v/reactive-route)](https://www.npmjs.com/package/reactive-route)
 ![size-core](https://github.com/dkazakov8/reactive-route/blob/master/assets/core.svg)
 ![size-react](https://github.com/dkazakov8/reactive-route/blob/master/assets/react.svg)
+![size-preact](https://github.com/dkazakov8/reactive-route/blob/master/assets/preact.svg)
 ![size-solid](https://github.com/dkazakov8/reactive-route/blob/master/assets/solid.svg)
 
 > [!WARNING]

package/dist/cjs/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,53 +15,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/core/index.ts
 var core_exports = {};
 __export(core_exports, {
-  createRouterConfig: () => createRouterConfig,
-  createRouterStore: () => createRouterStore,
-  findRouteByPathname: () => findRouteByPathname,
-  getInitialRoute: () => getInitialRoute,
+  RedirectError: () => RedirectError,
+  createRouter: () => createRouter,
+  createRoutes: () => createRoutes,
   history: () => history,
-  isDynamicRoute: () => isDynamicRoute,
   loadComponentToConfig: () => loadComponentToConfig,
   replaceDynamicValues: () => replaceDynamicValues
 });
 module.exports = __toCommonJS(core_exports);
 
-// packages/core/utils/addNames.ts
-function addNames(obj) {
-  Object.entries(obj).forEach(([key, value]) => {
-    value.name = key;
-  });
-  return obj;
-}
-
-// packages/core/createRouterConfig.ts
-function createRouterConfig(config) {
-  return addNames(config);
-}
-
-// packages/core/createRouterStore.ts
-var import_query_string2 = __toESM(require("query-string"));
-
 // packages/core/utils/constants.ts
 var constants = {
   dynamicSeparator: ":",
   pathPartSeparator: "/",
-  isClient: typeof window !== "undefined",
-  errorRedirect: "REDIRECT",
-  errorPrevent: "PREVENT_REDIRECT"
+  isClient: typeof window !== "undefined"
 };
 
 // packages/core/utils/dynamic.ts
@@ -73,9 +43,6 @@ function isDynamic(param) {
 function clearDynamic(param) {
   return param.replace(new RegExp(`^${constants.dynamicSeparator}`), "");
 }
-function isDynamicRoute(route) {
-  return "params" in route;
-}
 
 // packages/core/utils/getDynamicValues.ts
 function getDynamicValues(params) {
@@ -121,18 +88,34 @@ function findRouteByPathname({
   return dynamicRouteMatch;
 }
 
-// packages/core/utils/getQueryValues.ts
-var import_query_string = __toESM(require("query-string"));
-
 // packages/core/utils/getTypedEntries.ts
 var getTypedEntries = Object.entries;
 
+// packages/core/utils/queryString.ts
+function removeHash(input) {
+  const hashStart = input.indexOf("#");
+  return hashStart === -1 ? input : input.slice(0, hashStart);
+}
+var queryString = {
+  extract(input) {
+    const inputNoHash = removeHash(input);
+    const queryStart = inputNoHash.indexOf("?");
+    return queryStart === -1 ? "" : inputNoHash.slice(queryStart + 1);
+  },
+  parse(input) {
+    return Object.fromEntries(new URLSearchParams(input));
+  },
+  stringify(obj) {
+    return new URLSearchParams(obj).toString();
+  }
+};
+
 // packages/core/utils/getQueryValues.ts
 function getQueryValues(params) {
   const { route, pathname } = params;
-  const qs = import_query_string.default.extract(pathname);
+  const qs = queryString.extract(pathname);
   if (!qs || !route.query) return {};
-  const query = import_query_string.default.parse(qs);
+  const query = queryString.parse(qs);
   getTypedEntries(query).forEach(([key, value]) => {
     const validator = route.query[key];
     if (typeof validator !== "function" || !validator(value)) {
@@ -162,15 +145,30 @@ function loadComponentToConfig(params) {
   if (!route.component && route.loader) {
     const loadingFn = route.loader;
     return loadingFn().then((module2) => {
-      const { default: component, pageName, ...rest } = module2;
+      const { default: component, ...rest } = module2;
       route.component = component;
       route.otherExports = rest;
-      route.pageName = pageName;
     });
   }
   return Promise.resolve();
 }
 
+// packages/core/utils/PreventError.ts
+var PreventError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "PreventError";
+  }
+};
+
+// packages/core/utils/RedirectError.ts
+var RedirectError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "RedirectError";
+  }
+};
+
 // packages/core/utils/replaceDynamicValues.ts
 var re = new RegExp(`[^${constants.pathPartSeparator}]+`, "g");
 function replaceDynamicValues({
@@ -189,53 +187,52 @@ function replaceDynamicValues({
   });
 }
 
-// packages/core/createRouterStore.ts
-function createRouterStore({
-  adapters,
+// packages/core/createRouter.ts
+function createRouter({
   routes,
+  adapters,
   lifecycleParams
 }) {
-  const routerStore = adapters.makeObservable({
+  const router = adapters.makeObservable({
     routesHistory: [],
     currentRoute: {},
     isRedirecting: false,
-    redirectTo: void 0,
+    redirect: void 0,
     restoreFromURL: void 0,
     restoreFromServer: void 0,
-    adapters
+    get adapters() {
+      return adapters;
+    }
   });
-  routerStore.restoreFromServer = function restoreFromServer(obj) {
+  router.restoreFromServer = function restoreFromServer(obj) {
     adapters.batch(() => {
-      routerStore.routesHistory.push(...obj.routesHistory || []);
-      Object.assign(routerStore.currentRoute, obj.currentRoute);
+      router.routesHistory.push(...obj.routesHistory || []);
+      Object.assign(router.currentRoute, obj.currentRoute);
     });
     const preloadedRouteName = Object.keys(routes).find(
-      (routeName) => routerStore.currentRoute.name === routeName
+      (routeName) => router.currentRoute.name === routeName
     );
     return loadComponentToConfig({ route: routes[preloadedRouteName] });
   };
-  routerStore.restoreFromURL = function restoreFromURL(params) {
-    return routerStore.redirectTo(getInitialRoute({ routes, pathname: params.pathname }));
+  router.restoreFromURL = function restoreFromURL(params) {
+    return router.redirect(getInitialRoute({ routes, ...params }));
   };
-  routerStore.redirectTo = async function redirectTo(config) {
+  router.redirect = async function redirect(config) {
     const { route: routeName, noHistoryPush } = config;
     let currentRoute;
     let currentPathname;
     let currentUrl;
     let currentSearch;
     let currentQuery;
-    if (routerStore.currentRoute?.name) {
-      currentRoute = routes[routerStore.currentRoute.name];
+    if (router.currentRoute?.name) {
+      currentRoute = routes[router.currentRoute.name];
       currentPathname = replaceDynamicValues({
         route: currentRoute,
-        params: routerStore.currentRoute.params
+        params: router.currentRoute.params
       });
-      currentUrl = import_query_string2.default.stringifyUrl({
-        url: currentPathname,
-        query: routerStore.currentRoute.query
-      });
-      currentQuery = routerStore.currentRoute.query;
-      currentSearch = import_query_string2.default.stringify(routerStore.currentRoute.query);
+      currentQuery = router.currentRoute.query;
+      currentSearch = queryString.stringify(router.currentRoute.query);
+      currentUrl = `${currentPathname}${currentSearch ? `?${currentSearch}` : ""}`;
     }
     const nextRoute = routes[routeName];
     const nextPathname = replaceDynamicValues({
@@ -248,23 +245,23 @@ function createRouterStore({
     if ("query" in config && config.query) {
       const clearedQuery = getQueryValues({
         route: nextRoute,
-        pathname: `${nextPathname}?${import_query_string2.default.stringify(config.query)}`
+        pathname: `${nextPathname}?${queryString.stringify(config.query)}`
       });
       if (Object.keys(clearedQuery).length > 0) {
         nextQuery = clearedQuery;
-        nextSearch = import_query_string2.default.stringify(clearedQuery);
-        nextUrl = import_query_string2.default.stringifyUrl({ url: nextPathname, query: clearedQuery });
+        nextSearch = queryString.stringify(clearedQuery);
+        nextUrl = `${nextPathname}?${nextSearch}`;
       }
     }
     if (currentUrl === nextUrl) return Promise.resolve();
     if (currentPathname === nextPathname) {
       if (currentSearch !== nextSearch) {
         adapters.batch(() => {
-          adapters.replaceObject(routerStore.currentRoute, {
-            ...routerStore.currentRoute,
+          adapters.replaceObject(router.currentRoute, {
+            ...router.currentRoute,
             query: nextQuery || {}
           });
-          routerStore.routesHistory.push(nextUrl);
+          router.routesHistory.push(nextUrl);
         });
         if (history && !noHistoryPush) {
           history.push({
@@ -277,7 +274,7 @@ function createRouterStore({
       return Promise.resolve();
     }
     adapters.batch(() => {
-      routerStore.isRedirecting = true;
+      router.isRedirecting = true;
     });
     try {
       const config2 = {
@@ -290,73 +287,92 @@ function createRouterStore({
         currentQuery,
         currentRoute,
         currentSearch,
-        currentPathname
-      };
-      await currentRoute?.beforeLeave?.(config2, ...lifecycleParams || []);
-      const redirectConfig = await nextRoute.beforeEnter?.(config2, ...lifecycleParams || []);
-      if (typeof redirectConfig === "object") {
-        if (constants.isClient) return redirectTo(redirectConfig);
-        const redirectRoute = routes[redirectConfig.route];
-        const redirectParams = "params" in redirectConfig && redirectConfig.params ? redirectConfig.params : void 0;
-        let redirectUrl = replaceDynamicValues({
-          params: redirectParams,
-          route: redirectRoute
-        });
-        if ("query" in redirectConfig && redirectConfig.query) {
-          const clearedQuery = getQueryValues({
-            route: nextRoute,
-            pathname: `${nextPathname}?${import_query_string2.default.stringify(redirectConfig.query)}`
+        currentPathname,
+        redirect: (redirectConfig2) => {
+          if (constants.isClient) return redirectConfig2;
+          const redirectRoute = routes[redirectConfig2.route];
+          const redirectParams = "params" in redirectConfig2 && redirectConfig2.params ? redirectConfig2.params : void 0;
+          let redirectUrl = replaceDynamicValues({
+            params: redirectParams,
+            route: redirectRoute
           });
-          if (Object.keys(clearedQuery).length > 0) {
-            redirectUrl = import_query_string2.default.stringifyUrl({ url: redirectUrl, query: clearedQuery });
+          if ("query" in redirectConfig2 && redirectConfig2.query) {
+            const clearedQuery = getQueryValues({
+              route: nextRoute,
+              pathname: `${nextPathname}?${queryString.stringify(redirectConfig2.query)}`
+            });
+            if (Object.keys(clearedQuery).length > 0) {
+              redirectUrl = `${redirectUrl}?${queryString.stringify(clearedQuery)}`;
+            }
           }
+          throw new RedirectError(redirectUrl);
+        },
+        preventRedirect: () => {
+          throw new PreventError(`Redirect to ${nextUrl} was prevented`);
         }
-        throw Object.assign(new Error(redirectUrl), { name: constants.errorRedirect });
-      }
+      };
+      await currentRoute?.beforeLeave?.(config2, ...lifecycleParams || []);
+      const redirectConfig = await nextRoute.beforeEnter?.(config2, ...lifecycleParams || []);
+      if (redirectConfig) return redirect(redirectConfig);
       await loadComponentToConfig({ route: routes[nextRoute.name] });
     } catch (error) {
-      if (error?.name === constants.errorPrevent) return Promise.resolve();
-      if (error?.name === constants.errorRedirect) {
+      if (error instanceof PreventError) {
+        return Promise.resolve();
+      }
+      if (error instanceof RedirectError) {
         throw error;
       }
       console.error(error);
       await loadComponentToConfig({ route: routes.internalError });
       adapters.batch(() => {
-        adapters.replaceObject(routerStore.currentRoute, {
+        adapters.replaceObject(router.currentRoute, {
           name: routes.internalError.name,
           path: routes.internalError.path,
           props: routes[routes.internalError.name].props,
           query: adapters.makeObservable({}),
           params: adapters.makeObservable({}),
-          pageName: routes[routes.internalError.name].pageName
+          pageId: routes[routes.internalError.name].pageId
         });
-        routerStore.isRedirecting = false;
+        router.isRedirecting = false;
       });
       return Promise.resolve();
     }
     adapters.batch(() => {
-      adapters.replaceObject(routerStore.currentRoute, {
+      adapters.replaceObject(router.currentRoute, {
         name: nextRoute.name,
         path: nextRoute.path,
         props: routes[nextRoute.name].props,
         query: getQueryValues({ route: nextRoute, pathname: nextUrl }),
         params: getDynamicValues({ route: nextRoute, pathname: nextUrl }),
-        pageName: routes[nextRoute.name].pageName
+        pageId: routes[nextRoute.name].pageId
       });
-      const lastUrl = routerStore.routesHistory[routerStore.routesHistory.length - 1];
+      const lastUrl = router.routesHistory[router.routesHistory.length - 1];
       if (lastUrl !== nextUrl) {
-        routerStore.routesHistory.push(nextUrl);
+        router.routesHistory.push(nextUrl);
       }
       if (history && !noHistoryPush) {
         history.push({
           hash: history.location.hash,
-          search: "query" in config ? `?${import_query_string2.default.stringify(config.query)}` : "",
+          search: "query" in config ? `?${queryString.stringify(config.query)}` : "",
           pathname: nextPathname
         });
       }
-      routerStore.isRedirecting = false;
+      router.isRedirecting = false;
     });
     return Promise.resolve();
   };
-  return routerStore;
+  return router;
+}
+
+// packages/core/utils/addNames.ts
+function addNames(obj) {
+  Object.entries(obj).forEach(([key, value]) => {
+    value.name = key;
+  });
+  return obj;
+}
+
+// packages/core/createRoutes.ts
+function createRoutes(config) {
+  return addNames(config);
 }

package/dist/cjs/preact/index.js

@@ -34,21 +34,18 @@ function RouterInner(props) {
     if (!import_reactive_route.history) return;
     import_reactive_route.history.listen((params) => {
       if (params.action !== "POP") return;
-      const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
+      const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
       if (previousRoutePathname === params.location.pathname) {
-        props.routerStore.adapters.batch(() => props.routerStore.routesHistory.pop());
+        props.router.adapters.batch(() => props.router.routesHistory.pop());
       }
-      void props.routerStore.redirectTo({
-        noHistoryPush: true,
-        ...(0, import_reactive_route.getInitialRoute)({
-          routes: props.routes,
-          pathname: import_reactive_route.history.location.pathname
-        })
+      void props.router.restoreFromURL({
+        pathname: import_reactive_route.history.location.pathname,
+        noHistoryPush: true
       });
     });
   }, []);
   const [config] = (0, import_hooks.useState)(
-    () => props.routerStore.adapters.makeObservable({
+    () => props.router.adapters.makeObservable({
       loadedComponentName: void 0,
       loadedComponentPage: void 0,
       currentProps: {}
@@ -56,34 +53,34 @@ function RouterInner(props) {
   );
   const setLoadedComponent = (0, import_hooks.useCallback)(() => {
     const { loadedComponentName, loadedComponentPage } = config;
-    const { currentRoute, isRedirecting } = props.routerStore;
+    const { currentRoute, isRedirecting } = props.router;
     const componentConfig = props.routes[currentRoute.name];
     let preventRedirect = false;
     if (isRedirecting) preventRedirect = true;
     else if (loadedComponentName === currentRoute.name) preventRedirect = true;
     else if (loadedComponentPage != null && currentRoute.name != null) {
-      if (loadedComponentPage === currentRoute.pageName) {
-        props.routerStore.adapters.batch(() => {
+      if (loadedComponentPage === currentRoute.pageId) {
+        props.router.adapters.batch(() => {
           config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
         });
         preventRedirect = true;
       }
     }
     if (preventRedirect) return;
-    props.routerStore.adapters.batch(() => {
+    props.router.adapters.batch(() => {
       if (loadedComponentName) props.beforeUpdatePageComponent?.();
       props.beforeSetPageComponent?.(componentConfig);
       config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
       config.loadedComponentName = currentRoute.name;
-      config.loadedComponentPage = componentConfig.pageName;
+      config.loadedComponentPage = componentConfig.pageId;
     });
   }, []);
   (0, import_hooks.useState)(() => {
-    props.routerStore.adapters.batch(() => {
+    props.router.adapters.batch(() => {
       props.beforeMount?.();
       redirectOnHistoryPop();
       setLoadedComponent();
-      disposerRef.current = props.routerStore.adapters.autorun(setLoadedComponent);
+      disposerRef.current = props.router.adapters.autorun(setLoadedComponent);
     });
   });
   (0, import_hooks.useEffect)(() => {
@@ -93,12 +90,13 @@ function RouterInner(props) {
   }, []);
   if (!config.loadedComponentName) return null;
   const LoadedComponent = props.routes[config.loadedComponentName]?.component || null;
-  if (LoadedComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadedComponent, { ...config.currentProps });
+  if (LoadedComponent)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadedComponent, { ...config.currentProps, router: props.router });
   return null;
 }
 function Router(props) {
   const [Component] = (0, import_hooks.useState)(
-    () => props.routerStore.adapters.observer ? props.routerStore.adapters.observer(RouterInner) : RouterInner
+    () => props.router.adapters.observer ? props.router.adapters.observer(RouterInner) : RouterInner
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 }

package/dist/cjs/react/index.js

@@ -34,21 +34,18 @@ function RouterInner(props) {
     if (!import_reactive_route.history) return;
     import_reactive_route.history.listen((params) => {
       if (params.action !== "POP") return;
-      const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
+      const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
       if (previousRoutePathname === params.location.pathname) {
-        props.routerStore.adapters.batch(() => props.routerStore.routesHistory.pop());
+        props.router.adapters.batch(() => props.router.routesHistory.pop());
       }
-      void props.routerStore.redirectTo({
-        noHistoryPush: true,
-        ...(0, import_reactive_route.getInitialRoute)({
-          routes: props.routes,
-          pathname: import_reactive_route.history.location.pathname
-        })
+      void props.router.restoreFromURL({
+        pathname: import_reactive_route.history.location.pathname,
+        noHistoryPush: true
       });
     });
   }, []);
   const [config] = (0, import_react.useState)(
-    () => props.routerStore.adapters.makeObservable({
+    () => props.router.adapters.makeObservable({
       loadedComponentName: void 0,
       loadedComponentPage: void 0,
       currentProps: {}
@@ -56,34 +53,34 @@ function RouterInner(props) {
   );
   const setLoadedComponent = (0, import_react.useCallback)(() => {
     const { loadedComponentName, loadedComponentPage } = config;
-    const { currentRoute, isRedirecting } = props.routerStore;
+    const { currentRoute, isRedirecting } = props.router;
     const componentConfig = props.routes[currentRoute.name];
     let preventRedirect = false;
     if (isRedirecting) preventRedirect = true;
     else if (loadedComponentName === currentRoute.name) preventRedirect = true;
     else if (loadedComponentPage != null && currentRoute.name != null) {
-      if (loadedComponentPage === currentRoute.pageName) {
-        props.routerStore.adapters.batch(() => {
+      if (loadedComponentPage === currentRoute.pageId) {
+        props.router.adapters.batch(() => {
           config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
         });
         preventRedirect = true;
       }
     }
     if (preventRedirect) return;
-    props.routerStore.adapters.batch(() => {
+    props.router.adapters.batch(() => {
       if (loadedComponentName) props.beforeUpdatePageComponent?.();
       props.beforeSetPageComponent?.(componentConfig);
       config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
       config.loadedComponentName = currentRoute.name;
-      config.loadedComponentPage = componentConfig.pageName;
+      config.loadedComponentPage = componentConfig.pageId;
     });
   }, []);
   (0, import_react.useState)(() => {
-    props.routerStore.adapters.batch(() => {
+    props.router.adapters.batch(() => {
       props.beforeMount?.();
       redirectOnHistoryPop();
       setLoadedComponent();
-      disposerRef.current = props.routerStore.adapters.autorun(setLoadedComponent);
+      disposerRef.current = props.router.adapters.autorun(setLoadedComponent);
     });
   });
   (0, import_react.useEffect)(() => {
@@ -93,11 +90,12 @@ function RouterInner(props) {
   }, []);
   if (!config.loadedComponentName) return null;
   const LoadedComponent = props.routes[config.loadedComponentName]?.component || null;
-  if (LoadedComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadedComponent, { ...config.currentProps });
+  if (LoadedComponent)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadedComponent, { ...config.currentProps, router: props.router });
   return null;
 }
 function RouterWrapper(props) {
-  const Component = props.routerStore.adapters.observer ? props.routerStore.adapters.observer(RouterInner) : RouterInner;
+  const Component = props.router.adapters.observer ? props.router.adapters.observer(RouterInner) : RouterInner;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 }
 var Router = (0, import_react.memo)(RouterWrapper);

package/dist/cjs/solid/index.js

@@ -31,63 +31,63 @@ var import_reactive_route = require("reactive-route");
 var import_solid_js = require("solid-js");
 var import_web3 = require("solid-js/web");
 function Router(props) {
-  const config = props.routerStore.adapters.makeObservable({
+  const config = props.router.adapters.makeObservable({
     loadedComponentName: void 0,
     loadedComponentPage: void 0,
     currentProps: {}
   });
+  let currentProps = {};
   function redirectOnHistoryPop() {
     if (!import_reactive_route.history) return;
     import_reactive_route.history.listen((params) => {
       if (params.action !== "POP") return;
-      const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
+      const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
       if (previousRoutePathname === params.location.pathname) {
-        props.routerStore.routesHistory.pop();
+        props.router.routesHistory.pop();
       }
-      void props.routerStore.redirectTo({
-        noHistoryPush: true,
-        ...(0, import_reactive_route.getInitialRoute)({
-          routes: props.routes,
-          pathname: import_reactive_route.history.location.pathname
-        })
+      void props.router.restoreFromURL({
+        pathname: import_reactive_route.history.location.pathname,
+        noHistoryPush: true
       });
     });
   }
   function setLoadedComponent() {
-    const currentRouteName = props.routerStore.currentRoute.name;
-    const currentRoutePage = props.routerStore.currentRoute.pageName;
+    const currentRouteName = props.router.currentRoute.name;
+    const currentRoutePage = props.router.currentRoute.pageId;
     const componentConfig = props.routes[currentRouteName];
     let preventRedirect = false;
-    if (props.routerStore.isRedirecting) preventRedirect = true;
+    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.routerStore.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
+        props.router.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
+        currentProps = "props" in componentConfig ? componentConfig.props : {};
         preventRedirect = true;
       }
     }
     if (preventRedirect) return;
-    props.routerStore.adapters.batch(() => {
+    props.router.adapters.batch(() => {
       if (config.loadedComponentName) {
         props.beforeUpdatePageComponent?.();
       }
       props.beforeSetPageComponent?.(componentConfig);
-      props.routerStore.adapters.batch(() => {
-        props.routerStore.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
+      props.router.adapters.batch(() => {
+        props.router.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
+        currentProps = "props" in componentConfig ? componentConfig.props : {};
         config.loadedComponentName = currentRouteName;
-        config.loadedComponentPage = componentConfig.pageName;
+        config.loadedComponentPage = componentConfig.pageId;
       });
     });
   }
   props.beforeMount?.();
   redirectOnHistoryPop();
-  if (props.routerStore.adapters.immediateSetComponent) {
-    props.routerStore.adapters.batch(() => {
+  if (props.router.adapters.immediateSetComponent) {
+    props.router.adapters.batch(() => {
       setLoadedComponent();
     });
   }
-  props.routerStore.adapters.autorun(() => setLoadedComponent());
+  props.router.adapters.autorun(() => setLoadedComponent());
   return (
     // @ts-ignore
     (0, import_web.createComponent)(import_solid_js.Show, {
@@ -99,7 +99,14 @@ function Router(props) {
           get component() {
             return props.routes[config.loadedComponentName]?.component || void 0;
           }
-        }, () => config.currentProps));
+        }, () => Object.keys(config.currentProps).reduce((acc, key) => {
+          acc[key] = currentProps[key];
+          return acc;
+        }, {}), {
+          get router() {
+            return props.router;
+          }
+        }));
       }
     })
   );