@graphcommerce/magento-product 9.1.0-canary.55 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # Change Log
 
+## 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
 
 ### Patch Changes

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,7 +1,7 @@
 import { useCartEnabled } from '@graphcommerce/magento-cart'
 import type { ButtonProps } from '@graphcommerce/next-ui'
 import { Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import React from 'react'
 import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
 import { useAddProductsToCartAction } from './useAddProductsToCartAction'

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,7 +1,7 @@
 import { useCartEnabled } from '@graphcommerce/magento-cart'
 import type { FabProps } from '@graphcommerce/next-ui'
 import { Fab, iconCheckmark, iconShoppingBag } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import type { UseAddProductsToCartActionProps } from './useAddProductsToCartAction'
 import { useAddProductsToCartAction } from './useAddProductsToCartAction'

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -44,7 +44,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
   const { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
   const router = useRouter()
   const client = useApolloClient()
-  const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
+  const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>> | undefined>(undefined)
 
   const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFields>(
     AddProductsToCartDocument,

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -1,6 +1,6 @@
 import type { NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
 import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
 import type { AddToCartItemSelector } from './useFormAddProductsToCart'
 import { useFormAddProductsToCart } from './useFormAddProductsToCart'
@@ -23,12 +23,12 @@ export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
       required
       inputProps={{
         min: 1,
-        'aria-label': i18n._(/* i18n */ 'Add to cart quantity'),
+        'aria-label': t`Add to cart quantity`,
         ...inputProps,
       }}
       defaultValue={1}
       control={control}
-      aria-label={i18n._(/* i18n */ 'Add to cart quantity')}
+      aria-label={t`Add to cart quantity`}
       name={`cartItems.${index}.quantity`}
       {...rest}
     />

package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx

@@ -13,12 +13,12 @@ import {
   ListFormat,
   MessageSnackbar,
 } from '@graphcommerce/next-ui'
-import { Plural, Trans } from '@lingui/macro'
+import { Plural, Trans } from '@lingui/react/macro'
 
 export type AddProductsToCartSnackbarMessageProps = {
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
-  error?: ApolloError
+  error?: ApolloError | null
   userErrors?: Pick<CartUserInputError, 'message'>[]
   showSuccess: boolean
   addedItems: string[]

package/components/ProductCustomizable/CustomizableAreaOption.tsx

@@ -3,7 +3,7 @@ import type { CurrencyEnum } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import type { TypeRenderer } from '@graphcommerce/next-ui'
 import { SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import React from 'react'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
@@ -61,10 +61,7 @@ export function CustomizableAreaOption(props: CustomizableAreaOptionProps) {
         required={Boolean(required)}
         rules={{ maxLength }}
         helperText={
-          (maxLength ?? 0) > 0 &&
-          i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
-            maxLength,
-          })
+          maxLength && maxLength > 0 && t`There is a maximum of ‘${maxLength}’ characters`
         }
       />
     </Box>

package/components/ProductCustomizable/CustomizableCheckboxOption.tsx

@@ -2,7 +2,7 @@ import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box, Checkbox } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -53,8 +53,9 @@ function CustomizableCheckboxActionCard(props: CheckboxActionCardProps) {
 }
 
 export function CustomizableCheckboxOption(props: CustomizableCheckboxOptionProps) {
-  const { uid, required, index, title: label, checkboxValue, productPrice, currency } = props
+  const { uid, required, index, title, checkboxValue, productPrice, currency } = props
   const { control } = useFormAddProductsToCart()
+  const label = title ?? ''
 
   return (
     <Box>
@@ -73,9 +74,7 @@ export function CustomizableCheckboxOption(props: CustomizableCheckboxOptionProp
         multiple
         control={control}
         rules={{
-          required: required
-            ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label })
-            : false,
+          required: required ? t`Please select a value for ‘${label}’` : false,
         }}
         render={CustomizableCheckboxActionCard}
         name={`cartItems.${index}.selected_options_record.${uid}`}

package/components/ProductCustomizable/CustomizableDateOption.tsx

@@ -1,7 +1,7 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { CustomizableDateTypeEnum } from '@graphcommerce/graphql-mesh'
 import { SectionHeader } from '@graphcommerce/next-ui'
-import { t } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,7 +1,7 @@
 import { useController } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box, MenuItem, TextField } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -14,15 +14,14 @@ export function CustomizableDropDownOption(props: CustomizableDropDownOptionProp
   const { uid, required, index, title, dropdownValue, productPrice, currency } = props
   const { control } = useFormAddProductsToCart()
 
+  const label = title ?? ''
   const {
     field: { onChange, value, ref, ...field },
     fieldState: { invalid, error },
   } = useController({
     name: `cartItems.${index}.selected_options_record.${uid}`,
     rules: {
-      required: required
-        ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label: title })
-        : false,
+      required: required ? t`Please select a value for ‘${label}’` : false,
     },
     control,
     defaultValue: '',

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,7 +1,7 @@
 import { TextFieldElement, useWatch } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import { SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -50,16 +50,11 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
         rules={{
           maxLength: {
             value: maxLength,
-            message: i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
-              maxLength,
-            }),
+            message: t`There is a maximum of ‘${maxLength}’ characters`,
           },
         }}
         helperText={
-          (maxLength ?? 0) > 0 &&
-          i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
-            maxLength,
-          })
+          maxLength && maxLength > 0 && t`There is a maximum of ‘${maxLength}’ characters`
         }
       />
     </Box>

package/components/ProductCustomizable/CustomizableMultipleOption.tsx

@@ -2,7 +2,7 @@ import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -48,8 +48,9 @@ function CustomizableMultipleActionCard(props: MultipleActionCardProps) {
 }
 
 export function CustomizableMultipleOption(props: CustomizableMultipleOptionProps) {
-  const { uid, required, index, title: label, multipleValue, currency, productPrice } = props
+  const { uid, required, index, title, multipleValue, currency, productPrice } = props
   const { control } = useFormAddProductsToCart()
+  const label = title ?? ''
 
   return (
     <Box>
@@ -67,9 +68,7 @@ export function CustomizableMultipleOption(props: CustomizableMultipleOptionProp
         })}
         multiple
         rules={{
-          required: required
-            ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label })
-            : false,
+          required: required ? t`Please select a value for ‘${label}’` : false,
         }}
         control={control}
         render={CustomizableMultipleActionCard}

