react-router 6.3.0 → 6.4.0-pre.3

package/lib/use-sync-external-store-shim/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Inlined into the react-router repo since use-sync-external-store does not
+ * provide a UMD-compatible package, so we need this to be able to distribute
+ * UMD react-router bundles
+ */
+
+/**
+ * Copyright (c) Facebook, Inc. and its 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 * as React from "react";
+
+import { useSyncExternalStore as client } from "./useSyncExternalStoreShimClient";
+import { useSyncExternalStore as server } from "./useSyncExternalStoreShimServer";
+
+const canUseDOM: boolean = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);
+const isServerEnvironment = !canUseDOM;
+const shim = isServerEnvironment ? server : client;
+
+export const useSyncExternalStore =
+  // @ts-expect-error
+  React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;

package/lib/use-sync-external-store-shim/useSyncExternalStoreShimClient.ts

@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from "react";
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function isPolyfill(x: any, y: any) {
+  return (
+    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
+  );
+}
+
+const is: (x: any, y: any) => boolean =
+  typeof Object.is === "function" ? Object.is : isPolyfill;
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+const { useState, useEffect, useLayoutEffect, useDebugValue } = React;
+
+let didWarnOld18Alpha = false;
+let didWarnUncachedGetSnapshot = false;
+
+// Disclaimer: This shim breaks many of the rules of React, and only works
+// because of a very particular set of implementation details and assumptions
+// -- change any one of them and it will break. The most important assumption
+// is that updates are always synchronous, because concurrent rendering is
+// only available in versions of React that also have a built-in
+// useSyncExternalStore API. And we only use this shim when the built-in API
+// does not exist.
+//
+// Do not assume that the clever hacks used by this hook also work in general.
+// The point of this shim is to replace the need for hacks by other libraries.
+export function useSyncExternalStore<T>(
+  subscribe: (fn: () => void) => () => void,
+  getSnapshot: () => 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`.
+  getServerSnapshot?: () => T
+): T {
+  if (__DEV__) {
+    if (!didWarnOld18Alpha) {
+      // @ts-expect-error
+      if (React.startTransition !== undefined) {
+        didWarnOld18Alpha = true;
+        console.error(
+          "You are using an outdated, pre-release alpha of React 18 that " +
+            "does not support useSyncExternalStore. The " +
+            "use-sync-external-store shim will not work correctly. Upgrade " +
+            "to a newer pre-release."
+        );
+      }
+    }
+  }
+
+  // Read the current snapshot from the store on every render. Again, this
+  // breaks the rules of React, and only works here because of specific
+  // implementation details, most importantly that updates are
+  // always synchronous.
+  const value = getSnapshot();
+  if (__DEV__) {
+    if (!didWarnUncachedGetSnapshot) {
+      const cachedValue = getSnapshot();
+      if (!is(value, cachedValue)) {
+        console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        );
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  }
+
+  // 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 });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscribe]);
+
+  useDebugValue(value);
+  return value;
+}
+
+function checkIfSnapshotChanged(inst: any) {
+  const latestGetSnapshot = inst.getSnapshot;
+  const prevValue = inst.value;
+  try {
+    const nextValue = latestGetSnapshot();
+    return !is(prevValue, nextValue);
+  } catch (error) {
+    return true;
+  }
+}

package/lib/use-sync-external-store-shim/useSyncExternalStoreShimServer.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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: (fn: () => 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/node-main.js

@@ -0,0 +1,7 @@
+/* eslint-env node */
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./umd/react-router.production.min.js");
+} else {
+  module.exports = require("./umd/react-router.development.js");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.3.0",
+  "version": "6.4.0-pre.3",
   "author": "Remix Software <hello@remix.run>",
   "description": "Declarative routing for React",
   "repository": {
@@ -13,12 +13,15 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "unpkg": "./umd/react-router.production.min.js",
+  "dependencies": {
+    "@remix-run/router": "0.2.0-pre.0"
+  },
+  "devDependencies": {
+    "react": "^17.0.2"
+  },
   "peerDependencies": {
     "react": ">=16.8"
   },
-  "dependencies": {
-    "history": "^5.2.0"
-  },
   "sideEffects": false,
   "keywords": [
     "react",

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "files": ["index.ts"],
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+
+    "strict": true,
+    "jsx": "react",
+
+    "declaration": true,
+    "emitDeclarationOnly": true,
+
+    "skipLibCheck": true,
+
+    "outDir": "../../build/node_modules/react-router",
+    "rootDir": "."
+  }
+}

package/LICENSE.md

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2021
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/index.d.ts

@@ -1,14 +0,0 @@
-import type { Hash, Location, Path, Pathname, Search, To } from "history";
-import { Action as NavigationType, parsePath, createPath } from "history";
-import type { MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
-import { createRoutesFromChildren, renderMatches, MemoryRouter, Navigate, Outlet, Route, Router, Routes } from "./lib/components";
-import type { Navigator } from "./lib/context";
-import { LocationContext, NavigationContext, RouteContext } from "./lib/context";
-import type { NavigateFunction, NavigateOptions } from "./lib/hooks";
-import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes } from "./lib/hooks";
-import type { Params, PathMatch, PathPattern, RouteMatch, RouteObject } from "./lib/router";
-import { generatePath, matchPath, matchRoutes, resolvePath } from "./lib/router";
-export type { Hash, IndexRouteProps, LayoutRouteProps, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, OutletProps, PathMatch, PathPattern, PathRouteProps, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Navigator, Params, Path, Pathname, Search, To, };
-export { MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, };
-/** @internal */
-export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, };