@tanstack/react-router 0.0.1-beta.37 → 0.0.1-beta.39

package/build/esm/index.js

@@ -10,7 +10,9 @@
  */
 import * as React from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { createRouter, rootRouteId, warning, invariant, functionalUpdate } from '@tanstack/router-core';
+import { createStore, createRoot, createEffect, untrack, unwrap } from '@solidjs/reactivity';
+export * from '@solidjs/reactivity';
+import { sharedClone, functionalUpdate, createRouter, warning, invariant, last } from '@tanstack/router-core';
 export * from '@tanstack/router-core';
 
 function _extends() {
@@ -27,276 +29,316 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
 
-const _excluded = ["type", "children", "target", "activeProps", "inactiveProps", "activeOptions", "disabled", "hash", "search", "params", "to", "preload", "preloadDelay", "preloadMaxAge", "replace", "style", "className", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd"],
-  _excluded2 = ["pending", "caseSensitive", "children"],
-  _excluded3 = ["router"];
 function lazy(importer) {
   const lazyComp = /*#__PURE__*/React.lazy(importer);
-  let promise;
-  let resolvedComp;
-  const forwardedComp = /*#__PURE__*/React.forwardRef((props, ref) => {
-    const resolvedCompRef = React.useRef(resolvedComp || lazyComp);
-    return /*#__PURE__*/React.createElement(resolvedCompRef.current, _extends({}, ref ? {
-      ref
-    } : {}, props));
-  });
-  const finalComp = forwardedComp;
-  finalComp.preload = () => {
-    if (!promise) {
-      promise = importer().then(module => {
-        resolvedComp = module.default;
-        return resolvedComp;
-      });
+  const finalComp = lazyComp;
+  finalComp.preload = async () => {
+    {
+      await importer();
     }
-    return promise;
   };
   return finalComp;
 }
 //
 
-function Link(props) {
+function useLinkProps(options) {
   const router = useRouter();
-  return /*#__PURE__*/React.createElement(router.Link, props);
+  const {
+    // custom props
+    type,
+    children,
+    target,
+    activeProps = () => ({
+      className: 'active'
+    }),
+    inactiveProps = () => ({}),
+    activeOptions,
+    disabled,
+    // fromCurrent,
+    hash,
+    search,
+    params,
+    to,
+    preload,
+    preloadDelay,
+    preloadMaxAge,
+    replace,
+    // element props
+    style,
+    className,
+    onClick,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onTouchStart,
+    onTouchEnd,
+    ...rest
+  } = options;
+  const linkInfo = router.buildLink(options);
+  if (linkInfo.type === 'external') {
+    const {
+      href
+    } = linkInfo;
+    return {
+      href
+    };
+  }
+  const {
+    handleClick,
+    handleFocus,
+    handleEnter,
+    handleLeave,
+    isActive,
+    next
+  } = linkInfo;
+  const reactHandleClick = e => {
+    if (React.startTransition) {
+      // This is a hack for react < 18
+      React.startTransition(() => {
+        handleClick(e);
+      });
+    } else {
+      handleClick(e);
+    }
+  };
+  const composeHandlers = handlers => e => {
+    if (e.persist) e.persist();
+    handlers.filter(Boolean).forEach(handler => {
+      if (e.defaultPrevented) return;
+      handler(e);
+    });
+  };
+
+  // Get the active props
+  const resolvedActiveProps = isActive ? functionalUpdate(activeProps, {}) ?? {} : {};
+
+  // Get the inactive props
+  const resolvedInactiveProps = isActive ? {} : functionalUpdate(inactiveProps, {}) ?? {};
+  return {
+    ...resolvedActiveProps,
+    ...resolvedInactiveProps,
+    ...rest,
+    href: disabled ? undefined : next.href,
+    onClick: composeHandlers([onClick, reactHandleClick]),
+    onFocus: composeHandlers([onFocus, handleFocus]),
+    onMouseEnter: composeHandlers([onMouseEnter, handleEnter]),
+    onMouseLeave: composeHandlers([onMouseLeave, handleLeave]),
+    target,
+    style: {
+      ...style,
+      ...resolvedActiveProps.style,
+      ...resolvedInactiveProps.style
+    },
+    className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined,
+    ...(disabled ? {
+      role: 'link',
+      'aria-disabled': true
+    } : undefined),
+    ['data-status']: isActive ? 'active' : undefined
+  };
 }
+const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const linkProps = useLinkProps(props);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    ref: ref
+  }, linkProps, {
+    children: typeof props.children === 'function' ? props.children({
+      isActive: linkProps['data-status'] === 'active'
+    }) : props.children
+  }));
+});
 const matchesContext = /*#__PURE__*/React.createContext(null);
 const routerContext = /*#__PURE__*/React.createContext(null);
