From c9615ca967a1be043a3f116d17c3842422d7248a Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Thu, 8 Feb 2024 11:47:22 -0500 Subject: [PATCH] Support an optional Layout export from the root route (#8709) --- .changeset/fresh-knives-deliver.md | 7 + docs/components/scripts.md | 14 +- docs/file-conventions/root.md | 121 ++++++++++++++++-- integration/client-data-test.ts | 2 +- integration/root-route-test.ts | 84 +++++++++++- packages/remix-dev/vite/plugin.ts | 1 + packages/remix-react/routeModules.ts | 8 ++ packages/remix-react/routes.tsx | 85 ++++++++---- packages/remix-server-runtime/routeModules.ts | 1 + templates/arc/app/root.tsx | 8 +- templates/cloudflare-pages/app/root.tsx | 8 +- templates/cloudflare-workers/app/root.tsx | 8 +- templates/deno/app/root.tsx | 8 +- templates/express/app/root.tsx | 8 +- templates/fly/app/root.tsx | 8 +- templates/remix-javascript/app/root.jsx | 9 +- templates/remix/app/root.tsx | 8 +- templates/spa/app/root.tsx | 23 +--- .../unstable-vite-cloudflare/app/root.tsx | 8 +- templates/unstable-vite-express/app/root.tsx | 8 +- templates/unstable-vite/app/root.tsx | 8 +- 21 files changed, 350 insertions(+), 85 deletions(-) create mode 100644 .changeset/fresh-knives-deliver.md diff --git a/.changeset/fresh-knives-deliver.md b/.changeset/fresh-knives-deliver.md new file mode 100644 index 00000000000..1ce05a7978f --- /dev/null +++ b/.changeset/fresh-knives-deliver.md @@ -0,0 +1,7 @@ +--- +"@remix-run/dev": minor +"@remix-run/react": minor +"@remix-run/server-runtime": minor +--- + +Allow an optional `Layout` export from the root route diff --git a/docs/components/scripts.md b/docs/components/scripts.md index 97ad3dc0569..7c13fccfda3 100644 --- a/docs/components/scripts.md +++ b/docs/components/scripts.md @@ -5,7 +5,7 @@ toc: false # `` -This component renders the client runtime of your app. You should render it inside the [``][body-element] of your HTML, usually in `app/root.tsx`. +This component renders the client runtime of your app. You should render it inside the [``][body-element] of your HTML, usually in [`app/root.tsx`][root]. ```tsx filename=app/root.tsx lines=[8] import { Scripts } from "@remix-run/react"; @@ -24,4 +24,16 @@ export default function Root() { If you don't render the `` component, your app will still work like a traditional web app without JavaScript, relying solely on HTML and browser behaviors. +## Props + +The `` component can pass through certain attributes to the underlying `