Adopt v2_meta future flag (#738)

Shopify · Mar 30, 2023 · ec99653 · ec99653
1 parent 737f83e
commit ec99653
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 35 deletions.
diff --git a/.changeset/angry-months-pay.md b/.changeset/angry-months-pay.md
@@ -0,0 +1,74 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Adopt Remix [`v2_meta`](https://remix.run/docs/en/main/route/meta#metav2) future flag
+
+### `v2_meta` migration steps
+
+1. For any routes that you used `meta` route export, convert it to the `V2_MetaFunction` equivalent.
+
+   **Before** - returns an object;
+
+   ```jsx
+   export const meta: MetaFunction = () => {
+     return {
+       title: 'Login',
+     };
+   };
+   ```
+
+   **After** - returns an array of object:
+
+   ```jsx
+   export const meta: V2_MetaFunction = () => {
+     return [
+       {
+         title: 'Login',
+       },
+     ];
+   };
+   ```
+
+2. If you are using data from loaders
+
+   **Before** - returns an object;
+
+   ```jsx
+   export const meta: MetaFunction = ({data}) => ({
+     title: `Order ${data?.order?.name}`,
+   });
+   ```
+
+   **After** - returns an array of object:
+
+   ```jsx
+   export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+     return [
+       {
+         title: `Order ${data?.order?.name}`,
+       },
+     ];
+   };
+   ```
+
+3. If you are using `meta` route export in `root`, convert it to [Global Meta](https://remix.run/docs/en/main/route/meta#global-meta)
+
+   ```diff
+   // app/root.tsx
+
+   - export const meta: MetaFunction = () => ({
+   -   charset: 'utf-8',
+   -   viewport: 'width=device-width,initial-scale=1',
+   - });
+
+   export default function App() {
+
+     return (
+       <html lang={locale.language}>
+         <head>
+   +        <meta charSet="utf-8" />
+   +        <meta name="viewport" content="width=device-width,initial-scale=1" />
+           <Seo />
+           <Meta />
+   ```
diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
@@ -1,7 +1,6 @@
 import {
   defer,
   type LinksFunction,
-  type MetaFunction,
   type LoaderArgs,
   type AppLoadContext,
 } from '@shopify/remix-oxygen';
@@ -42,11 +41,6 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  viewport: 'width=device-width,initial-scale=1',
-});
-
 export async function loader({request, context}: LoaderArgs) {
   const [customerAccessToken, cartId, layout] = await Promise.all([
     context.session.get('customerAccessToken'),
@@ -79,6 +73,8 @@ export default function App() {
   return (
     <html lang={locale.language}>
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Seo />
         <Meta />
         <Links />
@@ -136,6 +132,8 @@ export function ErrorBoundary({error}: {error: Error}) {
   return (
     <html lang={locale.language}>
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
         <title>Error</title>
         <Meta />
         <Links />

diff --git a/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx b/templates/demo-store/app/routes/($lang)/account/__private/orders.$id.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import {
   json,
   redirect,
-  type MetaFunction,
+  type V2_MetaFunction,
   type LoaderArgs,
 } from '@shopify/remix-oxygen';
 import {useLoaderData} from '@remix-run/react';
@@ -16,9 +16,9 @@ import type {
 } from '@shopify/hydrogen/storefront-api-types';
 import {Link, Heading, PageHeader, Text} from '~/components';
 
-export const meta: MetaFunction = ({data}) => ({
-  title: `Order ${data?.order?.name}`,
-});
+export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Order ${data?.order?.name}`}];
+};
 
 export async function loader({request, context, params}: LoaderArgs) {
   if (!params.id) {

diff --git a/templates/demo-store/app/routes/($lang)/account/__public/activate.$id.$activationToken.tsx b/templates/demo-store/app/routes/($lang)/account/__public/activate.$id.$activationToken.tsx
@@ -1,7 +1,7 @@
 import {
   json,
   redirect,
-  type MetaFunction,
+  type V2_MetaFunction,
   type ActionFunction,
 } from '@shopify/remix-oxygen';
 import {Form, useActionData} from '@remix-run/react';
@@ -100,10 +100,8 @@ export const action: ActionFunction = async ({
   }
 };
 
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Activate Account',
-  };
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Activate Account'}];
 };
 
 export default function Activate() {

diff --git a/templates/demo-store/app/routes/($lang)/account/__public/#.tsx b/templates/demo-store/app/routes/($lang)/account/__public/#.tsx
@@ -1,7 +1,7 @@
 import {
   json,
   redirect,
-  type MetaFunction,
+  type V2_MetaFunction,
   type ActionFunction,
   type AppLoadContext,
   type LoaderArgs,
@@ -79,10 +79,8 @@ export const action: ActionFunction = async ({request, context, params}) => {
   }
 };
 
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Login',
-  };
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Login'}];
 };
 
 export default function Login() {

diff --git a/templates/demo-store/app/routes/($lang)/account/__public/recover.tsx b/templates/demo-store/app/routes/($lang)/account/__public/recover.tsx
@@ -1,7 +1,7 @@
 import {
   json,
   redirect,
-  type MetaFunction,
+  type V2_MetaFunction,
   type ActionFunction,
   type LoaderArgs,
 } from '@shopify/remix-oxygen';
@@ -53,10 +53,8 @@ export const action: ActionFunction = async ({request, context}) => {
   }
 };
 
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Recover Password',
-  };
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Recover Password'}];
 };
 
 export default function Recover() {

diff --git a/templates/demo-store/app/routes/($lang)/account/__public/register.tsx b/templates/demo-store/app/routes/($lang)/account/__public/register.tsx
@@ -1,5 +1,5 @@
 import {
-  type MetaFunction,
+  type V2_MetaFunction,
   redirect,
   json,
   type ActionFunction,
@@ -88,10 +88,8 @@ export const action: ActionFunction = async ({request, context, params}) => {
   }
 };
 
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Register',
-  };
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Register'}];
 };
 
 export default function Register() {

diff --git a/templates/demo-store/app/routes/($lang)/account/__public/reset.$id.$resetToken.tsx b/templates/demo-store/app/routes/($lang)/account/__public/reset.$id.$resetToken.tsx
@@ -1,7 +1,7 @@
 import {
   json,
   redirect,
-  type MetaFunction,
+  type V2_MetaFunction,
   type ActionFunction,
 } from '@shopify/remix-oxygen';
 import {Form, useActionData} from '@remix-run/react';
@@ -97,10 +97,8 @@ export const action: ActionFunction = async ({
   }
 };
 
-export const meta: MetaFunction = () => {
-  return {
-    title: 'Reset Password',
-  };
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Reset Password'}];
 };
 
 export default function Reset() {

diff --git a/templates/demo-store/remix.config.js b/templates/demo-store/remix.config.js
@@ -19,5 +19,6 @@ module.exports = {
   future: {
     unstable_postcss: true,
     unstable_tailwind: true,
+    v2_meta: true,
   },
 };