reactive-route 0.0.1-alpha.3 → 0.0.1-alpha.31

package/index.mjs

@@ -0,0 +1,383 @@
+// packages/core/utils/constants.ts
+var constants = {
+  dynamicSeparator: ":",
+  pathPartSeparator: "/",
+  isClient: typeof window !== "undefined"
+};
+
+// packages/core/utils/dynamic.ts
+function isDynamic(param) {
+  return param[0] === constants.dynamicSeparator;
+}
+function clearDynamic(param) {
+  return param.replace(new RegExp(`^${constants.dynamicSeparator}`), "");
+}
+
+// packages/core/utils/getDynamicValues.ts
+function getDynamicValues(params) {
+  const { route, pathname } = params;
+  const pathnameArray = pathname.replace(/\?.+$/, "").split(constants.pathPartSeparator).filter(Boolean).map((str) => decodeURIComponent(str));
+  const routePathnameArray = route.path.split(constants.pathPartSeparator).filter(Boolean);
+  const dynamicParams = {};
+  for (let i = 0; i < routePathnameArray.length; i++) {
+    const paramName = routePathnameArray[i];
+    if (isDynamic(paramName)) dynamicParams[clearDynamic(paramName)] = pathnameArray[i];
+  }
+  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/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 = queryString.extract(pathname);
+  if (!qs || !route.query) return {};
+  const query = queryString.parse(qs);
+  getTypedEntries(query).forEach(([key, value]) => {
+    const validator = route.query[key];
+    if (typeof validator !== "function" || !validator(value)) {
+      delete query[key];
+    }
+  });
+  return query;
+}
+
+// packages/core/utils/getInitialRoute.ts
+function getInitialRoute(params) {
+  const route = findRouteByPathname({ pathname: params.pathname, routes: params.routes }) || params.routes.notFound;
+  return {
+    route: route.name,
+    query: getQueryValues({ route, pathname: params.pathname }),
+    params: getDynamicValues({ route, pathname: params.pathname })
+  };
+}
+
+// packages/core/utils/history.ts
+import { createBrowserHistory } from "history";
+var history = constants.isClient ? createBrowserHistory() : null;
+
+// packages/core/utils/loadComponentToConfig.ts
+function loadComponentToConfig(params) {
+  const { route } = params;
+  if (!route.component) {
+    return route.loader().then((module) => {
+      const { default: component, ...rest } = module;
+      route.component = component;
+      route.otherExports = rest;
+    });
+  }
+  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({
+  route,
+  params = {}
+}) {
+  return route.path.replace(re, (paramName) => {
+    if (!isDynamic(paramName)) return paramName;
+    const value = params[clearDynamic(paramName)];
+    if (!value) {
+      throw new Error(
+        `replaceDynamicValues: no param "${paramName}" passed for route ${route.name}`
+      );
+    }
+    return encodeURIComponent(value);
+  });
+}
+
+// packages/core/createRouter.ts
+function createRouter(config) {
+  const router = config.adapters.makeObservable({
+    routesHistory: [],
+    currentRoute: {},
+    isRedirecting: false,
+    redirect: void 0,
+    restoreFromURL: void 0,
+    restoreFromServer: void 0,
+    get adapters() {
+      return config.adapters;
+    },
+    get routes() {
+      return config.routes;
+    },
+    get lifecycleParams() {
+      return config.lifecycleParams;
+    }
+  });
+  router.restoreFromServer = function restoreFromServer(obj) {
+    router.adapters.batch(() => {
+      router.routesHistory.push(...obj.routesHistory || []);
+      Object.assign(router.currentRoute, obj.currentRoute);
+    });
+    const preloadedRouteName = Object.keys(router.routes).find(
+      (routeName) => router.currentRoute.name === routeName
+    );
+    return loadComponentToConfig({ route: router.routes[preloadedRouteName] });
+  };
+  router.restoreFromURL = function restoreFromURL(params) {
+    return router.redirect(getInitialRoute({ routes: router.routes, ...params }));
+  };
+  router.redirect = async function redirect(config2) {
+    const { route: routeName, replace } = config2;
+    let currentRoute;
+    let currentPathname;
+    let currentUrl;
+    let currentSearch;
+    let currentQuery;
+    if (router.currentRoute?.name) {
+      currentRoute = router.routes[router.currentRoute.name];
+      currentPathname = replaceDynamicValues({
+        route: currentRoute,
+        params: router.currentRoute.params
+      });
+      currentQuery = router.currentRoute.query;
+      currentSearch = queryString.stringify(router.currentRoute.query);
+      currentUrl = `${currentPathname}${currentSearch ? `?${currentSearch}` : ""}`;
+    }
+    const nextRoute = router.routes[routeName];
+    const nextPathname = replaceDynamicValues({
+      route: nextRoute,
+      params: "params" in config2 ? config2.params : void 0
+    });
+    let nextQuery;
+    let nextUrl = nextPathname;
+    let nextSearch;
+    if ("query" in config2 && config2.query) {
+      const clearedQuery = getQueryValues({
+        route: nextRoute,
+        pathname: `${nextPathname}?${queryString.stringify(config2.query)}`
+      });
+      if (Object.keys(clearedQuery).length > 0) {
+        nextQuery = clearedQuery;
+        nextSearch = queryString.stringify(clearedQuery);
+        nextUrl = `${nextPathname}?${nextSearch}`;
+      }
+    }
+    if (currentUrl === nextUrl) return Promise.resolve();
+    if (currentPathname === nextPathname) {
+      if (currentSearch !== nextSearch) {
+        router.adapters.batch(() => {
+          router.adapters.replaceObject(router.currentRoute, {
+            ...router.currentRoute,
+            query: nextQuery || {}
+          });
+          router.routesHistory.push(nextUrl);
+        });
+        if (history && !replace) {
+          history.push({
+            hash: history.location.hash,
+            search: nextSearch,
+            pathname: nextPathname
+          });
+        }
+      }
+      return Promise.resolve();
+    }
+    router.adapters.batch(() => {
+      router.isRedirecting = true;
+    });
+    try {
+      const config3 = {
+        nextUrl,
+        nextRoute,
+        nextQuery,
+        nextSearch,
+        nextPathname,
+        currentUrl,
+        currentQuery,
+        currentRoute,
+        currentSearch,
+        currentPathname,
+        redirect: (redirectConfig2) => {
+          if (constants.isClient) return redirectConfig2;
+          const redirectRoute = router.routes[redirectConfig2.route];
+          const redirectParams = "params" in redirectConfig2 && redirectConfig2.params ? redirectConfig2.params : void 0;
+          let redirectUrl = replaceDynamicValues({
+            params: redirectParams,
+            route: redirectRoute
+          });
+          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`);
+        }
+      };
+      await currentRoute?.beforeLeave?.(config3, ...router.lifecycleParams || []);
+      const redirectConfig = await nextRoute.beforeEnter?.(config3, ...router.lifecycleParams || []);
+      if (redirectConfig) return redirect(redirectConfig);
+      await loadComponentToConfig({ route: router.routes[nextRoute.name] });
+    } catch (error) {
+      if (error instanceof PreventError) {
+        return Promise.resolve();
+      }
+      if (error instanceof RedirectError) {
+        throw error;
+      }
+      console.error(error);
+      await loadComponentToConfig({ route: router.routes.internalError });
+      router.adapters.batch(() => {
+        router.adapters.replaceObject(router.currentRoute, {
+          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: router.routes[router.routes.internalError.name].pageId
+        });
+        router.isRedirecting = false;
+      });
+      return Promise.resolve();
+    }
+    router.adapters.batch(() => {
+      router.adapters.replaceObject(router.currentRoute, {
+        name: nextRoute.name,
+        path: nextRoute.path,
+        props: router.routes[nextRoute.name].props,
+        query: getQueryValues({ route: nextRoute, pathname: nextUrl }),
+        params: getDynamicValues({ route: nextRoute, pathname: nextUrl }),
+        pageId: router.routes[nextRoute.name].pageId
+      });
+      const lastUrl = router.routesHistory[router.routesHistory.length - 1];
+      if (lastUrl !== nextUrl) {
+        router.routesHistory.push(nextUrl);
+      }
+      if (history && !replace) {
+        history.push({
+          hash: history.location.hash,
+          search: "query" in config2 ? `?${queryString.stringify(config2.query)}` : "",
+          pathname: nextPathname
+        });
+      }
+      router.isRedirecting = false;
+    });
+    return Promise.resolve();
+  };
+  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);
+}
+
+// packages/core/utils/routerSetLoadedComponent.ts
+function routerSetLoadedComponent(props, config) {
+  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.batch(() => {
+        config.currentProps = "props" in componentConfig ? componentConfig.props || {} : {};
+      });
+      preventRedirect = true;
+    }
+  }
+  if (preventRedirect) return;
+  props.router.adapters.batch(() => {
+    if (config.loadedComponentName) props.beforeUpdatePageComponent?.();
+    props.beforeSetPageComponent?.(componentConfig);
+    config.currentProps = "props" in componentConfig ? componentConfig.props : {};
+    config.loadedComponentName = currentRouteName;
+    config.loadedComponentPage = componentConfig.pageId;
+  });
+}
+export {
+  RedirectError,
+  createRouter,
+  createRoutes,
+  history,
+  loadComponentToConfig,
+  replaceDynamicValues,
+  routerSetLoadedComponent
+};

package/package.json

@@ -2,76 +2,86 @@
   "name": "reactive-route",
   "author": "Dmitry Kazakov",
   "license": "MIT",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.31",
   "description": "Reactive Router for different frameworks",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dkazakov8/reactive-route.git"
   },
-  "scripts": {
-    "upd": "rm -rf ./node_modules&&pnpm i --prefer-offline",
-    "build": "rm -rf ./dist&&node --import tsx ./scripts/build.ts&&tsc -b ./tsconfig.types.json",
-    "test": "vitest run&&node --import tsx ./scripts/genCoverageBadge.ts",
-    "test-watch": "vitest --coverage=false",
-    "npm-publish": "pnpm run build&&pnpm run test&&npm publish --access public",
-    "analyze:js": "biome check --no-errors-on-unmatched .",
-    "format:js": "biome check --no-errors-on-unmatched --write",
-    "check-types": "tsc --project tsconfig.json",
-    "check-types-example": "tsc --project ./examples/simple_ssr/tsconfig.json",
-    "prepare": "husky"
-  },
   "dependencies": {
-    "history": "5.3.0",
-    "query-string": "7.1.3"
+    "history": "5.3.0"
   },
-  "devDependencies": {
-    "@types/node": "22.14.1",
-    "@types/lodash": "4.17.16",
-    "vitest": "3.2.4",
-    "@testing-library/react": "16.3.0",
-    "@vitest/coverage-istanbul": "3.2.4",
-    "vite-plugin-solid": "2.11.8",
-    "global-jsdom": "26.0.0",
-    "babel-preset-solid": "1.9.9",
-    "@solidjs/testing-library": "0.8.10",
-    "lodash": "4.17.21",
-    "mobx": "6.13.7",
-    "mobx-react-lite": "4.1.0",
-    "react": "19.1.1",
-    "solid-js": "1.9.9",
-    "@babel/core": "7.28.3",
-    "@babel/preset-env": "7.28.3",
-    "@babel/preset-typescript": "7.27.1",
-    "@espcom/esbuild-plugin-replace": "1.3.0",
-    "badge-maker": "5.0.2",
-    "esbuild": "0.25.9",
-    "regenerator-runtime": "0.14.1",
-    "@biomejs/biome": "2.2.2",
-    "husky": "9.1.7",
-    "lint-staged": "16.1.6",
-    "tsx": "4.20.5",
-    "typescript": "5.9.2",
-    "xml-splitter": "1.2.1"
+  "engines": {
+    "node": ">=22"
   },
-  "packageManager": "pnpm@10.9.0",
   "exports": {
     ".": {
-      "types": "./dist/types/core/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/esm/index.js"
+      "types": "./core/index.d.ts",
+      "require": "./index.cjs",
+      "import": "./index.mjs"
+    },
+    "./solid": {
+      "types": "./solid/index.d.ts",
+      "require": "./solid/index.cjs",
+      "import": "./solid/index.mjs"
     },
     "./react": {
-      "types": "./dist/types/react/index.d.ts",
-      "require": "./dist/cjs/react/index.js",
-      "import": "./dist/esm/react/index.js"
+      "types": "./react/index.d.ts",
+      "require": "./react/index.cjs",
+      "import": "./react/index.mjs"
     },
-    "./solid": {
-      "types": "./dist/types/solid/index.d.ts",
-      "require": "./dist/cjs/solid/index.js",
-      "import": "./dist/esm/solid/index.js"
+    "./preact": {
+      "types": "./preact/index.d.ts",
+      "require": "./preact/index.cjs",
+      "import": "./preact/index.mjs"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "require": "./vue/index.cjs",
+      "import": "./vue/index.mjs"
+    },
+    "./adapters/mobx-react": {
+      "types": "./adapters/mobx-react.d.ts",
+      "require": "./adapters/mobx-react.cjs",
+      "import": "./adapters/mobx-react.mjs"
+    },
+    "./adapters/mobx-preact": {
+      "types": "./adapters/mobx-preact.d.ts",
+      "require": "./adapters/mobx-preact.cjs",
+      "import": "./adapters/mobx-preact.mjs"
+    },
+    "./adapters/mobx-solid": {
+      "types": "./adapters/mobx-solid.d.ts",
+      "require": "./adapters/mobx-solid.cjs",
+      "import": "./adapters/mobx-solid.mjs"
+    },
+    "./adapters/solid": {
+      "types": "./adapters/solid.d.ts",
+      "require": "./adapters/solid.cjs",
+      "import": "./adapters/solid.mjs"
+    },
+    "./adapters/kr-observable-react": {
+      "types": "./adapters/kr-observable-react.d.ts",
+      "require": "./adapters/kr-observable-react.cjs",
+      "import": "./adapters/kr-observable-react.mjs"
+    },
+    "./adapters/kr-observable-preact": {
+      "types": "./adapters/kr-observable-preact.d.ts",
+      "require": "./adapters/kr-observable-preact.cjs",
+      "import": "./adapters/kr-observable-preact.mjs"
+    },
+    "./adapters/kr-observable-solid": {
+      "types": "./adapters/kr-observable-solid.d.ts",
+      "require": "./adapters/kr-observable-solid.cjs",
+      "import": "./adapters/kr-observable-solid.mjs"
+    },
+    "./adapters/vue": {
+      "types": "./adapters/vue.d.ts",
+      "require": "./adapters/vue.cjs",
+      "import": "./adapters/vue.mjs"
     }
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/core/index.d.ts"
+  "main": "./index.cjs",
+  "module": "./index.mjs",
+  "types": "./core/index.d.ts"
 }

package/preact/Router.d.ts

@@ -0,0 +1,3 @@
+import { TypePropsRouter, TypeRoute } from 'reactive-route';
+export declare function Router<TRoutes extends Record<string, TypeRoute>>(props: TypePropsRouter<TRoutes>): any;
+//# sourceMappingURL=Router.d.ts.map

package/preact/Router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../packages/preact/Router.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,eAAe,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmE/F,wBAAgB,MAAM,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,GAK1D,GAAG,CACzC"}

package/preact/index.cjs

@@ -0,0 +1,80 @@
+"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/preact/index.ts
+var preact_exports = {};
+__export(preact_exports, {
+  Router: () => Router
+});
+module.exports = __toCommonJS(preact_exports);
+
+// packages/preact/Router.tsx
+var import_hooks = require("preact/hooks");
+var import_reactive_route = require("reactive-route");
+var import_jsx_runtime = require("preact/jsx-runtime");
+function RouterInner(props) {
+  const disposerRef = (0, import_hooks.useRef)(null);
+  const redirectOnHistoryPop = (0, import_hooks.useCallback)(() => {
+    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.adapters.batch(() => props.router.routesHistory.pop());
+      }
+      void props.router.restoreFromURL({
+        pathname: import_reactive_route.history.location.pathname,
+        replace: true
+      });
+    });
+  }, []);
+  const [config] = (0, import_hooks.useState)(
+    () => props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    })
+  );
+  (0, import_hooks.useState)(() => {
+    props.router.adapters.batch(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      (0, import_reactive_route.routerSetLoadedComponent)(props, config);
+      disposerRef.current = props.router.adapters.autorun(
+        () => (0, import_reactive_route.routerSetLoadedComponent)(props, config)
+      );
+    });
+  });
+  (0, import_hooks.useEffect)(() => {
+    return () => {
+      disposerRef.current?.();
+    };
+  }, []);
+  if (!config.loadedComponentName) return null;
+  const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+  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.router.adapters.observer ? props.router.adapters.observer(RouterInner) : RouterInner
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
+}

package/preact/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/preact/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/preact/index.mjs

@@ -0,0 +1,57 @@
+// packages/preact/Router.tsx
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { history, routerSetLoadedComponent } from "reactive-route";
+import { jsx } from "preact/jsx-runtime";
+function RouterInner(props) {
+  const disposerRef = useRef(null);
+  const redirectOnHistoryPop = useCallback(() => {
+    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.adapters.batch(() => props.router.routesHistory.pop());
+      }
+      void props.router.restoreFromURL({
+        pathname: history.location.pathname,
+        replace: true
+      });
+    });
+  }, []);
+  const [config] = useState(
+    () => props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    })
+  );
+  useState(() => {
+    props.router.adapters.batch(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      routerSetLoadedComponent(props, config);
+      disposerRef.current = props.router.adapters.autorun(
+        () => routerSetLoadedComponent(props, config)
+      );
+    });
+  });
+  useEffect(() => {
+    return () => {
+      disposerRef.current?.();
+    };
+  }, []);
+  if (!config.loadedComponentName) return null;
+  const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+  if (LoadedComponent)
+    return /* @__PURE__ */ jsx(LoadedComponent, { ...config.currentProps, router: props.router });
+  return null;
+}
+function Router(props) {
+  const [Component] = useState(
+    () => props.router.adapters.observer ? props.router.adapters.observer(RouterInner) : RouterInner
+  );
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+export {
+  Router
+};

package/react/Router.d.ts

@@ -0,0 +1,5 @@
+import { TypePropsRouter, TypeRoute } from 'reactive-route';
+declare function RouterWrapper<TRoutes extends Record<string, TypeRoute>>(props: TypePropsRouter<TRoutes>): any;
+export declare const Router: typeof RouterWrapper;
+export {};
+//# sourceMappingURL=Router.d.ts.map

package/react/Router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../packages/react/Router.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,eAAe,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmE/F,iBAAS,aAAa,CAAC,OAAO,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,GAK1D,GAAG,CACzC;AAED,eAAO,MAAM,MAAM,EAA0B,OAAO,aAAa,CAAC"}