reactive-route 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/core/utils/replaceDynamicValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replaceDynamicValues.d.ts","sourceRoot":"","sources":["../../../packages/core/utils/replaceDynamicValues.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAMnE,wBAAgB,oBAAoB,CAClC,UAAU,SAAS,SAAS,GAAG,mBAAmB,GAAG,gBAAgB,CAAC,SAAS,CAAC,EAChF,EACA,KAAK,EACL,MAAkB,GACnB,EAAE;IACD,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,CAAC;CACrD,GAAG,MAAM,CAcT"}

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

@@ -0,0 +1,18 @@
+// packages/adapters/kr-observable.ts
+import { autorun, makeObservable } from "kr-observable";
+import { observer } from "kr-observable/react";
+var adapters = {
+  batch: (cb) => cb(),
+  autorun,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      delete obj[variableKey];
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable,
+  observer
+};
+export {
+  adapters
+};

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

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

package/dist/esm/adapters/kr-observable-preact/index.js

@@ -0,0 +1,18 @@
+// packages/adapters/kr-observable-preact.ts
+import { autorun, makeObservable } from "kr-observable";
+import { observer } from "kr-observable/preact";
+var adapters = {
+  batch: (cb) => cb(),
+  autorun,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      delete obj[variableKey];
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable,
+  observer
+};
+export {
+  adapters
+};

package/dist/esm/adapters/kr-observable-preact/package.json

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

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

@@ -0,0 +1,22 @@
+// packages/adapters/mobx.ts
+import { autorun, observable, runInAction } from "mobx";
+import { observer } from "mobx-react-lite";
+var adapters = {
+  batch: runInAction,
+  autorun,
+  observer,
+  replaceObject: (obj, newObj) => {
+    runInAction(() => {
+      for (const variableKey in obj) {
+        if (obj.hasOwnProperty(variableKey)) {
+          delete obj[variableKey];
+        }
+      }
+      Object.assign(obj, newObj);
+    });
+  },
+  makeObservable: observable
+};
+export {
+  adapters
+};

package/dist/esm/adapters/mobx/package.json

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

package/dist/esm/adapters/mobx-preact/index.js

@@ -0,0 +1,22 @@
+// packages/adapters/mobx-preact.ts
+import { autorun, observable, runInAction } from "mobx";
+import { observer } from "mobx-preact";
+var adapters = {
+  batch: runInAction,
+  autorun,
+  observer,
+  replaceObject: (obj, newObj) => {
+    runInAction(() => {
+      for (const variableKey in obj) {
+        if (obj.hasOwnProperty(variableKey)) {
+          delete obj[variableKey];
+        }
+      }
+      Object.assign(obj, newObj);
+    });
+  },
+  makeObservable: observable
+};
+export {
+  adapters
+};

package/dist/esm/adapters/mobx-preact/package.json

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

package/dist/esm/adapters/mobx-solid/index.js

@@ -0,0 +1,21 @@
+// packages/adapters/mobx-solid.ts
+import { autorun, observable, runInAction } from "mobx";
+var adapters = {
+  batch: runInAction,
+  autorun,
+  replaceObject: (obj, newObj) => {
+    runInAction(() => {
+      for (const variableKey in obj) {
+        if (obj.hasOwnProperty(variableKey)) {
+          delete obj[variableKey];
+        }
+      }
+      Object.assign(obj, newObj);
+    });
+  },
+  makeObservable: observable,
+  immediateSetComponent: true
+};
+export {
+  adapters
+};

package/dist/esm/adapters/mobx-solid/package.json

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

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

@@ -0,0 +1,24 @@
+// packages/adapters/solid.ts
+import { batch, createRenderEffect } from "solid-js";
+import { createMutable, modifyMutable, produce } from "solid-js/store";
+var adapters = {
+  batch,
+  autorun: createRenderEffect,
+  replaceObject: (obj, newObj) => {
+    modifyMutable(
+      obj,
+      produce((state) => {
+        if (typeof state === "object" && state != null) {
+          for (const variableKey in state) {
+            delete state[variableKey];
+          }
+        }
+        Object.assign(state || {}, newObj);
+      })
+    );
+  },
+  makeObservable: createMutable
+};
+export {
+  adapters
+};

package/dist/esm/adapters/solid/package.json

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

package/dist/esm/index.js

@@ -47,6 +47,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
 import queryString from "query-string";
 
