Merge branch 'main' into release-6.4.4

Author: brophdawg11

.github/workflows/postrelease.yml

@@ -0,0 +1,17 @@
+name: 🕊 Post-release
+
+on:
+  push:
+    tags:
+      # only run on `react-router` tags
+      - "react-router@*"
+
+jobs:
+  comment:
+    name: 📝 Comment on related issues and pull requests
+    if: github.repository == 'remix-run/react-router'
+    uses: ./.github/workflows/release-comments.yml
+    with:
+      ref: ${{ github.ref }}
+      # this should match the above tag to watch excluding the trailing "@"
+      packageVersionToFollow: "react-router"

.github/workflows/release-comments.yml

@@ -6,6 +6,9 @@ on:
       ref:
         required: true
         type: string
+      packageVersionToFollow:
+        required: true
+        type: string
 
 jobs:
   comment:
@@ -20,16 +23,20 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version-file: ".nvmrc"
-          cache: "yarn"
+          cache: "npm"
+          cache-dependency-path: scripts/release/package-lock.json
 
       - name: 📥 Install deps
-        # even though this is called "npm-install" it does use yarn to install
-        # because we have a yarn.lock and caches efficiently.
-        uses: bahmutov/npm-install@v1
+        run: npm ci
+        working-directory: ./scripts/release
 
       - name: 📝 Comment on issues
-        run: node ./scripts/release/comment.mjs
+        working-directory: ./scripts/release
+        run: node -r esbuild-register ./comment.ts
         env:
           GITHUB_REPOSITORY: ${{ github.repository }}
           GITHUB_TOKEN: ${{ github.token }}
           VERSION: ${{ inputs.ref }}
+          DEFAULT_BRANCH: "main"
+          NIGHTLY_BRANCH: "dev"
+          PACKAGE_VERSION_TO_FOLLOW: ${{ inputs.packageVersionToFollow }}

.github/workflows/release.yml

@@ -55,7 +55,7 @@ jobs:
           publish: yarn release
           createGithubReleases: false
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN_SO_OTHER_ACTIONS_RUN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
   # comment:

DEVELOPMENT.md

@@ -37,6 +37,11 @@ You may need to make changes to a pre-release prior to publishing a final stable
 - Commit the unpublished changesets and push the the `release-*` branch to GitHub; wait for the release workflow to finish and the Changesets action to open its PR that will increment all versions to stable
 - Review the updated `CHANGELOG` files and make any adjustments necessary, then merge the PR
 - Once the PR is merged, the release workflow will publish the updated packages to npm
+- Once the release is published:
+  - merge the `release-*` branch into `main` and push it up to github
+  - merge the `release-*` branch into `dev` and push it up to github
+  - Convert the `[email protected]` tag to a Release on Github with the name `v6.x.y`
+  - Copy the relevant changelog entries from all packages into the Release Notes and adjust accordingly, matching the format used by prior releases
 
 ### Experimental releases
 

contributors.yml

@@ -1,7 +1,7 @@
 - abdallah-nour
 - abhi-kr-2100
-- adamdotjs
 - AchThomas
+- adamdotjs
 - Ajayff4
 - alany411
 - alexlbr
@@ -18,6 +18,7 @@
 - brockross
 - brophdawg11
 - btav
+- bvangraafeiland
 - CanRau
 - chaance
 - chasinhues
@@ -31,6 +32,8 @@
 - danielberndt
 - dauletbaev
 - david-crespo
+- DigitalNaut
+- dmitrytarassov
 - dokeet
 - Drishtantr
 - edwin177
@@ -57,10 +60,12 @@
 - infoxicator
 - IsaiStormBlesed
 - Isammoc
+- ivanjeremic
 - jacob-ebey
 - JaffParker
 - JakubDrozd
 - janpaepke
+- jasonpaulos
 - jimniels
 - jmargeta
 - johnpangalos
