Merge branch 'release-next'

Author: brophdawg11

contributors.yml

@@ -22,6 +22,7 @@
 - bobziroll
 - BrianT1414
 - brockross
+- brookslybrand
 - brophdawg11
 - btav
 - bvangraafeiland
@@ -145,6 +146,7 @@
 - shamsup
 - shihanng
 - shivamsinghchahar
+- SimenB
 - SkayuX
 - souzasmatheus
 - srmagura
@@ -171,3 +173,4 @@
 - xavier-lc
 - xcsnowcity
 - yuleicul
+- jakkku

docs/components/form.md

@@ -215,6 +215,16 @@ See also:
 - [`useActionData`][useactiondata]
 - [`useSubmit`][usesubmit]
 
+## `preventScrollReset`
+
+If you are using [`<ScrollRestoration>`][scrollrestoration], this lets you prevent the scroll position from being reset to the top of the window when the form action redirects to a new location.
+
+```tsx
+<Form method="post" preventScrollReset={true} />
+```
+
+See also: [`<Link preventScrollReset>`][link-preventscrollreset]
+
 # Examples
 
 TODO: More examples
@@ -318,3 +328,5 @@ You can access those values from the `request.url`
 [formvalidation]: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
 [indexsearchparam]: ../guides/index-search-param
 [pickingarouter]: ../routers/picking-a-router
+[scrollrestoration]: ./scroll-restoration
+[link-preventscrollreset]: ./link#preventscrollreset

docs/components/scroll-restoration.md

@@ -83,13 +83,14 @@ Or you may want to only use the pathname for some paths, and use the normal beha
 
 ## Preventing Scroll Reset
 
-When navigation creates new scroll keys, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links:
+When navigation creates new scroll keys, the scroll position is reset to the top of the page. You can prevent the "scroll to top" behavior from your links and forms:
 
 ```tsx
 <Link preventScrollReset={true} />
+<Form preventScrollReset={true} />
 ```
 
-See also: [`<Link preventScrollReset>`][preventscrollreset]
+See also: [`<Link preventScrollReset>`][preventscrollreset], [`<Form preventScrollReset>`][form-preventscrollreset]
 
 ## Scroll Flashing
 
@@ -99,4 +100,5 @@ Server Rendering frameworks can prevent scroll flashing because they can send a
 
 [remix]: https://remix.run
 [preventscrollreset]: ../components/link#preventscrollreset
+[form-preventscrollreset]: ../components/form#preventscrollreset
 [pickingarouter]: ../routers/picking-a-router

package.json

@@ -8,10 +8,6 @@
       "packages/react-router-dom-v5-compat",
       "packages/react-router-native",
       "packages/router"
-    ],
-    "nohoist": [
-      "**/react-native",
-      "**/react-native/**"
     ]
   },
   "scripts": {
@@ -59,7 +55,7 @@
     "@rollup/plugin-typescript": "^8.3.2",
     "@testing-library/jest-dom": "5.16.3",
     "@testing-library/react": "^13.3.0",
-    "@types/jest": "26.x",
+    "@types/jest": "29.x",
     "@types/jsdom": "16.2.14",
     "@types/jsonfile": "^6.0.1",
     "@types/react": "^18.0.15",
@@ -71,7 +67,7 @@
     "@typescript-eslint/parser": "^4.28.3",
     "abort-controller": "^3.0.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^29.0.3",
     "babel-plugin-dev-expression": "^0.2.2",
     "chalk": "^4.1.1",
     "cheerio": "^1.0.0-rc.10",
@@ -85,9 +81,9 @@
     "eslint-plugin-react-hooks": "next",
     "fs-extra": "^10.1.0",
     "history": "^5.3.0",
-    "jest": "^26.6.3",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "jsonfile": "^6.1.0",
-    "metro-react-native-babel-preset": "^0.57.0",
     "patch-package": "^6.4.7",
     "prettier": "^2.5.1",
     "prompt-confirm": "^2.0.4",
@@ -100,7 +96,6 @@
     "rollup-plugin-prettier": "^2.2.2",
     "rollup-plugin-terser": "^7.0.2",
     "semver": "^7.3.5",
-    "ts-jest": "^26.5.6",
     "type-fest": "^2.13.0",
     "typescript": "^4.7.3"
   },
@@ -109,7 +104,7 @@
   },
   "filesize": {
     "packages/router/dist/router.umd.min.js": {
-      "none": "41 kB"
+      "none": "41.5 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
       "none": "13 kB"
@@ -121,7 +116,7 @@
       "none": "11.5 kB"
     },
     "packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
-      "none": "17 kB"
+      "none": "17.5 kB"
     }
   }
 }

packages/react-router-dom-v5-compat/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `react-router-dom-v5-compat`
 
