diff --git a/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md b/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md index 23377f74a87..1959f161835 100644 --- a/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md +++ b/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(); - let actionData = useActionData(); + const loaderData = useLoaderData(); + const actionData = useActionData(); return
{/* ... */}
; } ``` @@ -107,7 +107,7 @@ export const loader: LoaderFunction = () => { }; export default function Route() { - let { birthday } = useLoaderData(); + const { birthday } = useLoaderData(); // ^ `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(); + const data = useLoaderData(); // ... } ``` @@ -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(); // <-- will be deprecated - let dataCast = useLoaderData() as MyLoaderData; // <- use this instead + const dataGeneric = useLoaderData(); // <-- will be deprecated + const dataCast = useLoaderData() as MyLoaderData; // <- use this instead } ``` diff --git a/decisions/0004-streaming-apis.md b/decisions/0004-streaming-apis.md index 0aeb826542b..80889613e4b 100644 --- a/decisions/0004-streaming-apis.md +++ b/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 ( Loading...

}> @@ -120,12 +120,12 @@ function Component() { } function MyData() { - let value = useAsyncValue(); // Get the resolved value + const value = useAsyncValue(); // Get the resolved value return

Resolved: {value}

; } function MyError() { - let error = useAsyncError(); // Get the rejected value + const error = useAsyncError(); // Get the rejected value return

Error: {error.message}

; } ``` @@ -139,21 +139,21 @@ The `` name comes from the fact that for these lazily-rendered promises, ; // 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, `` 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 ( diff --git a/decisions/0005-remixing-react-router.md b/decisions/0005-remixing-react-router.md index 5024f171b6c..61e5ea37ab5 100644 --- a/decisions/0005-remixing-react-router.md +++ b/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 ; @@ -257,7 +257,7 @@ function OldApp() { } //After -let router = createBrowserRouter([ +const router = createBrowserRouter([ { path: "/", element: , @@ -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( }> } /> ); -let router = createBrowserRouter(routes); +const router = createBrowserRouter(routes); function App() { return ; diff --git a/decisions/0007-remix-on-react-router-6-4-0.md b/decisions/0007-remix-on-react-router-6-4-0.md index 74b1afc5b4c..52a1e17cb81 100644 --- a/decisions/0007-remix-on-react-router-6-4-0.md +++ b/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); diff --git a/docs/file-conventions/route-files-v2.md b/docs/file-conventions/route-files-v2.md index c4bf19d30b2..8413643e744 100644 --- a/docs/file-conventions/route-files-v2.md +++ b/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); } ``` diff --git a/docs/guides/bff.md b/docs/guides/bff.md index 5fc6bdb2646..fcd31c711f5 100644 --- a/docs/guides/bff.md +++ b/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, diff --git a/docs/guides/migrating-react-router-app.md b/docs/guides/migrating-react-router-app.md index 4cb2d46c004..514b0f9159c 100644 --- a/docs/guides/migrating-react-router-app.md +++ b/docs/guides/migrating-react-router-app.md @@ -55,7 +55,7 @@ export default function handleRequest( responseHeaders, remixContext ) { - let markup = renderToString( + const markup = renderToString( ); 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 ); diff --git a/docs/guides/streaming.md b/docs/guides/streaming.md index 15ff6fcc8ec..d4ca224ff33 100644 --- a/docs/guides/streaming.md +++ b/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, { diff --git a/docs/hooks/use-revalidator.md b/docs/hooks/use-revalidator.md index 6067d265adf..1554db3290c 100644 --- a/docs/hooks/use-revalidator.md +++ b/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(); diff --git a/docs/pages/faq.md b/docs/pages/faq.md index 3bfefba36f3..dd9c4074761 100644 --- a/docs/pages/faq.md +++ b/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(); + const project = useLoaderData(); return ( <>

Update Project

@@ -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")); } ``` diff --git a/docs/pages/technical-explanation.md b/docs/pages/technical-explanation.md index fd1f3282dcb..1191d884217 100644 --- a/docs/pages/technical-explanation.md +++ b/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); diff --git a/docs/pages/v2.md b/docs/pages/v2.md index 50d8fab391a..dd59b44ef77 100644 --- a/docs/pages/v2.md +++ b/docs/pages/v2.md @@ -172,7 +172,7 @@ To replicate the API of `parentsData`, the `@remix-run/v1-meta` package provides ```tsx bad filename=app/routes/v1-route.tsx export function meta(args) { - let parentData = args.parentsData["routes/parent"]; + const parentData = args.parentsData["routes/parent"]; } ``` @@ -182,8 +182,8 @@ Becomes: import { getMatchesData } from "@remix-run/v1-meta"; export function meta(args) { - let matchesData = getMatchesData(args); - let parentData = matchesData["routes/parent"]; + const matchesData = getMatchesData(args); + const parentData = matchesData["routes/parent"]; } ``` @@ -225,8 +225,8 @@ Note that in v1 the objects returned from nested routes were all merged, you wil ```tsx filename=app/routes/v2-route.tsx export function meta({ matches }) { - let rootMeta = matches[0].meta; - let title = rootMeta.find((m) => m.title); + const rootMeta = matches[0].meta; + const title = rootMeta.find((m) => m.title); return [ title, @@ -339,7 +339,7 @@ This hook is now called `useNavigation` to avoid confusion with the recent React import { useTransition } from "@remix-run/react"; function SomeComponent() { - let transition = useTransition(); + const transition = useTransition(); transition.submission.formData; transition.submission.formMethod; transition.submission.formAction; @@ -351,7 +351,7 @@ function SomeComponent() { import { useNavigation } from "@remix-run/react"; function SomeComponent() { - let navigation = useNavigation(); + const navigation = useNavigation(); // transition.submission keys are flattened onto `navigation[key]` navigation.formData; @@ -367,14 +367,14 @@ You can derive the previous `transition.type` with the following examples. Keep ```tsx function Component() { - let navigation = useNavigation(); + const navigation = useNavigation(); // transition.type === "actionSubmission" - let isActionSubmission = + const isActionSubmission = navigation.state === "submitting"; // transition.type === "actionReload" - let isActionReload = + const isActionReload = navigation.state === "loading" && navigation.formMethod != null && navigation.formMethod != "get" && @@ -382,7 +382,7 @@ function Component() { navigation.formAction === navigation.pathname; // transition.type === "actionRedirect" - let isActionRedirect = + const isActionRedirect = navigation.state === "loading" && navigation.formMethod != null && navigation.formMethod != "get" && @@ -390,14 +390,14 @@ function Component() { navigation.formAction !== navigation.pathname; // transition.type === "loaderSubmission" - let isLoaderSubmission = + const isLoaderSubmission = navigation.state === "loading" && navigation.state.formMethod === "get" && // We had a loader submission and are navigating to the submitted location navigation.formAction === navigation.pathname; // transition.type === "loaderSubmissionRedirect" - let isLoaderSubmissionRedirect = + const isLoaderSubmissionRedirect = navigation.state === "loading" && navigation.state.formMethod === "get" && // We had a loader submission and are navigating to a new location @@ -413,7 +413,7 @@ Like `useNavigation`, `useFetcher` has flattened the `submission` and removed th import { useFetcher } from "@remix-run/react"; function SomeComponent() { - let fetcher = useTransition(); + const fetcher = useTransition(); fetcher.submission.formData; fetcher.submission.formMethod; fetcher.submission.formAction; @@ -425,7 +425,7 @@ function SomeComponent() { import { useNavigation } from "@remix-run/react"; function SomeComponent() { - let fetcher = useTransition(); + const fetcher = useTransition(); // these keys are flattened fetcher.formData; @@ -441,17 +441,17 @@ You can derive the previous `fetcher.type` with the following examples. Keep in ```tsx function Component() { - let fetcher = useFetcher(); + const fetcher = useFetcher(); // fetcher.type === "done" - let isDone = + const isDone = fetcher.state === "idle" && fetcher.data != null; // fetcher.type === "actionSubmission" - let isActionSubmission = fetcher.state === "submitting"; + const isActionSubmission = fetcher.state === "submitting"; // fetcher.type === "actionReload" - let isActionReload = + const isActionReload = fetcher.state === "loading" && fetcher.formMethod != null && fetcher.formMethod != "get" && @@ -459,7 +459,7 @@ function Component() { fetcher.data != null; // fetcher.type === "actionRedirect" - let isActionRedirect = + const isActionRedirect = fetcher.state === "loading" && fetcher.formMethod != null && navigation.formMethod != "get" && @@ -467,12 +467,12 @@ function Component() { fetcher.data == null; // fetcher.type === "loaderSubmission" - let isLoaderSubmission = + const isLoaderSubmission = navigation.state === "loading" && navigation.state.formMethod === "get"; // fetcher.type === "normalLoad" - let isNormalLoad = + const isNormalLoad = navigation.state === "loading" && navigation.state.formMethod == null; } @@ -493,7 +493,7 @@ Multiple APIs return the `formMethod` of a submission. In v1 they return a lower ```tsx function Something() { - let navigation = useNavigation(); + const navigation = useNavigation(); // v1 navigation.formMethod === "post"; diff --git a/docs/route/error-boundary-v2.md b/docs/route/error-boundary-v2.md index 2bc1f902b22..589de5982d8 100644 --- a/docs/route/error-boundary-v2.md +++ b/docs/route/error-boundary-v2.md @@ -34,7 +34,7 @@ import { } from "@remix-run/react"; export function ErrorBoundary() { - let error = useRouteError(); + const error = useRouteError(); if (isRouteErrorResponse(error)) { return ( diff --git a/docs/route/meta-v2.md b/docs/route/meta-v2.md index cc3bfd794c7..d4eb136fb4b 100644 --- a/docs/route/meta-v2.md +++ b/docs/route/meta-v2.md @@ -86,7 +86,7 @@ This is the current router `Location` object. This is useful for generating tags ```tsx export const meta: V2_MetaFunction = ({ location }) => { - let searchQuery = new URLSearchParams( + const searchQuery = new URLSearchParams( location.search ).get("q"); return [{ title: `Search results for "${searchQuery}"` }]; @@ -136,10 +136,10 @@ export const meta: V2_MetaFunction< typeof loader, { "routes/project/$pid": typeof projectDetailsLoader } > = ({ data, matches }) => { - let project = matches.find( + const project = matches.find( (match) => match.id === "routes/project/$pid" ).project; - let task = data.task; + const task = data.task; return [{ title: `${project.name}: ${task.name}` }]; }; ``` @@ -225,7 +225,7 @@ Usually you only need to add meta to what the parent has already defined. You ca ```tsx export const meta: V2_MetaFunction = ({ matches }) => { - let parentMeta = matches.flatMap( + const parentMeta = matches.flatMap( (match) => match.meta ?? [] ); return [...parentMeta, { title: "Projects" }]; @@ -236,7 +236,7 @@ Note that this _will not_ override something like `title`. This is only additive ```tsx export const meta: V2_MetaFunction = ({ matches }) => { - let parentMeta = matches + const parentMeta = matches .flatMap((match) => match.meta ?? []) .filter((meta) => !("title" in meta)); return [...parentMeta, { title: "Projects" }]; diff --git a/docs/route/should-revalidate.md b/docs/route/should-revalidate.md index b8aaa5df957..0c45d432d0c 100644 --- a/docs/route/should-revalidate.md +++ b/docs/route/should-revalidate.md @@ -94,7 +94,7 @@ For instance, consider an event slug with the id and an human-friendly title: ```jsx filename=app/routes/events/$slug.tsx export async function loader({ params }) { - let id = params.slug.split("--")[1]; + const id = params.slug.split("--")[1]; return loadEvent(id); } @@ -103,8 +103,8 @@ export async function shouldRevalidate({ nextParams, defaultShouldRevalidate, }) { - let currentId = currentParams.slug.split("--")[1]; - let nextID = nextParams.slug.split("--")[1]; + const currentId = currentParams.slug.split("--")[1]; + const nextID = nextParams.slug.split("--")[1]; if (currentId !== nextID) { return true; } @@ -213,7 +213,7 @@ In this UI, that's wasted bandwidth for the user, your server, and your database ```tsx export async function loader({ params }: LoaderArgs) { - let data = await fakedb.findProject(params.projectId); + const data = await fakedb.findProject(params.projectId); return json(data); } ``` diff --git a/docs/tutorials/jokes.md b/docs/tutorials/jokes.md index 9aa445aa17d..dd523b97389 100644 --- a/docs/tutorials/jokes.md +++ b/docs/tutorials/jokes.md @@ -2549,7 +2549,7 @@ function validatePassword(password: unknown) { } function validateUrl(url: string) { - let urls = ["/jokes", "/", "https://remix.run"]; + const urls = ["/jokes", "/", "https://remix.run"]; if (urls.includes(url)) { return url; } @@ -3719,7 +3719,7 @@ function validatePassword(password: unknown) { } function validateUrl(url: string) { - let urls = ["/jokes", "/", "https://remix.run"]; + const urls = ["/jokes", "/", "https://remix.run"]; if (urls.includes(url)) { return url; } @@ -5049,7 +5049,7 @@ function validatePassword(password: unknown) { } function validateUrl(url: string) { - let urls = ["/jokes", "/", "https://remix.run"]; + const urls = ["/jokes", "/", "https://remix.run"]; if (urls.includes(url)) { return url; } diff --git a/packages/remix-cloudflare/CHANGELOG.md b/packages/remix-cloudflare/CHANGELOG.md index 9a441681bf5..1b5d51ce69d 100644 --- a/packages/remix-cloudflare/CHANGELOG.md +++ b/packages/remix-cloudflare/CHANGELOG.md @@ -28,11 +28,11 @@ ```tsx // before export function meta({ matches }) { - let rootModule = matches.find((match) => match.route.id === "root"); + const rootModule = matches.find((match) => match.route.id === "root"); } // after export function meta({ matches }) { - let rootModule = matches.find((match) => match.id === "root"); + const rootModule = matches.find((match) => match.id === "root"); } ``` - Added support for generating `