[ci] release 2024-04

[shopify-github-actions-access]

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 main, this PR will be updated.

Releases

@shopify/cli-hydrogen@8.0.0

Major Changes

• Hydrogen CLI now requires @shopify/mini-oxygen to be installed separately as a dev dependency. It is still used automatically under the hood so there is no need to change your application code aside from installing the dependency. (#1891) by @frandiox

  Also, if a port provided via --port or --inspector-port flags is already in use, the CLI will now exit with an error message instead of finding a new open port. When the flags are not provided, the CLI will still find an open port.

Minor Changes

• Move the Hydrogen CLI's env push command to stable. (#1946) by @aswamy

• Deprecate the --env-branch flag, in favor of --env. (#1841) by @aswamy

  • --env accepts the environment's handle, instead of the environment's associated branch name
    • Run env list to display all environments and their handles
  • Any CLI commands that accepted the --env-branch flag now accept the --env flag.

• Support scaffolding projects from external repositories using the --template flag. (#1867) by @frandiox

  The following examples are equivalent:

  npm create @shopify/hydrogen -- --template shopify/hydrogen-demo-store
  npm create @shopify/hydrogen -- --template github.com/shopify/hydrogen-demo-store
  npm create @shopify/hydrogen -- --template https://github.com/shopify/hydrogen-demo-store

• 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

• Remove the @shopify/cli-hydrogen/experimental-vite import path in favor of @shopify/hydrogen/vite and @shopify/mini-oxygen/vite. (#1935) by @frandiox

Patch Changes

• Avoid throwing error in h2 dev --codegen when the Customer Account schema is not found. (#1962) by @frandiox

• Bump internal workerd dependency to fix a bug when running on Node 21. (#1866) by @frandiox

• Support Node's NODE_TLS_REJECT_UNAUTHORIZED and NODE_EXTRA_CA_CERTS environment variables in the worker environment. (#1882) by @frandiox

  Use this at your own risk to disable certificate validation or provide additional CA certificates when making HTTPS requests from the worker:

  # Disable certificate validation
  NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev
  
  # Provide additional CA certificates
  NODE_EXTRA_CA_CERTS=/usr/.../ca-certificates/my-file.crt npm run dev

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

• Add a newline after the h2 alias created in ZSH/Bash profiles. (#1950) by @madmath

• Fix the --markets flag when using npm create @shopify/hydrogen. (#1916) by @frandiox

• Handle duplicate storefront names when running link command. (#1860) by @gfscott

• List uncommitted files in the deploy command's "uncommitted changes" error message. (#1944) by @graygilmore

• Improve h2 setup vite command to cover more migration steps (e.g. vanilla-extract, css-modules, etc.) and keep Remix future flags. (#1915) by @frandiox

• Add --verbose flag to h2 dev and h2 preview commands to enable verbose logging. (#1928) by @frandiox

  Only CLI logs become verbose by default. If you also want to see verbose logs from Vite as well, use DEBUG=* h2 dev instead.

• Updated dependencies [646b78d4, 140e4768, ebaf5529]:

  • @shopify/hydrogen-codegen@0.3.0
  • @shopify/mini-oxygen@3.0.0

@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.5.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.1

@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

@shopify/hydrogen-react@2024.4.1

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/remix-oxygen@2.0.4

Patch Changes

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

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.5.0
  • @shopify/remix-oxygen@2.0.4

[shopify]

Oxygen deployed a preview of your changeset-release/main branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 11, 2024 6:43 PM

Learn more about Hydrogen's GitHub integration.