[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.1.0

Minor Changes

• Support Vite projects in h2 debug cpu command. (#2124) by @frandiox

• The h2 preview command now supports --build and --watch flags to preview the project using the build process instead of Vite's dev process. (#2100) by @frandiox

Patch Changes

• Update remix to v2.9.2 (#2135) by @michenly

• The CLI now tries to add optimizable dependencies to Vite's ssr.optimizeDeps.include automatically. (#2106) by @frandiox

• Fix Hydrogen upgrade notification when running the dev command. (#2120) by @frandiox

• Hide non actionable warning about ts-node. (#2123) by @frandiox

• Updated internal CLI dependencies to 3.60.0. (#2087) by @isaacroldan

• Updated dependencies [27e51abf]:

  • @shopify/mini-oxygen@3.0.3

@shopify/create-hydrogen@4.3.10

Patch Changes

• Update remix to v2.9.2 (#2135) by @michenly

• Updated dependencies [32d4c33e, 27e51abf, 7b838beb, ca4cf045, 5a554b2e, 608389d6, 65239c76]:

  • @shopify/cli-hydrogen@8.1.0

@shopify/hydrogen@2024.4.3

Patch Changes

• Add the useOptimisticCart() hook. This hook takes the cart object as a parameter, and processes all pending cart actions, locally mutating the cart with optimistic state. An optimistic cart makes cart actions immediately render in the browser while the action syncs to the server. This increases the perceived performance of the application. (#2069) by @blittle

  Example usage:

  // Root loader returns the cart data
  export async function loader({context}: LoaderFunctionArgs) {
    return defer({
      cart: context.cart.get(),
    });
  }
  
  // The cart component renders each line item in the cart.
  export function Cart({cart}) {
    if (!cart?.lines?.nodes?.length) return <p>Nothing in cart</p>;
  
    return cart.lines.nodes.map((line) => (
      <div key={line.id}>
        <Link to={`/products${line.merchandise.product.handle}`}>
          {line.merchandise.product.title}
        </Link>
      </div>
    ));
  }

  The problem with this code is that it can feel slow. If a new item is added to the cart, it won't render until the server action completes and the client revalidates the root loader with the new cart data.

  If we update the cart implementation with a new useOptimisticCart() hook, Hydrogen can take the pending add to cart action, and apply it locally with the existing cart data:

  export function Cart({cart}) {
    const optimisticCart = useOptimisticCart(cart);
  
    if (!optimisticCart?.lines?.nodes?.length) return <p>Nothing in cart</p>;
  
    return optimisticCart.lines.nodes.map((line) => (
      <div key={line.id}>
        <Link to={`/products${line.merchandise.product.handle}`}>
          {line.merchandise.product.title}
        </Link>
      </div>
    ));
  }

  This works automatically with the CartForm.ACTIONS.LinesUpdate and CartForm.ACTIONS.LinesRemove. To make it work with CartForm.Actions.LinesAdd, update the CartForm to include the selectedVariant:

  export function ProductCard({product}) {
    return (
      <div>
        <h2>{product.title}</h2>
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesAdd}
          inputs={{
            lines: [
              {
                merchandiseId: product.selectedVariant.id,
                quantity: 1,
                // The whole selected variant is not needed on the server, used in
                // the client to render the product until the server action resolves
                selectedVariant: product.selectedVariant,
              },
            ],
          }}
        >
          <button type="submit">Add to cart</button>
        </CartForm>
      </div>
    );
  }

  Sometimes line items need to render differently when they have yet to process on the server. A new isOptimistic flag is added to each line item:

  export function Cart({cart}) {
    const optimisticCart = useOptimisticCart(cart);
  
    if (!cart?.lines?.nodes?.length) return <p>Nothing in cart</p>;
  
    return optimisticCart.lines.nodes.map((line) => (
      <div key={line.id} style={{opacity: line.isOptimistic ? 0.8 : 1}}>
        <Link to={`/products${line.merchandise.product.handle}`}>
          {line.merchandise.product.title}
        </Link>
        <CartForm
          route="/cart"
          action={CartForm.ACTIONS.LinesRemove}
          inputs={{lineIds}}
          disabled={line.isOptimistic}
        >
          <button type="submit">Remove</button>
        </CartForm>
      </div>
    ));
  }

• Adds type support for the script-src-elem directive for CSPs (#2105) by @altonchaney

• Fix storefrontRedirect to strip trailing slashes when querying for redirects. Resolves #2090 (#2110) by @blittle

• Improve errors when a CJS dependency needs to be added to Vite's ssr.optimizeDeps.include. (#2106) by @frandiox

• Improve VariantSelector to return variant object in option values. Thank you @NabeelAhmed1721 by @blittle

• Fix: Use exiting id_token during Customer Account API token refresh because it does not get return in the API. (#2103) by @juanpprieto

• Updated dependencies [73716c88]:

  • @shopify/hydrogen-react@2024.4.3

@shopify/hydrogen-react@2024.4.3

Patch Changes

• Fix shopify cookie domain setting (#2142) by @wizardlyhel

@shopify/mini-oxygen@3.0.3

Patch Changes

• Improve errors when a CJS dependency needs to be added to Vite's ssr.optimizeDeps.include. (#2106) by @frandiox

skeleton@2024.4.5

Patch Changes

• Update remix to v2.9.2 (#2135) by @michenly

• Update the skeleton template to use React state in the aside dialogs (#2088) by @blittle

• Updated dependencies [fe82119f, 32d4c33e, 8eea75ec, 27e51abf, f29c9085, 7b838beb, ca4cf045, 5a554b2e, 27e51abf, 608389d6, 9dfd1cfe, 7def3e9f, 65239c76]:

  • @shopify/hydrogen@2024.4.3
  • @shopify/cli-hydrogen@8.1.0

[NabeelAhmed1721]

Thanks for the version bump!