Upgrade prettier

.eslintignore

@@ -8,8 +8,6 @@ worker-configuration.d.ts
 /playground-local/
 integration/helpers/**/dist/
 integration/helpers/**/build/
-# Temporary until we can get prettier upgraded to support `import ... with` syntax
-integration/helpers/rsc-parcel/src/server.tsx
 playwright-report/
 test-results/
 build.utils.d.ts

CHANGELOG.md

@@ -348,7 +348,6 @@ Date: 2025-06-27
 ### Patch Changes
 
 - `react-router` - Do not serialize types for `useRouteLoaderData<typeof clientLoader>` ([#13752](https://github.com/remix-run/react-router/pull/13752))
-
   - For types to distinguish a `clientLoader` from a `serverLoader`, you MUST annotate `clientLoader` args:
 
     ```ts
@@ -449,7 +448,6 @@ Date: 2025-05-25
 - `@react-router/dev` - Add additional logging to `build` command output when cleaning assets from server build ([#13547](https://github.com/remix-run/react-router/pull/13547))
 - `@react-router/dev` - Don't clean assets from server build when `build.ssrEmitAssets` has been enabled in Vite config ([#13547](https://github.com/remix-run/react-router/pull/13547))
 - `@react-router/dev` - Fix typegen when same route is used at multiple paths ([#13574](https://github.com/remix-run/react-router/pull/13574))
-
   - For example, `routes/route.tsx` is used at 4 different paths here:
 
     ```ts
@@ -468,7 +466,6 @@ Date: 2025-05-25
   - Now, typegen creates unions as necessary for alternate paths for the same route file
 
 - `@react-router/dev` - Better types for `params` ([#13543](https://github.com/remix-run/react-router/pull/13543))
-
   - For example:
 
     ```ts
@@ -515,7 +512,6 @@ Date: 2025-05-25
     ```
 
 - `@react-router/dev` - Fix `href` for optional segments ([#13595](https://github.com/remix-run/react-router/pull/13595))
-
   - Type generation now expands paths with optionals into their corresponding non-optional paths
   - For example, the path `/user/:id?` gets expanded into `/user` and `/user/:id` to more closely model visitable URLs
   - `href` then uses these expanded (non-optional) paths to construct type-safe paths for your app:
@@ -623,7 +619,6 @@ Behind the scenes, React Router will generate the corresponding `declare module`
 
 - `react-router` - Added a new `routeDiscovery` option in `react-router.config.ts` to configure Lazy Route Discovery behavior ([#13451](https://github.com/remix-run/react-router/pull/13451))
 - `react-router` - Add support for route component props in `createRoutesStub` ([#13528](https://github.com/remix-run/react-router/pull/13528))
-
   - This allows you to unit test your route components using the props instead of the hooks:
 
     ```tsx
@@ -742,7 +737,6 @@ Date: 2025-04-17
 ### Patch Changes
 
 - `react-router` - When using the object-based `route.lazy` API, the `HydrateFallback` and `hydrateFallbackElement` properties are now skipped when lazy loading routes after hydration ([#13376](https://github.com/remix-run/react-router/pull/13376))
-
   - If you move the code for these properties into a separate file, since the hydrate properties were unused already (if the route wasn't present during hydration), you can avoid downloading them at all. For example:
 
     ```ts
@@ -1047,7 +1041,7 @@ Here's a simple example of a client-side logging middleware that can be placed o
 ```tsx
 const clientLogger: Route.unstable_ClientMiddlewareFunction = async (
   { request },
-  next
+  next,
 ) => {
   let start = performance.now();
 
@@ -1066,7 +1060,7 @@ For a server-side middleware, the `next` function will return the HTTP `Response
 ```tsx
 const serverLogger: Route.unstable_MiddlewareFunction = async (
   { request, params, context },
-  next
+  next,
 ) => {
   let start = performance.now();
 
@@ -1087,7 +1081,7 @@ You can throw a `redirect` from a middleware to short circuit any remaining proc
 import { sessionContext } from "../context";
 const serverAuth: Route.unstable_MiddlewareFunction = (
   { request, params, context },
-  next
+  next,
 ) => {
   let session = context.get(sessionContext);
   let user = session.get("user");
@@ -1340,7 +1334,7 @@ import { MassiveComponent } from "~/components";
 
 export async function clientLoader() {
   return await fetch("https://example.com/api").then((response) =>
-    response.json()
+    response.json(),
   );
 }
 
@@ -1375,7 +1369,7 @@ To achieve this optimization, React Router will split the route module into mult
 ```tsx filename=routes/example.tsx?route-chunk=clientLoader
 export async function clientLoader() {
   return await fetch("https://example.com/api").then((response) =>
-    response.json()
+    response.json(),
   );
 }
 ```
@@ -1421,7 +1415,7 @@ const shared = () => console.log("hello");
 export async function clientLoader() {
   shared();
   return await fetch("https://example.com/api").then((response) =>
-    response.json()
+    response.json(),
   );
 }
 
@@ -1448,7 +1442,7 @@ import { shared } from "./shared";
 export async function clientLoader() {
   shared();
   return await fetch("https://example.com/api").then((response) =>
-    response.json()
+    response.json(),
   );
 }
 
@@ -1466,7 +1460,7 @@ import { shared } from "./shared";
 export async function clientLoader() {
   shared();
   return await fetch("https://example.com/api").then((response) =>
-    response.json()
+    response.json(),
   );
 }
 ```
@@ -2332,7 +2326,7 @@ const router = createBrowserRouter(
         patch("root", [route]);
       }
     },
-  }
+  },
 );
 ```
 
@@ -3112,7 +3106,7 @@ let routes = createRoutesFromElements(
     <Route index element={<Home />} />
     <Route path="a" lazy={() => import("./a")} />
     <Route path="b" lazy={() => import("./b")} />
-  </Route>
+  </Route>,
 );
 ```
 

GOVERNANCE.md

@@ -18,6 +18,7 @@
 React Router has been around since 2014 largely under the development and oversight of [Michael Jackson](https://x.com/mjackson) and [Ryan Florence](https://x.com/ryanflorence). After the launch of [Remix](https://remix.run/) in 2021, the subsequent creation of the Remix team, and the merging of Remix v2 into React Router v7[^1][^2], the project shifted from a [Founder-Leader](https://www.redhat.com/en/blog/understanding-open-source-governance-models) model to a "Steering Committee" (SC) model that operates on a Request for Comments (RFC) process.
 
 [^1]: https://remix.run/blog/merging-remix-and-react-router
+
 [^2]: https://remix.run/blog/incremental-path-to-react-19
 
 This document will outline the process in which React Router will continue to evolve and how new features will make their way into the codebase. This is an evergreen document and will be updated as needed to reflect future changes in the process.

decisions/0003-data-strategy.md

@@ -113,7 +113,7 @@ Therefore, we're introducing the concept of a `DataStrategyMatch` which is just
 ```js
 function dataStrategy({ matches, defaultStrategy }) {
   return Promise.all(
-    matches.map((m) => match.route.then((route) => route.loader(/* ... */)))
+    matches.map((m) => match.route.then((route) => route.loader(/* ... */))),
   );
 }
 ```

decisions/0005-remixing-react-router.md

@@ -283,7 +283,7 @@ If folks still prefer the JSX notation, they can leverage `createRoutesFromEleme
 const routes = createRoutesFromElements(
   <Route path="/" element={<Layout />}>
     <Route index element={<Home />} />
-  </Route>
+  </Route>,
 );
 const router = createBrowserRouter(routes);
 

decisions/0010-splitting-up-client-and-server-code-in-vite.md

@@ -96,6 +96,7 @@ Checking for `.server` modules only requires checking the module's path and does
 `vite-env-only` does require AST parsing and transformations so it will always be slower than `.server` modules.
 
 [^1]: Vite provides a lower-level module graph API, but the module graph is not guaranteed to be complete as it is only populated as modules are requested.
+
 [^2]: When a file changes on disk, Vite invalidates the corresponding module in its cache to power features like HMR.
 
 [decision-0009]: ./0009-do-not-rely-on-treeshaking-for-correctness.md

decisions/0014-context-middleware.md

@@ -105,7 +105,7 @@ The middleware API we landed on to ship looks as follows:
 ```ts
 const myMiddleware: Route.unstable_MiddlewareFunction = async (
   { request, context },
-  next
+  next,
 ) => {
   // Do stuff before the handlers are called
   context.user = await getUser(request);
@@ -125,7 +125,7 @@ export const middleware = [myMiddleware];
 // `clientLoader`/`clientAction`
 const myClientMiddleware: Route.unstable_ClientMiddlewareFunction = (
   { context },
-  next
+  next,
 ) => {
   //...
 };

docs/explanation/sessions-and-cookies.md

@@ -45,7 +45,7 @@ const { getSession, commitSession, destroySession } =
         secrets: ["s3cret1"],
         secure: true,
       },
-    }
+    },
   );
 
 export { getSession, commitSession, destroySession };
@@ -64,7 +64,7 @@ export async function action({
   request,
 }: ActionFunctionArgs) {
   const session = await getSession(
-    request.headers.get("Cookie")
+    request.headers.get("Cookie"),
   );
   session.get("foo");
   session.has("bar");
@@ -91,7 +91,7 @@ export async function loader({
   request,
 }: Route.LoaderArgs) {
   const session = await getSession(
-    request.headers.get("Cookie")
+    request.headers.get("Cookie"),
   );
 
   if (session.has("userId")) {
@@ -105,23 +105,23 @@ export async function loader({
       headers: {
         "Set-Cookie": await commitSession(session),
       },
-    }
+    },
   );
 }
 
 export async function action({
   request,
 }: Route.ActionArgs) {
   const session = await getSession(
-    request.headers.get("Cookie")
+    request.headers.get("Cookie"),
   );
   const form = await request.formData();
   const username = form.get("username");
   const password = form.get("password");
 
   const userId = await validateCredentials(
     username,
-    password
+    password,
   );
 
   if (userId == null) {
@@ -183,7 +183,7 @@ export async function action({
   request,
 }: Route.ActionArgs) {
   const session = await getSession(
-    request.headers.get("Cookie")
+    request.headers.get("Cookie"),
   );
   return redirect("/login", {
     headers: {

docs/explanation/special-files.md

@@ -208,7 +208,7 @@ startTransition(() => {
     document,
     <StrictMode>
       <HydratedRouter />
-    </StrictMode>
+    </StrictMode>,
   );
 });
 ```
@@ -266,7 +266,7 @@ export function handleDataRequest(
     request,
     params,
     context,
-  }: LoaderFunctionArgs | ActionFunctionArgs
+  }: LoaderFunctionArgs | ActionFunctionArgs,
 ) {
   response.headers.set("X-Custom-Header", "value");
   return response;
@@ -284,7 +284,7 @@ export function handleError(
     request,
     params,
     context,
-  }: LoaderFunctionArgs | ActionFunctionArgs
+  }: LoaderFunctionArgs | ActionFunctionArgs,
 ) {
   if (!request.signal.aborted) {
     sendErrorToErrorReportingService(error);

docs/explanation/state-management.md

@@ -25,14 +25,12 @@ React Router seamlessly bridges the gap between the backend and frontend via mec
 Here's why using typical React state patterns might be an anti-pattern in React Router:
 
 1. **Network-related State:** If your React state is managing anything related to the network—such as data from loaders, pending form submissions, or navigational states—it's likely that you're managing state that React Router already manages:
-
    - **[`useNavigation`][use_navigation]**: This hook gives you access to `navigation.state`, `navigation.formData`, `navigation.location`, etc.
    - **[`useFetcher`][use_fetcher]**: This facilitates interaction with `fetcher.state`, `fetcher.formData`, `fetcher.data` etc.
    - **[`loaderData`][loader_data]**: Access the data for a route.
    - **[`actionData`][action_data]**: Access the data from the latest action.
 
 2. **Storing Data in React Router:** A lot of data that developers might be tempted to store in React state has a more natural home in React Router, such as:
-
    - **URL Search Params:** Parameters within the URL that hold state.
    - **[Cookies][cookies]:** Small pieces of data stored on the user's device.
    - **[Server Sessions][sessions]:** Server-managed user sessions.
@@ -80,7 +78,7 @@ export function List() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [view, setView] = useState(
-    searchParams.get("view") || "list"
+    searchParams.get("view") || "list",
   );
 
   return (
@@ -226,7 +224,7 @@ In this approach, state must be initialized within an effect. This is crucial to
 function Sidebar() {
   const [isOpen, setIsOpen] = useState(
     // error: window is not defined
-    window.localStorage.getItem("sidebar")
+    window.localStorage.getItem("sidebar"),
   );
 
   // ...

docs/how-to/error-reporting.md

@@ -23,7 +23,7 @@ import { type HandleErrorFunction } from "react-router";
 
 export const handleError: HandleErrorFunction = (
   error,
-  { request }
+  { request },
 ) => {
   // React Router may abort some interrupted requests, don't log those
   if (!request.signal.aborted) {

docs/how-to/fetchers.md

@@ -190,7 +190,7 @@ export async function loader({ request }) {
   let url = new URL(request.url);
   let query = url.searchParams.get("q");
   return users.filter((user) =>
-    user.name.toLowerCase().includes(query.toLowerCase())
+    user.name.toLowerCase().includes(query.toLowerCase()),
   );
 }
 ```

docs/how-to/file-uploads.md

@@ -65,7 +65,7 @@ export async function action({
 
   const formData = await parseFormData(
     request,
-    uploadHandler
+    uploadHandler,
   );
   // 'avatar' has already been processed at this point
   const file = formData.get("avatar");
@@ -101,7 +101,7 @@ Create a file that exports a `LocalFileStorage` instance to be used by different
 import { LocalFileStorage } from "@mjackson/file-storage/local";
 
 export const fileStorage = new LocalFileStorage(
-  "./uploads/avatars"
+  "./uploads/avatars",
 );
 
 export function getStorageKey(userId: string) {
@@ -148,7 +148,7 @@ export async function action({
 
   const formData = await parseFormData(
     request,
-    uploadHandler
+    uploadHandler,
   );
 }