Merge branch 'main' into release-next

.github/workflows/release-experimental.yml

@@ -1,25 +1,28 @@
-name: 🚀 Release (experimental)
+name: 🧪 Experimental Release
+
 on:
-  push:
-    tags:
-      - "v0.0.0-experimental*"
+  workflow_dispatch:
+    inputs:
+      branch:
+        required: true
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 env:
   CI: true
 
 jobs:
-  release:
-    name: 🧑‍🔬 Experimental Release
-    if: |
-      github.repository == 'remix-run/react-router' &&
-      contains(github.ref, 'experimental')
+  experimental:
+    name: 🧪 Experimental Release
+    if: github.repository == 'remix-run/react-router'
     runs-on: ubuntu-latest
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
         with:
+          ref: ${{ github.event.inputs.branch }}
+          # checkout using a custom token so that we can push later on
+          token: ${{ secrets.GITHUB_TOKEN }}
           fetch-depth: 0
 
       - name: 📦 Setup pnpm
@@ -28,12 +31,22 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          cache: pnpm
           node-version-file: ".nvmrc"
+          cache: "pnpm"
 
       - name: 📥 Install deps
         run: pnpm install --frozen-lockfile
 
+      - name: ⤴️ Update version
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "Remix Run Bot"
+          SHORT_SHA=$(git rev-parse --short HEAD)
+          NEXT_VERSION=0.0.0-experimental-${SHORT_SHA}
+          git checkout -b experimental/${NEXT_VERSION}
+          pnpm run version ${NEXT_VERSION}
+          git push origin --tags
+
       - name: 🏗 Build
         run: pnpm build
 

contributors.yml

@@ -49,6 +49,7 @@
 - chensokheng
 - chrisngobanh
 - christopherchudzicki
+- ChristophP
 - christowiz
 - codeape2
 - coryhouse
@@ -60,6 +61,7 @@
 - david-bezero
 - david-crespo
 - decadentsavant
+- dgrijuela
 - DigitalNaut
 - dmitrytarassov
 - dokeet
@@ -75,6 +77,7 @@
 - ericschn
 - faergeek
 - FilipJirsak
+- focusotter
 - frontsideair
 - fyzhu
 - fz6m
@@ -125,6 +128,8 @@
 - kachun333
 - Kakamotobi
 - kantuni
+- kapil-patel
+- kapilepatel
 - KaranRandhir
 - kark
 - KAROTT7
@@ -174,9 +179,11 @@
 - mikib0
 - minami-minami
 - minthulim
+- mlewando
 - modex98
 - morleytatro
 - ms10596
+- mtliendo
 - ned-park
 - nilubisan
 - Nismit
@@ -202,6 +209,7 @@
 - ryanflorence
 - ryanhiebert
 - sanketshah19
+- saul-atomrigs
 - sbolel
 - scarf005
 - senseibarni

docs/components/link.md

@@ -91,7 +91,7 @@ function EditContact() {
 }
 ```
 
-Please note that `relative: "path"` only impacts the resolution of a relative path. It does not change the the "starting" location for that relative path resolution. This resolution is always relative to the current location in the Route hierarchy (i.e., the route `Link` is rendered in).
+Please note that `relative: "path"` only impacts the resolution of a relative path. It does not change the "starting" location for that relative path resolution. This resolution is always relative to the current location in the Route hierarchy (i.e., the route `Link` is rendered in).
 
 If you wish to use path-relative routing against the current URL instead of the route hierarchy, you can do that with the current [`location`][use-location] and the `URL` constructor (note the trailing slash behavior):
 
@@ -107,7 +107,7 @@ new URL("..", window.origin + location.pathname);
 
 // With trailing slashes:
 new URL(".", window.origin + location.pathname + "/");
-// 'https://remix.run/docs/en/main/start/future-flags/'
+// 'https://remix.run/docs/en/main/start/quickstart/'
 new URL("..", window.origin + location.pathname + "/");
 // 'https://remix.run/docs/en/main/start/'
 ```

docs/route/loader.md

@@ -87,7 +87,7 @@ Note that the APIs here are not React Router specific, but rather standard web o
 
 ## `loader.hydrate`
 
