Turn on Remix v3_singleFetch future flag

.changeset/plenty-cycles-act.md

@@ -0,0 +1,173 @@
+---
+'skeleton': patch
+---
+
+Turn on Remix `v3_singleFetch` future flag
+
+Remix single fetch migration quick guide: https://remix.run/docs/en/main/start/future-flags#v3_singlefetch
+Remix single fetch migration guide: https://remix.run/docs/en/main/guides/single-fetch
+
+**Note:** If you have any routes that appends (or looks for) a search param named `_data`, make sure to rename it to something else.
+
+1. In your `vite.config.ts`, add the single fetch future flag.
+
+    ```diff
+    +  declare module "@remix-run/server-runtime" {
+    +    interface Future {
+    +     v3_singleFetch: true;
+    +    }
+    +  }
+
+      export default defineConfig({
+        plugins: [
+          hydrogen(),
+          oxygen(),
+          remix({
+            presets: [hydrogen.preset()],
+            future: {
+              v3_fetcherPersist: true,
+              v3_relativeSplatPath: true,
+              v3_throwAbortReason: true,
+              v3_lazyRouteDiscovery: true,
+    +         v3_singleFetch: true,
+            },
+          }),
+          tsconfigPaths(),
+        ],
+    ```
+
+2. In your `entry.server.tsx`, add `nonce` to the `<RemixServer>`.
+
+   ```diff
+   const body = await renderToReadableStream(
+     <NonceProvider>
+       <RemixServer
+         context={remixContext}
+         url={request.url}
+   +     nonce={nonce}
+       />
+     </NonceProvider>,
+   ```
+
+3. Update `cart.tsx` to add a headers export and update to `data` import usage.
+
+    ```diff
+      import {
+    -  json,
+    +  data,
+        type LoaderFunctionArgs,
+        type ActionFunctionArgs,
+        type HeadersFunction
+      } from '@shopify/remix-oxygen';
+    + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+
+      export async function action({request, context}: ActionFunctionArgs) {
+        ...
+    -   return json(
+    +   return data(
+          {
+            cart: cartResult,
+            errors,
+            warnings,
+            analytics: {
+              cartId,
+            },
+          },
+          {status, headers},
+        );
+      }
+
+      export async function loader({context}: LoaderFunctionArgs) {
+        const {cart} = context;
+   -    return json(await cart.get());
+   +    return await cart.get();
+      }
+   ```
+
+4. Deprecate `json` and `defer` import usage from `@shopify/remix-oxygen`.
+
+    Remove `json()`/`defer()` in favor of raw objects.
+
+    Single Fetch supports JSON objects and Promises out of the box, so you can return the raw data from your loader/action functions:
+
+    ```diff
+    - import {json} from "@shopify/remix-oxygen";
+
+      export async function loader({}: LoaderFunctionArgs) {
+        let tasks = await fetchTasks();
+    -   return json(tasks);
+    +   return tasks;
+      }
+    ```
+
+    ```diff
+    - import {defer} from "@shopify/remix-oxygen";
+
+      export async function loader({}: LoaderFunctionArgs) {
+        let lazyStuff = fetchLazyStuff();
+        let tasks = await fetchTasks();
+    -   return defer({ tasks, lazyStuff });
+    +   return { tasks, lazyStuff };
+      }
+   ```
+
+    If you were using the second parameter of json/defer to set a custom status or headers on your response, you can continue doing so via the new data API:
+
+    ```diff
+    -  import {json} from "@shopify/remix-oxygen";
+    +  import {data, type HeadersFunction} from "@shopify/remix-oxygen";
+
+    +  /**
+    +   * If your loader or action is returning a response with headers,
+    +   * make sure to export a headers function that merges your headers
+    +   * on your route. Otherwise, your headers may be lost.
+    +   * Remix doc: https://remix.run/docs/en/main/route/headers
+    +   **/
+    +  export const headers: HeadersFunction = ({loaderHeaders}) => loaderHeaders;
+
+      export async function loader({}: LoaderFunctionArgs) {
+        let tasks = await fetchTasks();
+    -    return json(tasks, {
+    +    return data(tasks, {
+          headers: {
+            "Cache-Control": "public, max-age=604800"
+          }
+        });
+      }
+    ```
+
+5. If you are using legacy customer account flow or multipass, there are a couple more files that requires updating:
+
+    In `root.tsx` and `routes/account.tsx`, add a `headers` export for `loaderHeaders`.
+
+    ```diff
+    + export const headers: HeadersFunction = ({loaderHeaders}) => loaderHeaders;
+    ```
+
+    In `routes/account_.register.tsx`, add a `headers` export for `actionHeaders`.
+
+    ```diff
+    + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+    ```
+
+6. If you are using multipass, in `routes/account_.login.multipass.tsx`
+
+    a. export a `headers` export
+
+    ```diff
+    + export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+    ```
+
+    b.  update the success response wrapper to `Response.json`
+
+    ```diff
+      // success, return token, url
+    -  return json(
+    +  return Response.json(
+        {data: {...data, error: null}},
+        {
+          status: 200,
+          headers: getCorsHeaders(origin),
+        },
+      );
+    ```

.changeset/purple-buses-laugh.md

@@ -0,0 +1,7 @@
+---
+'@shopify/remix-oxygen': patch
+'@shopify/hydrogen': patch
+'@shopify/cli-hydrogen': patch
+---
+
+Turn on Remix `v3_singleFetch` future flag

docs/preview/app/root.tsx

@@ -1,4 +1,4 @@
-import {json, type LinksFunction} from '@remix-run/node';
+import {type LinksFunction} from '@remix-run/node';
 import {
   Links,
   Meta,
@@ -26,9 +26,7 @@ export async function loader() {
     }
   }
 
