@tanstack/react-router 0.0.1-beta.46 → 0.0.1-beta.49

package/build/cjs/useStore.js

@@ -0,0 +1,64 @@
+/**
+ * react-router
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withSelector = require('use-sync-external-store/shim/with-selector');
+
+function useStore(store, selector = d => d, compareShallow) {
+  const slice = withSelector.useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
+  return slice;
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  // if (objA instanceof Map && objB instanceof Map) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const [key, value] of objA) {
+  //     if (!Object.is(value, objB.get(key))) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  // if (objA instanceof Set && objB instanceof Set) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const value of objA) {
+  //     if (!objB.has(value)) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+exports.useStore = useStore;
+//# sourceMappingURL=useStore.js.map

package/build/cjs/useStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStore.js","sources":["../../src/useStore.ts"],"sourcesContent":["import { Store } from '@tanstack/router-core'\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'\n\nexport function useStore<TState, TSelected = TState>(\n  store: Store<TState>,\n  selector: (state: TState) => TSelected = (d) => d as any,\n  compareShallow?: boolean,\n) {\n  const slice = useSyncExternalStoreWithSelector(\n    store.subscribe,\n    () => store.state,\n    () => store.state,\n    selector,\n    compareShallow ? shallow : undefined,\n  )\n\n  return slice\n}\n\nfunction shallow<T>(objA: T, objB: T) {\n  if (Object.is(objA, objB)) {\n    return true\n  }\n\n  if (\n    typeof objA !== 'object' ||\n    objA === null ||\n    typeof objB !== 'object' ||\n    objB === null\n  ) {\n    return false\n  }\n\n  // if (objA instanceof Map && objB instanceof Map) {\n  //   if (objA.size !== objB.size) return false\n\n  //   for (const [key, value] of objA) {\n  //     if (!Object.is(value, objB.get(key))) {\n  //       return false\n  //     }\n  //   }\n  //   return true\n  // }\n\n  // if (objA instanceof Set && objB instanceof Set) {\n  //   if (objA.size !== objB.size) return false\n\n  //   for (const value of objA) {\n  //     if (!objB.has(value)) {\n  //       return false\n  //     }\n  //   }\n  //   return true\n  // }\n\n  const keysA = Object.keys(objA)\n  if (keysA.length !== Object.keys(objB).length) {\n    return false\n  }\n\n  for (let i = 0; i < keysA.length; i++) {\n    if (\n      !Object.prototype.hasOwnProperty.call(objB, keysA[i] as string) ||\n      !Object.is(objA[keysA[i] as keyof T], objB[keysA[i] as keyof T])\n    ) {\n      return false\n    }\n  }\n  return true\n}\n"],"names":["useStore","store","selector","d","compareShallow","slice","useSyncExternalStoreWithSelector","subscribe","state","shallow","undefined","objA","objB","Object","is","keysA","keys","length","i","prototype","hasOwnProperty","call"],"mappings":";;;;;;;;;;;;;;;;AAGO,SAASA,QAAQ,CACtBC,KAAoB,EACpBC,QAAsC,GAAIC,CAAC,IAAKA,CAAQ,EACxDC,cAAwB,EACxB;EACA,MAAMC,KAAK,GAAGC,6CAAgC,CAC5CL,KAAK,CAACM,SAAS,EACf,MAAMN,KAAK,CAACO,KAAK,EACjB,MAAMP,KAAK,CAACO,KAAK,EACjBN,QAAQ,EACRE,cAAc,GAAGK,OAAO,GAAGC,SAAS,CACrC,CAAA;AAED,EAAA,OAAOL,KAAK,CAAA;AACd,CAAA;AAEA,SAASI,OAAO,CAAIE,IAAO,EAAEC,IAAO,EAAE;EACpC,IAAIC,MAAM,CAACC,EAAE,CAACH,IAAI,EAAEC,IAAI,CAAC,EAAE;AACzB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,IACE,OAAOD,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,IACb,OAAOC,IAAI,KAAK,QAAQ,IACxBA,IAAI,KAAK,IAAI,EACb;AACA,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,EAAA,MAAMG,KAAK,GAAGF,MAAM,CAACG,IAAI,CAACL,IAAI,CAAC,CAAA;AAC/B,EAAA,IAAII,KAAK,CAACE,MAAM,KAAKJ,MAAM,CAACG,IAAI,CAACJ,IAAI,CAAC,CAACK,MAAM,EAAE;AAC7C,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AAEA,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,KAAK,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;AACrC,IAAA,IACE,CAACL,MAAM,CAACM,SAAS,CAACC,cAAc,CAACC,IAAI,CAACT,IAAI,EAAEG,KAAK,CAACG,CAAC,CAAC,CAAW,IAC/D,CAACL,MAAM,CAACC,EAAE,CAACH,IAAI,CAACI,KAAK,CAACG,CAAC,CAAC,CAAY,EAAEN,IAAI,CAACG,KAAK,CAACG,CAAC,CAAC,CAAY,CAAC,EAChE;AACA,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/build/esm/index.js

@@ -9,11 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { createStore, createRoot, createEffect, untrack, unwrap } from '@solidjs/reactivity';
-export * from '@solidjs/reactivity';
-import { sharedClone, functionalUpdate, createRouter, warning, invariant, last } from '@tanstack/router-core';
+import { functionalUpdate, Router, warning, invariant, last } from '@tanstack/router-core';
 export * from '@tanstack/router-core';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -30,6 +28,54 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function useStore(store, selector = d => d, compareShallow) {
+  const slice = useSyncExternalStoreWithSelector(store.subscribe, () => store.state, () => store.state, selector, compareShallow ? shallow : undefined);
+  return slice;
+}
+function shallow(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  // if (objA instanceof Map && objB instanceof Map) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const [key, value] of objA) {
+  //     if (!Object.is(value, objB.get(key))) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  // if (objA instanceof Set && objB instanceof Set) {
+  //   if (objA.size !== objB.size) return false
+
+  //   for (const value of objA) {
+  //     if (!objB.has(value)) {
+  //       return false
+  //     }
+  //   }
+  //   return true
+  // }
+
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !Object.is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+//
+
 function lazy(importer) {
   const lazyComp = /*#__PURE__*/React.lazy(importer);
   const finalComp = lazyComp;
