@shopify/cli-hydrogen 5.5.0 → 6.0.0

package/dist/commands/hydrogen/build.js

@@ -42,11 +42,7 @@ class Build extends Command {
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
     }),
-    "codegen-unstable": Flags.boolean({
-      description: "Generate types for the Storefront API queries found in your project.",
-      required: false,
-      default: false
-    }),
+    codegen: commonFlags.codegen,
     "codegen-config-path": commonFlags.codegenConfigPath,
     base: deprecated("--base")(),
     entry: deprecated("--entry")(),
@@ -57,7 +53,7 @@ class Build extends Command {
     const directory = flags.path ? resolvePath(flags.path) : process.cwd();
     await runBuild({
       ...flagsToCamelObject(flags),
-      useCodegen: flags["codegen-unstable"],
+      useCodegen: flags.codegen,
       directory
     });
   }

package/dist/commands/hydrogen/{codegen-unstable.js → codegen.js}

@@ -24,6 +24,8 @@ class Codegen extends Command {
       default: false
     })
   };
+  static aliases = ["codegen-unstable"];
+  static deprecateAliases = true;
   async run() {
     const { flags } = await this.parse(Codegen);
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();

package/dist/commands/hydrogen/deploy.js

@@ -136,6 +136,7 @@ async function oxygenDeploy(options) {
   }
   const config = {
     assetsDir: "dist/client",
+    bugsnag: true,
     deploymentUrl: "https://oxygen.shopifyapps.com",
     deploymentToken: parseToken(token),
     environmentTag: environmentTag || deploymentEnvironmentTag || branch,

package/dist/commands/hydrogen/deploy.test.js

@@ -81,6 +81,7 @@ describe("deploy", () => {
   };
   const expectedConfig = {
     assetsDir: "dist/client",
+    bugsnag: true,
     deploymentUrl: "https://oxygen.shopifyapps.com",
     deploymentToken: mockToken,
     verificationMaxDuration: 180,

package/dist/commands/hydrogen/dev.js

@@ -7,7 +7,7 @@ import colors from '@shopify/cli-kit/node/colors';
 import { copyPublicFiles } from './build.js';
 import { getProjectPaths, assertOxygenChecks, handleRemixImportFail, getRemixConfig } from '../../lib/remix-config.js';
 import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js';
-import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
+import { commonFlags, overrideFlag, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
 import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
@@ -28,12 +28,10 @@ class Dev extends Command {
     path: commonFlags.path,
     port: commonFlags.port,
     ["worker-unstable"]: commonFlags.workerRuntime,
-    ["codegen-unstable"]: Flags.boolean({
-      description: "Generate types for the Storefront API queries found in your project. It updates the types on file save.",
-      required: false,
-      default: false
+    codegen: overrideFlag(commonFlags.codegen, {
+      description: commonFlags.codegen.description + " It updates the types on file save."
     }),
-    ["codegen-config-path"]: commonFlags.codegenConfigPath,
+    "codegen-config-path": commonFlags.codegenConfigPath,
     sourcemap: commonFlags.sourcemap,
     "disable-virtual-routes": Flags.boolean({
       description: "Disable rendering fallback routes when a route file doesn't exist.",
@@ -53,7 +51,7 @@ class Dev extends Command {
     const directory = flags.path ? path.resolve(flags.path) : process.cwd();
     await runDev({
       ...flagsToCamelObject(flags),
-      useCodegen: flags["codegen-unstable"],
+      useCodegen: flags.codegen,
       workerRuntime: flags["worker-unstable"],
       path: directory
     });
@@ -106,7 +104,7 @@ async function runDev({
   let isInitialBuild = true;
   let initialBuildDurationMs = 0;
   let initialBuildStartTimeMs = Date.now();
-  const liveReload = remixConfig.future.v2_dev ? await setupLiveReload(remixConfig.devServerPort) : void 0;
+  const liveReload = await setupLiveReload(remixConfig.dev?.port ?? 8002) ;
   let miniOxygen;
   async function safeStartMiniOxygen() {
     if (miniOxygen)

package/dist/commands/hydrogen/generate/route.js

@@ -5,6 +5,7 @@ import colors from '@shopify/cli-kit/node/colors';
 import { commonFlags } from '../../../lib/flags.js';
 import { Flags, Args } from '@oclif/core';
 import { ALL_ROUTE_CHOICES, generateRoutes } from '../../../lib/setups/routes/generate.js';
+import { isV1RouteConventionInstalled } from '../../../lib/remix-version-interop.js';
 
 class GenerateRoute extends Command {
   static description = "Generates a standard Shopify route.";
@@ -44,7 +45,10 @@ class GenerateRoute extends Command {
   }
 }
 async function runGenerate(options) {
-  const { routes } = await generateRoutes(options);
+  const { routes } = await generateRoutes({
+    ...options,
+    v1RouteConvention: isV1RouteConventionInstalled()
+  });
   const padEnd = 3 + routes.reduce(
     (acc, route) => Math.max(acc, route.destinationRoute.length),
     0

package/dist/commands/hydrogen/generate/route.test.js

@@ -17,7 +17,6 @@ describe("runGenerate", () => {
     vi.mocked(generateRoutes).mockResolvedValue({
       isTypescript: true,
       formatOptions: {},
-      v2Flags: {},
       routeGroups: {},
       routes: [
         { sourceRoute: "", destinationRoute: "/cart", operation: "created" },
@@ -35,7 +34,10 @@ describe("runGenerate", () => {
       typescript: true
     };
     await runGenerate(options);
-    expect(generateRoutes).toHaveBeenCalledWith(options);
+    expect(generateRoutes).toHaveBeenCalledWith({
+      ...options,
+      v1RouteConvention: false
+    });
     expect(outputMock.info()).toMatch(/2 of 3 routes/i);
   });
 });

package/dist/commands/hydrogen/init.test.js

@@ -12,7 +12,7 @@ import { getSkeletonSourceDir } from '../../lib/build.js';
 import { execAsync } from '../../lib/process.js';
 import { rmdir, symlink } from 'fs-extra';
 import { runCheckRoutes } from './check.js';
-import { runCodegen } from './codegen-unstable.js';
+import { runCodegen } from './codegen.js';
 import { runBuild } from './build.js';
 
 const { renderTasksHook } = vi.hoisted(() => ({ renderTasksHook: vi.fn() }));
@@ -287,9 +287,6 @@ describe("init", () => {
             language: "ts",
             styling: "tailwind"
           });
-          await expect(readFile(`${tmpDir}/remix.config.js`)).resolves.toMatch(
-            /tailwind: true,\n\s*postcss: true,\n\s*future:/
-          );
           await expect(
             readFile(`${tmpDir}/app/styles/tailwind.css`)
           ).resolves.toMatch(/@tailwind base;/);

package/dist/commands/hydrogen/setup.js

@@ -77,12 +77,7 @@ async function runSetup(options) {
         generateProjectEntries({
           rootDirectory: remixConfig.rootDirectory,
           appDirectory: remixConfig.appDirectory,
-          typescript,
-          v2Flags: {
-            isV2RouteConvention: remixConfig.future?.v2_routeConvention,
-            isV2ErrorBoundary: remixConfig.future?.v2_errorBoundary,
-            isV2Meta: remixConfig.future?.v2_meta
-          }
+          typescript
         })
       ])
     ).then(async () => {

package/dist/generator-templates/starter/CHANGELOG.md

@@ -0,0 +1,143 @@
+# skeleton
+
+## 1.0.0
+
+### Major Changes
+
+- The Storefront API 2023-10 now returns menu item URLs that include the `primaryDomainUrl`, instead of defaulting to the Shopify store ID URL (example.myshopify.com). The skeleton template requires changes to check for the `primaryDomainUrl`: by [@blittle](https://github.com/blittle)
+
+  1. Update the `HeaderMenu` component to accept a `primaryDomainUrl` and include
+     it in the internal url check
+
+  ```diff
+  // app/components/Header.tsx
+
+  + import type {HeaderQuery} from 'storefrontapi.generated';
+
+  export function HeaderMenu({
+    menu,
+  +  primaryDomainUrl,
+    viewport,
+  }: {
+    menu: HeaderProps['header']['menu'];
+  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+    viewport: Viewport;
+  }) {
+
+    // ...code
+
+    // if the url is internal, we strip the domain
+    const url =
+      item.url.includes('myshopify.com') ||
+      item.url.includes(publicStoreDomain) ||
+  +   item.url.includes(primaryDomainUrl)
+        ? new URL(item.url).pathname
+        : item.url;
+
+     // ...code
+
+  }
+  ```
+
+  2. Update the `FooterMenu` component to accept a `primaryDomainUrl` prop and include
+     it in the internal url check
+
+  ```diff
+  // app/components/Footer.tsx
+
+  - import type {FooterQuery} from 'storefrontapi.generated';
+  + import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
+
+  function FooterMenu({
+    menu,
+  +  primaryDomainUrl,
+  }: {
+    menu: FooterQuery['menu'];
+  +  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+  }) {
+    // code...
+
+    // if the url is internal, we strip the domain
+    const url =
+      item.url.includes('myshopify.com') ||
+      item.url.includes(publicStoreDomain) ||
+  +   item.url.includes(primaryDomainUrl)
+        ? new URL(item.url).pathname
+        : item.url;
+
+     // ...code
+
+    );
+  }
+  ```
+
+  3. Update the `Footer` component to accept a `shop` prop
+
+  ```diff
+  export function Footer({
+    menu,
+  + shop,
+  }: FooterQuery & {shop: HeaderQuery['shop']}) {
+    return (
+      <footer className="footer">
+  -      <FooterMenu menu={menu} />
+  +      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
+      </footer>
+    );
+  }
+  ```
+
+  4. Update `Layout.tsx` to pass the `shop` prop
+
+  ```diff
+  export function Layout({
+    cart,
+    children = null,
+    footer,
+    header,
+    isLoggedIn,
+  }: LayoutProps) {
+    return (
+      <>
+        <CartAside cart={cart} />
+        <SearchAside />
+        <MobileMenuAside menu={header.menu} shop={header.shop} />
+        <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
+        <main>{children}</main>
+        <Suspense>
+          <Await resolve={footer}>
+  -          {(footer) => <Footer menu={footer.menu}  />}
+  +          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
+          </Await>
+        </Suspense>
+      </>
+    );
+  }
+  ```
+
+### Patch Changes
+
+- If you are calling `useMatches()` in different places of your app to access the data returned by the root loader, you may want to update it to the following pattern to enhance types: ([#1289](https://github.com/Shopify/hydrogen/pull/1289)) by [@frandiox](https://github.com/frandiox)
+
+  ```ts
+  // root.tsx
+
+  import {useMatches} from '@remix-run/react';
+  import {type SerializeFrom} from '@shopify/remix-oxygen';
+
+  export const useRootLoaderData = () => {
+    const [root] = useMatches();
+    return root?.data as SerializeFrom<typeof loader>;
+  };
+
+  export function loader(context) {
+    // ...
+  }
+  ```
+
+  This way, you can import `useRootLoaderData()` anywhere in your app and get the correct type for the data returned by the root loader.
+
+- Updated dependencies [[`81400439`](https://github.com/Shopify/hydrogen/commit/814004397c1d17ef0a53a425ed28a42cf67765cf), [`a6f397b6`](https://github.com/Shopify/hydrogen/commit/a6f397b64dc6a0d856cb7961731ee1f86bf80292), [`3464ec04`](https://github.com/Shopify/hydrogen/commit/3464ec04a084e1ceb30ee19874dc1b9171ce2b34), [`7fc088e2`](https://github.com/Shopify/hydrogen/commit/7fc088e21bea47840788cb7c60f873ce1f253128), [`867e0b03`](https://github.com/Shopify/hydrogen/commit/867e0b033fc9eb04b7250baea97d8fd49d26ccca), [`ad45656c`](https://github.com/Shopify/hydrogen/commit/ad45656c5f663cc1a60eab5daab4da1dfd0e6cc3), [`f24e3424`](https://github.com/Shopify/hydrogen/commit/f24e3424c8e2b363b181b71fcbd3e45f696fdd3f), [`66a48573`](https://github.com/Shopify/hydrogen/commit/66a4857387148b6a104df5783314c74aca8aada0), [`0ae7cbe2`](https://github.com/Shopify/hydrogen/commit/0ae7cbe280d8351126e11dc13f35d7277d9b2d86), [`8198c1be`](https://github.com/Shopify/hydrogen/commit/8198c1befdfafb39fbcc88d71f91d21eae252973), [`ad45656c`](https://github.com/Shopify/hydrogen/commit/ad45656c5f663cc1a60eab5daab4da1dfd0e6cc3)]:
+  - @shopify/hydrogen@2023.10.0
+  - @shopify/remix-oxygen@2.0.0
+  - @shopify/cli-hydrogen@6.0.0

package/dist/generator-templates/starter/app/components/Footer.tsx

@@ -1,17 +1,27 @@
-import {useMatches, NavLink} from '@remix-run/react';
-import type {FooterQuery} from 'storefrontapi.generated';
+import {NavLink} from '@remix-run/react';
+import type {FooterQuery, HeaderQuery} from 'storefrontapi.generated';
+import {useRootLoaderData} from '~/root';
 
-export function Footer({menu}: FooterQuery) {
+export function Footer({
+  menu,
+  shop,
+}: FooterQuery & {shop: HeaderQuery['shop']}) {
   return (
     <footer className="footer">
-      <FooterMenu menu={menu} />
+      <FooterMenu menu={menu} primaryDomainUrl={shop.primaryDomain.url} />
     </footer>
   );
 }
 
-function FooterMenu({menu}: Pick<FooterQuery, 'menu'>) {
-  const [root] = useMatches();
-  const publicStoreDomain = root?.data?.publicStoreDomain;
+function FooterMenu({
+  menu,
+  primaryDomainUrl,
+}: {
+  menu: FooterQuery['menu'];
+  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
+}) {
+  const {publicStoreDomain} = useRootLoaderData();
+
   return (
     <nav className="footer-menu" role="navigation">
       {(menu || FALLBACK_FOOTER_MENU).items.map((item) => {
@@ -19,7 +29,8 @@ function FooterMenu({menu}: Pick<FooterQuery, 'menu'>) {
         // if the url is internal, we strip the domain
         const url =
           item.url.includes('myshopify.com') ||
-          item.url.includes(publicStoreDomain)
+          item.url.includes(publicStoreDomain) ||
+          item.url.includes(primaryDomainUrl)
             ? new URL(item.url).pathname
             : item.url;
         const isExternal = !url.startsWith('/');

package/dist/generator-templates/starter/app/components/Header.tsx

@@ -1,6 +1,8 @@
-import {Await, NavLink, useMatches} from '@remix-run/react';
+import {Await, NavLink} from '@remix-run/react';
 import {Suspense} from 'react';
+import type {HeaderQuery} from 'storefrontapi.generated';
 import type {LayoutProps} from './Layout';
+import {useRootLoaderData} from '~/root';
 
 type HeaderProps = Pick<LayoutProps, 'header' | 'cart' | 'isLoggedIn'>;
 
@@ -13,7 +15,11 @@ export function Header({header, isLoggedIn, cart}: HeaderProps) {
       <NavLink prefetch="intent" to="/" style={activeLinkStyle} end>
         <strong>{shop.name}</strong>
       </NavLink>
-      <HeaderMenu menu={menu} viewport="desktop" />
+      <HeaderMenu
+        menu={menu}
+        viewport="desktop"
+        primaryDomainUrl={header.shop.primaryDomain.url}
+      />
       <HeaderCtas isLoggedIn={isLoggedIn} cart={cart} />
     </header>
   );
@@ -21,13 +27,14 @@ export function Header({header, isLoggedIn, cart}: HeaderProps) {
 
 export function HeaderMenu({
   menu,
+  primaryDomainUrl,
   viewport,
 }: {
   menu: HeaderProps['header']['menu'];
+  primaryDomainUrl: HeaderQuery['shop']['primaryDomain']['url'];
   viewport: Viewport;
 }) {
-  const [root] = useMatches();
-  const publicStoreDomain = root?.data?.publicStoreDomain;
+  const {publicStoreDomain} = useRootLoaderData();
   const className = `header-menu-${viewport}`;
 
   function closeAside(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -56,7 +63,8 @@ export function HeaderMenu({
         // if the url is internal, we strip the domain
         const url =
           item.url.includes('myshopify.com') ||
-          item.url.includes(publicStoreDomain)
+          item.url.includes(publicStoreDomain) ||
+          item.url.includes(primaryDomainUrl)
             ? new URL(item.url).pathname
             : item.url;
         return (

package/dist/generator-templates/starter/app/components/Layout.tsx

@@ -33,12 +33,12 @@ export function Layout({
     <>
       <CartAside cart={cart} />
       <SearchAside />
-      <MobileMenuAside menu={header.menu} />
+      <MobileMenuAside menu={header.menu} shop={header.shop} />
       <Header header={header} cart={cart} isLoggedIn={isLoggedIn} />
       <main>{children}</main>
       <Suspense>
         <Await resolve={footer}>
-          {(footer) => <Footer menu={footer.menu} />}
+          {(footer) => <Footer menu={footer.menu} shop={header.shop} />}
         </Await>
       </Suspense>
     </>
@@ -86,10 +86,20 @@ function SearchAside() {
   );
 }
 
-function MobileMenuAside({menu}: {menu: HeaderQuery['menu']}) {
+function MobileMenuAside({
+  menu,
+  shop,
+}: {
+  menu: HeaderQuery['menu'];
+  shop: HeaderQuery['shop'];
+}) {
   return (
     <Aside id="mobile-menu-aside" heading="MENU">
-      <HeaderMenu menu={menu} viewport="mobile" />
+      <HeaderMenu
+        menu={menu}
+        viewport="mobile"
+        primaryDomainUrl={shop.primaryDomain.url}
+      />
     </Aside>
   );
 }

package/dist/generator-templates/starter/app/root.tsx

@@ -1,11 +1,14 @@
 import {useNonce} from '@shopify/hydrogen';
-import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
+import {
+  defer,
+  type SerializeFrom,
+  type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
 import {
   Links,
   Meta,
   Outlet,
   Scripts,
-  useCatch,
   LiveReload,
   useMatches,
   useRouteError,
@@ -15,7 +18,6 @@ import {
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
 import type {CustomerAccessToken} from '@shopify/hydrogen/storefront-api-types';
-import type {HydrogenSession} from '../server';
 import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
@@ -58,7 +60,12 @@ export function links() {
   ];
 }
 
-export async function loader({context}: LoaderArgs) {
+export const useRootLoaderData = () => {
+  const [root] = useMatches();
+  return root?.data as SerializeFrom<typeof loader>;
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
   const {storefront, session, cart} = context;
   const customerAccessToken = await session.get('customerAccessToken');
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
@@ -126,7 +133,7 @@ export default function App() {
 
 export function ErrorBoundary() {
   const error = useRouteError();
-  const [root] = useMatches();
+  const rootData = useRootLoaderData();
   const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
@@ -147,7 +154,7 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body>
-        <Layout {...root.data}>
+        <Layout {...rootData}>
           <div className="route-error">
             <h1>Oops</h1>
             <h2>{errorStatus}</h2>
@@ -166,26 +173,6 @@ export function ErrorBoundary() {
   );
 }
 
-export const ErrorBoundaryV1 = ({error}: {error: Error}) => {
-  // eslint-disable-next-line no-console
-  console.error(error);
-
-  return <div>There was an error.</div>;
-};
-
-export function CatchBoundary() {
-  const caught = useCatch();
-  // eslint-disable-next-line no-console
-  console.error(caught);
-
-  return (
-    <div>
-      There was an error. Status: {caught.status}. Message:{' '}
-      {caught.data?.message}
-    </div>
-  );
-}
-
 /**
  * Validates the customer access token and returns a boolean and headers
  * @see https://shopify.dev/docs/api/storefront/latest/objects/CustomerAccessToken
@@ -199,7 +186,7 @@ export function CatchBoundary() {
  * ```
  */
 async function validateCustomerAccessToken(
-  session: HydrogenSession,
+  session: LoaderFunctionArgs['context']['session'],
   customerAccessToken?: CustomerAccessToken,
 ) {
   let isLoggedIn = false;

package/dist/generator-templates/starter/app/routes/$.tsx

@@ -1,6 +1,6 @@
-import type {LoaderArgs} from '@shopify/remix-oxygen';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
-export async function loader({request}: LoaderArgs) {
+export async function loader({request}: LoaderFunctionArgs) {
   throw new Response(`${new URL(request.url).pathname} not found`, {
     status: 404,
   });

package/dist/generator-templates/starter/app/routes/[robots.txt].tsx

@@ -1,8 +1,8 @@
-import {type LoaderArgs} from '@shopify/remix-oxygen';
+import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useRouteError, isRouteErrorResponse} from '@remix-run/react';
 import {parseGid} from '@shopify/hydrogen';
 
-export async function loader({request, context}: LoaderArgs) {
+export async function loader({request, context}: LoaderFunctionArgs) {
   const url = new URL(request.url);
 
   const {shop} = await context.storefront.query(ROBOTS_QUERY);

package/dist/generator-templates/starter/app/routes/[sitemap.xml].tsx

@@ -1,5 +1,5 @@
 import {flattenConnection} from '@shopify/hydrogen';
-import type {LoaderArgs} from '@shopify/remix-oxygen';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import type {SitemapQuery} from 'storefrontapi.generated';
 
 /**
@@ -19,7 +19,10 @@ type Entry = {
   };
 };
 
-export async function loader({request, context: {storefront}}: LoaderArgs) {
+export async function loader({
+  request,
+  context: {storefront},
+}: LoaderFunctionArgs) {
   const data = await storefront.query(SITEMAP_QUERY, {
     variables: {
       urlLimits: MAX_URLS,

package/dist/generator-templates/starter/app/routes/_index.tsx

@@ -1,10 +1,5 @@
-import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
-import {
-  Await,
-  useLoaderData,
-  Link,
-  type V2_MetaFunction,
-} from '@remix-run/react';
+import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
 import {Image, Money} from '@shopify/hydrogen';
 import type {
@@ -12,11 +7,11 @@ import type {
   RecommendedProductsQuery,
 } from 'storefrontapi.generated';
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
 };
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   const {storefront} = context;
   const {collections} = await storefront.query(FEATURED_COLLECTION_QUERY);
   const featuredCollection = collections.nodes[0];

package/dist/generator-templates/starter/app/routes/account.$.tsx

@@ -1,6 +1,6 @@
-import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   if (await context.session.get('customerAccessToken')) {
     return redirect('/account');
   }

package/dist/generator-templates/starter/app/routes/account.addresses.tsx

@@ -3,15 +3,15 @@ import type {AddressFragment, CustomerFragment} from 'storefrontapi.generated';
 import {
   json,
   redirect,
-  type ActionArgs,
-  type LoaderArgs,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
 } from '@shopify/remix-oxygen';
 import {
   Form,
   useActionData,
   useNavigation,
   useOutletContext,
-  type V2_MetaFunction,
+  type MetaFunction,
 } from '@remix-run/react';
 
 export type ActionResponse = {
@@ -23,11 +23,11 @@ export type ActionResponse = {
   updatedAddress?: AddressFragment;
 };
 
-export const meta: V2_MetaFunction = () => {
+export const meta: MetaFunction = () => {
   return [{title: 'Addresses'}];
 };
 
-export async function loader({context}: LoaderArgs) {
+export async function loader({context}: LoaderFunctionArgs) {
   const {session} = context;
   const customerAccessToken = await session.get('customerAccessToken');
   if (!customerAccessToken) {
@@ -36,7 +36,7 @@ export async function loader({context}: LoaderArgs) {
   return json({});
 }
 
-export async function action({request, context}: ActionArgs) {
+export async function action({request, context}: ActionFunctionArgs) {
   const {storefront, session} = context;
 
   try {