Update root files to use Layout Export (#2292)

Shopify · Jul 5, 2024 · a5e03e2 · a5e03e2
1 parent 6e42eee
commit a5e03e2
Show file tree

Hide file tree

Showing 16 changed files with 220 additions and 253 deletions.
diff --git a/.changeset/khaki-maps-kiss.md b/.changeset/khaki-maps-kiss.md
@@ -0,0 +1,68 @@
+---
+'skeleton': patch
+'@shopify/create-hydrogen': patch
+---
+
+Update root to use [Remix's Layout Export pattern](https://remix.run/docs/en/main/file-conventions/root#layout-export) and eliminate the use of `useLoaderData` in root.
+
+The diff below showcase how you can make this refactor in existing application.
+
+```diff
+import {
+  Outlet,
+-  useLoaderData,
++  useRouteLoaderData,
+} from '@remix-run/react';
+-import {Layout} from '~/components/Layout';
++import {PageLayout} from '~/components/PageLayout';
+
+-export default function App() {
++export function Layout({children}: {children?: React.ReactNode}) {
+  const nonce = useNonce();
+-  const data = useLoaderData<typeof loader>();
++  const data = useRouteLoaderData<typeof loader>('root');
+
+  return (
+    <html>
+    ...
+      <body>
+-        <Layout {...data}>
+-          <Outlet />
+-        </Layout>
++        {data? (
++          <PageLayout {...data}>{children}</PageLayout>
++         ) : (
++          children
++        )}
+      </body>
+    </html>
+  );
+}
+
++export default function App() {
++  return <Outlet />;
++}
+
+export function ErrorBoundary() {
+  const rootData = useLoaderData<typeof loader>();
+
+  return (
+-    <html>
+-    ...
+-      <body>
+-        <Layout {...rootData}>
+-          <div className="route-error">
+-            <h1>Error</h1>
+-            ...
+-          </div>
+-        </Layout>
+-      </body>
+-    </html>
++    <div className="route-error">
++      <h1>Error</h1>
++      ...
++    </div>
+  );
+}
+
+```
diff --git a/.changeset/purple-eggs-fly.md b/.changeset/purple-eggs-fly.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Update virtual route to use Layout component in the root file.
diff --git a/docs/shopify-dev/analytics-setup/js/app/root.jsx b/docs/shopify-dev/analytics-setup/js/app/root.jsx
@@ -19,7 +19,7 @@ import {
 import favicon from './assets/favicon.svg';
 import resetStyles from './styles/reset.css?url';
 import appStyles from './styles/app.css?url';
-import {Layout} from '~/components/Layout';
+import {PageLayout} from '~/components/PageLayout';
 // [START import-custom]
 import {ThirdPartyAnalyticsIntegration} from '~/components/ThirdPartyAnalyticsIntegration';
 // [END import-custom]
@@ -109,10 +109,10 @@ export async function loader({context}) {
   );
 }
 
-export default function App() {
+export function Layout({children}) {
   const nonce = useNonce();
   /** @type {LoaderReturnData} */
-  const data = useLoaderData();
+  const data = useRouteLoaderData<RootLoader>('root');
 
   return (
     <html lang="en">
@@ -131,9 +131,7 @@ export default function App() {
           customData={{foo: 'bar'}}
         >
         {/* [END provider] */}
-          <Layout {...data}>
-            <Outlet />
-          </Layout>
+          <PageLayout {...data}>{children}</PageLayout>
           {/* [START custom-component] */}
           <ThirdPartyAnalyticsIntegration />
           {/* [END custom-component] */}
@@ -147,11 +145,12 @@ export default function App() {
   );
 }
 
+export default function App() {
+  return <Outlet />;
+}
+
 export function ErrorBoundary() {
   const error = useRouteError();
-  /** @type {LoaderReturnData} */
-  const rootData = useLoaderData();
-  const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
@@ -163,29 +162,15 @@ export function ErrorBoundary() {
   }
 
   return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Layout {...rootData}>
-          <div className="route-error">
-            <h1>Oops</h1>
-            <h2>{errorStatus}</h2>
-            {errorMessage && (
-              <fieldset>
-                <pre>{errorMessage}</pre>
-              </fieldset>
-            )}
-          </div>
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-      </body>
-    </html>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }
 

diff --git a/docs/shopify-dev/analytics-setup/ts/app/root.tsx b/docs/shopify-dev/analytics-setup/ts/app/root.tsx
@@ -20,7 +20,7 @@ import {
 import favicon from './assets/favicon.svg';
 import resetStyles from './styles/reset.css?url';
 import appStyles from './styles/app.css?url';
-import {Layout} from '~/components/Layout';
+import {PageLayout} from '~/components/PageLayout';
 // [START import-custom]
 import {ThirdPartyAnalyticsIntegration} from '~/components/ThirdPartyAnalyticsIntegration';
 // [END import-custom]
@@ -110,9 +110,9 @@ export async function loader({context}: LoaderFunctionArgs) {
   );
 }
 
-export default function App() {
+export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
-  const data = useLoaderData<typeof loader>();
+  const data = useRouteLoaderData<RootLoader>('root');
 
   return (
     <html lang="en">
@@ -131,9 +131,7 @@ export default function App() {
           customData={{foo: 'bar'}}
         >
         {/* [END provider] */}
-          <Layout {...data}>
-            <Outlet />
-          </Layout>
+          <PageLayout {...data}>{children}</PageLayout>
           {/* [START custom-component] */}
           <ThirdPartyAnalyticsIntegration />
           {/* [END custom-component] */}
@@ -147,10 +145,12 @@ export default function App() {
   );
 }
 
+export default function App() {
+  return <Outlet />;
+}
+
 export function ErrorBoundary() {
   const error = useRouteError();
-  const rootData = useLoaderData<typeof loader>();
-  const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
@@ -162,29 +162,15 @@ export function ErrorBoundary() {
   }
 
   return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <Meta />
-        <Links />
-      </head>
-      <body>
-        <Layout {...rootData}>
-          <div className="route-error">
-            <h1>Oops</h1>
-            <h2>{errorStatus}</h2>
-            {errorMessage && (
-              <fieldset>
-                <pre>{errorMessage}</pre>
-              </fieldset>
-            )}
-          </div>
-        </Layout>
-        <ScrollRestoration nonce={nonce} />
-        <Scripts nonce={nonce} />
-      </body>
-    </html>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }
 

diff --git a/examples/b2b/app/root.tsx b/examples/b2b/app/root.tsx
@@ -128,7 +128,7 @@ export async function loader({context}: LoaderFunctionArgs) {
   });
 }
 
-function Layout({children}: {children?: React.ReactNode}) {
+export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
   const data = useRouteLoaderData<RootLoader>('root');
 
@@ -181,11 +181,7 @@ function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
+  return <Outlet />;
 }
 
 export function ErrorBoundary() {
@@ -201,16 +197,14 @@ export function ErrorBoundary() {
   }
 
   return (
-    <Layout>
-      <div className="route-error">
-        <h1>Oops</h1>
-        <h2>{errorStatus}</h2>
-        {errorMessage && (
-          <fieldset>
-            <pre>{errorMessage}</pre>
-          </fieldset>
-        )}
-      </div>
-    </Layout>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }
diff --git a/examples/classic-remix/app/root.tsx b/examples/classic-remix/app/root.tsx
@@ -138,7 +138,7 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
   };
 }
 
-function Layout({children}: {children?: React.ReactNode}) {
+export function Layout({children}: {children?: React.ReactNode}) {
   const nonce = useNonce();
   const data = useRouteLoaderData<RootLoader>('root');
 
@@ -175,11 +175,7 @@ function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
+  return <Outlet />;
 }
 
 export function ErrorBoundary() {
@@ -195,16 +191,14 @@ export function ErrorBoundary() {
   }
 
   return (
-    <Layout>
-      <div className="route-error">
-        <h1>Oops</h1>
-        <h2>{errorStatus}</h2>
-        {errorMessage && (
-          <fieldset>
-            <pre>{errorMessage}</pre>
-          </fieldset>
-        )}
-      </div>
-    </Layout>
+    <div className="route-error">
+      <h1>Oops</h1>
+      <h2>{errorStatus}</h2>
+      {errorMessage && (
+        <fieldset>
+          <pre>{errorMessage}</pre>
+        </fieldset>
+      )}
+    </div>
   );
 }
diff --git a/examples/express/app/root.tsx b/examples/express/app/root.tsx
@@ -64,7 +64,7 @@ export async function loader({context}: LoaderFunctionArgs) {
   });
 }
 
-function Layout({children}: {children?: React.ReactNode}) {
+export function Layout({children}: {children?: React.ReactNode}) {
   const data = useRouteLoaderData<typeof loader>('root');
   const nonce = useNonce();
 
@@ -96,11 +96,7 @@ function Layout({children}: {children?: React.ReactNode}) {
 }
 
 export default function App() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
+  return <Outlet />;
 }
 
 const CART_QUERY = `#graphql