@graphcommerce/magento-cart-payment-method 9.1.0-canary.54 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # 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
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`59d91cc`](https://github.com/graphcommerce-org/graphcommerce/commit/59d91cc4b04b6d37e5fb6b09401c079de488bc29) - Solve issue where the Place order button would remain in a loading state because the back/forward cache of chrome started working for the checkout and thus React's state would not be reset, thinking we were still exiting the page. ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/PaymentMethodActionCardList/PaymentMethodActionCardListForm.tsx

@@ -4,8 +4,8 @@ import type { ActionCardProps } from '@graphcommerce/next-ui'
 import { ActionCard, Button, FormDiv } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { useEffect } from 'react'
 import type { PaymentOptionsProps } from '../Api/PaymentMethod'
@@ -41,12 +41,12 @@ function PaymentMethodActionCard(
       ]}
       action={
         <Button disableRipple variant='inline' color='secondary' tabIndex={-1}>
-          <Trans id='Select' />
+          <Trans>Select</Trans>
         </Button>
       }
       reset={
         <Button disableRipple variant='inline' color='secondary' onClick={onReset}>
-          <Trans id='Change' />
+          <Trans>Change</Trans>
         </Button>
       }
       after={
@@ -108,7 +108,7 @@ export function PaymentMethodActionCardListForm(props: PaymentMethodActionCardLi
       <ActionCardListForm<PaymentOptionsProps & ActionCardProps, FormFields>
         control={control}
         name='paymentMethod'
-        errorMessage={i18n._(/* i18n */ 'Please select a payment method')}
+        errorMessage={t`Please select a payment method`}
         collapse
         size='large'
         color='secondary'

package/PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.tsx

@@ -1,5 +1,6 @@
 import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { useFormAutoSubmit, useFormCompose } from '@graphcommerce/react-hook-form'
+import { useEffect } from 'react'
 import type { PaymentOptionsProps } from '../Api/PaymentMethod'
 import { GetPaymentMethodContextDocument } from '../PaymentMethodContext/GetPaymentMethodContext.gql'
 import { PaymentMethodOptionsNoopDocument } from './PaymentMethodOptionsNoop.gql'
@@ -31,6 +32,13 @@ export function PaymentMethodOptionsNoop(props: PaymentOptionsProps) {
   /** To use an external Pay button we register the current form to be handled there as well. */
   useFormCompose({ form, step, submit, key: `PaymentMethodOptions_${code}` })
 
+  useEffect(() => {
+    window.onunload = () => {
+      // Break the backforwardcache
+      console.log('Unload event triggered, to prevent the backforward cache from working.')
+    }
+  }, [])
+
   /**
    * This is the form that the user can fill in. In this case we don't wat the user to fill in
    * anything.

package/PaymentMethodPlaceOrderNoop/assertOrderPlaced.ts

@@ -1,6 +1,6 @@
 import type { FetchResult } from '@graphcommerce/graphql'
 import { ApolloError } from '@graphcommerce/graphql'
-import { t } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
 import type { PaymentMethodPlaceOrderNoopMutation } from './PaymentMethodPlaceOrderNoop.gql'
 
 export type PlacedOrder<T extends FetchResult<PaymentMethodPlaceOrderNoopMutation>> = NonNullable<

package/PaymentMethodToggles/PaymentMethodToggles.tsx

@@ -11,7 +11,7 @@ import {
 } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { Controller, FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, FormControl, FormHelperText } from '@mui/material'
 import { useEffect } from 'react'
@@ -123,7 +123,7 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
               defaultValue=''
               control={control}
               name='paymentMethod'
-              rules={{ required: i18n._(/* i18n */ 'Please select a payment method') }}
+              rules={{ required: t`Please select a payment method` }}
               render={({ field: { onChange, value, name, onBlur } }) => (
                 <Scroller
                   className={classes.scrollerRoot}

package/README.md

@@ -11,8 +11,8 @@ A Magento Payment Method module must implement
 
 ```tsx
 export interface PaymentModule {
-  PaymentOptions: React.VFC<PaymentOptionsProps>
-  PaymentButton?: React.VFC<PaymentButtonProps>
+  PaymentOptions: React.FC<PaymentOptionsProps>
+  PaymentButton?: React.FC<PaymentButtonProps>
   expandMethods?: ExpandPaymentMethods
 }
 ```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-payment-method",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,26 +11,32 @@
       "project": "./tsconfig.json"
     }
   },
+  "exports": {
+    ".": "./index.ts",
+    "./PaymentMethodContext/GetPaymentMethodContext.gql": "./PaymentMethodContext/GetPaymentMethodContext.gql.ts",
+    "./PaymentMethodOptionsNoop/PaymentMethodOptionsNoop": "./PaymentMethodOptionsNoop/PaymentMethodOptionsNoop.tsx",
+    "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop": "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx"
+  },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.54",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.54",
-    "@graphcommerce/graphql": "^9.1.0-canary.54",
-    "@graphcommerce/image": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart": "^9.1.0-canary.54",
-    "@graphcommerce/magento-cart-shipping-address": "^9.1.0-canary.54",
-    "@graphcommerce/magento-store": "^9.1.0-canary.54",
-    "@graphcommerce/next-ui": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
-    "@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-scroller": "^10.0.0-canary.56",
+    "@graphcommerce/graphql": "^10.0.0-canary.56",
+    "@graphcommerce/image": "^10.0.0-canary.56",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.56",
+    "@graphcommerce/magento-cart-shipping-address": "^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/react-hook-form": "^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"
   }
 }