3.11 -> 3.12

This page lists the highlights for upgrading a project from Front-Commerce 3.11 to 3.12

Update dependencies

Update all your @front-commerce/* dependencies to this version:

pnpm update "@front-commerce/*@3.12.0"

Automated Migration

We provide a codemod to automatically update your codebase to the latest version of Front-Commerce. This tool will update your code when possible and flag the places where you need to manually update your code (with // TODO Codemod comments).

pnpm run front-commerce migrate --transform 3.12.0

Cart Item Removal API Changes

In this release, we've improved the Cart Item removal API to make it more consistent and type-safe. The changes affect how you use the useCartItemRemoveForm hook.

Breaking Changes

The useCartItemRemoveForm hook now requires the itemId parameter to be passed directly to the hook instead of the removeItem function. This change makes the code more predictable and easier to maintain.

Before

const { removeItem } = useCartItemRemoveForm();

// itemId passed to the removeItem function
removeItem(itemId);

After

// itemId passed directly to the hook
const { removeItem } = useCartItemRemoveForm(itemId);

// removeItem called without parameters
removeItem();

Migration Guide

1. Identify Usage: Find all places where you're using useCartItemRemoveForm in your codebase.

2. Update Hook Calls: Move the itemId parameter from the removeItem function call to the hook itself.

3. Remove Parameters: Remove any itemId parameters from removeItem function calls.

Here's a complete example of the migration showing a common pattern with multiple cart items:

function CartItemsList({ items }) {
  // Hook was previously called at the parent level
  const { removeItem, status } = useCartItemRemoveForm();

  return (
    <div className="cart-items">
      {items.map((item) => (
        <CartItem
          key={item.id}
          item={item}
          // removeItem function was passed down with itemId handled in the child
          onRemove={() => removeItem(item.id)}
        />
      ))}
    </div>
  );
}

function CartItem({ item }) {
  // Hook is now called within each CartItem component
  const { removeItem, status } = useCartItemRemoveForm(item.id);

  return (
    <div className="cart-item">
      <span>{item.name}</span>
      <button onClick={removeItem}>Remove</button>
    </div>
  );
}

This change brings several benefits:

1. Each cart item manages its own removal state independently
2. Removal status is properly scoped to individual items
3. Reduces prop drilling and simplifies the component hierarchy
4. Makes it easier to handle loading and error states per item and the state will be displayed across any components using the same hook.

Deprecation Warnings

During the transition period, you'll see deprecation warnings in the console if you're using the deprecated pattern:

The `itemId` parameter in `removeItem(itemId)` is deprecated. You should pass the `itemId` to the `useCartItemRemoveForm(itemId)` hook instead.

To resolve these warnings, follow the migration guide above to update your code to the new pattern.