[ci] release 2023-01

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to 2023-01, this PR will be updated.

Releases

@shopify/cli-hydrogen@4.1.0

Minor Changes

• Updated CLI prompts. It's recommended to update your version of @shopify/cli to 3.45.0 when updating @shopify/cli-hydrogen. (#733) by @frandiox

  "dependencies": {
  -  "@shopify/cli": "3.x.x",
  +  "@shopify/cli": "3.45.0",
  }

• Added a new shortcut command that creates a global h2 alias for the Hydrogen CLI: (#679) by @frandiox

  $> npx shopify hydrogen shortcut

  After that, you can run commands using the new alias:

  $> h2 generate route home
  $> h2 g r home # Same as the above
  $> h2 check routes

Patch Changes

• Add support for the Remix future flags v2_meta, v2_errorBoundary and v2_routeConvention to the generate command. If these flags are enabled in your project, the new generated files will follow the v2 conventions. (#756) by @frandiox

• Update virtual route to use Remix V2 route name conventions (#792) by @DavidWittness

• Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

  Recommendations to follow:

  • Upgrade all the Remix packages in your app to 1.15.0.
  • Enable Remix v2 future flags at your earliest convenience following the official guide.

• Improve type safety in SEO data generators. (#763) by @davidhousedev

• Updated dependencies [85ae63a, 5e26503, 1f8526c]:

  • @shopify/hydrogen-react@2023.1.8
  • @shopify/remix-oxygen@1.0.5

@shopify/create-hydrogen@4.1.0

Minor Changes

• Updated CLI prompts. It's recommended to update your version of @shopify/cli to 3.45.0 when updating @shopify/cli-hydrogen. (#733) by @frandiox

  "dependencies": {
  -  "@shopify/cli": "3.x.x",
  +  "@shopify/cli": "3.45.0",
  }

Patch Changes

• Updated dependencies [e6e6c2d, 475a39c, 1f8526c, 0f4d562, 2d4c5d9, 68a6028]:
  • @shopify/cli-hydrogen@4.1.0

@shopify/hydrogen@2023.1.7

Patch Changes

• Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

  Recommendations to follow:

  • Upgrade all the Remix packages in your app to 1.15.0.
  • Enable Remix v2 future flags at your earliest convenience following the official guide.

• Add an experimental createWithCache_unstable utility, which creates a function similar to useQuery from Hydrogen v1. Use this utility to query third-party APIs and apply custom cache options. (#600) by @frandiox

  To setup the utility, update your server.ts:

  import {
    createStorefrontClient,
    createWithCache_unstable,
    CacheLong,
  } from '@shopify/hydrogen';
  
  // ...
  
    const cache = await caches.open('hydrogen');
    const withCache = createWithCache_unstable({cache, waitUntil});
  
    // Create custom utilities to query third-party APIs:
    const fetchMyCMS = (query) => {
      // Prefix the cache key and make it unique based on arguments.
      return withCache(['my-cms', query], CacheLong(), () => {
        const cmsData = await (await fetch('my-cms.com/api', {
          method: 'POST',
          body: query
        })).json();
  
        const nextPage = (await fetch('my-cms.com/api', {
          method: 'POST',
          body: cmsData1.nextPageQuery,
        })).json();
  
        return {...cmsData, nextPage}
      });
    };
  
    const handleRequest = createRequestHandler({
      build: remixBuild,
      mode: process.env.NODE_ENV,
      getLoadContext: () => ({
        session,
        waitUntil,
        storefront,
        env,
        fetchMyCMS,
      }),
    });

  Note: The utility is unstable and subject to change before stabalizing in the 2023.04 release.

• Updated dependencies [85ae63a, 5e26503]:

  • @shopify/hydrogen-react@2023.1.8

@shopify/hydrogen-react@2023.1.8

Patch Changes

• Fix parseGid() to return a query string if it was a part of the original GID. (#723) by @wizardlyhel

• Add the raw product returned from the Storefront API to also return from useProduct(): (#735) by @blittle

  function SomeComponent() {
    const {product} = useProduct();
  
    return (
      <div>
        <h2>{product.title}</h2>
        <h3>{product.description}</h3>
      </div>
    );
  }

@shopify/remix-oxygen@1.0.5

Patch Changes

• Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

  Recommendations to follow:

  • Upgrade all the Remix packages in your app to 1.15.0.
  • Enable Remix v2 future flags at your earliest convenience following the official guide.

demo-store@0.2.0

Minor Changes

• Fix scroll issues on Product Detail Page for small screens (#782) by @lifeiscontent

• Fix Layout title on mobile when title is long (#781) by @lifeiscontent

Patch Changes

• Adopt Remix v2_meta future flag (#738) by @wizardlyhel

  v2_meta migration steps

  1. For any routes that you used meta route export, convert it to the V2_MetaFunction equivalent. Notice that the package name in the import statement has also changed to '@remix-run/react':

     - import {type MetaFunction} from '@shopify/remix-oxygen';
     + import {type V2_MetaFunction} from '@remix-run/react';
     
     - export const meta: MetaFunction = () => {
     + export const meta: V2_MetaFunction = () => {
     -   return {title: 'Login'};
     +   return [{title: 'Login'}];
       };

  2. If you are using data from loaders, pass the loader type to the V2_MetaFunction generic:

     - export const meta: MetaFunction = ({data}) => {
     + export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
     -   return {title: `Order ${data?.order?.name}`};
     +   return [{title: `Order ${data?.order?.name}`}];
       };

  3. If you are using meta route export in root, convert it to Global Meta

     // 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 />

• Adopt v2_routeConvention future flag (#747) by @wizardlyhel

  v2_routeConventions migration steps

  Remix v2 route conventions are just file renames. We just need to ensure when changing file name and file location, the import paths of other files are also updated.

  Go to Remix docs for more details on the V2 route convention.

  Rename and move the following files in the routes folder to adopt to V2 route convention.

  Before

  After (V2 route convention)

  app/routes/ ├─ [sitemap.xml].tsx ├─ [robots.txt].tsx └─ ($lang)/ ├─ $shopid/orders/$token/ │ └─ authenticate.tsx ├─ account/ │ ├─ __private/ │ │ ├─ address/ │ │ │ └─ $id.tsx │ │ ├─ orders.$id.tsx │ │ ├─ edit.tsx │ │ └─ logout.ts │ └─ __public/ │ ├─ recover.tsx │ ├─ login.tsx │ ├─ register.tsx │ ├─ activate.$id.$activationToken.tsx │ └─ reset.$id.$resetToken.tsx ├─ api/ │ ├─ countries.tsx │ └─ products.tsx ├─ collections/ │ ├─ index.tsx │ ├─ $collectionHandle.tsx │ └─ all.tsx ├─ journal/ │ ├─ index.tsx │ └─ $journalHandle.tsx ├─ pages │ └─ $pageHandle.tsx ├─ policies/ │ ├─ index.tsx │ └─ $policyHandle.tsx ├─ products/ │ ├─ index.tsx │ └─ $productHandle.tsx ├─ $.tsx ├─ account.tsx ├─ cart.tsx ├─ cart.$lines.tsx ├─ discount.$code.tsx ├─ featured-products.tsx ├─ index.tsx └─ search.tsx

  app/routes/ ├─ [sitemap.xml].tsx ├─ [robots.txt].tsx ├─ ($lang).$shopid.orders.$token.authenticate.tsx ├─ ($lang).account.address.$id.tsx ├─ ($lang).account.orders.$id.tsx ├─ ($lang).account.edit.tsx ├─ ($lang).account.logout.ts ├─ ($lang).account.recover.tsx ├─ ($lang).account.login.tsx ├─ ($lang).account.register.tsx ├─ ($lang).account.activate.$id.$activationToken.tsx ├─ ($lang).account.reset.$id.$resetToken.tsx ├─ ($lang).api.countries.tsx ├─ ($lang).api.products.tsx ├─ ($lang).collections._index.tsx ├─ ($lang).collections.$collectionHandle.tsx ├─ ($lang).collections.all.tsx ├─ ($lang).journal._index.tsx ├─ ($lang).journal.$journalHandle.tsx ├─ ($lang).pages.$pageHandle.tsx ├─ ($lang).policies._index.tsx ├─ ($lang).policies.$policyHandle.tsx ├─ ($lang).products._index.tsx ├─ ($lang).products.$productHandle.tsx ├─ $.tsx ├─ ($lang)._index.tsx ├─ ($lang).account.tsx ├─ ($lang).cart.tsx ├─ ($lang).cart.$lines.tsx ├─ ($lang).discount.$code.tsx ├─ ($lang).featured-products.tsx └─ ($lang).search.tsx

  Optional

  If you want to continue using nested folder routes but have the v2_routeConvention flag turned on, you may consider using the npm package @remix-run/v1-route-convention.

  If you like the flat route convention but still wants a hybrid style of nested route folder, you may consider using the npm package remix-flat-routes

• Adopt Remix unstable_tailwind and unstable_postcss future flags for the Demo Store template. (#751) by @frandiox

  unstable_tailwind and unstable_postcss migration steps

  1. Move the file <root>/styles/app.css to <root>/app/styles/app.css, and remove it from .gitignore.

  2. Add "browserslist": ["defaults"] to your package.json, or your preferred value from Browserslist.

  3. Replace the build and dev scripts in your package.json with the following:

     Before

      "scripts": {
        "build": "npm run build:css && shopify hydrogen build",
        "build:css": "postcss styles --base styles --dir app/styles --env production",
        "dev": "npm run build:css && concurrently -g --kill-others-on-fail -r npm:dev:css \"shopify hydrogen dev\"",
        "dev:css": "postcss styles --base styles --dir app/styles -w",
        ...
      }

     After

      "scripts": {
        "dev": "shopify hydrogen dev",
        "build": "shopify hydrogen build",
        ...
      }

  You can also remove dependencies like concurrently if you don't use them anywhere else.

• Forwards search params of /discount/<code> route to a redirect route. (#766) by @lneicelis

• Carts created in liquid will soon be compatible with the Storefront API and vice versa, making it possible to share carts between channels. (#721) by @scottdixon

  This change updates the Demo Store to use Online Store's cart cookie (instead of sessions) which prevents customers from losing carts when merchants migrate to/from Hydrogen.

• Bump internal Remix dependencies to 1.15.0. (#728) by @wizardlyhel

  Recommendations to follow:

  • Upgrade all the Remix packages in your app to 1.15.0.
  • Enable Remix v2 future flags at your earliest convenience following the official guide.

• Updated CLI prompts. It's recommended to update your version of @shopify/cli to 3.45.0 when updating @shopify/cli-hydrogen. (#733) by @frandiox

  "dependencies": {
  -  "@shopify/cli": "3.x.x",
  +  "@shopify/cli": "3.45.0",
  }

• Adopt Remix v2_errorBoundary future flag (#729) by @wizardlyhel

  v2_errorBoundary migration steps

  1. Remove all CatchBoundary route exports

  2. Handle route level errors with ErrorBoundary

     Before:

     // app/root.tsx
     export function ErrorBoundary({error}: {error: Error}) {
       const [root] = useMatches();
       const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
     
       return (
         <html lang={locale.language}>
           <head>
             <title>Error</title>
             <Meta />
             <Links />
           </head>
           <body>
             <Layout layout={root?.data?.layout}>
               <GenericError error={error} />
             </Layout>
             <Scripts />
           </body>
         </html>
       );
     }

     After:

     // app/root.tsx
     import {isRouteErrorResponse, useRouteError} from '@remix-run/react';
     
     export function ErrorBoundary({error}: {error: Error}) {
       const [root] = useMatches();
       const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
       const routeError = useRouteError();
       const isRouteError = isRouteErrorResponse(routeError);
     
       let title = 'Error';
       let pageType = 'page';
     
       // We have an route error
       if (isRouteError) {
         title = 'Not found';
     
         // We have a page not found error
         if (routeError.status === 404) {
           pageType = routeError.data || pageType;
         }
       }
     
       return (
         <html lang={locale.language}>
           <head>
             <title>{title}</title>
             <Meta />
             <Links />
           </head>
           <body>
             <Layout
               layout={root?.data?.layout}
               key={`${locale.language}-${locale.country}`}
             >
               {isRouteError ? (
                 <>
                   {routeError.status === 404 ? (
                     <NotFound type={pageType} />
                   ) : (
                     <GenericError
                       error={{
                         message: `${routeError.status} ${routeError.data}`,
                       }}
                     />
                   )}
                 </>
               ) : (
                 <GenericError
                   error={error instanceof Error ? error : undefined}
                 />
               )}
             </Layout>
             <Scripts />
           </body>
         </html>
       );
     }

• Updated dependencies [e6e6c2d, 475a39c, 1f8526c, 0f4d562, 737f83e, 2d4c5d9, 68a6028]:

  • @shopify/cli-hydrogen@4.1.0
  • @shopify/hydrogen@2023.1.7
  • @shopify/remix-oxygen@1.0.5

[lordofthecactus]

signed

[cursedcoder]

I've signed a CLA

[github-actions]

CLA: Unexpected error has occurred, please re-run the workflow.

We are sorry for the inconvenience, due to GitHub actions limitations this requires a manual intervention.

There are few ways to do it:

• Create a new pull request with the same changes.
• Push an empty commit to the branch.
• Rebase the branch on top of the latest master might also help.

If the issue persists, please contact the maintainers of this repo.

[lordofthecactus]

Ran the ci:checks manually until we resolve the cla validation