fix(remix-react): Bump RR for removal of useSyncExternalStore (remi…

…x-run#6121)
nimaa77 · Apr 26, 2023 · c8de6e3 · c8de6e3
1 parent 77b7fda
commit c8de6e3
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 40 deletions.
diff --git a/.changeset/remove-use-sync-external-store.md b/.changeset/remove-use-sync-external-store.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Update Remix for React Router no longer relying on `useSyncExternalStore`
diff --git a/package.json b/package.json
@@ -84,7 +84,6 @@
     "@types/retry": "^0.12.0",
     "@types/semver": "^7.3.4",
     "@types/ssri": "^7.1.0",
-    "@types/use-sync-external-store": "^0.0.3",
     "@vanilla-extract/css": "^1.1.0",
     "abort-controller": "^3.0.0",
     "abortcontroller-polyfill": "^1.7.3",

diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
@@ -1,9 +1,7 @@
 import type { HydrationState, Router } from "@remix-run/router";
 import type { ReactElement } from "react";
 import * as React from "react";
-import type { Location } from "react-router-dom";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
 
 import { RemixContext } from "./components";
 import type { EntryContext, FutureConfig } from "./entry";
@@ -134,6 +132,7 @@ if (import.meta && import.meta.hot) {
           // Abort if a new update comes in while we're waiting for the
           // router to be idle.
           if (signal.aborted) return;
+          // Ensure RouterProvider setState has flushed before re-rendering
           setTimeout(() => {
             Object.assign(window.__remixManifest, assetsManifest);
             window.$RefreshRuntime$.performReactRefresh();
@@ -180,16 +179,20 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
     });
   }
 
+  let [location, setLocation] = React.useState(router.state.location);
+
+  React.useLayoutEffect(() => {
+    return router.subscribe((newState) => {
+      if (newState.location !== location) {
+        setLocation(newState.location);
+      }
+    });
+  }, [location]);
+
   // We need to include a wrapper RemixErrorBoundary here in case the root error
   // boundary also throws and we need to bubble up outside of the router entirely.
   // Then we need a stateful location here so the user can back-button navigate
   // out of there
-  let location: Location = useSyncExternalStore(
-    router.subscribe,
-    () => router.state.location,
-    () => router.state.location
-  );
-
   return (
     <RemixContext.Provider
       value={{

diff --git a/packages/remix-react/package.json b/packages/remix-react/package.json
@@ -16,9 +16,8 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.5.0",
-    "react-router-dom": "6.10.0",
-    "use-sync-external-store": "1.2.0"
+    "@remix-run/router": "1.6.0-pre.0",
+    "react-router-dom": "6.11.0-pre.1"
   },
   "devDependencies": {
     "@remix-run/server-runtime": "1.15.0",

diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx
@@ -195,6 +195,7 @@ function createShouldRevalidate(
       handledRevalidation = true;
       return needsRevalidation;
     }
+
     return arg.defaultShouldRevalidate;
   };
 }

diff --git a/packages/remix-server-runtime/package.json b/packages/remix-server-runtime/package.json
@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.5.0",
+    "@remix-run/router": "1.6.0-pre.0",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",
     "set-cookie-parser": "^2.4.8",

diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
@@ -18,8 +18,8 @@
   "dependencies": {
     "@remix-run/node": "1.15.0",
     "@remix-run/react": "1.15.0",
-    "@remix-run/router": "1.5.0",
-    "react-router-dom": "6.10.0"
+    "@remix-run/router": "1.6.0-pre.0",
+    "react-router-dom": "6.11.0-pre.1"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",

diff --git a/scripts/bump-router-versions.sh b/scripts/bump-router-versions.sh
@@ -0,0 +1,35 @@
+#!/bin/bash
+
+VERSION="${1}"
+
+if [ "${VERSION}" == "" ]; then
+  VERSION="latest"
+fi
+
+echo "Updating all router versions to ${VERSION}"
+
+
+if [ ! -d "packages/remix-server-runtime" ]; then
+  echo "Must be run from the remix repository"
+  exit 1
+fi
+
+set -x
+
+cd packages/remix-server-runtime
+yarn add -E @remix-run/router@${VERSION}
+cd ../..
+
+# cd packages/remix-express
+# yarn add -E @remix-run/router@${VERSION}
+# cd ../..
+
+cd packages/remix-react
+yarn add -E @remix-run/router@${VERSION} react-router-dom@${VERSION}
+cd ../..
+
+cd packages/remix-testing
+yarn add -E @remix-run/router@${VERSION} react-router-dom@${VERSION}
+cd ../..
+
+set +x
diff --git a/yarn.lock b/yarn.lock
@@ -2467,10 +2467,10 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@1.5.0":
-  version "1.5.0"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
-  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
+"@remix-run/router@1.6.0-pre.0":
+  version "1.6.0-pre.0"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.6.0-pre.0.tgz#feaf7da8fc2f2ed1c764b82925867c154291f1a4"
+  integrity sha512-5NxLiXhnnAItn69LXumQvonUMMp58DaqF+IOuMLGm9gwkqi5M6Lejn1kUcR1MZeyhbBAqYAWws/ZAkyz89cfjg==
 
 "@remix-run/web-blob@^3.0.3", "@remix-run/web-blob@^3.0.4":
   version "3.0.4"
@@ -3332,11 +3332,6 @@
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
-"@types/use-sync-external-store@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
-  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
-
 "@types/ws@^7.4.1":
   version "7.4.7"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-7.4.7.tgz"
@@ -11193,20 +11188,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@6.10.0:
-  version "6.10.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
-  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
+react-router-dom@6.11.0-pre.1:
+  version "6.11.0-pre.1"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.0-pre.1.tgz#66e076c2777108b2bac1729e33bde9161a8e83f5"
+  integrity sha512-EEdmUk06pGPrjU87mFxKlQQMc5a/RIMA2gEwnmdAyIHdo/FAWGb917yOEDIh4pnv/wH0eSX0Wgsnuua9/k6X+g==
   dependencies:
-    "@remix-run/router" "1.5.0"
-    react-router "6.10.0"
+    "@remix-run/router" "1.6.0-pre.0"
+    react-router "6.11.0-pre.1"
 
-react-router@6.10.0:
-  version "6.10.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
-  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
+react-router@6.11.0-pre.1:
+  version "6.11.0-pre.1"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.11.0-pre.1.tgz#cbeade3bec425aab45e0a49060c7735ba98a8bbb"
+  integrity sha512-CBOpqUysQxG598u9I0ngzoXXxMXYDEkBW6sSL9O1xyFJg3dYa0ytaVlKap9QAKOYsYTiMlkMiAGFKbyp81ErHA==
   dependencies:
-    "@remix-run/router" "1.5.0"
+    "@remix-run/router" "1.6.0-pre.0"
 
 react@^18.2.0:
   version "18.2.0"
@@ -13124,11 +13119,6 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-[email protected]:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
-Original file line number
+Diff line change
@@ Expand Up / @@ -195,6 +195,7 @@ function createShouldRevalidate( @@
           handledRevalidation = true;
           return needsRevalidation;
         }
         return arg.defaultShouldRevalidate;
       };
     }
@@ Expand Down @@