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

package/dist/cjs/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var core_exports = {};
 __export(core_exports, {
   createRouterConfig: () => createRouterConfig,
+  createRouterStore: () => createRouterStore,
   findRouteByPathname: () => findRouteByPathname,
   getInitialRoute: () => getInitialRoute,
   history: () => history,
@@ -53,6 +54,9 @@ 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: ":",
@@ -73,37 +77,6 @@ function isDynamicRoute(route) {
   return "params" in route;
 }
 
-// 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/getDynamicValues.ts
 function getDynamicValues(params) {
   const { route, pathname } = params;
@@ -138,16 +111,6 @@ 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;
@@ -184,3 +147,217 @@ function replaceDynamicValues({
     return encodeURIComponent(value);
   });
 }
+
+// packages/core/createRouterStore.ts
+function createRouterStore({
+  batch,
+  routes,
+  routeError500,
+  makeObservable,
+  lifecycleParams,
+  replaceObject
+}) {
+  const routerStore = makeObservable({
+    routesHistory: [],
+    currentRoute: {},
+    isRedirecting: false,
+    redirectTo: void 0
+  });
+  routerStore.redirectTo = async function redirectTo(config) {
+    const { route: routeName, noHistoryPush, asClient } = config;
+    const isClient = typeof asClient === "boolean" ? asClient : constants.isClient;
+    let currentRoute;
+    let currentPathname;
+    let currentUrl;
+    let currentSearch;
+    let currentQuery;
+    if (routerStore.currentRoute?.name) {
+      currentRoute = routes[routerStore.currentRoute.name];
+      currentPathname = replaceDynamicValues({
+        route: currentRoute,
+        params: routerStore.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);
+    }
+    const nextRoute = routes[routeName];
+    const nextPathname = replaceDynamicValues({
+      route: nextRoute,
+      params: "params" in config ? config.params : void 0
+    });
+    let nextQuery;
+    let nextUrl = nextPathname;
+    let nextSearch;
+    if ("query" in config && config.query) {
+      const clearedQuery = getQueryValues({
+        route: nextRoute,
+        pathname: `${nextPathname}?${import_query_string2.default.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 });
+      }
+    }
+    if (currentUrl === nextUrl) return Promise.resolve();
+    if (currentPathname === nextPathname) {
+      if (currentSearch !== nextSearch) {
+        batch(() => {
+          replaceObject(routerStore.currentRoute.query, nextQuery || {});
+          routerStore.routesHistory.push(nextUrl);
+        });
+        if (history && !noHistoryPush) {
+          history.push({
+            hash: history.location.hash,
+            search: nextSearch,
+            pathname: nextPathname
+          });
+        }
+      }
+      return Promise.resolve();
+    }
+    batch(() => {
+      routerStore.isRedirecting = true;
+    });
+    try {
+      await currentRoute?.beforeLeave?.(
+        {
+          nextUrl,
+          nextRoute,
+          nextQuery,
+          nextSearch,
+          nextPathname,
+          currentUrl,
+          currentQuery,
+          currentRoute,
+          currentSearch,
+          currentPathname
+        },
+        ...lifecycleParams || []
+      );
+      const redirectConfig = await nextRoute.beforeEnter?.(
+        {
+          nextUrl,
+          nextRoute,
+          nextQuery,
+          nextSearch,
+          nextPathname,
+          currentUrl,
+          currentQuery,
+          currentRoute,
+          currentSearch,
+          currentPathname
+        },
+        ...lifecycleParams || []
+      );
+      if (typeof redirectConfig === "object") {
+        if (isClient) return redirectTo({ ...redirectConfig, asClient });
+        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)}`
+          });
+          if (Object.keys(clearedQuery).length > 0) {
+            redirectUrl = import_query_string2.default.stringifyUrl({ url: redirectUrl, query: clearedQuery });
+          }
+        }
+        throw Object.assign(new Error(redirectUrl), { name: constants.errorRedirect });
+      }
+      await loadComponentToConfig({ route: routes[nextRoute.name] });
+    } catch (error) {
+      if (error?.name === constants.errorPrevent) return Promise.resolve();
+      if (error?.name === constants.errorRedirect) {
+        throw error;
+      }
+      console.error(error);
+      await loadComponentToConfig({ route: routeError500 });
+      batch(() => {
+        replaceObject(routerStore.currentRoute, {
+          name: routeError500.name,
+          path: routeError500.path,
+          props: routes[routeError500.name].props,
+          query: {},
+          params: {},
+          pageName: routes[routeError500.name].pageName
+        });
+        routerStore.isRedirecting = false;
+      });
+      return Promise.resolve();
+    }
+    batch(() => {
+      replaceObject(routerStore.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
+      });
+      const lastUrl = routerStore.routesHistory[routerStore.routesHistory.length - 1];
+      if (lastUrl !== nextUrl) {
+        routerStore.routesHistory.push(nextUrl);
+      }
+      if (history && !noHistoryPush) {
+        history.push({
+          hash: history.location.hash,
+          search: "query" in config ? `?${import_query_string2.default.stringify(config.query)}` : "",
+          pathname: nextPathname
+        });
+      }
+      routerStore.isRedirecting = false;
+    });
+    return Promise.resolve();
+  };
+  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/esm/index.js

@@ -11,6 +11,9 @@ function createRouterConfig(config) {
   return addNames(config);
 }
 
+// packages/core/createRouterStore.ts
+import queryString2 from "query-string";
+
 // packages/core/utils/constants.ts
 var constants = {
   dynamicSeparator: ":",
@@ -31,37 +34,6 @@ function isDynamicRoute(route) {
   return "params" in route;
 }
 
-// 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/getDynamicValues.ts
 function getDynamicValues(params) {
   const { route, pathname } = params;
@@ -96,16 +68,6 @@ 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
 import { createBrowserHistory } from "history";
 var history = constants.isClient ? createBrowserHistory() : null;
@@ -142,8 +104,223 @@ function replaceDynamicValues({
     return encodeURIComponent(value);
   });
 }
+
+// packages/core/createRouterStore.ts
+function createRouterStore({
+  batch,
+  routes,
+  routeError500,
+  makeObservable,
+  lifecycleParams,
+  replaceObject
+}) {
+  const routerStore = makeObservable({
+    routesHistory: [],
+    currentRoute: {},
+    isRedirecting: false,
+    redirectTo: void 0
+  });
+  routerStore.redirectTo = async function redirectTo(config) {
+    const { route: routeName, noHistoryPush, asClient } = config;
+    const isClient = typeof asClient === "boolean" ? asClient : constants.isClient;
+    let currentRoute;
+    let currentPathname;
+    let currentUrl;
+    let currentSearch;
+    let currentQuery;
+    if (routerStore.currentRoute?.name) {
+      currentRoute = routes[routerStore.currentRoute.name];
+      currentPathname = replaceDynamicValues({
+        route: currentRoute,
+        params: routerStore.currentRoute.params
+      });
+      currentUrl = queryString2.stringifyUrl({
+        url: currentPathname,
+        query: routerStore.currentRoute.query
+      });
+      currentQuery = routerStore.currentRoute.query;
+      currentSearch = queryString2.stringify(routerStore.currentRoute.query);
+    }
+    const nextRoute = routes[routeName];
+    const nextPathname = replaceDynamicValues({
+      route: nextRoute,
+      params: "params" in config ? config.params : void 0
+    });
+    let nextQuery;
+    let nextUrl = nextPathname;
+    let nextSearch;
+    if ("query" in config && config.query) {
+      const clearedQuery = getQueryValues({
+        route: nextRoute,
+        pathname: `${nextPathname}?${queryString2.stringify(config.query)}`
+      });
+      if (Object.keys(clearedQuery).length > 0) {
+        nextQuery = clearedQuery;
+        nextSearch = queryString2.stringify(clearedQuery);
+        nextUrl = queryString2.stringifyUrl({ url: nextPathname, query: clearedQuery });
+      }
+    }
+    if (currentUrl === nextUrl) return Promise.resolve();
+    if (currentPathname === nextPathname) {
+      if (currentSearch !== nextSearch) {
+        batch(() => {
+          replaceObject(routerStore.currentRoute.query, nextQuery || {});
+          routerStore.routesHistory.push(nextUrl);
+        });
+        if (history && !noHistoryPush) {
+          history.push({
+            hash: history.location.hash,
+            search: nextSearch,
+            pathname: nextPathname
+          });
+        }
+      }
+      return Promise.resolve();
+    }
+    batch(() => {
+      routerStore.isRedirecting = true;
+    });
+    try {
+      await currentRoute?.beforeLeave?.(
+        {
+          nextUrl,
+          nextRoute,
+          nextQuery,
+          nextSearch,
+          nextPathname,
+          currentUrl,
+          currentQuery,
+          currentRoute,
+          currentSearch,
+          currentPathname
+        },
+        ...lifecycleParams || []
+      );
+      const redirectConfig = await nextRoute.beforeEnter?.(
+        {
+          nextUrl,
+          nextRoute,
+          nextQuery,
+          nextSearch,
+          nextPathname,
+          currentUrl,
+          currentQuery,
+          currentRoute,
+          currentSearch,
+          currentPathname
+        },
+        ...lifecycleParams || []
+      );
+      if (typeof redirectConfig === "object") {
+        if (isClient) return redirectTo({ ...redirectConfig, asClient });
+        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}?${queryString2.stringify(redirectConfig.query)}`
+          });
+          if (Object.keys(clearedQuery).length > 0) {
+            redirectUrl = queryString2.stringifyUrl({ url: redirectUrl, query: clearedQuery });
+          }
+        }
+        throw Object.assign(new Error(redirectUrl), { name: constants.errorRedirect });
+      }
+      await loadComponentToConfig({ route: routes[nextRoute.name] });
+    } catch (error) {
+      if (error?.name === constants.errorPrevent) return Promise.resolve();
+      if (error?.name === constants.errorRedirect) {
+        throw error;
+      }
+      console.error(error);
+      await loadComponentToConfig({ route: routeError500 });
+      batch(() => {
+        replaceObject(routerStore.currentRoute, {
+          name: routeError500.name,
+          path: routeError500.path,
+          props: routes[routeError500.name].props,
+          query: {},
+          params: {},
+          pageName: routes[routeError500.name].pageName
+        });
+        routerStore.isRedirecting = false;
+      });
+      return Promise.resolve();
+    }
+    batch(() => {
+      replaceObject(routerStore.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
+      });
+      const lastUrl = routerStore.routesHistory[routerStore.routesHistory.length - 1];
+      if (lastUrl !== nextUrl) {
+        routerStore.routesHistory.push(nextUrl);
+      }
+      if (history && !noHistoryPush) {
+        history.push({
+          hash: history.location.hash,
+          search: "query" in config ? `?${queryString2.stringify(config.query)}` : "",
+          pathname: nextPathname
+        });
+      }
+      routerStore.isRedirecting = false;
+    });
+    return Promise.resolve();
+  };
+  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 })
+  };
+}
 export {
   createRouterConfig,
+  createRouterStore,
   findRouteByPathname,
   getInitialRoute,
   history,

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

@@ -1,4 +1,5 @@
 export { createRouterConfig } from './createRouterConfig';
+export { createRouterStore } from './createRouterStore';
 export type { InterfaceRouterStore } from './types/InterfaceRouterStore';
 export type { TypeCurrentRoute } from './types/TypeCurrentRoute';
 export type { TypeRedirectToParams } from './types/TypeRedirectToParams';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/core/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "reactive-route",
   "author": "Dmitry Kazakov",
   "license": "MIT",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.1",
   "description": "Reactive Router for different frameworks",
   "repository": {
     "type": "git",