@shopify/hydrogen@2024.4.1

Patch Changes

• Warn when using the deprecated Seo component (#1983) by @blittle

• Fix names and URLs shown for HIT/STALE items in the Subrequest Profiler. (#2021) by @frandiox

• Updated dependencies [0f5cab00]:

  • @shopify/hydrogen-react@2024.4.1

@shopify/hydrogen-react@2024.4.1

Patch Changes

• Fix noteUpdate scalar to be required (#2008) by @blittle

@shopify/cli-hydrogen@8.0.1

Patch Changes

• Clean up messaging around unlinked storefronts when running CLI commands (#1937) by @aswamy

  • When you run env list, env pull, or deploy against a storefront that isn't linked, it will show a warning message instead of an error message.
  • If you don't have a storefront to link to on Admin, we will just ask you to create a storefront instead of displaying an option list of size 1.
  • If you deleted a storefront on Admin, we will try to relink your storefront when running env list, env pull, or deploy.

• Add @return JSDoc tag to functions in JavaScript projects. (#2014) by @frandiox

• Fix --quickstart flag to support overwritting it with other flags. Example: h2 init --quickstart --no-install-deps. (#2023) by @frandiox

  Show error in h2 debug cpu command for Vite projects until we support it.

  Remove deprecated --styling flag from the h2 init command.

• Fix a warning when combining mock.shop and customer-account-push (#1992) by @frandiox

• Updated dependencies [7e8cf055, a335afc1]:

  • @shopify/mini-oxygen@3.0.1

skeleton@1.0.7

Patch Changes

• Update internal libraries for parsing .env files. (#1946) by @aswamy

  Please update the @shopify/cli dependency in your app to avoid duplicated subdependencies:

  "dependencies": {
  -   "@shopify/cli": "3.56.3",
  +   "@shopify/cli": "3.58.0",
  }

• Add Adds magic Catalog route (#1967) by @juanpprieto

• Update Vite plugin imports, and how their options are passed to Remix: (#1935) by @frandiox

  -import {hydrogen, oxygen} from '@shopify/cli-hydrogen/experimental-vite';
  +import {hydrogen} from '@shopify/hydrogen/vite';
  +import {oxygen} from '@shopify/mini-oxygen/vite';
  import {vitePlugin as remix} from '@remix-run/dev';
  
  export default defineConfig({
      hydrogen(),
      oxygen(),
      remix({
  -     buildDirectory: 'dist',
  +     presets: [hydrogen.preset()],
        future: {

• Add @shopify/mini-oxygen as a dev dependency for local development: (#1891) by @frandiox

    "devDependencies": {
      "@remix-run/dev": "^2.8.0",
      "@remix-run/eslint-config": "^2.8.0",
  +   "@shopify/mini-oxygen": "^3.0.0",
      "@shopify/oxygen-workers-types": "^4.0.0",
      ...
    },

• Add the customer-account push command to the Hydrogen CLI. This allows you to push the current --dev-origin URL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly

• Fix types returned by the session object. (#1869) by @frandiox

  In remix.env.d.ts or env.d.ts, add the following types:

  import type {
    // ...
    HydrogenCart,
  + HydrogenSessionData,
  } from '@shopify/hydrogen';
  
  // ...
  
  declare module '@shopify/remix-oxygen' {
    // ...
  
  + interface SessionData extends HydrogenSessionData {}
  }

• Codegen dependencies must be now listed explicitly in package.json: (#1962) by @frandiox

  {
    "devDependencies": {
  +   "@graphql-codegen/cli": "5.0.2",
      "@remix-run/dev": "^2.8.0",
      "@remix-run/eslint-config": "^2.8.0",
  +   "@shopify/hydrogen-codegen": "^0.3.0",
      "@shopify/mini-oxygen": "^2.2.5",
      "@shopify/oxygen-workers-types": "^4.0.0",
      ...
    }
  }

• Updated dependencies [4eaec272, 14bb5df1, 646b78d4, 87072950, 5f1295fe, 3c8a7313, ca1dcbb7, 11879b17, f4d6e5b0, 788d86b3, ebaf5529, da95bb1c, 5bb43304, 140e4768, 062d6be7, b3323e59, ab0df5a5, ebaf5529, ebaf5529, 9e899218, a209019f, d007b7bc, a5511cd7, 4afedb4d, 34fbae23, e3baaba5, 99d72f7a, 9351f9f5]:

  • @shopify/cli-hydrogen@8.0.0
  • @Shopify/hydrogen@2024.4.0
  • @shopify/remix-oxygen@2.0.4

@shopify/remix-oxygen@2.0.4

Patch Changes

• Fix compatibility of /subrequest-profiler with Vite. (#1935) by @frandiox

@shopify/mini-oxygen@3.0.0

Major Changes

• The default runtime exported from @shopify/mini-oxygen is now based on workerd. (#1891) by @frandiox

  The previous Node.js sandbox runtime has been moved to the @shopify/mini-oxygen/node export.

  Example usage:

  import {createMiniOxygen} from '@shopify/mini-oxygen';
  
  const miniOxygen = createMiniOxygen({
    workers: [
      {
        name: 'main',
        modules: true,
        script: `export default {
          async fetch() {
            const response = await fetch("https://hydrogen.shopify.dev");
            return response;
          }
        }`,
      },
    ],
  });
  
  const response = await miniOxygen.dispatchFetch('http://placeholder');
  console.log(await response.text());
  
  await miniOxygen.dispose();

Minor Changes

• Export new Vite plugin from @shopify/mini-oxygen/vite. It integrates Vite with MiniOxygen by running the application code within a worker. (#1935) by @frandiox

@shopify/hydrogen@2024.4.0

Minor Changes

• Change storefrontRedirect to ignore query parameters when matching redirects. For example, a redirect in the admin from /snowboards to /collections/snowboards will now match on the URL /snowboards?utm_campaign=buffer and redirect the user to /collections/snowboards?utm_campaign=buffer. (#1900) by @blittle

  This is a breaking change. If you want to retain the legacy functionality that is query parameter sensitive, pass matchQueryParams to storefrontRedirect():

  storefrontRedirect({
    request,
    response,
    storefront,
    matchQueryParams: true,
  });

Patch Changes

• Make StorefrontRedirect case insensitive when querying redirect URLs from the Storefront API. (#1941) by @blittle

• Fix bug where storefrontRedirect would return an error on soft page navigations. (#1880) by @blittle

• Fix a bug where cart could be null, even though a new cart was created by adding a line item. (#1865) by @blittle

  This allows calling the cart .get() method right after creating a new cart with
  one of the mutation methods: create(), addLines(), updateDiscountCodes(), updateBuyerIdentity(), updateNote(), updateAttributes(), setMetafields().

  import {
    createCartHandler,
    cartGetIdDefault,
    cartSetIdDefault,
  } from '@shopify/hydrogen';
  
  const cartHandler = createCartHandler({
    storefront,
    getCartId: cartGetIdDefault(request.headers),
    setCartId: cartSetIdDefault(),
    cartQueryFragment: CART_QUERY_FRAGMENT,
    cartMutateFragment: CART_MUTATE_FRAGMENT,
  });
  
  await cartHandler.addLines([{merchandiseId: '...'}]);
  // .get() now returns the cart as expected
  const cart = await cartHandler.get();

• Add postLogoutRedirectUri option to the Customer Account API client's logout method. (#1871) by @michenly

• Introducing <UNSTABLE_Analytics.Provider> that also includes Shopify analytics, Customer Privacy API and Privacy banner (#1789) by @wizardlyhel

• Export new Hydrogen Vite plugin from @shopify/hydrogen/vite. (#1935) by @frandiox

• Add the customer-account push command to the Hydrogen CLI. This allows you to push the current --dev-origin URL to the Shopify admin to enable secure connection to the Customer Account API for local development. (#1804) by @michenly

• Fix default content security policy directive for frameAncestors. (#1883) by @blittle

• Fall back to "mock.shop" when no value is passed in storeDomain to createStorefrontClient in development. (#1971) by @frandiox

• Allow ui_locale to be passed to the customer account login page. (#1842) by @wizardlyhel

• Deprecate the <Seo /> component in favor of directly using Remix meta route exports. Add the getSeoMeta to make migration easier. (#1875) by @blittle

  Migration steps:

  1. Remove the <Seo /> component from root.jsx:

   export default function App() {
     const nonce = useNonce();
     const data = useLoaderData<typeof loader>();
  
     return (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           <meta name="viewport" content="width=device-width,initial-scale=1" />
  -        <Seo />
           <Meta />
           <Links />
         </head>
         <body>
           <Layout {...data}>
             <Outlet />
           </Layout>
           <ScrollRestoration nonce={nonce} />
           <Scripts nonce={nonce} />
           <LiveReload nonce={nonce} />
         </body>
       </html>
     );
   }
  

  2. Add a Remix meta export to each route that returns an seo property from a loader or handle:

  +import {getSeoMeta} from '@shopify/hydrogen';
  
   export async function loader({context}) {
     const {shop} = await context.storefront.query(`
       query layout {
         shop {
           name
           description
         }
       }
     `);
  
     return {
       seo: {
         title: shop.title,
         description: shop.description,
       },
     };
   }
  
  +export const meta = ({data}) => {
  +   return getSeoMeta(data.seo);
  +};

  3. Merge root route meta data

  If your root route loader also returns an seo property, make sure to merge that data:

  export const meta = ({data, matches}) => {
    return getSeoMeta(
      matches[0].data.seo,
      // the current route seo data overrides the root route data
      data.seo,
    );
  };

  Or more simply:

  export const meta = ({data, matches}) => {
    return getSeoMeta(...matches.map((match) => match.data.seo));
  };

  4. Override meta

  Sometimes getSeoMeta might produce a property in a way you'd like to change. Map over the resulting array to change it. For example, Hydrogen removes query parameters from canonical URLs, add them back:

  export const meta = ({data, location}) => {
    return getSeoMeta(data.seo).map((meta) => {
      if (meta.rel === 'canonical') {
        return {
          ...meta,
          href: meta.href + location.search,
        };
      }
  
      return meta;
    });
  };

• Updated dependencies [f4d6e5b0, a209019f, e50f4349]:

  • @shopify/hydrogen-react@2024.4.0

@shopify/hydrogen-react@2024.4.0

Patch Changes

• Introducing <UNSTABLE_Analytics.Provider> that also includes Shopify analytics, Customer Privacy API and Privacy banner (#1789) by @wizardlyhel

• Fall back to "mock.shop" when no value is passed in storeDomain to createStorefrontClient in development. (#1971) by @frandiox

• Expose cartReady state from the cart context. (#1885) by @celsowhite

@shopify/hydrogen-codegen@0.3.0

Minor Changes

• Remove deprecated schema export. Use getSchema('storefront') instead. (#1962) by @frandiox

@shopify/create-hydrogen@4.3.6

Patch Changes

• Add --quickstart flag option to init/create command. (#1822) by @gfscott

• Updated dependencies [4eaec272, 646b78d4, 5f1295fe, 11879b17, 788d86b3, da95bb1c, 5bb43304, 140e4768, b3323e59, ab0df5a5, ebaf5529, a5511cd7, 34fbae23, e3baaba5, 99d72f7a, 9351f9f5]:

  • @shopify/cli-hydrogen@8.0.0