skeleton@2024.4.6

Patch Changes

• Updated dependencies [707afb96]:
  • @Shopify/hydrogen@2024.4.4

@shopify/hydrogen@2024.4.4

Patch Changes

• Fix infinite loop when checkoutDomain isn't supplied (#2235) by @wizardlyhel

@shopify/create-hydrogen@4.3.11

Patch Changes

• Pump create script to included infinite loop fix in default scaffolding by @michenly

skeleton@2024.4.5

Patch Changes

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

• <Analytics> and useAnalytics are now stable. (#2141) by @wizardlyhel

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

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

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

@shopify/mini-oxygen@3.0.3

Patch Changes

• Update server in development when entry point (<root>/server.js) changes. (#2153) by @frandiox

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

@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

• Ignore /favicon.ico route in Subrequest Profiler. (#2180) by @frandiox

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

• <Analytics> and useAnalytics are now stable. (#2141) by @wizardlyhel

• 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

• Fix optimizing deps when using PNPM. (#2172) by @frandiox

• Updated dependencies [73716c88, 30d18bdb]:

  • @shopify/hydrogen-react@2024.4.3

@shopify/hydrogen-react@2024.4.3

Patch Changes

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

• Add a RichText component to easily render `rich_text_field` metafields. Thank you @bastienrobert for the original implementation. Example usage: (#2144) by @blittle

  import {RichText} from '@shopify/hydrogen-react';
  
  export function MainRichText({metaFieldData}: {metaFieldData: string}) {
    return (
      <RichText
        data={metaFieldData}
        components={{
          paragraph({node}) {
            return <p className="customClass">{node.children}</p>;
          },
        }}
      />
    );
  }

@shopify/create-hydrogen@4.3.10

Patch Changes

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

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

  • @shopify/cli-hydrogen@8.1.0

@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

• <Analytics> and useAnalytics are now stable. (#2141) by @wizardlyhel

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

• Updated dependencies [cd888ec5, 27e51abf]:

  • @shopify/mini-oxygen@3.0.3

skeleton@2024.4.4

Patch Changes

• Add JSdoc to getSelectedProductOptions utility and cleanup the skeleton implementation (#2089) by @juanpprieto

• Updated dependencies [286589ee, 6f5061d9, ae262b61, 2c11ca3b, b70f9c2c, 17528db1, 58ea9bb0]:

  • @shopify/cli-hydrogen@8.0.4
  • @Shopify/hydrogen@2024.4.2