@@ -59,7 +105,7 @@ function useLinkProps(options) {
     hash,
     search,
     params,
-    to,
+    to = '.',
     preload,
     preloadDelay,
     preloadMaxAge,
@@ -150,82 +196,26 @@ const Link = /*#__PURE__*/React.forwardRef((props, ref) => {
 });
 const matchesContext = /*#__PURE__*/React.createContext(null);
 const routerContext = /*#__PURE__*/React.createContext(null);
-const EMPTY = {};
-const __useStoreValue = (seed, selector) => {
-  const valueRef = React.useRef(EMPTY);
-
-  // 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()));
-
-  // If empty, initialize the value
-  if (valueRef.current === EMPTY) {
-    valueRef.current = sharedClone(undefined, getValue());
-  }
-
-  // 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();
-      });
+class ReactRouter extends Router {
+  constructor(opts) {
+    super({
+      ...opts,
+      loadComponent: async component => {
+        if (component.preload) {
+          await component.preload();
+        }
+        return component;
+      }
     });
-  }, []);
-  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) {
-        await component.preload();
-      }
-      return component;
-    }
-  });
-  return coreRouter;
 }
-function RouterProvider(_ref) {
-  let {
-    router,
-    ...rest
-  } = _ref;
+function RouterProvider({
+  router,
+  ...rest
+}) {
   router.update(rest);
-  const [,, currentMatches] = __useStoreValue(() => router.store, s => [s.status, s.pendingMatches, s.currentMatches]);
+  const [,, currentMatches] = useStore(router.store, s => [s.status, s.pendingMatches, s.currentMatches], true);
   React.useEffect(router.mount, [router]);
-  console.log('current', currentMatches);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(routerContext.Provider, {
     value: {
       router: router
@@ -239,9 +229,9 @@ function useRouter() {
   warning(!value, 'useRouter must be used inside a <Router> component!');
   return value.router;
 }
-function useRouterStore(selector) {
+function useRouterStore(selector, shallow) {
   const router = useRouter();
-  return __useStoreValue(() => router.store, selector);
+  return useStore(router.store, selector, shallow);
 }
 function useMatches() {
   return React.useContext(matchesContext);
@@ -249,12 +239,12 @@ function useMatches() {
 function useMatch(opts) {
   const router = useRouter();
   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?`);
+  const match = opts?.from ? router.store.state.currentMatches.find(d => d.route.id === opts?.from) : nearestMatch;
+  invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+  if (opts?.strict ?? true) {
+    invariant(nearestMatch.route.id == match?.route.id, `useMatch("${match?.route.id}") is being called in a component that is meant to render the '${nearestMatch.route.id}' route. Did you mean to 'useMatch("${match?.route.id}", { strict: false })' or 'useRoute("${match?.route.id}")' instead?`);
   }
-  __useStoreValue(() => match.store);
+  useStore(match.store, d => opts?.track?.(match) ?? match, opts?.shallow);
   return match;
 }
 function useRoute(routeId) {
@@ -265,34 +255,32 @@ function useRoute(routeId) {
 }
 function useLoaderData(opts) {
   const match = useMatch(opts);
-  return __useStoreValue(() => match == null ? void 0 : match.store.loaderData, opts == null ? void 0 : opts.select);
+  invariant(match, `Could not find ${opts?.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`);
+  useStore(match.store, d => opts?.track?.(d.loaderData) ?? d.loaderData);
+  return match.store.state.loaderData;
 }
 function useSearch(opts) {
   const match = useMatch(opts);
-  return __useStoreValue(() => match == null ? void 0 : match.store.search, opts == null ? void 0 : opts.select);
+  useStore(match.store, d => opts?.track?.(d.search) ?? d.search);
+  return match.store.state.search;
 }
 function useParams(opts) {
   const router = useRouter();
-  return __useStoreValue(() => {
-    var _last;
-    return (_last = last(router.store.currentMatches)) == null ? void 0 : _last.params;
-  }, opts == null ? void 0 : opts.select);
+  useStore(router.store, d => {
+    const params = last(d.currentMatches)?.params;
+    return opts?.track?.(params) ?? params;
+  });
+  return last(router.store.state.currentMatches)?.params;
 }
 function useNavigate(defaultOpts) {
+  const router = useRouter();
   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 opts => {
@@ -313,37 +301,49 @@ function MatchRoute(props) {
   if (!params) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(typeof props.children === 'function' ? props.children(params) : props.children, props);
+  if (typeof props.children === 'function') {
+    return props.children(params);
+  }
+  return params ? props.children : null;
 }
 function Outlet() {
-  const router = useRouter();
   const matches = useMatches().slice(1);
   const match = matches[0];
+  if (!match) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(SubOutlet, {
+    matches: matches,
+    match: match
+  });
+}
+function SubOutlet({
+  matches,
+  match
+}) {
+  const router = useRouter();
+  useStore(match.store);
   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.state.status === 'error') {
+      throw props.match.store.state.error;
     }
-    if (props.match.store.status === 'success') {
-      return /*#__PURE__*/React.createElement(props.match.__.component ?? router.options.defaultComponent ?? Outlet);
+    if (props.match.store.state.status === 'success') {
+      return /*#__PURE__*/React.createElement(props.match.component ?? router.options.defaultComponent ?? Outlet);
     }
-    if (props.match.store.status === 'loading') {
-      throw props.match.__.loadPromise;
+    if (props.match.store.state.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 = match.__.pendingComponent ?? router.options.defaultPendingComponent ?? defaultPending;
-  const errorComponent = match.__.errorComponent ?? router.options.defaultErrorComponent;
+  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)
   }, /*#__PURE__*/React.createElement(CatchBoundary, {
-    key: match.routeId,
+    key: match.route.id,
     errorComponent: errorComponent,
     match: match
   }, /*#__PURE__*/React.createElement(Inner, {
@@ -356,7 +356,7 @@ class CatchBoundary extends React.Component {
     info: undefined
   };
   componentDidCatch(error, info) {
-    console.error(`Error in route match: ${this.props.match.matchId}`);
+    console.error(`Error in route match: ${this.props.match.id}`);
     console.error(error);
     this.setState({
       error,
@@ -376,20 +376,27 @@ class CatchBoundary extends React.Component {
 // router's location key changes.
 function CatchBoundaryInner(props) {
   const [activeErrorState, setActiveErrorState] = React.useState(props.errorState);
-  const router = useRouter();
+  useRouter();
   const errorComponent = props.errorComponent ?? DefaultErrorBoundary;
-  React.useEffect(() => {
-    if (activeErrorState) {
-      let prevKey = router.store.currentLocation.key;
-      return createRoot(() => createEffect(() => {
-        if (router.store.currentLocation.key !== prevKey) {
-          prevKey = router.store.currentLocation.key;
-          setActiveErrorState({});
-        }
-      }));
-    }
-    return;
-  }, [activeErrorState]);
+
+  // React.useEffect(() => {
+  //   if (activeErrorState) {
+  //     let prevKey = router.store.currentLocation.key
+  //     return createRoot((dispose) => {
+  //       createEffect(() => {
+  //         if (router.store.currentLocation.key !== prevKey) {
+  //           prevKey = router.store.currentLocation.key
+  //           setActiveErrorState({} as any)
+  //         }
+  //       })
+
+  //       return dispose
+  //     })
+  //   }
+
+  //   return
+  // }, [activeErrorState])
+
   React.useEffect(() => {
     if (props.errorState.error) {
       setActiveErrorState(props.errorState);
@@ -401,10 +408,9 @@ function CatchBoundaryInner(props) {
   }
   return props.children;
 }
-function DefaultErrorBoundary(_ref2) {
-  let {
-    error
-  } = _ref2;
+function DefaultErrorBoundary({
+  error
+}) {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '.5rem',
@@ -428,47 +434,43 @@ function DefaultErrorBoundary(_ref2) {
     }
   }, error.message) : null)));
 }
-function usePrompt(message, when) {
-  const router = useRouter();
-  React.useEffect(() => {
-    if (!when) return;
-    let unblock = router.history.block(transition => {
-      if (window.confirm(message)) {
-        unblock();
-        transition.retry();
-      } else {
-        router.store.currentLocation.pathname = window.location.pathname;
-      }
-    });
-    return unblock;
-  }, [when, message]);
-}
-function Prompt(_ref3) {
-  let {
-    message,
-    when,
-    children
-  } = _ref3;
-  usePrompt(message, when ?? true);
-  return children ?? null;
+function useAction(action, opts) {
+  useStore(action.store, d => opts?.track?.(d) ?? d, true);
+  const [ref] = React.useState({});
+  Object.assign(ref, {
+    ...action,
+    latestSubmission: action.store.state.submissions[action.store.state.submissions.length - 1],
+    pendingSubmissions: React.useMemo(() => action.store.state.submissions.filter(d => d.status === 'pending'), [action.store.state.submissions])
+  });
+  return ref;
 }
 
-// function circularStringify(obj: any) {
-//   const seen = new Set()
+// TODO: While we migrate away from the history package, these need to be disabled
+// export function usePrompt(message: string, when: boolean | any): void {
+//   const router = useRouter()
 
-//   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)
+//   React.useEffect(() => {
+//     if (!when) return
+
+//     let unblock = router.getHistory().block((transition) => {
+//       if (window.confirm(message)) {
+//         unblock()
+//         transition.retry()
+//       } else {
+//         router.setStore((s) => {
+//           s.currentLocation.pathname = window.location.pathname
+//         })
 //       }
-//       return value
-//     }) || ''
-//   )
+//     })
+
+//     return unblock
+//   }, [when, message])
+// }
+
+// export function Prompt({ message, when, children }: PromptProps) {
+//   usePrompt(message, when ?? true)
+//   return (children ?? null) as ReactNode
 // }
 
-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 };
+export { DefaultErrorBoundary, Link, MatchRoute, Outlet, ReactRouter, RouterProvider, lazy, matchesContext, routerContext, useAction, useLinkProps, useLoaderData, useMatch, useMatchRoute, useMatches, useNavigate, useParams, useRoute, useRouter, useRouterStore, useSearch, useStore };
 //# sourceMappingURL=index.js.map