Merge branch 'release-next'

brophdawg11 · brophdawg11 · commit 6be8e6c57d34 · 2024-01-11T11:31:36.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/packages/react-router-dom-v5-compat/CHANGELOG.md b/packages/react-router-dom-v5-compat/CHANGELOG.md
@@ -1,5 +1,13 @@
 # `react-router-dom-v5-compat`
 
+## 6.21.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.21.2`
+  - `react-router@6.21.2`
+
 ## 6.21.1
 
 ### Patch Changes
diff --git a/packages/react-router-dom-v5-compat/package.json b/packages/react-router-dom-v5-compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.21.1",
+  "version": "6.21.2",
   "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.21.1"
+    "react-router": "6.21.2"
   },
   "peerDependencies": {
     "react": ">=16.8",
diff --git a/packages/react-router-dom/CHANGELOG.md b/packages/react-router-dom/CHANGELOG.md
@@ -1,5 +1,14 @@
 # `react-router-dom`
 
+## 6.21.2
+
+### Patch Changes
+
+- Leverage `useId` for internal fetcher keys when available ([#11166](https://github.com/remix-run/react-router/pull/11166))
+- Updated dependencies:
+  - `@remix-run/router@1.14.2`
+  - `react-router@6.21.2`
+
 ## 6.21.1
 
 ### Patch Changes
diff --git a/packages/react-router-dom/__tests__/data-browser-router-test.tsx b/packages/react-router-dom/__tests__/data-browser-router-test.tsx
@@ -5368,9 +5368,11 @@ function testDomRouter(
             { window: getWindow("/") }
           );
           let { container } = render(<RouterProvider router={router} />);
-          expect(container.innerHTML).not.toMatch(/__\d+__,my-key/);
+          expect(container.innerHTML).not.toMatch(/my-key/);
           await waitFor(() =>
-            expect(container.innerHTML).toMatch(/__\d+__,my-key/)
+            // React `useId()` results in either `:r2a:` or `:rp:` depending on
+            // `DataBrowserRouter`/`DataHashRouter`
+            expect(container.innerHTML).toMatch(/(:r2a:|:rp:),my-key/)
           );
         });
       });
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -396,6 +396,8 @@ const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
 const FLUSH_SYNC = "flushSync";
 const flushSyncImpl = ReactDOM[FLUSH_SYNC];