-function MatchesProvider(props) {
-  return /*#__PURE__*/React.createElement(matchesContext.Provider, props);
-}
-const useRouterSubscription = router => {
-  useSyncExternalStore(cb => router.subscribe(() => cb()), () => router.state, () => router.state);
-};
-function createReactRouter(opts) {
-  const makeRouteExt = (route, router) => {
-    return {
-      useRoute: function useRoute(subRouteId) {
-        if (subRouteId === void 0) {
-          subRouteId = '.';
-        }
-        const resolvedRouteId = router.resolvePath(route.routeId, subRouteId);
-        const resolvedRoute = router.getRoute(resolvedRouteId);
-        useRouterSubscription(router);
-        invariant(resolvedRoute, "Could not find a route for route \"" + resolvedRouteId + "\"! Did you forget to add it to your route config?");
-        return resolvedRoute;
-      },
-      linkProps: options => {
-        var _functionalUpdate, _functionalUpdate2;
-        const {
-            // custom props
+const EMPTY = {};
+const __useStoreValue = (seed, selector) => {
+  const valueRef = React.useRef(EMPTY);
 
-            target,
-            activeProps = () => ({
-              className: 'active'
-            }),
-            inactiveProps = () => ({}),
-            disabled,
-            // element props
-            style,
-            className,
-            onClick,
-            onFocus,
-            onMouseEnter,
-            onMouseLeave
-          } = options,
-          rest = _objectWithoutPropertiesLoose(options, _excluded);
-        const linkInfo = route.buildLink(options);
-        if (linkInfo.type === 'external') {
-          const {
-            href
-          } = linkInfo;
-          return {
-            href
-          };
-        }
-        const {
-          handleClick,
-          handleFocus,
-          handleEnter,
-          handleLeave,
-          isActive,
-          next
-        } = linkInfo;
-        const reactHandleClick = e => {
-          if (React.startTransition)
-            // This is a hack for react < 18
-            React.startTransition(() => {
-              handleClick(e);
-            });else handleClick(e);
-        };
-        const composeHandlers = handlers => e => {
-          if (e.persist) e.persist();
-          handlers.forEach(handler => {
-            if (e.defaultPrevented) return;
-            if (handler) handler(e);
-          });
-        };
+  // If there is no selector, track the seed
+  // If there is a selector, do not track the seed
+  const getValue = () => !selector ? seed() : selector(untrack(() => seed()));
 
-        // Get the active props
-        const resolvedActiveProps = isActive ? (_functionalUpdate = functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {};
+  // If empty, initialize the value
+  if (valueRef.current === EMPTY) {
+    valueRef.current = sharedClone(undefined, getValue());
+  }
 
-        // Get the inactive props
-        const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
-        return _extends({}, resolvedActiveProps, resolvedInactiveProps, rest, {
-          href: disabled ? undefined : next.href,
-          onClick: composeHandlers([reactHandleClick, onClick]),
-          onFocus: composeHandlers([handleFocus, onFocus]),
-          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-          target,
-          style: _extends({}, style, resolvedActiveProps.style, resolvedInactiveProps.style),
-          className: [className, resolvedActiveProps.className, resolvedInactiveProps.className].filter(Boolean).join(' ') || undefined
-        }, disabled ? {
-          role: 'link',
-          'aria-disabled': true
-        } : undefined, {
-          ['data-status']: isActive ? 'active' : undefined
-        });
-      },
-      Link: /*#__PURE__*/React.forwardRef((props, ref) => {
-        const linkProps = route.linkProps(props);
-        useRouterSubscription(router);
-        return /*#__PURE__*/React.createElement("a", _extends({
-          ref: ref
-        }, linkProps, {
-          children: typeof props.children === 'function' ? props.children({
-            isActive: linkProps['data-status'] === 'active'
-          }) : props.children
-        }));
-      }),
-      MatchRoute: opts => {
-        const {
-            pending,
-            caseSensitive
-          } = opts,
-          rest = _objectWithoutPropertiesLoose(opts, _excluded2);
-        const params = route.matchRoute(rest, {
-          pending,
-          caseSensitive
-        });
-        if (!params) {
-          return null;
-        }
-        return typeof opts.children === 'function' ? opts.children(params) : opts.children;
-      }
-    };
-  };
-  const coreRouter = createRouter(_extends({}, opts, {
-    createRouter: router => {
-      const routerExt = {
-        useState: () => {
-          useRouterSubscription(router);
-          return router.state;
-        },
-        useMatch: (routeId, opts) => {
-          var _opts$strict;
-          useRouterSubscription(router);
-          const nearestMatch = useNearestMatch();
-          const match = router.state.currentMatches.find(d => d.routeId === routeId);
-          if ((_opts$strict = opts == null ? void 0 : opts.strict) != null ? _opts$strict : true) {
-            invariant(match, "Could not find an active match for \"" + routeId + "\"!");
-            invariant(nearestMatch.routeId == (match == null ? void 0 : match.routeId), "useMatch(\"" + (match == null ? void 0 : match.routeId) + "\") is being called in a component that is meant to render the '" + nearestMatch.routeId + "' route. Did you mean to 'useMatch(\"" + (match == null ? void 0 : match.routeId) + "\", { strict: false })' or 'useRoute(\"" + (match == null ? void 0 : match.routeId) + "\")' instead?");
-          }
-          return match;
-        }
-      };
-      const routeExt = makeRouteExt(router.getRoute(rootRouteId), router);
-      Object.assign(router, routerExt, routeExt);
-    },
-    createRoute: _ref => {
-      let {
-        router,
-        route
-      } = _ref;
-      const routeExt = makeRouteExt(route, router);
-      Object.assign(route, routeExt);
-    },
+  // Snapshot should just return the current cached value
+  const getSnapshot = React.useCallback(() => valueRef.current, []);
+  const getStore = React.useCallback(cb => {
+    // A root is necessary to track effects
+    return createRoot(() => {
+      createEffect(() => {
+        // Read and update the value
+        // getValue will handle which values are accessed and
+        // thus tracked.
+        // sharedClone will both recursively track the end result
+        // and ensure that the previous value is structurally shared
+        // into the new version.
+        valueRef.current = unwrap(
+        // Unwrap the value to get rid of any proxy structures
+        sharedClone(valueRef.current, getValue()));
+        cb();
+      });
+    });
+  }, []);
+  return useSyncExternalStore(getStore, getSnapshot, getSnapshot);
+};
+const [store, setStore] = createStore({
+  foo: 'foo',
+  bar: {
+    baz: 'baz'
+  }
+});
+createRoot(() => {
+  let prev;
+  createEffect(() => {
+    console.log('effect');
+    const next = sharedClone(prev, store);
+    console.log(next);
+    prev = untrack(() => next);
+  });
+});
+setStore(s => {
+  s.foo = '1';
+});
+setStore(s => {
+  s.bar.baz = '2';
+});
+function createReactRouter(opts) {
+  const coreRouter = createRouter({
+    ...opts,
     loadComponent: async component => {
-      if (component.preload && typeof document !== 'undefined') {
-        component.preload();
-        // return await component.preload()
+      if (component.preload) {
+        await component.preload();
       }
-
       return component;
     }
-  }));
+  });
   return coreRouter;
 }
-function RouterProvider(_ref2) {
+function RouterProvider(_ref) {
   let {
-      router
-    } = _ref2,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded3);
+    router,
+    ...rest
+  } = _ref;
   router.update(rest);
-  useRouterSubscription(router);
-  React.useEffect(() => {
-    return router.mount();
-  }, [router]);
+  const [,, currentMatches] = __useStoreValue(() => router.store, s => [s.status, s.pendingMatches, s.currentMatches]);
+  React.useEffect(router.mount, [router]);
+  console.log('current', currentMatches);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: {
       router: router
     }
-  }, /*#__PURE__*/React.createElement(MatchesProvider, {
-    value: [undefined, ...router.state.currentMatches]
+  }, /*#__PURE__*/React.createElement(matchesContext.Provider, {
+    value: [undefined, ...currentMatches]
   }, /*#__PURE__*/React.createElement(Outlet, null))));
 }
 function useRouter() {
   const value = React.useContext(routerContext);
   warning(!value, 'useRouter must be used inside a <Router> component!');
-  useRouterSubscription(value.router);
   return value.router;
 }
