Merge branch 'main' into release-next

Author: brophdawg11

contributors.yml

@@ -1,3 +1,4 @@
+- aaronadamsCA
 - aaronpowell96
 - aaronshaf
 - AbePlays
@@ -71,6 +72,7 @@
 - atesgoral
 - athongsavath
 - AustinGil
+- avindra
 - awthwathje
 - axel-habermaier
 - baby230211
@@ -176,6 +178,7 @@
 - dunglas
 - dvargas92495
 - dwightwatson
+- dwjohnston
 - dwt47
 - dylanplayer
 - eastlondoner
@@ -198,6 +201,7 @@
 - evanwinter
 - everdimension
 - exegeteio
+- ezekeal
 - F3n67u
 - FAL-coffee
 - fayez-nazzal
@@ -441,6 +445,7 @@
 - marshallwalker
 - martensonbj
 - marvinwu
+- masious
 - matchai
 - mathieusteele
 - matt-l-w
@@ -503,6 +508,7 @@
 - n8agrin
 - na2hiro
 - nareshbhatia
+- nathggns
 - nauvalazhar
 - naveed-fida
 - navid-kalaei
@@ -558,6 +564,7 @@
 - ptitFicus
 - pwbriggs
 - pyr0gan
+- rachaelmcq
 - ramiroazar
 - RATIU5
 - raulfdm

docs/guides/gotchas.md

