@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

@shopify/mini-oxygen@3.0.2

Patch Changes

• Fix issue where undici dependency couldn't be found in some situations. (#2065) by @frandiox

• Fix HMR when changing files imported into routes. (#2077) by @frandiox

@shopify/hydrogen@2024.4.2

Patch Changes

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

• Adding support for B2B to the customer account client and cart handler to store and manage buyer context. Currently Unstable. (#1886) by @dustinfirman

• When extending the content security policy, if the default directive is 'none' then the default won't be merged into the final directive. (#2076) by @nkgentile

• Update content-security-policy-builder subdependency to ESM version to avoid preprocessing in Vite. (#2057) by @frandiox

• Fix Analytics. Provider for error checking and working without privacy banner. (#2025) by @wizardlyhel

• Updated dependencies [081e1498]:

  • @shopify/hydrogen-react@2024.4.2

@shopify/hydrogen-react@2024.4.2

Patch Changes

• Ensure the getShopifyDomain method from the useShop hook always includes the HTTPS protocol. (#2079) by @michenly

@shopify/hydrogen-codegen@0.3.1

Patch Changes

• Use type imports in generated file (import type instead of import). (#2094) by @frandiox

• Import schemas from @shopify/hydrogen instead of @shopify/hydrogen-react to avoid dependency issues in some situations. (#2086) by @frandiox