diff --git a/.changeset/angry-months-pay.md b/.changeset/angry-months-pay.md new file mode 100644 index 0000000000..c148561adb --- /dev/null +++ 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 = ({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 ( + + + + + + + + + ``` diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx index b0dd1dab49..5f68b1e3be 100644 --- 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 ( + + @@ -136,6 +132,8 @@ export function ErrorBoundary({error}: {error: Error}) { return ( + + Error 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 index 57ef7843bb..115cc23ed6 100644 --- 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 = ({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 index 85d92a7664..a799113014 100644 --- 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/login.tsx b/templates/demo-store/app/routes/($lang)/account/__public/login.tsx index eb5e334bb1..6e84a9314f 100644 --- a/templates/demo-store/app/routes/($lang)/account/__public/login.tsx +++ b/templates/demo-store/app/routes/($lang)/account/__public/login.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 index 84b8b5d50a..5bcdf4659b 100644 --- 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 index 377230d8fe..de10f8e984 100644 --- 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 index 606666d4f0..ef7873b90e 100644 --- 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 index c455178baa..613398a132 100644 --- 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, }, };