@@ -68,6 +99,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.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;
@@ -107,29 +148,34 @@ function replaceDynamicValues({
 
 // packages/core/createRouterStore.ts
 function createRouterStore({
-  batch,
+  adapters,
   routes,
-  autorun,
-  replaceObject,
-  routeError500,
-  makeObservable,
   lifecycleParams
 }) {
-  const routerStore = makeObservable({
+  const routerStore = adapters.makeObservable({
     routesHistory: [],
     currentRoute: {},
     isRedirecting: false,
     redirectTo: void 0,
-    utils: {
-      batch,
-      autorun,
-      replaceObject,
-      makeObservable
-    }
+    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, pathname: params.pathname }));
+  };
   routerStore.redirectTo = async function redirectTo(config) {
-    const { route: routeName, noHistoryPush, asClient } = config;
-    const isClient = typeof asClient === "boolean" ? asClient : constants.isClient;
+    const { route: routeName, noHistoryPush } = config;
     let currentRoute;
     let currentPathname;
     let currentUrl;
@@ -170,8 +216,11 @@ 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, {
+            ...routerStore.currentRoute,
+            query: nextQuery || {}
+          });
           routerStore.routesHistory.push(nextUrl);
         });
         if (history && !noHistoryPush) {
@@ -184,42 +233,26 @@ function createRouterStore({
       }
       return Promise.resolve();
     }
-    batch(() => {
+    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 || []
-      );
+      const config2 = {
+        nextUrl,
+        nextRoute,
+        nextQuery,
+        nextSearch,
+        nextPathname,
+        currentUrl,
+        currentQuery,
+        currentRoute,
+        currentSearch,
+        currentPathname
+      };
+      await currentRoute?.beforeLeave?.(config2, ...lifecycleParams || []);
+      const redirectConfig = await nextRoute.beforeEnter?.(config2, ...lifecycleParams || []);
       if (typeof redirectConfig === "object") {
-        if (isClient) return redirectTo({ ...redirectConfig, asClient });
+        if (constants.isClient) return redirectTo(redirectConfig);
         const redirectRoute = routes[redirectConfig.route];
         const redirectParams = "params" in redirectConfig && redirectConfig.params ? redirectConfig.params : void 0;
         let redirectUrl = replaceDynamicValues({
@@ -244,22 +277,22 @@ function createRouterStore({
         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
+      await loadComponentToConfig({ route: routes.internalError });
+      adapters.batch(() => {
+        adapters.replaceObject(routerStore.currentRoute, {
+          name: routes.internalError.name,
+          path: routes.internalError.path,
+          props: routes[routes.internalError.name].props,
+          query: adapters.makeObservable({}),
+          params: adapters.makeObservable({}),
+          pageName: routes[routes.internalError.name].pageName
         });
         routerStore.isRedirecting = false;
       });
       return Promise.resolve();
     }
-    batch(() => {
-      replaceObject(routerStore.currentRoute, {
+    adapters.batch(() => {
+      adapters.replaceObject(routerStore.currentRoute, {
         name: nextRoute.name,
         path: nextRoute.path,
         props: routes[nextRoute.name].props,
@@ -284,47 +317,6 @@ 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 })
-  };
-}
 export {
   createRouterConfig,
   createRouterStore,

package/dist/esm/preact/index.js

@@ -0,0 +1,81 @@
+// packages/preact/Router.tsx
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { getInitialRoute, history } 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.routerStore.routesHistory[props.routerStore.routesHistory.length - 2];
+      if (previousRoutePathname === params.location.pathname) {
+        props.routerStore.adapters.batch(() => props.routerStore.routesHistory.pop());
+      }
+      void props.routerStore.redirectTo({
+        noHistoryPush: true,
+        ...getInitialRoute({
+          routes: props.routes,
+          pathname: history.location.pathname
+        })
+      });
+    });
+  }, []);
+  const [config] = useState(
+    () => props.routerStore.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    })
+  );
+  const setLoadedComponent = 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 === 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 || {} : {};
+        });
+        preventRedirect = true;
+      }
+    }
+    if (preventRedirect) return;
+    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;
+    });
+  }, []);
+  useState(() => {
+    props.routerStore.adapters.batch(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      setLoadedComponent();
+      disposerRef.current = props.routerStore.adapters.autorun(setLoadedComponent);
+    });
+  });
+  useEffect(() => {
+    return () => {
+      disposerRef.current?.();
+    };
+  }, []);
+  if (!config.loadedComponentName) return null;
+  const LoadedComponent = props.routes[config.loadedComponentName]?.component || null;
+  if (LoadedComponent) return /* @__PURE__ */ jsx(LoadedComponent, { ...config.currentProps });
+  return null;
+}
+function Router(props) {
+  const [Component] = useState(
+    () => props.routerStore.adapters.observer ? props.routerStore.adapters.observer(RouterInner) : RouterInner
+  );
+  return /* @__PURE__ */ jsx(Component, { ...props });
+}
+export {
+  Router
+};

package/dist/esm/preact/package.json

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