reactive-route 0.0.1-alpha.1 → 0.0.1-alpha.10

package/dist/cjs/adapters/kr-observable/index.js

@@ -0,0 +1,40 @@
+"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/kr-observable.ts
+var kr_observable_exports = {};
+__export(kr_observable_exports, {
+  adapters: () => adapters
+});
+module.exports = __toCommonJS(kr_observable_exports);
+var import_kr_observable = require("kr-observable");
+var import_react = require("kr-observable/react");
+var adapters = {
+  batch: (cb) => cb(),
+  autorun: import_kr_observable.autorun,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      delete obj[variableKey];
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable: import_kr_observable.makeObservable,
+  makeAutoObservable: import_kr_observable.makeObservable,
+  observer: import_react.observer
+};

package/dist/cjs/adapters/kr-observable/package.json

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

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

@@ -0,0 +1,44 @@
+"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/mobx.ts
+var mobx_exports = {};
+__export(mobx_exports, {
+  adapters: () => adapters
+});
+module.exports = __toCommonJS(mobx_exports);
+var import_mobx = require("mobx");
+var import_mobx_react_lite = require("mobx-react-lite");
+var adapters = {
+  batch: import_mobx.runInAction,
+  autorun: import_mobx.autorun,
+  observer: import_mobx_react_lite.observer,
+  replaceObject: (obj, newObj) => {
+    (0, import_mobx.runInAction)(() => {
+      for (const variableKey in obj) {
+        if (obj.hasOwnProperty(variableKey)) {
+          delete obj[variableKey];
+        }
+      }
+      Object.assign(obj, newObj);
+    });
+  },
+  makeObservable: import_mobx.observable,
+  makeAutoObservable: import_mobx.makeAutoObservable
+};

package/dist/cjs/adapters/mobx/package.json

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

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

@@ -0,0 +1,48 @@
+"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/solid.ts
+var solid_exports = {};
+__export(solid_exports, {
+  adapters: () => adapters
+});
+module.exports = __toCommonJS(solid_exports);
+var import_solid_js = require("solid-js");
+var import_store = require("solid-js/store");
+var adapters = {
+  batch: import_solid_js.batch,
+  autorun: import_solid_js.createRenderEffect,
+  replaceObject: (obj, newObj) => {
+    (0, import_store.modifyMutable)(
+      obj,
+      (0, import_store.produce)((state) => {
+        if (typeof state === "object" && state != null) {
+          for (const variableKey in state) {
+            if (state.hasOwnProperty(variableKey)) {
+              delete state[variableKey];
+            }
+          }
+        }
+        Object.assign(state || {}, newObj);
+      })
+    );
+  },
+  makeObservable: import_store.createMutable,
+  makeAutoObservable: import_store.createMutable
+};

package/dist/cjs/adapters/solid/package.json

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

package/dist/cjs/index.js

@@ -90,6 +90,37 @@ function getDynamicValues(params) {
   return dynamicParams;
 }
 
+// packages/core/utils/findRouteByPathname.ts
+function completeStaticMatch(pathname, path) {
+  return !path.includes(constants.dynamicSeparator) && (pathname === path || pathname === `${path}${constants.pathPartSeparator}`);
+}
+function findRouteByPathname({
+  pathname,
+  routes
+}) {
+  let dynamicRouteMatch;
+  const pathnameArray = pathname.replace(/\?.+$/, "").split(constants.pathPartSeparator).filter(Boolean);
+  for (const routeName in routes) {
+    if (!Object.hasOwn(routes, routeName)) continue;
+    const route = routes[routeName];
+    if (completeStaticMatch(pathname, route.path)) return route;
+    if (dynamicRouteMatch) continue;
+    const routePathnameArray = route.path.split(constants.pathPartSeparator).filter(Boolean);
+    if (routePathnameArray.length !== pathnameArray.length) continue;
+    const someParamInvalid = routePathnameArray.some((paramName, i) => {
+      const paramFromUrl = pathnameArray[i];
+      if (!isDynamic(paramName)) return paramName !== paramFromUrl;
+      const validator = route.params?.[clearDynamic(paramName)];
+      if (typeof validator !== "function") {
+        throw new Error(`findRoute: missing validator for param "${paramName}"`);
+      }
+      return !validator(paramFromUrl);
+    });
+    if (!someParamInvalid) dynamicRouteMatch = route;
+  }
+  return dynamicRouteMatch;
+}
+
 // packages/core/utils/getQueryValues.ts
 var import_query_string = __toESM(require("query-string"));
 
