@tanstack/react-router 0.0.1-beta.4 → 0.0.1-beta.45

package/src/uSES/useSyncExternalStore.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict'
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+import * as React from 'react'
+
+export const useSyncExternalStore = React.useSyncExternalStore

package/src/uSES/useSyncExternalStoreShim.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { useSyncExternalStore as client } from './useSyncExternalStoreShimClient'
+import { useSyncExternalStore as server } from './useSyncExternalStoreShimServer'
+import { useSyncExternalStore as builtInAPI } from 'react'
+
+const shim = typeof document === 'undefined' ? server : client
+
+export const useSyncExternalStore: <T>(
+  subscribe: (cb: () => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+) => T = builtInAPI !== undefined ? builtInAPI : shim

package/src/uSES/useSyncExternalStoreShimClient.ts

@@ -0,0 +1,87 @@
+import * as React from 'react'
+const { useState, useEffect, useLayoutEffect, useDebugValue } = React
+
+let didWarnOld18Alpha = false
+let didWarnUncachedGetSnapshot = false
+
+export function useSyncExternalStore<T>(
+  subscribe: (cb: () => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  const value = getSnapshot()
+
+  // Because updates are synchronous, we don't queue them. Instead we force a
+  // re-render whenever the subscribed state changes by updating an some
+  // arbitrary useState hook. Then, during render, we call getSnapshot to read
+  // the current value.
+  //
+  // Because we don't actually use the state returned by the useState hook, we
+  // can save a bit of memory by storing other stuff in that slot.
+  //
+  // To implement the early bailout, we need to track some things on a mutable
+  // object. Usually, we would put that in a useRef hook, but we can stash it in
+  // our useState hook instead.
+  //
+  // To force a re-render, we call forceUpdate({inst}). That works because the
+  // new object always fails an equality check.
+  const [{ inst }, forceUpdate] = useState({ inst: { value, getSnapshot } })
+
+  // Track the latest getSnapshot function with a ref. This needs to be updated
+  // in the layout phase so we can access it during the tearing check that
+  // happens on subscribe.
+  useLayoutEffect(() => {
+    inst.value = value
+    inst.getSnapshot = getSnapshot
+
+    // Whenever getSnapshot or subscribe changes, we need to check in the
+    // commit phase if there was an interleaved mutation. In concurrent mode
+    // this can happen all the time, but even in synchronous mode, an earlier
+    // effect may have mutated the store.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({ inst })
+    }
+  }, [subscribe, value, getSnapshot])
+
+  useEffect(() => {
+    // Check for changes right before subscribing. Subsequent changes will be
+    // detected in the subscription handler.
+    if (checkIfSnapshotChanged(inst)) {
+      // Force a re-render.
+      forceUpdate({ inst })
+    }
+    const handleStoreChange = () => {
+      // TODO: Because there is no cross-renderer API for batching updates, it's
+      // up to the consumer of this library to wrap their subscription event
+      // with unstable_batchedUpdates. Should we try to detect when this isn't
+      // the case and print a warning in development?
+
+      // The store changed. Check if the snapshot changed since the last time we
+      // read from the store.
+      if (checkIfSnapshotChanged(inst)) {
+        // Force a re-render.
+        forceUpdate({ inst })
+      }
+    }
+    // Subscribe to the store and return a clean-up function.
+    return subscribe(handleStoreChange)
+  }, [subscribe])
+
+  useDebugValue(value)
+  return value
+}
+
+function checkIfSnapshotChanged<T>(inst: {
+  value: T
+  getSnapshot: () => T
+}): boolean {
+  const latestGetSnapshot = inst.getSnapshot
+  const prevValue = inst.value
+  try {
+    const nextValue = latestGetSnapshot()
+    return !Object.is(prevValue, nextValue)
+  } catch (error) {
+    return true
+  }
+}

package/src/uSES/useSyncExternalStoreShimServer.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export function useSyncExternalStore<T>(
+  subscribe: (cb: () => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+  // React do not expose a way to check if we're hydrating. So users of the shim
+  // will need to track that themselves and return the correct value
+  // from `getSnapshot`.
+  return getSnapshot()
+}

package/build/cjs/react-router/src/index.js

@@ -1,465 +0,0 @@
-/**
- * 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var shim = require('use-sync-external-store/shim');
-var index = require('../../router-core/build/esm/index.js');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-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 = ["children", "router"];
-//
-const matchesContext = /*#__PURE__*/React__namespace.createContext(null);
-const routerContext = /*#__PURE__*/React__namespace.createContext(null); // Detect if we're in the DOM
-
-const isDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-const useLayoutEffect = isDOM ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-function MatchesProvider(props) {
-  return /*#__PURE__*/React__namespace.createElement(matchesContext.Provider, props);
-}
-
-const useRouterSubscription = router => {
-  shim.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);
-        index.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
-          target,
-          activeProps = () => ({
-            className: 'active'
-          }),
-          inactiveProps = () => ({}),
-          disabled,
-          // element props
-          style,
-          className,
-          onClick,
-          onFocus,
-          onMouseEnter,
-          onMouseLeave
-        } = options,
-              rest = _rollupPluginBabelHelpers.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 composeHandlers = handlers => e => {
-          e.persist();
-          handlers.forEach(handler => {
-            if (handler) handler(e);
-          });
-        }; // Get the active props
-
-
-        const resolvedActiveProps = isActive ? (_functionalUpdate = index.functionalUpdate(activeProps, {})) != null ? _functionalUpdate : {} : {}; // Get the inactive props
-
-        const resolvedInactiveProps = isActive ? {} : (_functionalUpdate2 = index.functionalUpdate(inactiveProps, {})) != null ? _functionalUpdate2 : {};
-        return _rollupPluginBabelHelpers["extends"]({}, resolvedActiveProps, resolvedInactiveProps, rest, {
-          href: disabled ? undefined : next.href,
-          onClick: composeHandlers([handleClick, onClick]),
-          onFocus: composeHandlers([handleFocus, onFocus]),
-          onMouseEnter: composeHandlers([handleEnter, onMouseEnter]),
-          onMouseLeave: composeHandlers([handleLeave, onMouseLeave]),
-          target,
-          style: _rollupPluginBabelHelpers["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__namespace.forwardRef((props, ref) => {
-        const linkProps = route.linkProps(props);
-        useRouterSubscription(router);
-        return /*#__PURE__*/React__namespace.createElement("a", _rollupPluginBabelHelpers["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 = _rollupPluginBabelHelpers.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 = index.createRouter(_rollupPluginBabelHelpers["extends"]({}, opts, {
-    createRouter: router => {
-      const routerExt = {
-        useState: () => {
-          useRouterSubscription(router);
-          return router.state;
-        },
-        useMatch: routeId => {
-          useRouterSubscription(router);
-          index.invariant(routeId !== index.rootRouteId, "\"" + index.rootRouteId + "\" cannot be used with useMatch! Did you mean to useRoute(\"" + index.rootRouteId + "\")?");
-
-          const runtimeMatch = _useMatch();
-
-          const match = router.state.matches.find(d => d.routeId === routeId);
-          index.invariant(match, "Could not find a match for route \"" + routeId + "\" being rendered in this component!");
-          index.invariant(runtimeMatch.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 '" + runtimeMatch.routeId + "' route. Did you mean to 'useRoute(" + (match == null ? void 0 : match.routeId) + ")' instead?");
-
-          if (!match) {
-            index.invariant('Match not found!');
-          }
-
-          return match;
-        }
-      };
-      const routeExt = makeRouteExt(router.getRoute('/'), router);
-      Object.assign(router, routerExt, routeExt);
-    },
-    createRoute: _ref => {
-      let {
-        router,
-        route
-      } = _ref;
-      const routeExt = makeRouteExt(route, router);
-      Object.assign(route, routeExt);
-    },
-    createElement: async element => {
-      if (typeof element === 'function') {
-        const res = await element(); // Support direct import() calls
-
-        if (typeof res === 'object' && res.default) {
-          return /*#__PURE__*/React__namespace.createElement(res.default);
-        } else {
-          return res;
-        }
-      }
-
-      return element;
-    }
-  }));
-  return coreRouter;
-}
-function RouterProvider(_ref2) {
-  let {
-    children,
-    router
-  } = _ref2,
-      rest = _rollupPluginBabelHelpers.objectWithoutPropertiesLoose(_ref2, _excluded3);
-
-  router.update(rest);
-  useRouterSubscription(router);
-  useLayoutEffect(() => {
-    return router.mount();
-  }, [router]);
-  return /*#__PURE__*/React__namespace.createElement(routerContext.Provider, {
-    value: {
-      router
-    }
-  }, /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-    value: router.state.matches
-  }, children != null ? children : /*#__PURE__*/React__namespace.createElement(Outlet, null)));
-}
-
-function useRouter() {
-  const value = React__namespace.useContext(routerContext);
-  index.warning(!value, 'useRouter must be used inside a <Router> component!');
-  useRouterSubscription(value.router);
-  return value.router;
-}
-
-function useMatches() {
-  return React__namespace.useContext(matchesContext);
-} // function useParentMatches(): RouteMatch[] {
-//   const router = useRouter()
-//   const match = useMatch()
-//   const matches = router.state.matches
-//   return matches.slice(
-//     0,
-//     matches.findIndex((d) => d.matchId === match.matchId) - 1,
-//   )
-// }
-
-
-function _useMatch() {
-  var _useMatches;
-
-  return (_useMatches = useMatches()) == null ? void 0 : _useMatches[0];
-}
-
-function Outlet() {
-  var _childMatch$options$c;
-
-  const router = useRouter();
-  const [, ...matches] = useMatches();
-  const childMatch = matches[0];
-  if (!childMatch) return null;
-
-  const element = (() => {
-    var _childMatch$__$errorE, _ref4;
-
-    if (!childMatch) {
-      return null;
-    }
-
-    const errorElement = (_childMatch$__$errorE = childMatch.__.errorElement) != null ? _childMatch$__$errorE : router.options.defaultErrorElement;
-
-    if (childMatch.status === 'error') {
-      if (errorElement) {
-        return errorElement;
-      }
-
-      if (childMatch.options.useErrorBoundary || router.options.useErrorBoundary) {
-        throw childMatch.error;
-      }
-
-      return /*#__PURE__*/React__namespace.createElement(DefaultErrorBoundary, {
-        error: childMatch.error
-      });
-    }
-
-    if (childMatch.status === 'loading' || childMatch.status === 'idle') {
-      if (childMatch.isPending) {
-        var _childMatch$__$pendin;
-
-        const pendingElement = (_childMatch$__$pendin = childMatch.__.pendingElement) != null ? _childMatch$__$pendin : router.options.defaultPendingElement;
-
-        if (childMatch.options.pendingMs || pendingElement) {
-          var _ref3;
-
-          return (_ref3 = pendingElement) != null ? _ref3 : null;
-        }
-      }
-
-      return null;
-    }
-
-    return (_ref4 = childMatch.__.element) != null ? _ref4 : router.options.defaultElement;
-  })();
-
-  const catchElement = (_childMatch$options$c = childMatch == null ? void 0 : childMatch.options.catchElement) != null ? _childMatch$options$c : router.options.defaultCatchElement;
-  return /*#__PURE__*/React__namespace.createElement(MatchesProvider, {
-    value: matches,
-    key: childMatch.matchId
-  }, /*#__PURE__*/React__namespace.createElement(CatchBoundary, {
-    catchElement: catchElement
-  }, element));
-}
-
-class CatchBoundary extends React__namespace.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      error: false
-    };
-
-    this.reset = () => {
-      this.setState({
-        error: false,
-        info: false
-      });
-    };
-  }
-
-  componentDidCatch(error, info) {
-    console.error(error);
-    this.setState({
-      error,
-      info
-    });
-  }
-
-  render() {
-    var _this$props$catchElem;
-
-    const catchElement = (_this$props$catchElem = this.props.catchElement) != null ? _this$props$catchElem : DefaultErrorBoundary;
-
-    if (this.state.error) {
-      return typeof catchElement === 'function' ? catchElement(this.state) : catchElement;
-    }
-
-    return this.props.children;
-  }
-
-}
-
-function DefaultErrorBoundary(_ref5) {
-  let {
-    error
-  } = _ref5;
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5rem',
-      maxWidth: '100%'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("strong", {
-    style: {
-      fontSize: '1.2rem'
-    }
-  }, "Something went wrong!"), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      height: '.5rem'
-    }
-  }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("pre", null, error.message ? /*#__PURE__*/React__namespace.createElement("code", {
-    style: {
-      fontSize: '.7em',
-      border: '1px solid red',
-      borderRadius: '.25rem',
-      padding: '.5rem',
-      color: 'red'
-    }
-  }, error.message) : null)), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      height: '1rem'
-    }
-  }), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      fontSize: '.8em',
-      borderLeft: '3px solid rgba(127, 127, 127, 1)',
-      paddingLeft: '.5rem',
-      opacity: 0.5
-    }
-  }, "If you are the owner of this website, it's highly recommended that you configure your own custom Catch/Error boundaries for the router. You can optionally configure a boundary for each route."));
-}
-function usePrompt(message, when) {
-  const router = useRouter();
-  React__namespace.useEffect(() => {
-    if (!when) return;
-    let unblock = router.history.block(transition => {
-      if (window.confirm(message)) {
-        unblock();
-        transition.retry();
-      } else {
-        router.location.pathname = window.location.pathname;
-      }
-    });
-    return unblock;
-  }, [when, location, message]);
-}
-function Prompt(_ref6) {
-  let {
-    message,
-    when,
-    children
-  } = _ref6;
-  usePrompt(message, when != null ? when : true);
-  return children != null ? children : null;
-}
-
-exports.cascadeLoaderData = index.cascadeLoaderData;
-exports.cleanPath = index.cleanPath;
-exports.createBrowserHistory = index.createBrowserHistory;
-exports.createHashHistory = index.createHashHistory;
-exports.createMemoryHistory = index.createMemoryHistory;
-exports.createRoute = index.createRoute;
-exports.createRouteConfig = index.createRouteConfig;
-exports.createRouteMatch = index.createRouteMatch;
-exports.createRouter = index.createRouter;
-exports.decode = index.decode;
-exports.defaultParseSearch = index.defaultParseSearch;
-exports.defaultStringifySearch = index.defaultStringifySearch;
-exports.encode = index.encode;
-exports.functionalUpdate = index.functionalUpdate;
-exports.interpolatePath = index.interpolatePath;
-exports.invariant = index.invariant;
-exports.joinPaths = index.joinPaths;
-exports.last = index.last;
-exports.matchByPath = index.matchByPath;
-exports.matchPathname = index.matchPathname;
-exports.parsePathname = index.parsePathname;
-exports.parseSearchWith = index.parseSearchWith;
-exports.replaceEqualDeep = index.replaceEqualDeep;
-exports.resolvePath = index.resolvePath;
-exports.rootRouteId = index.rootRouteId;
-exports.stringifySearchWith = index.stringifySearchWith;
-exports.trimPath = index.trimPath;
-exports.trimPathLeft = index.trimPathLeft;
-exports.trimPathRight = index.trimPathRight;
-exports.warning = index.warning;
-exports.DefaultErrorBoundary = DefaultErrorBoundary;
-exports.MatchesProvider = MatchesProvider;
-exports.Outlet = Outlet;
-exports.Prompt = Prompt;
-exports.RouterProvider = RouterProvider;
-exports.createReactRouter = createReactRouter;
-exports.usePrompt = usePrompt;
-//# sourceMappingURL=index.js.map