@@ -76,14 +81,17 @@
 - KostiantynPopovych
 - KutnerUri
 - latin-1
+- lequangdongg
 - liuhanqu
+- lopezac
 - loun4
 - lqze
 - lukerSpringTree
 - Manc
 - manzano78
 - marc2332
 - markivancho
+- maruffahmed
 - marvinruder
 - maxpou
 - mcansh
@@ -92,9 +100,11 @@
 - MichaelDeBoey
 - michal-antczak
 - minami-minami
+- modex98
 - morleytatro
 - ms10596
 - noisypigeon
+- omar-moquete
 - p13i
 - parched
 - paulsmithkc
@@ -129,6 +139,7 @@
 - tyankatsu0105
 - underager
 - vijaypushkin
+- vishwast03
 - vikingviolinist
 - willemarcel
 - williamsdyyz

docs/components/await.md

@@ -108,7 +108,7 @@ import {
   defer,
   Route,
   useLoaderData,
-  Async,
+  Await,
 } from "react-router-dom";
 
 // given this route

docs/components/form.md

@@ -128,7 +128,7 @@ The method will be available on [`request.method`][requestmethod] inside the rou
   path="/projects/:id"
   element={<Project />}
   loader={async ({ params }) => {
-    return fakeLoadProject(params.id)
+    return fakeLoadProject(params.id);
   }}
   action={async ({ request, params }) => {
     switch (request.method) {
@@ -140,8 +140,8 @@ The method will be available on [`request.method`][requestmethod] inside the rou
       case "delete": {
         return fakeDeleteProject(params.id);
       }
-      default {
-        throw new Response("", { status: 405 })
+      default: {
+        throw new Response("", { status: 405 });
       }
     }
   }}

docs/guides/deferred.md

@@ -112,7 +112,7 @@ export default function PackageRoute() {
 
 If you're not jazzed about bringing back render props, you can use a hook, but you'll have to break things out into another component:
 
-```jsx lines=[21]
+```jsx lines=[11, 16, 23-31]
 export default function PackageRoute() {
   const data = useLoaderData();
 
@@ -205,6 +205,6 @@ So just keep this in mind: **Deferred is 100% only about the initial load of a r
 
 [link]: ../components/link
 [usefetcher]: ../hooks/use-fetcher
-[defer response]: ../fetch/defer
+[defer response]: ../utils/defer
 [await]: ../components/await
-[useasyncvalue]: ../hooks/use-async-data
+[useasyncvalue]: ../hooks/use-async-value

docs/hooks/use-outlet-context.md

@@ -24,7 +24,7 @@ function Parent() {
 }
 ```
 
-```tsx lines=[2]
+```tsx lines=[4]
 import { useOutletContext } from "react-router-dom";
 
 function Child() {
@@ -36,7 +36,7 @@ function Child() {
 
 If you're using TypeScript, we recommend the parent component provide a custom hook for accessing the context value. This makes it easier for consumers to get nice typings, control consumers, and know who's consuming the context value. Here's a more realistic example:
 
-```tsx filename=src/routes/dashboard.tsx lines=[12,17-19]
+```tsx filename=src/routes/dashboard.tsx lines=[13, 19]
 import * as React from "react";
 import type { User } from "./types";
 import { Outlet, useOutletContext } from "react-router-dom";

docs/hooks/use-route-error.md

@@ -5,7 +5,7 @@ new: true
 
 # `useRouteError`
 
-Inside of an [`errorElement`][errorelement], this hooks returns anything thrown during an action, loader, or rendering. Note that thrown responses have special treatment, see [`isRouteErrorResponse`][isrouteerrorresponse] for more information.
+Inside of an [`errorElement`][errorelement], this hook returns anything thrown during an action, loader, or rendering. Note that thrown responses have special treatment, see [`isRouteErrorResponse`][isrouteerrorresponse] for more information.
 
 <docs-warning>This feature only works if using a data router, see [Picking a Router][pickingarouter]</docs-warning>
 

docs/route/error-element.md

@@ -40,6 +40,12 @@ When a route does not have an `errorElement`, errors will bubble up through pare
 
 Put an `errorElement` at the top of your route tree and handle nearly every error in your app in one place. Or, put them on all of your routes and allow the parts of the app that don't have errors to continue to render normally. This gives the user more options to recover from errors instead of a hard refresh and 🤞.
 
+### Default Error Element
+
+<docs-warning>We recommend _always_ providing at least a root-level `errorElement` before shipping your application to production, because the UI of the default `errorElement` is ugly and not intended for end-user consumption.</docs-warning>
+
+If you do not provide an `errorElement` in your route tree to handle a given error, errors will bubble up and be handled by a default `errorElement` which will print the error message and stack trace. Some folks have questioned why the stack trace shows up in production builds. Normally, you don't want to expose stack traces on your production sites for security reasons. However, this is more applicable to server-side errors (and Remix does indeed strip stack traces from server-side loader/action responses). In the case of client-side `react-router-dom` applications the code is already available in the browser anyway so any hiding is just security through obscurity. Furthermore, we would still want to expose the error in the console, so removing it from the UI display is still not hiding any information about the stack trace. Not showing it in the UI _and_ not logging it to to the console would mean that application developers have no information _at all_ about production bugs, which poses its own set of issues. So, again we recommend you always add a root level `errorElement` before deploying your site to production!
+
 ## Throwing Manually
 
 While `errorElement` handles unexpected errors, it can also be used to handle exceptions you expect.

docs/route/loader.md

@@ -89,7 +89,7 @@ Note that the APIs here are not React Router specific, but rather standard web o
 
 While you can return anything you want from a loader and get access to it from [`useLoaderData`][useloaderdata], you can also return a web [Response][response].
 
-This might not seem immediately useful, but consider `fetch`. Since the return value of of `fetch` is a Response, and loaders understand responses, many loaders can return a simple fetch!
+This might not seem immediately useful, but consider `fetch`. Since the return value of `fetch` is a Response, and loaders understand responses, many loaders can return a simple fetch!
 
 ```tsx
 // an HTTP/REST API

docs/route/should-revalidate.md

@@ -75,6 +75,7 @@ interface ShouldRevalidateFunction {
 [action]: ./action
 [form]: ../components/form
 [fetcher]: ../hooks/use-fetcher
+[usesubmit]: ../hooks/use-submit
 [loader]: ./loader
 [useloaderdata]: ../hooks/use-loader-data
 [params]: ./route#dynamic-segments

docs/start/tutorial.md

@@ -595,7 +595,7 @@ We'll create new contacts by exporting an `action` in our root route, wiring it
 
 👉 **Create the action and change `<form>` to `<Form>`**
 
-```jsx filename=src/routes/root.jsx lines=[5,7,9-11,22-24]
+```jsx filename=src/routes/root.jsx lines=[5,7,9-11,22-25]
 import {
   Outlet,
   Link,
@@ -1830,7 +1830,7 @@ If you click the button now you should see the star _immediately_ change to the
 
 ## Not Found Data
 
-What happens if the contact we're trying load doesn't exist?
+What happens if the contact we're trying to load doesn't exist?
 
 <img loading="lazy" class="tutorial" src="/_docs/tutorial/25.webp" />
 

docs/upgrading/v5.md

@@ -922,8 +922,8 @@ import { matchPath } from "react-router-dom";
 const match = matchPath(
   {
     path: "/users/:id",
-    caseSensitive: false, // Optional. Should be `true` if the static portions of the `path` should be matched in the same case.
-    end: true, // Optional. Should be `true` if this pattern should match the entire URL pathname
+    caseSensitive: false, // Optional, `true` == static parts of `path` should match case
+    end: true, // Optional, `true` == pattern should match the entire URL pathname
   },
   "/users/123"
 );