@graphcommerce/magento-wishlist 9.1.0-canary.55 → 10.0.0-canary.57

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @graphcommerce/magento-wishlist
 
+## 10.0.0-canary.57
+
+## 10.0.0-canary.56
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.55
 
 ## 9.1.0-canary.54

package/components/ProductWishlistChip/ProductWishlistIconButton.tsx

@@ -1,4 +1,5 @@
 import type { ProductListItemFragment } from '@graphcommerce/magento-product'
+import { wishlistShowFeedbackMessage } from '@graphcommerce/next-config/config'
 import type { IconSvgProps } from '@graphcommerce/next-ui'
 import {
   extendableComponent,
@@ -7,8 +8,8 @@ import {
   IconSvg,
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { IconButtonProps, SxProps, Theme } from '@mui/material'
 import { Box, Button, IconButton } from '@mui/material'
 import React from 'react'
@@ -42,12 +43,8 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
         className={classes.wishlistButton}
         {...buttonProps}
         sx={[(theme) => ({ padding: theme.spacings.xxs }), ...(Array.isArray(sx) ? sx : [sx])]}
-        title={
-          current ? i18n._(/* i18n */ 'Remove from wishlist') : i18n._(/* i18n */ 'Add to wishlist')
-        }
-        aria-label={
-          current ? i18n._(/* i18n */ 'Remove from wishlist') : i18n._(/* i18n */ 'Add to wishlist')
-        }
+        title={current ? t`Remove from wishlist` : t`Add to wishlist`}
+        aria-label={current ? t`Remove from wishlist` : t`Add to wishlist`}
       >
         {current ? (
           <IconSvg
@@ -80,7 +77,7 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
         )}
       </IconButton>
 
-      {import.meta.graphCommerce.wishlistShowFeedbackMessage && (
+      {wishlistShowFeedbackMessage && (
         <MessageSnackbar
           open={showSuccess}
           onClose={hideShowSuccess}
@@ -98,15 +95,13 @@ export const ProductWishlistIconButton = React.memo<ProductWishlistChipProps>((p
               color='secondary'
               endIcon={<IconSvg src={iconChevronRight} />}
             >
-              <Trans id='View wishlist' />
+              <Trans>View wishlist</Trans>
             </Button>
           }
         >
-          <Trans
-            id='<0>{name}</0> has been added to your wishlist!'
-            components={{ 0: <strong /> }}
-            values={{ name: product.name }}
-          />
+          <Trans>
+            <strong>{product.name}</strong> has been added to your wishlist!
+          </Trans>
         </MessageSnackbar>
       )}
     </Box>

package/components/WishlistFab/WishlistFab.tsx

@@ -1,5 +1,5 @@
 import { DesktopHeaderBadge, extendableComponent, iconHeart, IconSvg } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { BadgeProps, FabProps as FabPropsType, SxProps, Theme } from '@mui/material'
 import { Fab } from '@mui/material'
 import React from 'react'
@@ -27,7 +27,7 @@ function WishlistFabContent(props: WishlistFabContentProps) {
       href='/wishlist'
       color='inherit'
       data-test-id='wishlist-fab'
-      aria-label={i18n._(/* i18n */ 'Wishlist')}
+      aria-label={t`Wishlist`}
       size='large'
       className={classes.root}
       {...FabProps}

package/components/WishlistItemActionCard/ConfigurableWishlistItemAction.tsx

@@ -1,7 +1,7 @@
 import { productLink } from '@graphcommerce/magento-product/hooks/useProductLink'
 import { type WishlistItemActionCardProps } from '@graphcommerce/magento-wishlist'
 import { iconChevronRight, IconSvg, nonNullable } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import { AddWishlistItemToCart } from '../WishlistItem/AddWishlistItemToCart'
 
@@ -36,7 +36,7 @@ export function ConfigurableWishlistItemAction(props: ConfigurableWishlistItemAc
       href={`${productLink(product)}?wishlistItemId=${id}`}
       endIcon={<IconSvg src={iconChevronRight} />}
     >
-      <Trans id='Configure' />
+      <Trans>Configure</Trans>
     </Button>
   ) : (
     <AddWishlistItemToCart product={product} selectedOptions={selectedOptions} />

package/components/WishlistItemActionCard/WishlistItemActionCard.tsx

@@ -4,7 +4,7 @@ import { AddProductsToCartForm, useProductLink } from '@graphcommerce/magento-pr
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, actionCardImageSizes, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { ButtonProps, SxProps, Theme } from '@mui/material'
 import { Button, Link } from '@mui/material'
 import type { ReactNode } from 'react'
@@ -173,7 +173,7 @@ export function WishlistItemActionCard(props: WishlistItemActionCardProps) {
             onClick={() => remove([id])}
             {...actionButtonProps}
           >
-            <Trans id='Remove' />
+            <Trans>Remove</Trans>
           </Button>
         }
         size={size}

package/hooks/useWishlistEnabled/useWishlistEnabled.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { useCustomerSession } from '@graphcommerce/magento-customer'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { wishlistHideForGuests } from '@graphcommerce/next-config/config'
 
-const showForGuest = !import.meta.graphCommerce.wishlistHideForGuests
+const showForGuest = !wishlistHideForGuests
 
 /**
  * Checks whether the wishlist is enabled.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-wishlist",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.57",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -13,27 +13,33 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.55",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/graphql": "^9.1.0-canary.55",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.55",
-    "@graphcommerce/image": "^9.1.0-canary.55",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.55",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.55",
-    "@graphcommerce/magento-product": "^9.1.0-canary.55",
-    "@graphcommerce/magento-product-configurable": "^9.1.0-canary.55",
-    "@graphcommerce/magento-store": "^9.1.0-canary.55",
-    "@graphcommerce/next-config": "^9.1.0-canary.55",
-    "@graphcommerce/next-ui": "^9.1.0-canary.55",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
-    "@lingui/core": "^4.2.1",
-    "@lingui/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.57",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.57",
+    "@graphcommerce/graphql": "^10.0.0-canary.57",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.57",
+    "@graphcommerce/image": "^10.0.0-canary.57",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.57",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.57",
+    "@graphcommerce/magento-product": "^10.0.0-canary.57",
+    "@graphcommerce/magento-product-configurable": "^10.0.0-canary.57",
+    "@graphcommerce/magento-store": "^10.0.0-canary.57",
+    "@graphcommerce/next-config": "^10.0.0-canary.57",
+    "@graphcommerce/next-ui": "^10.0.0-canary.57",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.57",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.57",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./plugins/WishlistProductAddToCartFormPlugin": "./plugins/WishlistProductAddToCartFormPlugin.tsx",
+    "./plugins/BundleWishlistItemActionCard": "./plugins/BundleWishlistItemActionCard.tsx",
+    "./plugins/ConfigurableWishlistItemActionCard": "./plugins/ConfigurableWishlistItemActionCard.tsx"
   }
 }

package/plugins/BundleWishlistItemActionCard.tsx

@@ -2,7 +2,7 @@ import { productLink } from '@graphcommerce/magento-product/hooks/useProductLink
 import type { WishlistItemActionCardProps } from '@graphcommerce/magento-wishlist'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
 import { iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 
 export const config: PluginConfig = {
@@ -27,7 +27,7 @@ export function WishlistItemActionCard(props: PluginProps<WishlistItemActionCard
           href={productLink(product)}
           endIcon={<IconSvg src={iconChevronRight} />}
         >
-          <Trans id='Configure' />
+          <Trans>Configure</Trans>
         </Button>
       }
     />