chore: format

decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md

@@ -26,8 +26,8 @@ type MyActionData = {
 };
 
 export default function Route() {
-  let loaderData = useLoaderData<MyLoaderData>();
-  let actionData = useActionData<MyActionData>();
+  const loaderData = useLoaderData<MyLoaderData>();
+  const actionData = useActionData<MyActionData>();
   return <div>{/* ... */}</div>;
 }
 ```
@@ -107,7 +107,7 @@ export const loader: LoaderFunction = () => {
 };
 
 export default function Route() {
-  let { birthday } = useLoaderData<MyLoaderData>();
+  const { birthday } = useLoaderData<MyLoaderData>();
   // ^ `useLoaderData` tricks Typescript into thinking this is a `Date`, when in fact its a `string`!
 }
 ```
@@ -164,7 +164,7 @@ export const loader = async (args: LoaderArgs) => {
 };
 
 export default function Route() {
-  let data = useLoaderData<typeof loader>();
+  const data = useLoaderData<typeof loader>();
   // ...
 }
 ```
@@ -183,7 +183,7 @@ type MyLoaderData = {
 };
 
 export default function Route() {
-  let data = useLoaderData();
+  const data = useLoaderData();
   // ^? unknown
 }
 ```
@@ -201,8 +201,8 @@ type MyLoaderData = {
 };
 
 export default function Route() {
-  let dataGeneric = useLoaderData<MyLoaderData>(); // <-- will be deprecated
-  let dataCast = useLoaderData() as MyLoaderData; // <- use this instead
+  const dataGeneric = useLoaderData<MyLoaderData>(); // <-- will be deprecated
+  const dataCast = useLoaderData() as MyLoaderData; // <- use this instead
 }
 ```
 

decisions/0004-streaming-apis.md

@@ -94,7 +94,7 @@ No new APIs are needed for the "Accessing" stage 🎉. Since we've "teleported"
 
 ```js
 function Component() {
-  let data = useLoaderData();
+  const data = useLoaderData();
   // data.critical is a resolved value
   // data.lazy is a Promise
 }
@@ -108,7 +108,7 @@ This examples shows the full set of render-time APIs:
 
 ```jsx
 function Component() {
-  let data = useLoaderData(); // data.lazy is a Promise
+  const data = useLoaderData(); // data.lazy is a Promise
 
   return (
     <React.Suspense fallback={<p>Loading...</p>}>
@@ -120,12 +120,12 @@ function Component() {
 }
 
 function MyData() {
-  let value = useAsyncValue(); // Get the resolved value
+  const value = useAsyncValue(); // Get the resolved value
   return <p>Resolved: {value}</p>;
 }
 
 function MyError() {
-  let error = useAsyncError(); // Get the rejected value
+  const error = useAsyncError(); // Get the rejected value
   return <p>Error: {error.message}</p>;
 }
 ```
@@ -139,21 +139,21 @@ The `<Await>` name comes from the fact that for these lazily-rendered promises,
 <Await resolve={promiseOrValue} />;
 
 // Aims to resemble this Javascript:
