reactive-route 0.0.1-alpha.0 → 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

@@ -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,6 +77,19 @@ function isDynamicRoute(route) {
   return "params" in route;
 }
 
+// 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}`);
@@ -104,19 +121,6 @@ function findRouteByPathname({
   return dynamicRouteMatch;
 }
 
-// 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/getQueryValues.ts
 var import_query_string = __toESM(require("query-string"));
 
@@ -184,3 +188,190 @@ function replaceDynamicValues({
     return encodeURIComponent(value);
   });
 }
+
+// packages/core/createRouterStore.ts
+function createRouterStore({
+  adapters,
+  routes,
+  routeError500,
+  lifecycleParams
+}) {
+  const routerStore = adapters.makeObservable({
+    routesHistory: [],
+    currentRoute: {},
+    isRedirecting: false,
+    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;
+    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) {
+        adapters.batch(() => {
+          adapters.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();
+    }
+    adapters.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 });
+      adapters.batch(() => {
+        adapters.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();
+    }
+    adapters.batch(() => {
+      adapters.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;
+}

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);