Merge branch 'dev' into markdalgleish/support-create-remix-tags

remix-run · Oct 16, 2023 · 4b21bf8 · 4b21bf8
2 parents 2d6b19c + 521e272
commit 4b21bf8
Show file tree

Hide file tree

Showing 73 changed files with 785 additions and 393 deletions.
diff --git a/.changeset/dont-mutate-meta.md b/.changeset/dont-mutate-meta.md
diff --git a/.changeset/express-flush-stream-headers.md b/.changeset/express-flush-stream-headers.md
diff --git a/.changeset/fix-cf-sourcemaps.md b/.changeset/fix-cf-sourcemaps.md
diff --git a/.changeset/route-lazy-fouc.md b/.changeset/route-lazy-fouc.md
diff --git a/.changeset/stabilize-create-remix-stub.md b/.changeset/stabilize-create-remix-stub.md
diff --git a/.changeset/stale-apples-reply.md b/.changeset/stale-apples-reply.md
diff --git a/.changeset/start-view-transition.md b/.changeset/start-view-transition.md
diff --git a/.changeset/use-matches-type.md b/.changeset/use-matches-type.md
diff --git a/contributors.yml b/contributors.yml
@@ -97,6 +97,8 @@
 - colinhacks
 - confix
 - coryhouse
+- courtyenn
+- craigayre
 - craigglennie
 - crismali
 - CSFlorin
@@ -119,6 +121,7 @@
 - developit
 - devongovett
 - dgurns
+- dg1234uk
 - dhargitai
 - dhmacs
 - dima-takoy
@@ -230,6 +233,7 @@
 - janhoogeveen
 - Jannis-Morgenstern
 - jasonadelia
+- jawkha
 - jaydiablo
 - jca41
 - jdeniau
@@ -502,6 +506,7 @@
 - squidpunch
 - staylor
 - stephanerangaya
+- stephenwade
 - SufianBabri
 - supachaidev
 - Synvox
@@ -537,6 +542,7 @@
 - vimutti77
 - vincecao
 - visormatt
+- viveleroi
 - vkrol
 - vlindhol
 - vmosyaykin
@@ -560,6 +566,7 @@
 - yomeshgupta
 - youbicode
 - youngvform
+- yusuke99
 - zachdtaylor
 - zainfathoni
 - zayenz
@@ -585,3 +592,4 @@
 - robbtraister
 - TrySound
 - rogepi
+- fredericoo
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -77,9 +77,9 @@ This is recommended over [`<form>`][form_element]. When the `action` prop is omi
 
 The `unstable_viewTransition` prop enables a [View Transition][view-transitions] for this navigation by wrapping the final state update in `document.startViewTransition()`. If you need to apply specific styles for this view transition, you will also need to leverage the [`unstable_useViewTransitionState()`][use-view-transition-state].
 
-<docs-warn>
+<docs-warning>
 Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+</docs-warning>
 
 ## Notes
 

diff --git a/docs/components/link.md b/docs/components/link.md
@@ -188,9 +188,9 @@ function ImageLink(to) {
 }
 ```
 
-<docs-warn>
+<docs-warning>
 Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+</docs-warning>
 
 [scroll_restoration_component]: ./scroll-restoration
 [history_state]: https://developer.mozilla.org/en-US/docs/Web/API/History/state

diff --git a/docs/components/nav-link.md b/docs/components/nav-link.md
@@ -186,9 +186,9 @@ You may also use the `className`/`style` props or the render props passed to `ch
 </NavLink>
 ```
 
-<docs-warn>
+<docs-warning>
 Please note that this API is marked unstable and may be subject to breaking changes without a major release.
-</docs-warn>
+</docs-warning>
 
 ### `<Link>` props
 

diff --git a/docs/components/outlet.md b/docs/components/outlet.md
@@ -20,3 +20,17 @@ export function SomeParent() {
   );
 }
 ```