+const USE_ID = "useId";
+const useIdImpl = React[USE_ID];
 
 function startTransitionSafe(cb: () => void) {
   if (startTransitionImpl) {
@@ -1634,10 +1636,14 @@ export function useFetcher<TData = any>({
   );
 
   // Fetcher key handling
-  let [fetcherKey, setFetcherKey] = React.useState<string>(key || "");
+  // OK to call conditionally to feature detect `useId`
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  let defaultKey = useIdImpl ? useIdImpl() : "";
+  let [fetcherKey, setFetcherKey] = React.useState<string>(key || defaultKey);
   if (key && key !== fetcherKey) {
     setFetcherKey(key);
   } else if (!fetcherKey) {
+    // We will only fall through here when `useId` is not available
     setFetcherKey(getUniqueFetcherId());
   }
 
diff --git a/packages/react-router-dom/package.json b/packages/react-router-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-dom",
-  "version": "6.21.1",
+  "version": "6.21.2",
   "description": "Declarative routing for React web applications",
   "keywords": [
     "react",
@@ -23,8 +23,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.14.1",
-    "react-router": "6.21.1"
+    "@remix-run/router": "1.14.2",
+    "react-router": "6.21.2"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router-native/CHANGELOG.md b/packages/react-router-native/CHANGELOG.md
@@ -1,5 +1,12 @@
 # `react-router-native`
 
+## 6.21.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.21.2`
+
 ## 6.21.1
 
 ### Patch Changes
@@ -219,20 +226,6 @@
 - Updated dependencies:
   - `react-router@6.14.1`
 
-## 6.14.1-pre.1
-
-### Patch Changes
-
-- Updated dependencies:
-  - `react-router@6.14.1-pre.1`
-
-## 6.14.1-pre.0
-
-### Patch Changes
-
-- Updated dependencies:
-  - `react-router@6.14.1-pre.0`
-
 ## 6.14.0
 
 ### Patch Changes
diff --git a/packages/react-router-native/package.json b/packages/react-router-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router-native",
-  "version": "6.21.1",
+  "version": "6.21.2",
   "description": "Declarative routing for React Native applications",
   "keywords": [
     "react",
@@ -22,7 +22,7 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@ungap/url-search-params": "^0.2.2",
-    "react-router": "6.21.1"
+    "react-router": "6.21.2"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
@@ -1,5 +1,12 @@
 # `react-router`
 
+## 6.21.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@remix-run/router@1.14.2`
+
 ## 6.21.1
 
 ### Patch Changes
diff --git a/packages/react-router/__tests__/generatePath-test.tsx b/packages/react-router/__tests__/generatePath-test.tsx
@@ -52,6 +52,12 @@ describe("generatePath", () => {
       // incorrect usage but worked in 6.3.0 so keep it to avoid the regression
       expect(generatePath("/courses/*", { "*": 0 })).toBe("/courses/0");
     });
+
+    it("handles dashes in dynamic params", () => {
+      expect(generatePath("/courses/:foo-bar", { "foo-bar": "baz" })).toBe(
+        "/courses/baz"
+      );
+    });
   });
 
   describe("with extraneous params", () => {
diff --git a/packages/react-router/__tests__/path-matching-test.tsx b/packages/react-router/__tests__/path-matching-test.tsx
@@ -130,6 +130,44 @@ describe("path matching", () => {
 
     expect(pickPaths(routes, "/page")).toEqual(["page"]);
   });
+
+  test("dynamic segments can contain dashes", () => {
+    let routes = [
+      {
+        path: ":foo-bar",
+      },
+      {
+        path: "foo-bar",
+      },
+    ];
+
+    expect(matchRoutes(routes, "/foo-bar")).toMatchInlineSnapshot(`
+      [
+        {
+          "params": {},
+          "pathname": "/foo-bar",
+          "pathnameBase": "/foo-bar",
+          "route": {
+            "path": "foo-bar",
+          },
+        },
+      ]
+    `);
+    expect(matchRoutes(routes, "/whatever")).toMatchInlineSnapshot(`
+      [
+        {
+          "params": {
+            "foo-bar": "whatever",
+          },
+          "pathname": "/whatever",
+          "pathnameBase": "/whatever",
+          "route": {
+            "path": ":foo-bar",
+          },
+        },
+      ]
+    `);
+  });
 });
 
 describe("path matching with a basename", () => {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-router",
-  "version": "6.21.1",
+  "version": "6.21.2",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@remix-run/router": "1.14.1"
+    "@remix-run/router": "1.14.2"
   },
   "devDependencies": {
     "react": "^18.2.0"
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
@@ -1,5 +1,12 @@
 # `@remix-run/router`
 
+## 1.14.2
+
+### Patch Changes
+
+- Fix bug where dashes were not picked up in dynamic parameter names ([#11160](https://github.com/remix-run/react-router/pull/11160))
+- Do not attempt to deserialize empty JSON responses ([#11164](https://github.com/remix-run/react-router/pull/11164))
+
 ## 1.14.1
 
 ### Patch Changes
diff --git a/packages/router/__tests__/navigation-test.ts b/packages/router/__tests__/navigation-test.ts
@@ -114,6 +114,24 @@ describe("navigations", () => {
       });
     });
 
+    // See: https://github.com/remix-run/react-router/issues/11145
+    it("does not attempt to deserialize empty json responses", async () => {
+      let t = initializeTest();
+      let A = await t.navigate("/foo");
+      await A.loaders.foo.resolve(
+        new Response(null, {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        })
+      );
+      expect(t.router.state.errors).toBeNull();
+      expect(t.router.state.loaderData).toMatchObject({
+        root: "ROOT",
+        foo: null,
+      });
+    });
+
     it("unwraps non-redirect text Responses", async () => {
       let t = initializeTest();
       let A = await t.navigate("/foo");
diff --git a/packages/router/package.json b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",
diff --git a/packages/router/router.ts b/packages/router/router.ts
@@ -4098,7 +4098,11 @@ async function callLoaderOrAction(
       // Check between word boundaries instead of startsWith() due to the last
       // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
       if (contentType && /\bapplication\/json\b/.test(contentType)) {
-        data = await result.json();
+        if (result.body == null) {
+          data = null;
+        } else {
+          data = await result.json();
+        }
       } else {
         data = await result.text();
       }
diff --git a/packages/router/utils.ts b/packages/router/utils.ts
@@ -685,7 +685,7 @@ function rankRouteBranches(branches: RouteBranch[]): void {
   );
 }
 
-const paramRe = /^:\w+$/;
+const paramRe = /^:[\w-]+$/;
 const dynamicSegmentValue = 3;
 const indexRouteValue = 2;
 const emptySegmentValue = 1;
@@ -822,7 +822,7 @@ export function generatePath<Path extends string>(
         return stringify(params[star]);
       }
 
-      const keyMatch = segment.match(/^:(\w+)(\??)$/);
+      const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
       if (keyMatch) {
         const [, key, optional] = keyMatch;
         let param = params[key as PathParam<Path>];
@@ -967,10 +967,13 @@ function compilePath(
       .replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
       .replace(/^\/*/, "/") // Make sure it has a leading /
       .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
-      .replace(/\/:(\w+)(\?)?/g, (_: string, paramName: string, isOptional) => {
-        params.push({ paramName, isOptional: isOptional != null });
-        return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
-      });
+      .replace(
+        /\/:([\w-]+)(\?)?/g,
+        (_: string, paramName: string, isOptional) => {
+          params.push({ paramName, isOptional: isOptional != null });
+          return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
+        }
+      );
 
   if (path.endsWith("*")) {
     params.push({ paramName: "*" });