@@ -111,6 +142,16 @@ function getQueryValues(params) {
   return query;
 }
 
+// packages/core/utils/getInitialRoute.ts
+function getInitialRoute(params) {
+  const route = findRouteByPathname({ pathname: params.pathname, routes: params.routes }) || params.routes[params.fallback];
+  return {
+    route: route.name,
+    query: getQueryValues({ route, pathname: params.pathname }),
+    params: getDynamicValues({ route, pathname: params.pathname })
+  };
+}
+
 // packages/core/utils/history.ts
 var import_history = require("history");
 var history = constants.isClient ? (0, import_history.createBrowserHistory)() : null;
@@ -150,19 +191,33 @@ function replaceDynamicValues({
 
 // packages/core/createRouterStore.ts
 function createRouterStore({
-  batch,
+  adapters,
   routes,
   routeError500,
-  makeObservable,
-  lifecycleParams,
-  replaceObject
+  lifecycleParams
 }) {
-  const routerStore = makeObservable({
+  const routerStore = adapters.makeObservable({
     routesHistory: [],
     currentRoute: {},
     isRedirecting: false,
-    redirectTo: void 0
+    redirectTo: void 0,
+    restoreFromURL: void 0,
+    restoreFromServer: void 0,
+    adapters
   });
+  routerStore.restoreFromServer = function restoreFromServer(obj) {
+    adapters.batch(() => {
+      routerStore.routesHistory.push(...obj.routesHistory || []);
+      Object.assign(routerStore.currentRoute, obj.currentRoute);
+    });
+    const preloadedRouteName = Object.keys(routes).find(
+      (routeName) => routerStore.currentRoute.name === routeName
+    );
+    return loadComponentToConfig({ route: routes[preloadedRouteName] });
+  };
+  routerStore.restoreFromURL = function restoreFromURL(params) {
+    return routerStore.redirectTo(getInitialRoute({ routes, ...params }));
+  };
   routerStore.redirectTo = async function redirectTo(config) {
     const { route: routeName, noHistoryPush, asClient } = config;
     const isClient = typeof asClient === "boolean" ? asClient : constants.isClient;
@@ -206,8 +261,8 @@ function createRouterStore({
     if (currentUrl === nextUrl) return Promise.resolve();
     if (currentPathname === nextPathname) {
       if (currentSearch !== nextSearch) {
-        batch(() => {
-          replaceObject(routerStore.currentRoute.query, nextQuery || {});
+        adapters.batch(() => {
+          adapters.replaceObject(routerStore.currentRoute.query, nextQuery || {});
           routerStore.routesHistory.push(nextUrl);
         });
         if (history && !noHistoryPush) {
@@ -220,7 +275,7 @@ function createRouterStore({
       }
       return Promise.resolve();
     }
-    batch(() => {
+    adapters.batch(() => {
       routerStore.isRedirecting = true;
     });
     try {
@@ -281,8 +336,8 @@ function createRouterStore({
       }
       console.error(error);
       await loadComponentToConfig({ route: routeError500 });
-      batch(() => {
-        replaceObject(routerStore.currentRoute, {
+      adapters.batch(() => {
+        adapters.replaceObject(routerStore.currentRoute, {
           name: routeError500.name,
           path: routeError500.path,
           props: routes[routeError500.name].props,
@@ -294,8 +349,8 @@ function createRouterStore({
       });
       return Promise.resolve();
     }
-    batch(() => {
-      replaceObject(routerStore.currentRoute, {
+    adapters.batch(() => {
+      adapters.replaceObject(routerStore.currentRoute, {
         name: nextRoute.name,
         path: nextRoute.path,
         props: routes[nextRoute.name].props,
@@ -320,44 +375,3 @@ function createRouterStore({
   };
   return routerStore;
 }
-
-// packages/core/utils/findRouteByPathname.ts
-function completeStaticMatch(pathname, path) {
-  return !path.includes(constants.dynamicSeparator) && (pathname === path || pathname === `${path}${constants.pathPartSeparator}`);
-}
-function findRouteByPathname({
-  pathname,
-  routes
-}) {
-  let dynamicRouteMatch;
-  const pathnameArray = pathname.replace(/\?.+$/, "").split(constants.pathPartSeparator).filter(Boolean);
-  for (const routeName in routes) {
-    if (!Object.hasOwn(routes, routeName)) continue;
-    const route = routes[routeName];
-    if (completeStaticMatch(pathname, route.path)) return route;
-    if (dynamicRouteMatch) continue;
-    const routePathnameArray = route.path.split(constants.pathPartSeparator).filter(Boolean);
-    if (routePathnameArray.length !== pathnameArray.length) continue;
-    const someParamInvalid = routePathnameArray.some((paramName, i) => {
-      const paramFromUrl = pathnameArray[i];
-      if (!isDynamic(paramName)) return paramName !== paramFromUrl;
-      const validator = route.params?.[clearDynamic(paramName)];
-      if (typeof validator !== "function") {
-        throw new Error(`findRoute: missing validator for param "${paramName}"`);
-      }
-      return !validator(paramFromUrl);
-    });
-    if (!someParamInvalid) dynamicRouteMatch = route;
-  }
-  return dynamicRouteMatch;
-}
-
-// packages/core/utils/getInitialRoute.ts
-function getInitialRoute(params) {
-  const route = findRouteByPathname({ pathname: params.pathname, routes: params.routes }) || params.routes[params.fallback];
-  return {
-    route: route.name,
-    query: getQueryValues({ route, pathname: params.pathname }),
-    params: getDynamicValues({ route, pathname: params.pathname })
-  };
-}

package/dist/cjs/react/index.js

@@ -25,124 +25,82 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // packages/react/Router.tsx
-var import_mobx2 = require("mobx");
-var import_mobx_react_lite = require("mobx-react-lite");
-var import_reactive_route = require("reactive-route");
-
-// packages/react/useStore.ts
-var import_mobx = require("mobx");
 var import_react = require("react");
-function useStore(ViewModel, props) {
-  const isFirstRenderRef = (0, import_react.useRef)(true);
-  const [vm] = (0, import_react.useState)(() => {
-    const instance = new ViewModel(props || {});
-    (0, import_mobx.runInAction)(() => {
-      instance.beforeMount?.();
-    });
-    return instance;
-  });
-  (0, import_react.useEffect)(() => {
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-    } else if (props) {
-      (0, import_mobx.runInAction)(() => {
-        vm.props = props || {};
-      });
-    }
-  }, [props]);
-  (0, import_react.useEffect)(() => {
-    vm.afterMount?.();
-    return () => {
-      vm.autorunDisposers?.forEach((disposer) => disposer());
-    };
-  }, []);
-  return vm;
-}
-
-// packages/react/Router.tsx
+var import_reactive_route = require("reactive-route");
 var import_jsx_runtime = require("react/jsx-runtime");
-var VM = class {
-  constructor(props) {
-    this.props = props;
-    (0, import_mobx2.makeAutoObservable)(
-      this,
-      { loadedComponent: false, setLoadedComponent: false, props: false },
-      { autoBind: true }
-    );
-  }
-  autorunDisposers = [];
-  loadedComponentName = void 0;
-  loadedComponentPage = void 0;
-  loadedComponent;
-  currentProps = {};
-  beforeMount() {
-    this.props.beforeMount?.();
-    this.redirectOnHistoryPop();
-    this.setLoadedComponent();
-    this.autorunDisposers.push((0, import_mobx2.autorun)(this.setLoadedComponent));
-  }
-  redirectOnHistoryPop() {
+function RouterInner(props) {
+  const disposerRef = (0, import_react.useRef)(null);
+  const redirectOnHistoryPop = (0, import_react.useCallback)(() => {
     if (!import_reactive_route.history) return;
     import_reactive_route.history.listen((params) => {
       if (params.action !== "POP") return;
-      const previousRoutePathname = this.props.routerStore.routesHistory[this.props.routerStore.routesHistory.length - 2];
+      const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
       if (previousRoutePathname === params.location.pathname) {
-        (0, import_mobx2.runInAction)(() => this.props.routerStore.routesHistory.pop());
+        props.routerStore.adapters.batch(() => props.routerStore.routesHistory.pop());
       }
-      void this.props.routerStore.redirectTo({
+      void props.routerStore.redirectTo({
         noHistoryPush: true,
         ...(0, import_reactive_route.getInitialRoute)({
-          routes: this.props.routes,
+          routes: props.routes,
           pathname: import_reactive_route.history.location.pathname,
           fallback: "error404"
         })
       });
     });
-  }
-  setLoadedComponent = () => {
-    const { loadedComponentName, loadedComponentPage } = this;
-    const { currentRoute, isRedirecting } = this.props.routerStore;
-    const currentRouteName = currentRoute.name;
-    const currentRoutePage = currentRoute.pageName;
+  }, []);
+  const [config] = (0, import_react.useState)(
+    () => props.routerStore.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    })
+  );
+  const setLoadedComponent = (0, import_react.useCallback)(() => {
+    const { loadedComponentName, loadedComponentPage } = config;
+    const { currentRoute, isRedirecting } = props.routerStore;
+    const componentConfig = props.routes[currentRoute.name];
     let preventRedirect = false;
     if (isRedirecting) preventRedirect = true;
-    else if (loadedComponentName === currentRouteName) preventRedirect = true;
-    else if (loadedComponentPage != null && currentRouteName != null) {
-      if (loadedComponentPage === currentRoutePage) {
-        const componentConfig = this.props.routes[currentRouteName];
-        (0, import_mobx2.runInAction)(() => {
-          this.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
+    else if (loadedComponentName === currentRoute.name) preventRedirect = true;
+    else if (loadedComponentPage != null && currentRoute.name != null) {
+      if (loadedComponentPage === currentRoute.pageName) {
+        props.routerStore.adapters.batch(() => {
+          config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
+          config[Symbol.for("$adm")]?.batch();
         });
         preventRedirect = true;
       }
     }
     if (preventRedirect) return;
-    (0, import_mobx2.runInAction)(() => {
-      if (!loadedComponentName) {
-        this.setComponent(currentRouteName);
-      } else {
-        this.props.beforeUpdatePageComponent?.();
-        this.setComponent(currentRouteName);
-      }
+    props.routerStore.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[Symbol.for("$adm")]?.batch();
     });
-  };
-  setComponent(currentRouteName) {
-    (0, import_mobx2.runInAction)(() => {
-      const componentConfig = this.props.routes[currentRouteName];
-      const RouteComponent = componentConfig.component;
-      this.props.beforeSetPageComponent?.(componentConfig);
-      this.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
-      this.loadedComponentName = currentRouteName;
-      this.loadedComponentPage = componentConfig.pageName;
-      this.loadedComponent = RouteComponent;
+  }, []);
+  (0, import_react.useState)(() => {
+    props.routerStore.adapters.batch(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      setLoadedComponent();
+      disposerRef.current = props.routerStore.adapters.autorun(setLoadedComponent);
     });
-  }
-};
-var Router = (0, import_mobx_react_lite.observer)(
-  (props) => {
-    const vm = useStore(VM, props);
-    const LoadedComponent = vm.loadedComponentName ? vm.loadedComponent : null;
-    if (LoadedComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadedComponent, { ...vm.currentProps });
-    return null;
-  }
-);
+  });
+  (0, import_react.useEffect)(() => {
+    return () => {
+      disposerRef.current?.();
+    };
+  }, []);
+  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 });
+  return null;
+}
+function RouterWrapper(props) {
+  const Component = props.routerStore.adapters.observer ? props.routerStore.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

@@ -28,133 +28,74 @@ module.exports = __toCommonJS(solid_exports);
 var import_web = require("solid-js/web");
 var import_web2 = require("solid-js/web");
 var import_reactive_route = require("reactive-route");
-var import_solid_js2 = require("solid-js");
-var import_store2 = require("solid-js/store");
-var import_web3 = require("solid-js/web");
-
-// packages/solid/replaceObject.ts
-var import_store = require("solid-js/store");
-function replaceObject(obj, newObj) {
-  (0, import_store.modifyMutable)(obj, (0, import_store.produce)((state) => {
-    if (typeof state === "object" && state != null) {
-      for (const variableKey in state) {
-        delete state[variableKey];
-      }
-    }
-    Object.assign(state || {}, newObj);
-  }));
-}
-
-// packages/solid/useStore.ts
 var import_solid_js = require("solid-js");
-var getAllProperties = (object) => {
-  const properties = /* @__PURE__ */ new Set();
-  do {
-    for (const key of Reflect.ownKeys(object)) {
-      properties.add([object, key]);
-    }
-  } while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);
-  return properties;
-};
-function autoBind(self) {
-  for (const [object, key] of getAllProperties(self.constructor.prototype)) {
-    if (key === "constructor") continue;
-    const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
-    if (descriptor && typeof descriptor.value === "function") {
-      self[key] = self[key].bind(self);
-    }
-  }
-  return self;
-}
-function useStore(ViewModel, props) {
-  const vm = new ViewModel(props);
-  autoBind(vm);
-  vm.beforeMount?.();
-  (0, import_solid_js.onMount)(() => {
-    vm.afterMount?.();
+var import_web3 = require("solid-js/web");
+function Router(props) {
+  const config = props.routerStore.adapters.makeObservable({
+    loadedComponentName: void 0,
+    loadedComponentPage: void 0,
+    currentProps: {}
   });
-  return vm;
-}
-
-// packages/solid/Router.tsx
-var VM = class {
-  constructor(props) {
-    this.props = props;
-    return (0, import_store2.createMutable)(this);
-  }
-  loadedComponentName = void 0;
-  loadedComponentPage = void 0;
-  currentProps = {};
-  beforeMount() {
-    this.props.beforeMount?.();
-    this.redirectOnHistoryPop();
-    (0, import_solid_js2.createRenderEffect)(() => this.setLoadedComponent());
-  }
-  redirectOnHistoryPop() {
+  function redirectOnHistoryPop() {
     if (!import_reactive_route.history) return;
     import_reactive_route.history.listen((params) => {
       if (params.action !== "POP") return;
-      const previousRoutePathname = this.props.routerStore.routesHistory[this.props.routerStore.routesHistory.length - 2];
+      const previousRoutePathname = props.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
       if (previousRoutePathname === params.location.pathname) {
-        this.props.routerStore.routesHistory.pop();
+        props.routerStore.routesHistory.pop();
       }
-      void this.props.routerStore.redirectTo({
+      void props.routerStore.redirectTo({
         noHistoryPush: true,
         ...(0, import_reactive_route.getInitialRoute)({
-          routes: this.props.routes,
+          routes: props.routes,
           pathname: import_reactive_route.history.location.pathname,
           fallback: "error404"
         })
       });
     });
   }
-  setLoadedComponent() {
-    const currentRouteName = this.props.routerStore.currentRoute.name;
-    const currentRoutePage = this.props.routerStore.currentRoute.pageName;
+  function setLoadedComponent() {
+    const currentRouteName = props.routerStore.currentRoute.name;
+    const currentRoutePage = props.routerStore.currentRoute.pageName;
+    const componentConfig = props.routes[currentRouteName];
     let preventRedirect = false;
-    if (this.props.routerStore.isRedirecting) preventRedirect = true;
-    else if (this.loadedComponentName === currentRouteName) {
+    if (props.routerStore.isRedirecting) preventRedirect = true;
+    else if (config.loadedComponentName === currentRouteName) {
       preventRedirect = true;
-    } else if (this.loadedComponentPage != null && currentRouteName != null) {
-      if (this.loadedComponentPage === currentRoutePage) {
-        const componentConfig = this.props.routes[currentRouteName];
-        replaceObject(this.currentProps, "props" in componentConfig ? componentConfig.props : {});
+    } else if (config.loadedComponentPage != null && currentRouteName != null) {
+      if (config.loadedComponentPage === currentRoutePage) {
+        props.routerStore.adapters.replaceObject(config.currentProps, "props" in componentConfig ? componentConfig.props : {});
         preventRedirect = true;
       }
     }
     if (preventRedirect) return;
-    (0, import_solid_js2.batch)(() => {
-      if (!this.loadedComponentName) {
-        this.setComponent();
-      } else {
-        this.props.beforeUpdatePageComponent?.();
-        this.setComponent();
+    props.routerStore.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 : {});
+        config.loadedComponentName = currentRouteName;
+        config.loadedComponentPage = componentConfig.pageName;
+        config[Symbol.for("$adm")]?.batch();
+      });
     });
   }
-  setComponent() {
-    const currentRouteName = this.props.routerStore.currentRoute.name;
-    const componentConfig = this.props.routes[currentRouteName];
-    this.props.beforeSetPageComponent?.(componentConfig);
-    (0, import_solid_js2.batch)(() => {
-      replaceObject(this.currentProps, "props" in componentConfig ? componentConfig.props : {});
-      this.loadedComponentName = currentRouteName;
-      this.loadedComponentPage = componentConfig.pageName;
-    });
-  }
-};
-function Router(props) {
-  const vm = useStore(VM, props);
-  return (0, import_web.createComponent)(import_solid_js2.Show, {
+  props.beforeMount?.();
+  redirectOnHistoryPop();
+  setLoadedComponent();
+  props.routerStore.adapters.autorun(() => setLoadedComponent());
+  return (0, import_web.createComponent)(import_solid_js.Show, {
     get when() {
-      return vm.loadedComponentName;
+      return config.loadedComponentName;
     },
     get children() {
       return (0, import_web.createComponent)(import_web3.Dynamic, (0, import_web2.mergeProps)({
         get component() {
-          return props.routes[vm.loadedComponentName]?.component || void 0;
+          return props.routes[config.loadedComponentName]?.component || void 0;
         }
-      }, () => vm.currentProps));
+      }, () => config.currentProps));
     }
   });
 }