+## 6.8.0
+
+### Patch Changes
+
+- Fix SSR `useLayoutEffect` `console.error` when using `CompatRouter` ([#9820](https://github.com/remix-run/react-router/pull/9820))
+- Updated dependencies:
+  - `[email protected]`
+  - `[email protected]`
+
 ## 6.7.0
 
 ### Patch Changes

packages/react-router-dom-v5-compat/__tests__/compat-router-test.tsx

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment node
+ */
+import * as React from "react";
+import * as ReactDOMServer from "react-dom/server";
+import { act } from "react-dom/test-utils";
+import { CompatRouter, Routes } from "../index";
+
+// Have to mock react-router-dom to have a comparable API to v5, otherwise it will
+// be using v6's API and fail
+jest.mock("react-router-dom", () => ({
+  useHistory: () => ({ location: "/" }),
+}));
+
+describe("CompatRouter", () => {
+  it("should not warn about useLayoutEffect when server side rendering", () => {
+    const consoleErrorSpy = jest.spyOn(console, "error");
+
+    act(() => {
+      ReactDOMServer.renderToStaticMarkup(
+        <CompatRouter>
+          <Routes />
+        </CompatRouter>
+      );
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledTimes(0);
+    consoleErrorSpy.mockRestore();
+  });
+});

packages/react-router-dom-v5-compat/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  testEnvironment: "jsdom",
   testMatch: ["**/__tests__/*-test.[jt]s?(x)"],
   transform: {
     "\\.[jt]sx?$": "./jest-transformer.js",
@@ -9,6 +10,13 @@ module.exports = {
   setupFiles: ["./__tests__/setup.ts"],
   moduleNameMapper: {
     "^@remix-run/router$": "<rootDir>/../router/index.ts",
+    "^@remix-run/web-blob$": require.resolve("@remix-run/web-blob"),
+    "^@remix-run/web-fetch$": require.resolve("@remix-run/web-fetch"),
+    "^@remix-run/web-form-data$": require.resolve("@remix-run/web-form-data"),
+    "^@remix-run/web-stream$": require.resolve("@remix-run/web-stream"),
+    "^@web3-storage/multipart-parser$": require.resolve(
+      "@web3-storage/multipart-parser"
+    ),
     "^react-router$": "<rootDir>/../react-router/index.ts",
     "^react-router-dom-v5-compat$": "<rootDir>/index.ts",
   },

packages/react-router-dom-v5-compat/lib/components.tsx

@@ -23,14 +23,25 @@ export function CompatRoute(props: any) {
   );
 }
 
+// Copied with 💜 from https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts
+const canUseEffectHooks = !!(
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"
+);
+
+const useIsomorphicLayoutEffect = canUseEffectHooks
+  ? React.useLayoutEffect
+  : () => {};
+
 export function CompatRouter({ children }: { children: React.ReactNode }) {
   let history = useHistory();
   let [state, setState] = React.useState(() => ({
     location: history.location,
     action: history.action,
   }));
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     history.listen((location: Location, action: Action) =>
       setState({ location, action })
     );

packages/react-router-dom-v5-compat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "Migration path to React Router v6 from v4/5",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "history": "^5.3.0",
-    "react-router": "6.7.0"
+    "react-router": "6.8.0"
   },
   "peerDependencies": {
     "react": ">=16.8",

packages/react-router-dom/CHANGELOG.md

@@ -1,5 +1,27 @@
 # `react-router-dom`
 
+## 6.8.0
+
+### Minor Changes
+
+- Support absolute URLs in `<Link to>`. If the URL is for the current origin, it will still do a client-side navigation. If the URL is for a different origin then it will do a fresh document request for the new origin. ([#9900](https://github.com/remix-run/react-router/pull/9900))
+
+  ```tsx
+  <Link to="https://neworigin.com/some/path">    {/* Document request */}
+  <Link to="//neworigin.com/some/path">          {/* Document request */}
+  <Link to="https://www.currentorigin.com/path"> {/* Client-side navigation */}
+  ```
+
+### Patch Changes
+
+- Fix bug with search params removal via `useSearchParams` ([#9969](https://github.com/remix-run/react-router/pull/9969))
+- Respect `preventScrollReset` on `<fetcher.Form>` ([#9963](https://github.com/remix-run/react-router/pull/9963))
+- Fix navigation for hash routers on manual URL changes ([#9980](https://github.com/remix-run/react-router/pull/9980))
+- Use `pagehide` instead of `beforeunload` for `<ScrollRestoration>`. This has better cross-browser support, specifically on Mobile Safari. ([#9945](https://github.com/remix-run/react-router/pull/9945))
+- Updated dependencies:
+  - `@remix-run/[email protected]`
+  - `[email protected]`
+
 ## 6.7.0
 
 ### Minor Changes