Merge branch 'main' into release-next

Author: brophdawg11

.github/workflows/release-nightly.yml

@@ -0,0 +1,95 @@
+name: 🌒 Nightly Release
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 7 * * *" # every day at 12AM PST
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  CI: true
+
+jobs:
+  # HEADS UP! this "nightly" job will only ever run on the `main` branch due to
+  # it being a cron job, and the last commit on main will be what github shows
+  # as the trigger however in the checkout below we specify the `v7` branch,
+  # so all the scripts in this job will be ran from that, confusing i know, so
+  # in some cases we'll need to create multiple PRs when modifying nightly
+  # release processes
+  nightly:
+    name: 🌒 Nightly Release
+    if: github.repository == 'remix-run/react-router'
+    runs-on: ubuntu-latest
+    outputs:
+      # allows this to be used in the `comment` job below - will be undefined
+      # if there's no release necessary
+      NEXT_VERSION: ${{ steps.version.outputs.NEXT_VERSION }}
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+        with:
+          ref: v7
+          # checkout using a custom token so that we can push later on
+          token: ${{ secrets.GITHUB_TOKEN }}
+          fetch-depth: 0
+
+      - name: 📦 Setup pnpm
+        uses: pnpm/[email protected]
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: 📥 Install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: 🕵️ Check for changes
+        id: version
+        run: |
+          SHORT_SHA=$(git rev-parse --short HEAD)
+
+          # get latest nightly tag
+          LATEST_NIGHTLY_TAG=$(git tag -l v0.0.0-nightly-\* --sort=-creatordate | head -n 1)
+
+          # check if last commit to v7 starts with the nightly tag we're about
+          # to create (minus the date)
+          # if it is, we'll skip the nightly creation
+          # if not, we'll create a new nightly tag
+          if [[ ${LATEST_NIGHTLY_TAG} == v0.0.0-nightly-${SHORT_SHA}-* ]]; then
+            echo "🛑 Latest nightly tag is the same as the latest commit sha, skipping nightly release"
+          else
+            # yyyyMMdd format (e.g. 20221207)
+            DATE=$(date '+%Y%m%d')
+            # v0.0.0-nightly-<short sha>-<date>
+            NEXT_VERSION=0.0.0-nightly-${SHORT_SHA}-${DATE}
+            # set output so it can be used in other jobs
+            echo "NEXT_VERSION=${NEXT_VERSION}" >> $GITHUB_OUTPUT
+          fi
+
+      - name: ⤴️ Update version
+        if: steps.version.outputs.NEXT_VERSION
+        run: |
+          git config --local user.email "[email protected]"
+          git config --local user.name "Remix Run Bot"
+          git checkout -b nightly/${{ steps.version.outputs.NEXT_VERSION }}
+          pnpm run version ${{steps.version.outputs.NEXT_VERSION}}
+          git push origin --tags
+
+      - name: 🏗 Build
+        if: steps.version.outputs.NEXT_VERSION
+        run: pnpm build
+
+      - name: 🔐 Setup npm auth
+        if: steps.version.outputs.NEXT_VERSION
+        run: |
+          echo "registry=https://registry.npmjs.org" >> ~/.npmrc
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
+
+      - name: 🚀 Publish
+        if: steps.version.outputs.NEXT_VERSION
+        run: pnpm run publish

CHANGELOG.md

@@ -491,7 +491,7 @@ Date: 2023-10-16
 
 #### View Transitions 🚀
 