package/components/ProductCustomizable/CustomizableRadioOption.tsx

@@ -2,7 +2,7 @@ import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { Money } from '@graphcommerce/magento-store'
 import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, filterNonNullableKeys, SectionHeader } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Box } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import type { OptionTypeRenderer } from './CustomizableAreaOption'
@@ -50,8 +50,9 @@ function CustomizableRadioActionCard(props: RadioActionCardProps) {
 }
 
 export function CustomizableRadioOption(props: CustomizableRadioOptionProps) {
-  const { uid, required, index, title: label, radioValue, currency, productPrice } = props
+  const { uid, required, index, title, radioValue, currency, productPrice } = props
   const { control } = useFormAddProductsToCart()
+  const label = title ?? ''
 
   return (
     <Box>
@@ -72,9 +73,7 @@ export function CustomizableRadioOption(props: CustomizableRadioOptionProps) {
         render={CustomizableRadioActionCard}
         name={`cartItems.${index}.selected_options_record.${uid}`}
         rules={{
-          required: required
-            ? i18n._(/* i18n*/ 'Please select a value for ‘{label}’', { label })
-            : false,
+          required: required ? t`Please select a value for ‘${label}’` : false,
         }}
         items={filterNonNullableKeys(radioValue, ['title']).map((radioVal) => ({
           productPrice,

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -8,7 +8,7 @@ import {
   iconCirle,
   IconSvg,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
@@ -79,7 +79,7 @@ export function ProductFilterEqualSection(props: FilterProps) {
               form.setValue(name, null)
             }}
           >
-            <Trans id='Clear' />
+            <Trans>Clear</Trans>
           </Button>
         ) : undefined
       }

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -1,7 +1,7 @@
 import { Controller } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
 import { ActionCardAccordion, Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -46,7 +46,7 @@ export function ProductFilterRangeSection(props: FilterProps) {
                     form.setValue(name, null)
                   }}
                 >
-                  <Trans id='Clear' />
+                  <Trans>Clear</Trans>
                 </Button>
               ) : undefined
             }

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -13,12 +13,13 @@ import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
 import type { BaseSyntheticEvent, MutableRefObject } from 'react'
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'
-import type { Subscription } from 'react-hook-form/dist/utils/createSubject'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import type { ProductFilterParams, ProductListParams } from '../ProductListItems/filterTypes'
 import { toFilterParams } from '../ProductListItems/filterTypes'
 
+type Subscription = { unsubscribe: () => void }
+
 type DataProps = {
   filterTypes: Record<string, string | undefined>
   appliedAggregations?: ProductListFiltersFragment['aggregations']

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,6 +1,6 @@
 import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { ChipOverlayOrPopper } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { activeAggregations } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -40,7 +40,7 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
 
   return (
     <ChipOverlayOrPopper
-      label={<Trans id='All filters' />}
+      label={<Trans>All filters</Trans>}
       chipProps={{ variant: 'outlined' }}
       onApply={submit}
       onReset={hasFilters ? clearAll : undefined}

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -11,7 +11,7 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -39,7 +39,7 @@ export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCateg
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       defaultExpanded={defaultExpanded}
-      summary={<Trans id='Categories' />}
+      summary={<Trans>Categories</Trans>}
       right={
         clearable && currentFilter && currentFilter.length > 0 ? (
           <Button
@@ -49,7 +49,7 @@ export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCateg
               form.setValue(name, null)
             }}
           >
-            <Trans id='Clear' />
+            <Trans>Clear</Trans>
           </Button>
         ) : undefined
       }

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
@@ -30,7 +30,7 @@ export function ProductFiltersProClearAll(props: AllFiltersSidebar) {
         return clearAll()
       }}
     >
-      <Trans id='Clear all filters' />
+      <Trans>Clear all filters</Trans>
     </Button>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

@@ -4,7 +4,7 @@ import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { ActionCard, ChipOverlayOrPopper } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
@@ -27,7 +27,7 @@ export function ProductFiltersProLimitChip(props: ProductFiltersProLimitChipProp
       (storeConfigQuery?.storeConfig?.grid_per_page_values?.split(',').map(Number) ?? []).map(
         (count) => ({
           value: count === defaultPerPage ? null : count,
-          title: <Trans id='{count} Per page' values={{ count }} />,
+          title: <Trans>{count} Per page</Trans>,
         }),
       ),
     [defaultPerPage, storeConfigQuery?.storeConfig?.grid_per_page_values],
@@ -39,9 +39,9 @@ export function ProductFiltersProLimitChip(props: ProductFiltersProLimitChipProp
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
-      label={<Trans id='Per page' />}
+      label={<Trans>Per page</Trans>}
       selected={Boolean(params.pageSize)}
-      selectedLabel={<Trans id='{count} Per page' values={{ count: params.pageSize }} />}
+      selectedLabel={<Trans>{params.pageSize} Per page</Trans>}
       onApply={submit}
       onReset={
         activePageSize

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -3,7 +3,7 @@ import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -25,7 +25,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
       (storeConfigQuery?.storeConfig?.grid_per_page_values?.split(',').map(Number) ?? []).map(
         (count) => ({
           value: count === defaultPerPage ? null : count,
-          title: <Trans id='{count} Per page' values={{ count }} />,
+          title: <Trans>{count} Per page</Trans>,
         }),
       ),
     [defaultPerPage, storeConfigQuery?.storeConfig?.grid_per_page_values],
@@ -37,7 +37,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
     <ActionCardAccordion
       sx={sx}
       defaultExpanded={!!activePageSize}
-      summary={<Trans id='Per page' />}
+      summary={<Trans>Per page</Trans>}
       details={
         <ActionCardListForm
           sx={{ mb: 2 }}
@@ -61,7 +61,7 @@ export function ProductFiltersProLimitSection(props: ProductFiltersProLimitSecti
               form.setValue('currentPage', 1)
             }}
           >
-            <Trans id='Clear' />
+            <Trans>Clear</Trans>
           </Button>
         ) : undefined
       }

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,7 +1,7 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { ActionCard, ChipOverlayOrPopper } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
 import { useProductFiltersProSort } from './useProductFiltersProSort'
@@ -23,7 +23,7 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
-      label={<Trans id='Sort By' />}
+      label={<Trans>Sort By</Trans>}
       selected={selected}
       selectedLabel={selectedLabel}
       onApply={submit}

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,6 +1,6 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
@@ -21,7 +21,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
     <ActionCardAccordion
       sx={sx}
       defaultExpanded={selected}
-      summary={<Trans id='Sort By' />}
+      summary={<Trans>Sort By</Trans>}
       details={
         <ActionCardListForm
           control={form.control}
@@ -44,7 +44,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
               form.setValue('currentPage', 1)
             }}
           >
-            <Trans id='Clear' />
+            <Trans>Clear</Trans>
           </Button>
         ) : undefined
       }

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -2,7 +2,7 @@ import { useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { useMemo } from 'react'
 import type { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
 import type { ProductListSortFragment } from '../ProductListSort'
@@ -26,7 +26,7 @@ export function useProductFiltersProSort(props: ProductListActionSortProps) {
     () =>
       filterNonNullableKeys(sort_fields?.options).map((o) =>
         (!category?.uid && o.value === 'position') || o.value === 'relevance'
-          ? { value: 'relevance', label: i18n._(/* i18n*/ 'Relevance') }
+          ? { value: 'relevance', label: t`Relevance` }
           : o,
       ),
     [category?.uid, sort_fields?.options],

package/components/ProductListCount/ProductListCount.tsx

@@ -1,5 +1,5 @@
 import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Divider, Typography } from '@mui/material'
 import type { ProductListCountFragment } from './ProductListCount.gql'
@@ -44,9 +44,9 @@ export function ProductListCount(props: ProductCountProps) {
         sx={{ lineHeight: 0 }}
       >
         {children ? <> {children} </> : null}
-        {total_count === 0 && <Trans id='no products' />}
-        {total_count === 1 && <Trans id='one product' />}
-        {(total_count ?? 0) > 1 && <Trans id='{total_count} products' values={{ total_count }} />}
+        {total_count === 0 && <Trans>no products</Trans>}
+        {total_count === 1 && <Trans>one product</Trans>}
+        {(total_count ?? 0) > 1 && <Trans>{total_count} products</Trans>}
       </Typography>
       <Divider component='div' className={classes.line} />
     </Box>

package/components/ProductListFilters/FilterRangeType.tsx

@@ -3,7 +3,7 @@ import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import type { ChipMenuProps } from '@graphcommerce/next-ui'
 import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
@@ -82,18 +82,16 @@ export function FilterRangeType(props: FilterRangeTypeProps) {
 
     if (from === min && to !== max)
       currentLabel = (
-        <Trans
-          id='Below <0/>'
-          components={{ 0: <Money round value={Number(currentFilter?.to)} /> }}
-        />
+        <Trans>
+          Below <Money round value={Number(currentFilter?.to)} />
+        </Trans>
       )
 
     if (from !== min && to === max)
       currentLabel = (
-        <Trans
-          id='Above <0/>'
-          components={{ 0: <Money round value={Number(currentFilter?.from)} /> }}
-        />
+        <Trans>
+          Above <Money round value={Number(currentFilter?.from)} />
+        </Trans>
       )
 
     if (from !== min && to !== max)

package/components/ProductListItem/ProductListItemImage.tsx

@@ -1,6 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { BoxProps } from '@mui/material'
 import { Box, Skeleton, styled } from '@mui/material'
 
@@ -91,7 +91,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
-        <Trans id='No Image' />
+        <Trans>No Image</Trans>
       </Box>
     </PlaceHolderContainer>
   )

package/components/ProductListItems/getFilterTypes.ts

@@ -1,6 +1,7 @@
 import type { ApolloClient, NormalizedCacheObject, TypedDocumentNode } from '@graphcommerce/graphql'
 import { gql } from '@graphcommerce/graphql'
 import type { AttributeFrontendInputEnum, Exact } from '@graphcommerce/graphql-mesh'
+import { magentoVersion } from '@graphcommerce/next-config/config'
 import { filterNonNullableKeys, nonNullable } from '@graphcommerce/next-ui'
 import { ProductFilterTypesDocument } from './ProductFilterTypes.gql'
 
@@ -34,7 +35,7 @@ export async function getFilterTypes(
   client: ApolloClient<NormalizedCacheObject>,
   isSearch: boolean = false,
 ): Promise<FilterTypes> {
-  if (import.meta.graphCommerce.magentoVersion >= 247) {
+  if (magentoVersion >= 247) {
     const types = await client.query({
       query: ProductFilterTypesDocument,
       variables: {

package/components/ProductListPagination/ProductListPagination.tsx

@@ -1,3 +1,4 @@
+import { productListPaginationVariant } from '@graphcommerce/next-config/config'
 import { NextLink, Pagination, PaginationExtended } from '@graphcommerce/next-ui'
 import type { PaginationProps } from '@mui/material'
 import { Link } from '@mui/material'
@@ -17,7 +18,7 @@ export function ProductListPagination({
 }: ProductPaginationProps) {
   if (!page_info || !page_info.total_pages || !page_info.current_page) return null
 
-  if (import.meta.graphCommerce.productListPaginationVariant !== 'EXTENDED') {
+  if (productListPaginationVariant !== 'EXTENDED') {
     return (
       <Pagination
         count={page_info?.total_pages}
@@ -41,7 +42,7 @@ export function ProductListPagination({
     )
   }
 
-  if (import.meta.graphCommerce.productListPaginationVariant === 'EXTENDED') {
+  if (productListPaginationVariant === 'EXTENDED') {
     return (
       <PaginationExtended
         count={page_info?.total_pages}

package/components/ProductListSort/ProductListSort.tsx

@@ -2,7 +2,7 @@ import { cloneDeep, useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import type { ChipMenuProps } from '@graphcommerce/next-ui'
 import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { ListItem, ListItemText } from '@mui/material'
 import React from 'react'
@@ -30,7 +30,7 @@ export function ProductListSort(props: ProductListSortProps) {
   const [currentSort = defaultSort] = Object.keys(params.sort)
   const currentOption = sort_fields?.options?.find((option) => option?.value === currentSort)
   const selected = currentSort !== defaultSort
-  const label = <Trans id='Sort By' />
+  const label = <Trans>Sort By</Trans>
 
   const removeFilter = () => {
     const linkParams = cloneDeep(params)

package/components/ProductListSuggestions/ProductListSuggestions.tsx

@@ -1,5 +1,5 @@
 import { filterNonNullableKeys, ListFormat } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Link } from '@mui/material'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { useProductFiltersPro } from '../ProductFiltersPro'

package/components/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -1,6 +1,6 @@
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { BreadcrumbsProps } from '@mui/material'
 import { Breadcrumbs, Link, Typography } from '@mui/material'
 import { productPageCategory } from '../ProductPageCategory/productPageCategory'
@@ -23,7 +23,7 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbProps) {
   return (
     <Breadcrumbs {...breadcrumbProps}>
       <Link href='/' underline='hover' color='inherit'>
-        <Trans id='Home' />
+        <Trans>Home</Trans>
       </Link>
       {filterNonNullableKeys(category?.breadcrumbs, ['category_level'])
         .sort((a, b) => a.category_level - b.category_level)

package/components/ProductPageGallery/ProductPageGallery.tsx

@@ -1,4 +1,4 @@
-import type { MotionImageAspectProps } from '@graphcommerce/framer-scroller/components/MotionImageAspect'
+import type { MotionImageAspectProps } from '@graphcommerce/framer-scroller'
 import type { SidebarGalleryProps, TypeRenderer } from '@graphcommerce/next-ui'
 import { filterNonNullableKeys, nonNullable, SidebarGallery } from '@graphcommerce/next-ui'
 import type { ProductPageGalleryFragment } from './ProductPageGallery.gql'

package/components/ProductPagePrice/ProductPagePriceLowest.tsx

@@ -1,5 +1,5 @@
 import { filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, type SxProps, type Theme } from '@mui/material'
 import { type AddToCartItemSelector } from '../AddProductsToCart'
 import { ProductListPrice } from '../ProductListPrice'

package/components/ProductPagePrice/ProductPagePriceTiers.tsx

@@ -1,6 +1,6 @@
 import { PrivateQueryMask } from '@graphcommerce/graphql'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
 import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
@@ -25,13 +25,11 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
     <PrivateQueryMask sx={sx} variant='rectangular'>
       {priceTiers.map(({ quantity, final_price, discount }) => (
         <div key={quantity}>
-          <Trans
-            id='Buy {quantity} for <0/> and save {percent}%'
-            components={{
-              0: <ProductListPrice final_price={final_price} regular_price={final_price} />,
-            }}
-            values={{ quantity, percent: discount.percent_off }}
-          />
+          <Trans>
+            Buy {quantity} for{' '}
+            <ProductListPrice final_price={final_price} regular_price={final_price} /> and save{' '}
+            {discount.percent_off}%
+          </Trans>
         </div>
       ))}
     </PrivateQueryMask>

package/components/ProductSidebarDelivery/ProductSidebarDelivery.tsx

@@ -1,5 +1,5 @@
 import { breakpointVal, iconOrderBefore, IconSvg } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Box, darken, lighten } from '@mui/material'
 import type { UseAddProductsToCartActionFragment } from '../AddProductsToCart/UseAddProductsToCartAction.gql'
 
@@ -11,23 +11,20 @@ export function ProductSidebarDelivery(props: ProductSidebarDeliveryProps) {
   const { product } = props
   const { stock_status, only_x_left_in_stock } = product ?? {}
 
-  let title = <Trans id='Order before 22:00' />
-  let subtitle = <Trans id='Next day delivery - Shipping free' />
+  let title = <Trans>Order before 22:00</Trans>
+  let subtitle = <Trans>Next day delivery - Shipping free</Trans>
 
   if (stock_status === 'OUT_OF_STOCK') {
-    title = <Trans id='Out of stock' />
-    subtitle = <Trans id='We are sorry, this product is currently out of stock.' />
+    title = <Trans>Out of stock</Trans>
+    subtitle = <Trans>We are sorry, this product is currently out of stock.</Trans>
   } else if (stock_status === 'IN_STOCK' && only_x_left_in_stock) {
-    title = <Trans id='Only a few left' />
+    title = <Trans>Only a few left</Trans>
     subtitle = (
-      <Trans
-        id='Only {amount_left_in_stock} left in stock.'
-        values={{ amount_left_in_stock: only_x_left_in_stock }}
-      />
+      <Trans>Only {only_x_left_in_stock} left in stock.</Trans>
     )
   }
   if (only_x_left_in_stock === 1) {
-    subtitle = <Trans id='Only 1 left in stock.' />
+    subtitle = <Trans>Only 1 left in stock.</Trans>
   }
 
   return (

package/components/ProductStaticPaths/getProductStaticPaths.ts

@@ -1,4 +1,5 @@
 import type { ApolloClient, ApolloQueryResult, NormalizedCacheObject } from '@graphcommerce/graphql'
+import { limitSsg } from '@graphcommerce/next-config/config'
 import type { GetStaticPathsResult } from 'next'
 import type { ProductStaticPathsQuery } from './ProductStaticPaths.gql'
 import { ProductStaticPathsDocument } from './ProductStaticPaths.gql'
@@ -12,7 +13,7 @@ export type ProductTypenames = NonNullable<
 export async function getProductStaticPaths(
   client: ApolloClient<NormalizedCacheObject>,
   locale: string,
-  options: { limit?: boolean } = { limit: import.meta.graphCommerce.limitSsg || false },
+  options: { limit?: boolean } = { limit: limitSsg || false },
 ) {
   const query = client.query({
     query: ProductStaticPathsDocument,

package/hooks/useProductLink.ts

@@ -1,15 +1,16 @@
+import { productRoute } from '@graphcommerce/next-config/config'
 import type { ProductLinkFragment } from './ProductLink.gql'
 
 export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
-const productRoute = import.meta.graphCommerce.productRoute ?? '/p/'
+const productRouteVal = productRoute ?? '/p/'
 
 export function productPath(urlKey: string) {
-  return `${productRoute}${urlKey}`
+  return `${productRouteVal}${urlKey}`
 }
 
 export function productLink(link: ProductLinkProps) {
-  return `${productRoute}${link.url_key}`
+  return `${productRouteVal}${link.url_key}`
 }
 
 export function useProductLink(props: ProductLinkProps) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,31 +12,38 @@
     }
   },
   "dependencies": {
-    "schema-dts": "^1.1.2"
+    "schema-dts": "^1.1.5"
   },
   "devDependencies": {
-    "typescript": "5.7.2"
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.55",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.55",
-    "@graphcommerce/framer-scroller": "^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-store": "^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.56",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.56",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.56",
+    "@graphcommerce/graphql": "^10.0.0-canary.56",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.56",
+    "@graphcommerce/image": "^10.0.0-canary.56",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.56",
+    "@graphcommerce/magento-store": "^10.0.0-canary.56",
+    "@graphcommerce/next-ui": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
+    "@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",
+    "./components": "./components/index.ts",
+    "./components/AddProductsToCart/AddProductsToCartSnackbarMessage": "./components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx",
+    "./components/ProductFiltersPro": "./components/ProductFiltersPro/index.ts",
+    "./hooks/useProductLink": "./hooks/useProductLink.ts"
   }
 }