@@ -20,7 +20,7 @@ if (typeof window === "undefined") {
 }
 ```
 
-This works fine in a Node.js environment, however, Deno actually supports `window`! So if you really want to check whether you're running in the browser, it's better to check for `document` instead:
+This works fine in a Node.js environment, however, some environments might actually support `window` (like Deno v1), so if you really want to check whether you're running in the browser, it's better to check for `document` instead:
 
 ```ts good
 if (typeof document === "undefined") {

docs/guides/mdx.md

@@ -204,8 +204,12 @@ exports.mdx = async (filename) => {
 };
 ```
 
+The above configuration parses the markdown to insert [highlight.js][highlightjs] friendly DOM elements. To have the syntax highlighting appear, you will also need to include the highlight.js css file. See also [surfacing styles][surfacing-styles].
+
 [mdx-plugin]: https://mdxjs.com/packages/rollup
 [mdx]: https://mdxjs.com
 [yaml]: https://yaml.org
 [mdx-bundler]: https://github.com/kentcdodds/mdx-bundler
 [classic-remix-compiler]: ./vite#classic-remix-compiler-vs-remix-vite
+[surfacing-styles]: ../styling#surfacing-styles
+[highlightjs]: https://highlightjs.org/

docs/hooks/use-fetcher.md

@@ -112,6 +112,8 @@ fetcher.submit(
 
 Loads data from a route loader. While multiple nested routes can match a URL, only the leaf route will be called.
 
+Note that when calling `load` on an index route's loader, you must include an [`?index` query param][index-query-param] in order to disambiguate between the `index.tsx` layout and the `root.tsx` route.
+
 ```ts
 fetcher.load("/some/route");
 fetcher.load("/some/route?foo=bar");
@@ -180,3 +182,4 @@ The form method of the submission.
 [use-submit]: ./use-submit
 [userevalidator]: ./use-revalidator
 [shouldrevalidate]: ../route/should-revalidate#shouldrevalidate
+[index-query-param]: ../guides/index-query-param

docs/hooks/use-revalidator.md

@@ -40,16 +40,17 @@ Initiates a revalidation.
 ```tsx
 function useLivePageData() {
   const revalidator = useRevalidator();
-  const interval = useInterval(5000);
 
-  useEffect(() => {
+  useInterval(() => {
     if (revalidator.state === "idle") {
       revalidator.revalidate();
     }
-  }, [interval, revalidator]);
+  }, 5000);
 }
 ```
 
+See [here][here] for a sample `useInterval` implementation.
+
 ## Notes
 
 While you can render multiple occurrences of `useRevalidator` at the same time, underneath it is a singleton. This means when one `revalidator.revalidate()` is called, all instances go into the `"loading"` state together (or rather, they all update to report the singleton state).
@@ -61,3 +62,4 @@ If a navigation happens while a revalidation is in flight, the revalidation will
 [form-component]: ../components/form
 [use-fetcher]: ./use-fetcher
 [use-submit]: ./use-submit
+[here]: https://overreacted.io/making-setinterval-declarative-with-react-hooks

docs/start/quickstart.md

@@ -27,7 +27,7 @@ cd my-remix-app
 npm init -y
 
 # install runtime dependencies
-npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
+npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react@18 react-dom@18
 
 # install dev dependencies
 npm i -D @remix-run/dev vite
@@ -91,7 +91,16 @@ export default function App() {
 
 ## Build and Run
 
-First build the app for production:
+First you will need to specify the type as `module` in `package.json` to satisfy esmodule requirements for `remix-run` and future versions of `vite`.
+
+```jsonc filename=package.json lines=[2] nocopy
+{
+  "type": "module"
+  // ...
+}
+```
+
+Next build the app for production:
 
 ```shellscript nonumber
 npx remix vite:build
@@ -101,15 +110,6 @@ You should now see a `build` folder containing a `server` folder (the server ver
 
 👉 **Run the app with `remix-serve`**
 
-First you will need to specify the type in `package.json` as module so that `remix-serve` can run your app.
-
-```jsonc filename=package.json lines=[2] nocopy
-{
-  "type": "module"
-  // ...
-}
-```
-
 Now you can run your app with `remix-serve`:
 
 ```shellscript nonumber
@@ -139,7 +139,7 @@ Just for kicks, let's stop using `remix-serve` and use express instead.
 👉 **Install Express, the Remix Express adapter, and [cross-env] for running in production mode**
 
 ```shellscript nonumber
-npm i express @remix-run/express cross-env
+npm i express@4 @remix-run/express cross-env
 
 # not going to use this anymore
 npm uninstall @remix-run/serve

docs/start/tutorial.md

@@ -367,9 +367,8 @@ There are two APIs we'll be using to load data, [`loader`][loader] and [`useLoad
 
 <docs-info>The following code has a type error in it, we'll fix it in the next section</docs-info>
 
-```tsx filename=app/root.tsx lines=[2,11,15,19-22,25,34-57]
+```tsx filename=app/root.tsx lines=[10,14,18-21,24,33-56]
 // existing imports
-import { json } from "@remix-run/node";
 import {
   Form,
   Link,
@@ -388,7 +387,7 @@ import { getContacts } from "./data";
 
 export const loader = async () => {
   const contacts = await getContacts();
-  return json({ contacts });
+  return { contacts };
 };
 
 export default function App() {
@@ -470,16 +469,15 @@ These params are most often used to find a record by ID. Let's try it out.
 
 <docs-info>The following code has type errors in it, we'll fix them in the next section</docs-info>
 
-```tsx filename=app/routes/contacts.$contactId.tsx lines=[1-2,5,7-10,13]
-import { json } from "@remix-run/node";
+```tsx filename=app/routes/contacts.$contactId.tsx lines=[1,4,6-9,12]
 import { Form, useLoaderData } from "@remix-run/react";
 // existing imports
 
 import { getContact } from "../data";
 
 export const loader = async ({ params }) => {
   const contact = await getContact(params.contactId);
-  return json({ contact });
+  return { contact };
 };
 
 export default function Contact() {
@@ -509,7 +507,7 @@ export const loader = async ({
 }: LoaderFunctionArgs) => {
   invariant(params.contactId, "Missing contactId param");
   const contact = await getContact(params.contactId);
-  return json({ contact });
+  return { contact };
 };
 
 // existing code
@@ -532,7 +530,7 @@ export const loader = async ({
   if (!contact) {
     throw new Response("Not Found", { status: 404 });
   }
-  return json({ contact });
+  return { contact };
 };
 
 // existing code
@@ -569,7 +567,7 @@ import { createEmptyContact, getContacts } from "./data";
 
 export const action = async () => {
   const contact = await createEmptyContact();
-  return json({ contact });
+  return { contact };
 };
 
 // existing code
@@ -611,7 +609,6 @@ Nothing we haven't seen before, feel free to copy/paste:
 
 ```tsx filename=app/routes/contacts.$contactId_.edit.tsx
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import { Form, useLoaderData } from "@remix-run/react";
 import invariant from "tiny-invariant";
 
@@ -625,7 +622,7 @@ export const loader = async ({
   if (!contact) {
     throw new Response("Not Found", { status: 404 });
   }
-  return json({ contact });
+  return { contact };
 };
 
 export default function EditContact() {
@@ -701,7 +698,7 @@ import type {
   ActionFunctionArgs,
   LoaderFunctionArgs,
 } from "@remix-run/node";
-import { json, redirect } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 // existing imports
 
 import { getContact, updateContact } from "../data";
@@ -797,7 +794,7 @@ Now that we know how to redirect, let's update the action that creates new conta
 
 ```tsx filename=app/root.tsx lines=[2,7]
 // existing imports
-import { json, redirect } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 // existing imports
 
 export const action = async () => {
@@ -1107,7 +1104,7 @@ export const loader = async ({
   const url = new URL(request.url);
   const q = url.searchParams.get("q");
   const contacts = await getContacts(q);
-  return json({ contacts });
+  return { contacts };
 };
 
 // existing code
@@ -1141,7 +1138,7 @@ export const loader = async ({
   const url = new URL(request.url);
   const q = url.searchParams.get("q");
   const contacts = await getContacts(q);
-  return json({ contacts, q });
+  return { contacts, q };
 };
 
 export default function App() {
@@ -1213,22 +1210,25 @@ You could certainly do this as a controlled component. You will have more synchr
 <summary>Expand this to see what it would look like</summary>
 
 ```tsx filename=app/root.tsx lines=[2,9-10,12-16,30-33,36-37]
-// existing imports
-import { useEffect, useState } from "react";
+// We no longer need useEffect
+import { useState } from "react";
 
 // existing imports & exports
 
 export default function App() {
   const { contacts, q } = useLoaderData<typeof loader>();
   const navigation = useNavigation();
   // the query now needs to be kept in state
+  const [prevQ, setPrevQ] = useState(q);
   const [query, setQuery] = useState(q || "");
 
-  // we still have a `useEffect` to synchronize the query
-  // to the component state on back/forward button clicks
-  useEffect(() => {
+  // We can avoid using `useEffect` to synchronize the query
+  // by using a separate piece of state to store the previous
+  // value
+  if (q !== prevQ) {
+    setPrevQ(q);
     setQuery(q || "");
-  }, [q]);
+  }
 
   return (
     <html lang="en">