+
+## Props
+
+### `context`
+
+Provides a context value to the element tree below the outlet. Use when the parent route needs to provide values to child routes.
+
+```tsx
+<Outlet context={myContextValue} />
+```
+
+See also: [`useOutletContext`][use-outlet-context]
+
+[use-outlet-context]: ../hooks/use-outlet-context
diff --git a/docs/discussion/form-vs-fetcher.md b/docs/discussion/form-vs-fetcher.md
@@ -222,7 +222,7 @@ function useMarkAsRead({ articleId, userId }) {
 
 Anytime you show the user avatar, you could put a hover effect that fetches data from a loader and displays it in a popup.
 
-```tsx filename=app/routes/user.$id.details.tsx
+```tsx filename=app/routes/users.$id.details.tsx
 export async function loader({
   params,
 }: LoaderFunctionArgs) {

diff --git a/docs/file-conventions/entry.server.md b/docs/file-conventions/entry.server.md
@@ -57,5 +57,5 @@ Note that this does not handle thrown `Response` instances from your `loader`/`a
 [browser-entry-module]: ./entry.client
 [rendertopipeablestream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
 [rendertoreadablestream]: https://react.dev/reference/react-dom/server/renderToReadableStream
-[node-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/node/entry.server.react-stream.tsx
-[cloudflare-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/cloudflare/entry.server.react-stream.tsx
+[node-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.node.tsx
+[cloudflare-streaming-entry-server]: https://github.com/remix-run/remix/blob/main/packages/remix-dev/config/defaults/entry.server.cloudflare.tsx
diff --git a/docs/future/vite.md b/docs/future/vite.md
@@ -459,7 +459,7 @@ React Fast Refresh cannot track changes for a component when hooks are being add
 
 #### Component Keys
 
-In some cases, React cannot distinguish between existing components being changed and new components being added. \[React needs `key`s]\[react_keys] to disambiguate these cases and track changes when sibling elements are modified.
+In some cases, React cannot distinguish between existing components being changed and new components being added. [React needs `key`s][react_keys] to disambiguate these cases and track changes when sibling elements are modified.
 
 ## Acknowledgements
 
@@ -508,6 +508,7 @@ We're definitely late to the Vite party, but we're excited to be here now!
 [glob-imports]: https://vitejs.dev/guide/features.html#glob-import
 [use_loader_data]: ../hooks/use-loader-data
 [react_refresh]: https://github.com/facebook/react/tree/main/packages/react-refresh
+[react_keys]: https://react.dev/learn/rendering-lists#why-does-react-need-keys
 [vite-team]: https://vitejs.dev/team.html
 [consider-using-vite]: https://github.com/remix-run/remix/discussions/2427
 [remix-kit]: https://github.com/jrestall/remix-kit

diff --git a/docs/guides/breadcrumbs.md b/docs/guides/breadcrumbs.md
@@ -0,0 +1,87 @@
+---
+title: Breadcrumbs Guide
+---
+
+# Breadcrumbs Guide
+
+In Remix, you can easily build dynamic breadcrumbs based on your route hierarchy. This guide will take you through the process using the `useMatches` and `handle` features.
+
+## Understanding the Basics
+
+Remix provides access to all route matches and related data at the top of the React element tree. This enables components like `<Meta />`, `<Links />`, and `<Scripts />` to obtain values from nested routes and render them at the top of the document.
+
+You can use a similar strategy using the `useMatches` and `handle` functions. While we're focusing on breadcrumbs, the principles demonstrated here are applicable to a range of scenarios.
+
+## Defining the Breadcrumbs for Routes
+
+Start by adding a `breadcrumb` attribute to your route's `handle`. This attribute isn't specific to Remix – you can name it whatever you like. For our example, we'll call it `breadcrumb`.
+
+```tsx filename=app/routes/parent.tsx
+export const handle = {
+  breadcrumb: () => <Link to="/parent">Some Route</Link>,
+};
+```
+
+Similarly, you can define breadcrumbs for child routes:
+
+```tsx filename=app/routes/parent.child.tsx
+export const handle = {
+  breadcrumb: () => (
+    <Link to="/parent/child">Child Route</Link>
+  ),
+};
+```
+
+## Aggregating Breadcrumbs in the Root Route
+
+Now, bring everything together in your root route using `useMatches`:
+
+```tsx filename=root.tsx lines=[5,9,19-28]
+import {
+  Links,
+  Scripts,
+  useLoaderData,
+  useMatches,
+} from "@remix-run/react";
+
+export default function Root() {
+  const matches = useMatches();
+
+  return (
+    <html lang="en">
+      <head>
+        <Links />
+      </head>
+      <body>
+        <header>
+          <ol>
+            {matches
+              .filter(
+                (match) =>
+                  match.handle && match.handle.breadcrumb
+              )
+              .map((match, index) => (
+                <li key={index}>
+                  {match.handle.breadcrumb(match)}
+                </li>
+              ))}
+          </ol>
+        </header>
+        <Outlet />
+      </body>
+    </html>
+  );
+}
+```
+
+Note that we pass the `match` object to breadcrumbs, allowing us to potentially utilize `match.data` for enhancing breadcrumb content based on the route's data. This example doesn't use it, but you'll like want to use values from your loader data for the breadcrumb.
+
+Using `useMatches` with `handle` offers a robust way for routes to contribute to rendering processes higher up the element tree than their actual render point.
+
+## Additional Resources
+
+- [`useMatches`][use-matches]
+- [`handle`][handle]
+
+[use-matches]: ../hooks/use-matches
+[handle]: ../route/handle
diff --git a/docs/hooks/use-href.md b/docs/hooks/use-href.md
@@ -4,13 +4,13 @@ title: useHref
 
 # `useHref`
 
-Resolves a full URL to be used as an [`href`][anchor_element_href_attribute] to a [`link`][anchor_element]. If a relative path is supplied, it will resolve to a full URL.
+Resolves a full URL against the current location to be used as an [`href`][anchor_element_href_attribute] to a [`link`][anchor_element]. If a relative path is supplied, it will resolve to a full URL.
 
 ```tsx
 import { useHref } from "@remix-run/react";
 
 function SomeComponent() {
-  const href = useHref();
+  const href = useHref("some/where");
 
   return <a href={href}>Link</a>;
 }