-We're excited to release experimental support for the the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) in React Router! You can now trigger navigational DOM updates to be wrapped in `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application.
+We're excited to release experimental support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) in React Router! You can now trigger navigational DOM updates to be wrapped in `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application.
 
 The simplest approach to enabling a View Transition in your React Router app is via the new [`<Link unstable_viewTransition>`](https://reactrouter.com/components/link#unstable_viewtransition) prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
 
@@ -711,6 +711,8 @@ Date: 2023-06-14
 
 `6.13.0` is really a patch release in spirit but comes with a SemVer minor bump since we added a new future flag.
 
+#### v7_startTransition
+
 The **tl;dr;** is that `6.13.0` is the same as [`6.12.0`](https://github.com/remix-run/react-router/releases/tag/react-router%406.12.0) bue we've moved the usage of `React.startTransition` behind an opt-in `future.v7_startTransition` [future flag](https://reactrouter.com/en/main/guides/api-development-strategy) because we found that there are applications in the wild that are currently using `Suspense` in ways that are incompatible with `React.startTransition`.
 
 Therefore, in `6.13.0` the default behavior will no longer leverage `React.startTransition`:
@@ -862,14 +864,16 @@ You can also check out the docs [here](https://reactrouter.com/en/dev/guides/api
 
 ### Minor Changes
 
-- The first future flag being introduced is `future.v7_normalizeFormMethod` which will normalize the exposed `useNavigation()/useFetcher()` `formMethod` fields as uppercase HTTP methods to align with the `fetch()` (and some Remix) behavior. ([#10207](https://github.com/remix-run/react-router/pull/10207))
+#### future.v7_normalizeFormMethod
+
+The first future flag being introduced is `future.v7_normalizeFormMethod` which will normalize the exposed `useNavigation()/useFetcher()` `formMethod` fields as uppercase HTTP methods to align with the `fetch()` (and some Remix) behavior. ([#10207](https://github.com/remix-run/react-router/pull/10207))
 
-  - When `future.v7_normalizeFormMethod` is unspecified or set to `false` (default v6 behavior),
-    - `useNavigation().formMethod` is lowercase
-    - `useFetcher().formMethod` is lowercase
-  - When `future.v7_normalizeFormMethod === true`:
-    - `useNavigation().formMethod` is UPPERCASE
-    - `useFetcher().formMethod` is UPPERCASE
+- When `future.v7_normalizeFormMethod` is unspecified or set to `false` (default v6 behavior),
+  - `useNavigation().formMethod` is lowercase
+  - `useFetcher().formMethod` is lowercase
+- When `future.v7_normalizeFormMethod === true`:
+  - `useNavigation().formMethod` is UPPERCASE
+  - `useFetcher().formMethod` is UPPERCASE
 
 ### Patch Changes
 
@@ -1046,7 +1050,7 @@ Support absolute URLs in `<Link to>`. If the URL is for the current origin, it w
 
 - Fixes 2 separate issues for revalidating fetcher `shouldRevalidate` calls ([#9948](https://github.com/remix-run/react-router/pull/9948))
   - The `shouldRevalidate` function was only being called for _explicit_ revalidation scenarios (after a mutation, manual `useRevalidator` call, or an `X-Remix-Revalidate` header used for cookie setting in Remix). It was not properly being called on _implicit_ revalidation scenarios that also apply to navigation `loader` revalidation, such as a change in search params or clicking a link for the page we're already on. It's now correctly called in those additional scenarios.
-  - The parameters being passed were incorrect and inconsistent with one another since the `current*`/`next*` parameters reflected the static `fetcher.load` URL (and thus were identical). Instead, they should have reflected the the navigation that triggered the revalidation (as the `form*` parameters did). These parameters now correctly reflect the triggering navigation.
+  - The parameters being passed were incorrect and inconsistent with one another since the `current*`/`next*` parameters reflected the static `fetcher.load` URL (and thus were identical). Instead, they should have reflected the navigation that triggered the revalidation (as the `form*` parameters did). These parameters now correctly reflect the triggering navigation.
 - 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))

contributors.yml

@@ -22,6 +22,7 @@
 - appden
 - arjunyel
 - arka1002
+- Armanio
 - arnassavickas
 - aroyan
 - ashusnapx
@@ -53,6 +54,7 @@
 - christowiz
 - codeape2
 - coryhouse
+- ctnelson1997
 - cvbuelow
 - damianstasik
 - danielberndt
@@ -81,6 +83,9 @@
 - frontsideair
 - fyzhu
 - fz6m
+- gaspard
+- Geist5000
+- gesposito
 - gianlucca
 - gijo-varghese
 - goldins
@@ -192,6 +197,8 @@
 - noisypigeon
 - Nurai1
 - Obi-Dann
+- OlegDev1
+- omahs
 - omar-moquete
 - p13i
 - parched
@@ -206,6 +213,7 @@
 - rimian
 - robbtraister
 - RobHannay
+- robinvdvleuten
 - rtmann
 - rubeonline
 - ryanflorence
@@ -243,6 +251,7 @@
 - tlinhart
 - tom-sherman
 - tomasr8
+- tony-sn
 - TooTallNate
 - triangularcube
 - trungpv1601

docs/components/form.md

@@ -92,7 +92,7 @@ function ProjectsPage() {
 </DataBrowserRouter>;
 ```
 
-If the the current URL is `"/projects/123"`, the form inside the child
+If the current URL is `"/projects/123"`, the form inside the child
 route, `ProjectsPage`, will have a default action as you might expect: `"/projects/123"`. In this case, where the route is the deepest matching route, both `<Form>` and plain HTML forms have the same result.
 
 But the form inside of `ProjectsLayout` will point to `"/projects"`, not the full URL. In other words, it points to the matching segment of the URL for the route in which the form is rendered.

docs/guides/api-development-strategy.md

@@ -5,115 +5,40 @@ new: true
 
 # API Development Strategy
 
-Let's cut to the chase - major version upgrades can be a _pain_. Especially for something as foundational to your application as the framework or router it's built on. For Remix and React Router, we want to do our best to give you the smoothest upgrade experience possible.
+React Router is foundational to your application. We want to make sure that upgrading to new major versions is as smooth as possible while still allowing us to adjust and enhance the behavior and API as the React ecosystem advances.
 
-<docs-info>This strategy is discussed in more detail in our [Future Flags][future-flags-blog-post] blog post, so give that a read if you want any more info at the end of this doc!</docs-info>
+Our strategy and motivations are discussed in more detail in our [Future Flags][future-flags-blog-post] blog post.
 
-## Goals
+## Future Flags
 
-Our goals for major Remix and React Router releases are:
+When an API changes in a breaking way, it is introduced in a future flag. This allows you to opt-in to one change a time before it becomes the default in the next major version.
 
-- Developers can opt-into SemVer-major features individually _as they are released_ instead of having to wait to adopt them all at once when a new major version hits NPM
-- Having opted into features ahead-of-time, developers can upgrade to new major versions in a single short-lived branch/commit (hours, not weeks)
+- Without enabling the future flag, nothing changes about your app
+- Enabling the flag changes the behavior for that feature
 
-## Implementation
+All current future flags are documented in the [Future Flags Guide](../upgrading/future) to help you stay up-to-date.
 
-We plan to do this via what we're calling **Future Flags** that you'll provide when you initialize your [Data Router][picking-a-router]. Think of these as **feature flags for future features**. As we implement new features, we always try to do them in a backwards-compatible way. But when a breaking change is warranted, we don't table that feature up for an _eventual_ v7 release. Instead, we add a **Future Flag** and implement the new feature alongside the current behavior in a v6 minor release. This allows users to start using the feature, providing feedback, and reporting bugs _immediately_.
+## Unstable Flags
 
-That way, not only can you adopt features incrementally (and eagerly without a major version bump), we can also work out any kinks incrementally _before_ releasing v7. Eventually we also then add deprecation warnings to the v6 releases to nudge users to the new behavior. Then in v7 we remove the old v6 approach, remove the deprecations, and remove the flag - thus making the flagged behavior the new default in v7. If at the time v6 is released, an application has opted into _all_ future flags and updated their code - then they should just be able to update their dependency to v7, delete the future flags, and be running on v7 in a matter of minutes.
+Unstable flags are for features still being designed and developed and made available to our users to help us get it right.
 
-## Unstable vs. V7 Flags
+Unstable flags are not recommended for production:
 
-Future flags come in 2 forms:
+- they will change without warning and without upgrade paths
+- they will have bugs
+- they aren't documented
+- they may be scrapped completely
 
-**`future.unstable_feature`**
+When you opt-in to an unstable flag you are becoming a contributor to the project, rather than a user. We appreciate your help, but please be aware of the new role!
 
-`unstable_` flags allow us to iterate on the API with early adopters as if we're in `v0.x.x` versions, but for a specific feature. This avoids churning the API for all users and arriving at better APIs in the final release. This _does not mean_ that we think the feature is bug-ridden! We _absolutely_ want early adopters to start using these features so we can iterate on (and/or gain confidence in) the API.
-
-**`future.v7_feature`**
-
-`v7_` indicates a breaking change from v6 behavior and implies (1) that the API is considered stable and will not under any more breaking changes and (2) that the API will become the default behavior in v7. A `v7_` flag _does not_ mean the feature is bug-free - no software is! Our recommendation is to upgrade to v7 flags as you have the time, as it will make your v7 upgrade _much_ smoother.
+To learn about current unstable flags, keep an eye on the [CHANGELOG](../start/changelog).
 
 ### Example New Feature Flow
 
 The decision flow for a new feature looks something like this (note this diagram is in relation to Remix v1/v2 but applies to React Router v6/v7 as well):
 
 ![Flowchart of the decision process for how to introduce a new feature][feature-flowchart]
 
-The lifecycle is thus either:
-
-- Non-Breaking + Stable API Feature -> Lands in v6
-- Non-Breaking + Unstable API -> `future.unstable_` flag -> Lands in v6
-- Breaking + Stable API Feature -> `future.v7_` flag -> Lands in v7
-- Breaking + Unstable API -> `future.unstable_` flag -> `future.v7_` flag -> Lands in v7
-
-## Current Future Flags
-
-Here's the current future flags in React Router v6 today.
-
-### `@remix-run/router` Future Flags
-
-These flags are only applicable when using a [Data Router][picking-a-router] and are passed when creating the `router` instance:
-
-```js
-const router = createBrowserRouter(routes, {
-  future: {
-    v7_normalizeFormMethod: true,
-  },
-});
-```
-
-| Flag                                        | Description                                                           |
-| ------------------------------------------- | --------------------------------------------------------------------- |
-| `v7_fetcherPersist`                         | Delay active fetcher cleanup until they return to an `idle` state     |
-| `v7_normalizeFormMethod`                    | Normalize `useNavigation().formMethod` to be an uppercase HTTP Method |
-| [`v7_partialHydration`][partialhydration]   | Support partial hydration for Server-rendered apps                    |
-| `v7_prependBasename`                        | Prepend the router basename to navigate/fetch paths                   |
-| [`v7_relativeSplatPath`][relativesplatpath] | Fix buggy relative path resolution in splat routes                    |
-
-#### `createStaticHandler` Future Flags
-
-These flags are only applicable when [SSR][ssr]-ing a React Router app:
-
-```js
-const handler = createStaticHandler(routes, {
-  future: {
-    v7_throwAbortReason: true,
-  },
-});
-```
-
-| Flag                                        | Description                                                             |
-| ------------------------------------------- | ----------------------------------------------------------------------- |
-| [`v7_relativeSplatPath`][relativesplatpath] | Fix buggy relative path resolution in splat routes                      |
-| [`v7_throwAbortReason`][abortreason]        | Throw `request.signal.reason` if a `query`/`queryRoute` call is aborted |
-
-### React Router Future Flags
-
-These flags apply to both Data and non-Data Routers and are passed to the rendered React component:
-
-```jsx
-<BrowserRouter future={{ v7_startTransition: true }}>
-  <Routes>{/*...*/}</Routes>
-</BrowserRouter>
-```
-
-```jsx
-<RouterProvider
-  router={router}
-  future={{ v7_startTransition: true }}
-/>
-```
-
-| Flag                 | Description                                                                 |
-| -------------------- | --------------------------------------------------------------------------- |
-| `v7_startTransition` | Wrap all router state updates in [`React.startTransition`][starttransition] |
-
 [future-flags-blog-post]: https://remix.run/blog/future-flags
 [feature-flowchart]: https://remix.run/docs-images/feature-flowchart.png
 [picking-a-router]: ../routers/picking-a-router
-[starttransition]: https://react.dev/reference/react/startTransition
-[partialhydration]: ../routers/create-browser-router#partial-hydration-data
-[relativesplatpath]: ../hooks/use-resolved-path#splat-paths
-[ssr]: ../guides/ssr
-[abortreason]: ../routers/create-static-handler#handlerqueryrequest-opts

docs/hooks/use-navigate.md

@@ -93,7 +93,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 `useNavigate` is called 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 `useNavigate` is called 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):