-let value = await Promise.resolve(promiseOrValue);
+const value = await Promise.resolve(promiseOrValue);
 ```
 
 Just like `Promise.resolve` can accept a promise or a value, `<Await resolve>` can also accept a promise or a value. This is really useful in case you want to AB test `defer()` responses in the loader - you don't need to change the UI code to render the data.
 
 ```jsx
 async function loader({ request }) {
-  let shouldAwait = isUserInTestGroup(request);
+  const shouldAwait = isUserInTestGroup(request);
   return {
     maybeLazy: shouldAwait ? await fetchData() : fetchData(),
   };
 }
 
 function Component() {
-  let data = useLoaderData();
+  const data = useLoaderData();
 
   // No code forks even if data.maybeLazy is not a Promise!
   return (

decisions/0005-remixing-react-router.md

@@ -201,7 +201,7 @@ The differentiation between error and catch proved to be a bit vague over time a
 
 ```jsx
 function NewErrorBoundary() {
-  let error = useRouteError();
+  const error = useRouteError();
 
   if (error instanceof Response) {
     return <MyOldCatchBoudnary error={error} />;
@@ -257,7 +257,7 @@ function OldApp() {
 }
 
 //After
-let router = createBrowserRouter([
+const router = createBrowserRouter([
   {
     path: "/",
     element: <Layout />,
@@ -278,12 +278,12 @@ function NewApp() {
 If folks still prefer the JSX notation, they can leverage `createRoutesFromElements` (aliased from `createRoutesFromChildren` since they are not "children" in this usage):
 
 ```jsx
-let routes = createRoutesFromElements(
+const routes = createRoutesFromElements(
   <Route path="/" element={<Layout />}>
     <Route index element={<Home />} />
   </Route>
 );
-let router = createBrowserRouter(routes);
+const router = createBrowserRouter(routes);
 
 function App() {
   return <RouterProvider router={router} />;

decisions/0007-remix-on-react-router-6-4-0.md

@@ -61,7 +61,7 @@ For example, pseudo code for this might look like the following, where we enable
 const ENABLE_REMIX_ROUTER = false;
 
 async function handleDocumentRequest({ request }) {
-  let appState = {
+  const appState = {
     trackBoundaries: true,
     trackCatchBoundaries: true,
     catchBoundaryRouteId: null,
@@ -73,14 +73,14 @@ async function handleDocumentRequest({ request }) {
 
   // ... do all the current stuff
 
-  let serverHandoff = {
+  const serverHandoff = {
     actionData,
     appState: appState,
     matches: entryMatches,
     routeData,
   };
 
-  let entryContext = {
+  const entryContext = {
     ...serverHandoff,
     manifest: build.assets,
     routeModules,
@@ -90,8 +90,8 @@ async function handleDocumentRequest({ request }) {
   // If the flag is enabled, process the request again with the new static
   // handler and confirm we get the same data on the other side
   if (ENABLE_REMIX_ROUTER) {
-    let staticHandler = unstable_createStaticHandler(routes);
-    let context = await staticHandler.query(request);
+    const staticHandler = unstable_createStaticHandler(routes);
+    const context = await staticHandler.query(request);
 
     // Note: == only used for brevity ;)
     assert(entryContext.matches === context.matches);

docs/file-conventions/route-files-v2.md

@@ -285,7 +285,7 @@ Similar to dynamic route parameters, you can access the value of the matched pat
 
 ```tsx filename=app/routes/files.$.tsx
 export function loader({ params }) {
-  let filePath = params["*"];
+  const filePath = params["*"];
   return fake.getFileInfo(filePath);
 }
 ```

docs/guides/bff.md

@@ -19,16 +19,16 @@ import { json } from "@remix-run/node"; // or cloudflare/deno
 import escapeHtml from "escape-html";
 
 export async function loader({ request }: LoaderArgs) {
-  let apiUrl = "http://api.example.com/some-data.json";
-  let res = await fetch(apiUrl, {
+  const apiUrl = "http://api.example.com/some-data.json";
+  const res = await fetch(apiUrl, {
     headers: {
       Authorization: `Bearer ${process.env.API_TOKEN}`,
     },
   });
 
-  let data = await res.json();
+  const data = await res.json();
 
-  let prunedData = data.map((record) => {
+  const prunedData = data.map((record) => {
     return {
       id: record.id,
       title: record.title,

docs/guides/migrating-react-router-app.md

@@ -55,7 +55,7 @@ export default function handleRequest(
   responseHeaders,
   remixContext
 ) {
-  let markup = renderToString(
+  const markup = renderToString(
     <RemixServer context={remixContext} url={request.url} />
   );
   responseHeaders.set("Content-Type", "text/html");
@@ -252,7 +252,7 @@ A common pain-point in migrating a client-rendered codebase to a server-rendered
 
 ```jsx
 function Count() {
-  let [count, setCount] = React.useState(
+  const [count, setCount] = React.useState(
     () => localStorage.getItem("count") || 0
   );
 
@@ -291,7 +291,7 @@ One potential solution here is using a different caching mechanism that can be u
 let isHydrating = true;
 
 function SomeComponent() {
-  let [isHydrated, setIsHydrated] = React.useState(
+  const [isHydrated, setIsHydrated] = React.useState(
     !isHydrating
   );
 

docs/guides/streaming.md

@@ -183,7 +183,7 @@ function serveTheBots(
         // Use onAllReady to wait for the entire document to be ready
         onAllReady() {
           responseHeaders.set("Content-Type", "text/html");
-          let body = new PassThrough();
+          const body = new PassThrough();
           pipe(body);
           resolve(
             new Response(body, {
@@ -219,7 +219,7 @@ function serveBrowsers(
         // use onShellReady to wait until a suspense boundary is triggered
         onShellReady() {
           responseHeaders.set("Content-Type", "text/html");
-          let body = new PassThrough();
+          const body = new PassThrough();
           pipe(body);
           resolve(
             new Response(body, {

docs/hooks/use-revalidator.md

@@ -13,7 +13,7 @@ This hook allows you to revalidate the data for any reason. React Router automat
 import { useRevalidator } from "@remix-run/react";
 
 function WindowFocusRevalidator() {
-  let revalidator = useRevalidator();
+  const revalidator = useRevalidator();
 
   useFakeWindowFocus(() => {
     revalidator.revalidate();

docs/pages/faq.md

@@ -83,8 +83,8 @@ HTML buttons can send a value, so it's the easiest way to implement this:
 
 ```tsx filename=app/routes/projects/$id.tsx lines=[3-4,33,39]
 export async function action({ request }: ActionArgs) {
-  let formData = await request.formData();
-  let intent = formData.get("intent");
+  const formData = await request.formData();
+  const intent = formData.get("intent");
   switch (intent) {
     case "update": {
       // do your update
@@ -101,7 +101,7 @@ export async function action({ request }: ActionArgs) {
 }
 
 export default function Projects() {
-  let project = useLoaderData<typeof loader>();
+  const project = useLoaderData<typeof loader>();
   return (
     <>
       <h2>Update Project</h2>
@@ -161,7 +161,7 @@ Each checkbox has the name: "category". Since `FormData` can have multiple value
 ```tsx
 export async function action({ request }: ActionArgs) {
   const formData = await request.formData();
-  let categories = formData.getAll("category");
+  const categories = formData.getAll("category");
   // ["comedy", "music"]
 }
 ```
@@ -189,10 +189,10 @@ import queryString from "query-string";
 export async function action({ request }: ActionArgs) {
   // use `request.text()`, not `request.formData` to get the form data as a url
   // encoded form query string
-  let formQueryString = await request.text();
+  const formQueryString = await request.text();
 
   // parse it into an object
-  let obj = queryString.parse(formQueryString);
+  const obj = queryString.parse(formQueryString);
 }
 ```
 
@@ -210,8 +210,8 @@ And then parse it in the action:
 
 ```tsx
 export async function action({ request }: ActionArgs) {
-  let formData = await request.formData();
-  let obj = JSON.parse(formData.get("json"));
+  const formData = await request.formData();
+  const obj = JSON.parse(formData.get("json"));
 }
 ```
 

docs/pages/technical-explanation.md

@@ -51,15 +51,15 @@ Express (or Node.js) is the actual server, Remix is just a handler on that serve
 ```ts
 export function createRequestHandler({ build }) {
   // creates a Fetch API request handler from the server build
-  let handleRequest = createRemixRequestHandler(build);
+  const handleRequest = createRemixRequestHandler(build);
 
   // returns an express.js specific handler for the express server
   return async (req, res) => {
     // adapts the express.req to a Fetch API request
-    let request = createRemixRequest(req);
+    const request = createRemixRequest(req);
 
     // calls the app handler and receives a Fetch API response
-    let response = await handleRequest(request);
+    const response = await handleRequest(request);
 
     // adapts the Fetch API response to the express.res
     sendRemixResponse(res, response);