+function useRouterStore(selector) {
+  const router = useRouter();
+  return __useStoreValue(() => router.store, selector);
+}
 function useMatches() {
   return React.useContext(matchesContext);
 }
-function useMatch(routeId, opts) {
+function useMatch(opts) {
   const router = useRouter();
-  return router.useMatch(routeId, opts);
-}
-function useNearestMatch() {
-  const runtimeMatch = useMatches()[0];
-  invariant(runtimeMatch, "Could not find a nearest match!");
-  return runtimeMatch;
+  const nearestMatch = useMatches()[0];
+  const match = opts != null && opts.from ? router.store.currentMatches.find(d => d.routeId === (opts == null ? void 0 : opts.from)) : nearestMatch;
+  invariant(match, `Could not find ${opts != null && opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+  if ((opts == null ? void 0 : opts.strict) ?? true) {
+    invariant(nearestMatch.routeId == (match == null ? void 0 : match.routeId), `useMatch("${match == null ? void 0 : match.routeId}") is being called in a component that is meant to render the '${nearestMatch.routeId}' route. Did you mean to 'useMatch("${match == null ? void 0 : match.routeId}", { strict: false })' or 'useRoute("${match == null ? void 0 : match.routeId}")' instead?`);
+  }
+  __useStoreValue(() => match.store);
+  return match;
 }
 function useRoute(routeId) {
   const router = useRouter();
-  return router.useRoute(routeId);
+  const resolvedRoute = router.getRoute(routeId);
+  invariant(resolvedRoute, `Could not find a route for route "${routeId}"! Did you forget to add it to your route config?`);
+  return resolvedRoute;
+}
+function useLoaderData(opts) {
+  const match = useMatch(opts);
+  return __useStoreValue(() => match == null ? void 0 : match.store.loaderData, opts == null ? void 0 : opts.select);
 }
-function useSearch(_routeId) {
-  return useRouter().state.currentLocation.search;
+function useSearch(opts) {
+  const match = useMatch(opts);
+  return __useStoreValue(() => match == null ? void 0 : match.store.search, opts == null ? void 0 : opts.select);
 }
-function linkProps(props) {
+function useParams(opts) {
   const router = useRouter();
-  return router.linkProps(props);
+  return __useStoreValue(() => {
+    var _last;
+    return (_last = last(router.store.currentMatches)) == null ? void 0 : _last.params;
+  }, opts == null ? void 0 : opts.select);
 }
-function MatchRoute(props) {
+function useNavigate(defaultOpts) {
+  return opts => {
+    const router = useRouter();
+    return router.navigate({
+      ...defaultOpts,
+      ...opts
+    });
+  };
+}
+function useAction(opts) {
+  const route = useRoute(opts.from);
+  const action = route.action;
+  __useStoreValue(() => action);
+  return action;
+}
+function useMatchRoute() {
   const router = useRouter();
-  return /*#__PURE__*/React.createElement(router.MatchRoute, props);
+  return opts => {
+    const {
+      pending,
+      caseSensitive,
+      ...rest
+    } = opts;
+    return router.matchRoute(rest, {
+      pending,
+      caseSensitive
+    });
+  };
+}
+function MatchRoute(props) {
+  const matchRoute = useMatchRoute();
+  const params = matchRoute(props);
+  if (!params) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(typeof props.children === 'function' ? props.children(params) : props.children, props);
 }
 function Outlet() {
-  var _ref3, _match$__$pendingComp, _match$__$errorCompon;
   const router = useRouter();
   const matches = useMatches().slice(1);
   const match = matches[0];
   const defaultPending = React.useCallback(() => null, []);
+  __useStoreValue(() => match == null ? void 0 : match.store);
+  const Inner = React.useCallback(props => {
+    if (props.match.store.status === 'error') {
+      throw props.match.store.error;
+    }
+    if (props.match.store.status === 'success') {
+      return /*#__PURE__*/React.createElement(props.match.__.component ?? router.options.defaultComponent ?? Outlet);
+    }
+    if (props.match.store.status === 'loading') {
+      throw props.match.__.loadPromise;
+    }
+    invariant(false, 'Idle routeMatch status encountered during rendering! You should never see this. File an issue!');
+  }, []);
   if (!match) {
     return null;
   }
-  const PendingComponent = (_ref3 = (_match$__$pendingComp = match.__.pendingComponent) != null ? _match$__$pendingComp : router.options.defaultPendingComponent) != null ? _ref3 : defaultPending;
-  const errorComponent = (_match$__$errorCompon = match.__.errorComponent) != null ? _match$__$errorCompon : router.options.defaultErrorComponent;
-  return /*#__PURE__*/React.createElement(MatchesProvider, {
+  const PendingComponent = match.__.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
+  const errorComponent = match.__.errorComponent ?? router.options.defaultErrorComponent;
+  return /*#__PURE__*/React.createElement(matchesContext.Provider, {
     value: matches
   }, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: /*#__PURE__*/React.createElement(PendingComponent, null)
@@ -304,27 +346,17 @@ function Outlet() {
     key: match.routeId,
     errorComponent: errorComponent,
     match: match
-  }, (() => {
-    if (match.status === 'error') {
-      throw match.error;
-    }
-    if (match.status === 'success') {
-      var _ref4, _ref5;
-      return /*#__PURE__*/React.createElement((_ref4 = (_ref5 = match.__.component) != null ? _ref5 : router.options.defaultComponent) != null ? _ref4 : Outlet);
-    }
-    throw match.__.loadPromise;
-  })())));
+  }, /*#__PURE__*/React.createElement(Inner, {
+    match: match
+  }))));
 }
 class CatchBoundary extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      error: false,
-      info: undefined
-    };
-  }
+  state = {
+    error: false,
+    info: undefined
+  };
   componentDidCatch(error, info) {
-    console.error("Error in route match: " + this.props.match.matchId);
+    console.error(`Error in route match: ${this.props.match.matchId}`);
     console.error(error);
     this.setState({
       error,
@@ -343,19 +375,18 @@ class CatchBoundary extends React.Component {
 // there has to be a better way to reset error boundaries when the
 // router's location key changes.
 function CatchBoundaryInner(props) {
-  var _props$errorComponent;
   const [activeErrorState, setActiveErrorState] = React.useState(props.errorState);
   const router = useRouter();
-  const errorComponent = (_props$errorComponent = props.errorComponent) != null ? _props$errorComponent : DefaultErrorBoundary;
+  const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
   React.useEffect(() => {
     if (activeErrorState) {
-      let prevKey = router.state.currentLocation.key;
-      return router.subscribe(() => {
-        if (router.state.currentLocation.key !== prevKey) {
-          prevKey = router.state.currentLocation.key;
+      let prevKey = router.store.currentLocation.key;
+      return createRoot(() => createEffect(() => {
+        if (router.store.currentLocation.key !== prevKey) {
+          prevKey = router.store.currentLocation.key;
           setActiveErrorState({});
         }
-      });
+      }));
     }
     return;
   }, [activeErrorState]);
@@ -365,15 +396,15 @@ function CatchBoundaryInner(props) {
     }
     props.reset();
   }, [props.errorState.error]);
-  if (activeErrorState.error) {
+  if (props.errorState.error) {
     return /*#__PURE__*/React.createElement(errorComponent, activeErrorState);
   }
   return props.children;
 }
-function DefaultErrorBoundary(_ref6) {
+function DefaultErrorBoundary(_ref2) {
   let {
     error
-  } = _ref6;
+  } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5rem',
@@ -406,21 +437,38 @@ function usePrompt(message, when) {
         unblock();
         transition.retry();
       } else {
-        router.state.currentLocation.pathname = window.location.pathname;
+        router.store.currentLocation.pathname = window.location.pathname;
       }
     });
     return unblock;
   }, [when, message]);
 }
-function Prompt(_ref7) {
+function Prompt(_ref3) {
   let {
     message,
     when,
     children
-  } = _ref7;
-  usePrompt(message, when != null ? when : true);
-  return children != null ? children : null;
+  } = _ref3;
+  usePrompt(message, when ?? true);
+  return children ?? null;
 }
 
-export { DefaultErrorBoundary, Link, MatchRoute, MatchesProvider, Outlet, Prompt, RouterProvider, createReactRouter, lazy, linkProps, matchesContext, routerContext, useMatch, useMatches, useNearestMatch, usePrompt, useRoute, useRouter, useSearch };
+// function circularStringify(obj: any) {
+//   const seen = new Set()
+
+//   return (
+//     JSON.stringify(obj, (_, value) => {
+//       if (typeof value === 'function') {
+//         return undefined
+//       }
+//       if (typeof value === 'object' && value !== null) {
+//         if (seen.has(value)) return
+//         seen.add(value)
+//       }
+//       return value
+//     }) || ''
+//   )
+// }
+
+export { DefaultErrorBoundary, Link, MatchRoute, Outlet, Prompt, RouterProvider, __useStoreValue, createReactRouter, lazy, matchesContext, routerContext, useAction, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, usePrompt, useRoute, useRouter, useRouterStore, useSearch };
 //# sourceMappingURL=index.js.map