-If you are [Server-Side Rendering][ssr] and leveraging the `fututre.v7_partialHydration` flag for [Partial Hydration][partialhydration], then you may wish to opt-into running a route `loader` on initial hydration _even though it has hydration data_ (for example, to let a user prime a cache with the hydration data). To force a `loader` to run on hydration in a partial hydration scenario, you can set a `hydrate` property on the `loader` function:
+If you are [Server-Side Rendering][ssr] and leveraging the `future.v7_partialHydration` flag for [Partial Hydration][partialhydration], then you may wish to opt-into running a route `loader` on initial hydration _even though it has hydration data_ (for example, to let a user prime a cache with the hydration data). To force a `loader` to run on hydration in a partial hydration scenario, you can set a `hydrate` property on the `loader` function:
 
 ## Returning Responses
 

docs/routers/create-browser-router.md

@@ -297,14 +297,14 @@ const routes [
 ];
 
 let router = createBrowserRouter(routes, {
-  unstable_dataStrategy({ request, params, matches }) {
+  async unstable_dataStrategy({ request, params, matches }) {
     // Run middleware sequentially and let them add data to `context`
     let context = {};
-    for (match of matches) {
+    for (const match of matches) {
       if (match.route.handle?.middleware) {
         await match.route.handle.middleware({ request, params }, context);
       }
-    });
+    }
 
     // Run loaders in parallel with the `context` value
     return Promise.all(

docs/start/tutorial.md

@@ -768,14 +768,14 @@ export default function EditContact() {
           aria-label="First name"
           type="text"
           name="first"
-          defaultValue={contact.first}
+          defaultValue={contact?.first}
         />
         <input
           placeholder="Last"
           aria-label="Last name"
           type="text"
           name="last"
-          defaultValue={contact.last}
+          defaultValue={contact?.last}
         />
       </p>
       <label>
@@ -784,7 +784,7 @@ export default function EditContact() {
           type="text"
           name="twitter"
           placeholder="@jack"
-          defaultValue={contact.twitter}
+          defaultValue={contact?.twitter}
         />
       </label>
       <label>
@@ -794,14 +794,14 @@ export default function EditContact() {
           aria-label="Avatar URL"
           type="text"
           name="avatar"
-          defaultValue={contact.avatar}
+          defaultValue={contact?.avatar}
         />
       </label>
       <label>
         <span>Notes</span>
         <textarea
           name="notes"
-          defaultValue={contact.notes}
+          defaultValue={contact?.notes}
           rows={6}
         />
       </label>

docs/upgrading/v6-data.md

@@ -97,7 +97,7 @@ import {
 
 // 3️⃣ Router singleton created
 const router = createBrowserRouter([
-  { path: "*", Component: Root },
+  { path: "*", element: <Root /> },
 ]);
 
 // 4️⃣ RouterProvider added
@@ -133,12 +133,12 @@ function UserApp() {
 
 ### Start lifting routes and leveraging the data APIs
 
-Let's start with the `/` route for the `<Home>` component. All we need to do is lift the `<Route>` definition up to the data router:
+Let's start with the `/` route for the `<Home>` element. All we need to do is lift the `<Route>` definition up to the data router:
 
 ```tsx lines=[2,13]
 const router = createBrowserRouter([
-  { path: "/", Component: Home }, // 🆕
-  { path: "*", Component: Root },
+  { path: "/", element: <Home /> }, // 🆕
+  { path: "*", element: <Root /> },
 ]);
 
 export default function App() {
@@ -162,18 +162,18 @@ Now let's look at lifting the Blog App upwards, but still doing it one leaf rout
 
 ```tsx lines=[3-12,23,32]
 const router = createBrowserRouter([
-  { path: "/", Component: Home },
+  { path: "/", element: <Home /> },
   {
     // Lifted blog splat route
     path: "/blog/*",
     children: [
       // New blog index route
-      { index: true, Component: () => <h1>Blog Index</h1> },
+      { index: true, element: <h1>Blog Index</h1> },
       // Blog subapp splat route added for /blog/posts matching
-      { path: "*", Component: BlogApp },
+      { path: "*", element: <BlogApp /> },
     ],
   },
-  { path: "*", Component: Root },
+  { path: "*", element: <Root /> },
 ]);
 
 export default function App() {