-  return json({
-    data,
-  });
+  return {data};
 }
 
 export default function App() {

docs/preview/app/routes/$doc.tsx

@@ -9,7 +9,7 @@ import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 import {oneDark} from 'react-syntax-highlighter/dist/cjs/styles/prism/index.js';
 
 export async function loader({params}: LoaderFunctionArgs) {
-  return json({doc: params.doc});
+  return {doc: params.doc};
 }
 
 function getDefinition(definitions: any, type: string) {

docs/preview/vite.config.js

@@ -23,6 +23,7 @@ export default defineConfig({
         v3_fetcherPersist: false,
         v3_relativeSplatPath: false,
         v3_throwAbortReason: false,
+        v3_singleFetch: true,
       },
     }),
     tsconfigPaths(),

docs/shopify-dev/analytics-setup/js/app/entry-server.jsx

@@ -30,7 +30,7 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} />
+      <RemixServer context={remixContext} url={request.url} nonce={nonce} />
     </NonceProvider>,
     {
       nonce,

docs/shopify-dev/analytics-setup/js/app/root.jsx

@@ -5,7 +5,6 @@ import {
   Analytics,
   // [END import]
 } from '@shopify/hydrogen';
-import {defer} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -83,7 +82,7 @@ export async function loader(args) {
   const {storefront, env} = args.context;
   // [END env]
 
-  return defer({
+  return {
     ...deferredData,
     ...criticalData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -103,7 +102,7 @@ export async function loader(args) {
       language: args.context.storefront.i18n.language,
     },
      // [END consent]
-  });
+  };
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/cart.jsx

@@ -1,6 +1,6 @@
 import {useLoaderData} from '@remix-run/react';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json} from '@shopify/remix-oxygen';
+import {data} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 /**
@@ -10,6 +10,11 @@ export const meta = () => {
   return [{title: `Hydrogen | Cart`}];
 };
 
+/**
+ * @type {HeadersFunction}
+ */
+export const headers = ({actionHeaders}) => actionHeaders;
+
 /**
  * @param {ActionFunctionArgs}
  */
@@ -81,7 +86,7 @@ export async function action({request, context}) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -99,7 +104,7 @@ export async function action({request, context}) {
  */
 export async function loader({context}) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {
@@ -118,6 +123,7 @@ export default function Cart() {
 }
 
 /** @template T @typedef {import('@remix-run/react').MetaFunction<T>} MetaFunction */
+/** @template T @typedef {import('@remix-run/react').HeadersFunction<T>} HeadersFunction */
 /** @typedef {import('@shopify/hydrogen').CartQueryDataReturn} CartQueryDataReturn */
 /** @typedef {import('@shopify/remix-oxygen').LoaderFunctionArgs} LoaderFunctionArgs */
 /** @typedef {import('@shopify/remix-oxygen').SerializeFrom<typeof action>} ActionReturnData */

docs/shopify-dev/analytics-setup/js/app/routes/collections.$handle.jsx

@@ -26,7 +26,7 @@ export async function loader(args) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/products.$handle.jsx

@@ -32,7 +32,7 @@ export async function loader(args) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({...deferredData, ...criticalData});
+  return {...deferredData, ...criticalData};
 }
 
 /**

docs/shopify-dev/analytics-setup/js/app/routes/search.jsx

@@ -1,4 +1,3 @@
-import {json} from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
@@ -27,7 +26,7 @@ export async function loader({request, context}) {
     return {term: '', result: null, error: error.message};
   });
 
-  return json(await searchPromise);
+  return await searchPromise;
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/entry-server.tsx

@@ -29,7 +29,7 @@ export default async function handleRequest(
 
   const body = await renderToReadableStream(
     <NonceProvider>
-      <RemixServer context={remixContext} url={request.url} />
+      <RemixServer context={remixContext} url={request.url} nonce={nonce} />
     </NonceProvider>,
     {
       nonce,

docs/shopify-dev/analytics-setup/ts/app/root.tsx

@@ -5,7 +5,7 @@ import {
   Analytics,
   // [END import]
 } from '@shopify/hydrogen';
-import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
@@ -83,7 +83,7 @@ export async function loader(args: LoaderFunctionArgs) {
   // Await the critical data required to render initial state of the page
   const criticalData = await loadCriticalData(args);
 
-  return defer({
+  return {
     ...deferredData,
     ...criticalData,
     publicStoreDomain: env.PUBLIC_STORE_DOMAIN,
@@ -103,7 +103,7 @@ export async function loader(args: LoaderFunctionArgs) {
       language: storefront.i18n.language,
     },
     // [END consent]
-  });
+  };
 }
 
 /**

docs/shopify-dev/analytics-setup/ts/app/routes/cart.tsx

@@ -1,13 +1,15 @@
 import {type MetaFunction, useLoaderData} from '@remix-run/react';
 import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm, Analytics} from '@shopify/hydrogen';
-import {json, type LoaderFunctionArgs, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+import {data, type LoaderFunctionArgs, type ActionFunctionArgs, type HeadersFunction} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/CartMain';
 
 export const meta: MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
 };
 
+export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
+
 export async function action({request, context}: ActionFunctionArgs) {
   const {cart} = context;
 
@@ -80,7 +82,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
-  return json(
+  return data(
     {
       cart: cartResult,
       errors,
@@ -95,7 +97,7 @@ export async function action({request, context}: ActionFunctionArgs) {
 
 export async function loader({context}: LoaderFunctionArgs) {
   const {cart} = context;
-  return json(await cart.get());
+  return await cart.get();
 }
 
 export default function Cart() {