[ci] release 2024-07

[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/create-hydrogen@5.0.0

Major Changes

• The code is now bundled to enhance installation speed. (#2184) by @frandiox

@shopify/cli-hydrogen@8.2.0

Minor Changes

• Support Vite projects in h2 setup css command to setup Tailwind and vanilla-extract. Drop CSS setup support for classic Remix projects. (#2245) by @frandiox

• The build process in Vite projects now generates a bundle analysis tool for the server files. (#2138) by @frandiox

Patch Changes

• Fix Codegen config resolution when project directory contains dots. (#2293) by @frandiox

• [Bug fix] Allow env-branch to be passed when running h2 deploy in CI (#2281) by @aswamy

• Fix CLI upgrade notification when running from a global process. (#2184) by @frandiox

• skeleton template was updated to do session commit in server call instead of routes (#2137) by @michenly

• Remove PUBLIC_STORE_DOMAIN environment variable from .env when creating new projects with mock.shop. (#2221) by @frandiox

• Added an --auth-bypass-token-duration flag to the deploy command to allow for specified token duration between 1 to 12 hours. (#2182) by @NelsonLee-Code

• Updated dependencies [0924410f]:

  • @shopify/mini-oxygen@3.0.4

@shopify/hydrogen@2024.7.1

Patch Changes

• Breaking change by @michenly

  customerAccount no longer commit session automatically.

• Breaking change by @blittle

  Previously the VariantSelector component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to the VariantSelector component:

   <VariantSelector
     handle={product.handle}
  +  options={product.options.filter((option) => option.values.length > 1)}
  -  options={product.options}
     variants={variants}>
   </VariantSelector>

  Fixes #1198

• Fix the types for optimistic cart (#2132) by @blittle

• Improve the types for useOptimisticCart() (#2269) by @blittle

• Fix a small rounding issue when checking stale-while-revalidate timing. (#2220) by @frandiox

• Update virtual route to use Layout component in the root file. (#2292) by @michenly

• Add sellingPlanId support to BuyNowButton. (#2254) by @dvisockas

• Fix customData from Analytics.Provider not being passed to page view events (#2224) by @wizardlyhel

• Auto cookie domain detection for customer privacy api and better error message for missing analytics fields (#2256) by @wizardlyhel

• New Features by @blittle

  Add a useOptimisticVariant hook for optimistically rendering product variant changes. This makes switching product variants instantaneous. Example usage:

  function Product() {
    const {product, variants} = useLoaderData<typeof loader>();
  
    // The selectedVariant optimistically changes during page
    // transitions with one of the preloaded product variants
    const selectedVariant = useOptimisticVariant(
      product.selectedVariant,
      variants,
    );
  
    return <ProductMain selectedVariant={selectedVariant} />;
  }

  This also introduces a small breaking change to the VariantSelector component, which now immediately updates which variant is active. If you'd like to retain the current functionality, and have the VariantSelector wait for the page navigation to complete before updating, use the waitForNavigation prop:

  <VariantSelector
    handle={product.handle}
    options={product.options}
    waitForNavigation
  >
    ...
  </VariantSelector>

• Return null instead of empty object from cart.get() when the cart id is invalid. (#2258) by @frandiox

• Updated dependencies [54c2f7ad]:

  • @shopify/hydrogen-react@2024.7.1

@shopify/hydrogen-react@2024.7.1

Patch Changes

• Add sellingPlanId support to BuyNowButton. (#2254) by @dvisockas

@shopify/mini-oxygen@3.0.4

Patch Changes

• Security updates (#2263) by @dependabot

@shopify/remix-oxygen@2.0.5

Patch Changes

• Update @shopify/oxygen-workers-types to fix issues on Windows. (#2252) by @michenly

skeleton@2024.7.1

Patch Changes

• Update @shopify/oxygen-workers-types to fix issues on Windows. (#2252) by @michenly

• Breaking change by @blittle

  Previously the VariantSelector component would filter out options that only had one value. This is undesireable for some apps. We've removed that filter, if you'd like to retain the existing functionality, simply filter the options prop before it is passed to the VariantSelector component:

   <VariantSelector
     handle={product.handle}
  +  options={product.options.filter((option) => option.values.length > 1)}
  -  options={product.options}
     variants={variants}>
   </VariantSelector>

  Fixes #1198

• Update remix to v2.10.1 (#2290) by @michenly

• Update root to use Remix's Layout Export pattern and eliminate the use of useLoaderData in root. (#2292) by @michenly

  The diff below showcase how you can make this refactor in existing application.

  import {
    Outlet,
  -  useLoaderData,
  +  useRouteLoaderData,
  } from '@remix-run/react';
  -import {Layout} from '~/components/Layout';
  +import {PageLayout} from '~/components/PageLayout';
  
  -export default function App() {
  +export function Layout({children}: {children?: React.ReactNode}) {
    const nonce = useNonce();
  -  const data = useLoaderData<typeof loader>();
  +  const data = useRouteLoaderData<typeof loader>('root');
  
    return (
      <html>
      ...
        <body>
  -        <Layout {...data}>
  -          <Outlet />
  -        </Layout>
  +        {data? (
  +          <PageLayout {...data}>{children}</PageLayout>
  +         ) : (
  +          children
  +        )}
        </body>
      </html>
    );
  }
  
  +export default function App() {
  +  return <Outlet />;
  +}
  
  export function ErrorBoundary() {
  - const rootData = useLoaderData<typeof loader>();
  
    return (
  -    <html>
  -    ...
  -      <body>
  -        <Layout {...rootData}>
  -          <div className="route-error">
  -            <h1>Error</h1>
  -            ...
  -          </div>
  -        </Layout>
  -      </body>
  -    </html>
  +    <div className="route-error">
  +      <h1>Error</h1>
  +      ...
  +    </div>
    );
  }
  

• Refactor the cart and product form components (#2132) by @blittle

• Remove manual setting of session in headers and recommend setting it in server after response is created. (#2137) by @michenly

  Step 1: Add isPending implementation in session

  // in app/lib/session.ts
  export class AppSession implements HydrogenSession {
  +  public isPending = false;
  
    get unset() {
  +    this.isPending = true;
      return this.#session.unset;
    }
  
    get set() {
  +    this.isPending = true;
      return this.#session.set;
    }
  
    commit() {
  +    this.isPending = false;
      return this.#sessionStorage.commitSession(this.#session);
    }
  }

  Step 2: update response header if session.isPending is true

  // in server.ts
  export default {
    async fetch(request: Request): Promise<Response> {
      try {
        const response = await handleRequest(request);
  
  +      if (session.isPending) {
  +        response.headers.set('Set-Cookie', await session.commit());
  +      }
  
        return response;
      } catch (error) {
        ...
      }
    },
  };

  Step 3: remove setting cookie with session.commit() in routes

  // in route files
  export async function loader({context}: LoaderFunctionArgs) {
    return json({},
  -    {
  -      headers: {
  -        'Set-Cookie': await context.session.commit(),
  -      },
      },
    );
  }

• Moved @shopify/cli from dependencies to devDependencies. (#2312) by @frandiox

• The @shopify/cli package now bundles the @shopify/cli-hydrogen plugin. Therefore, you can now remove the latter from your local dependencies: (#2306) by @frandiox

      "@shopify/cli": "3.64.0",
  -   "@shopify/cli-hydrogen": "^8.1.1",
      "@shopify/hydrogen": "2024.7.0",

• Updated dependencies [a0e84d76, 426bb390, 4337200c, 710625c7, 8b9c726d, 10a419bf, 6a6278bb, 66236ca6, dcbd0bbf, a5e03e2a, c2690653, 54c2f7ad, 4337200c, e96b332b, f3065371, 6cd5554b, 9eb60d73, e432533e, de3f70be, 83cb96f4]:

  • @shopify/remix-oxygen@2.0.5
  • @shopify/cli-hydrogen@8.2.0
  • @shopify/hydrogen@2024.7.1

[shopify]

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

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	June 12, 2024 4:03 PM

Learn more about Hydrogen's GitHub integration.

[quentinlagache]

Will this release allow use of storefront api version 2024-07 ?

[wizardlyhel]

@quentinlagache Yes. This release will update storefront api version to 2024-07. Planning to release next week.