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

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # Change Log
 
+## 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/CreateProductReviewForm/CreateProductReviewForm.tsx

@@ -12,7 +12,7 @@ import {
   StarRatingField,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Alert, Box, Button, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -79,11 +79,11 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
     return (
       <>
         <Alert severity='success' variant='standard'>
-          <Trans id='Thank you! Your review was successfully submitted for approval' />
+          <Trans>Thank you! Your review was successfully submitted for approval</Trans>
         </Alert>
         <Box mt={6}>
           <OverlayCloseButton variant='pill' color='secondary' size='large'>
-            <Trans id='Continue shopping'>Continue shopping</Trans>
+            <Trans>Continue shopping</Trans>
           </OverlayCloseButton>
         </Box>
       </>
@@ -97,7 +97,7 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.nickname || !!error}
-          label={<Trans id='Name' />}
+          label={<Trans>Name</Trans>}
           required={required.nickname}
           name='nickname'
           rules={{ required: required.nickname }}
@@ -178,7 +178,7 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.summary || !!error}
-          label={<Trans id='Summary' />}
+          label={<Trans>Summary</Trans>}
           required={required.summary}
           name='summary'
           rules={{ required: required.summary }}
@@ -194,7 +194,7 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
           variant='outlined'
           type='text'
           error={!!formState.errors.text || !!error}
-          label={<Trans id='Review' />}
+          label={<Trans>Review</Trans>}
           required={required.text}
           name='text'
           rules={{ required: required.text }}
@@ -215,7 +215,7 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
           size='medium'
           className={classes.submitButton}
         >
-          <Trans id='Submit review' />
+          <Trans>Submit review</Trans>
         </Button>
       </FormActions>
 

package/components/ProductReviewChip/ProductReviewChip.tsx

@@ -1,5 +1,5 @@
 import { iconStar, IconSvg } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { ChipProps } from '@mui/material'
 import { Chip } from '@mui/material'
 import React from 'react'
@@ -38,7 +38,7 @@ export function ProductReviewChip(props: ProductReviewChipProps) {
       icon={<IconSvg src={iconStar} sx={{ stroke: '#FFDA1C', fill: '#FFDA1C' }} />}
       color='default'
       size='medium'
-      aria-label={i18n._(/* i18n */ 'Review score')}
+      aria-label={t`Review score`}
       label={`${normalizedRating}/5`}
       {...chipProps}
     />

package/components/ProductReviews/ProductReviews.tsx

@@ -6,7 +6,7 @@ import {
   responsiveVal,
   StarRatingField,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Button, Link, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -79,7 +79,7 @@ export function ProductReviews(props: ProductReviewsProps) {
           },
         })}
       >
-        <Trans id='Write a review' />
+        <Trans>Write a review</Trans>
       </Button>
 
       {!!total_pages && total_pages > 1 && (
@@ -130,7 +130,7 @@ export function ProductReviews(props: ProductReviewsProps) {
             })}
           >
             <Typography variant='subtitle1'>
-              <Trans id='Be the first to write a review!' />
+              <Trans>Be the first to write a review!</Trans>
             </Typography>
           </Box>
         </Box>
@@ -224,7 +224,7 @@ export function ProductReviews(props: ProductReviewsProps) {
               })}
             >
               <Box className={classes.nickname} sx={{ typography: 'body2' }}>
-                <Trans id='Written by {nickname}' values={{ nickname: review?.nickname }} />
+                <Trans>Written by {review?.nickname}</Trans>
               </Box>
               <Box
                 component='time'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-review",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.57",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,30 +12,33 @@
     }
   },
   "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/graphql": "^9.1.0-canary.55",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.55",
-    "@graphcommerce/image": "^9.1.0-canary.55",
-    "@graphcommerce/magento-customer": "^9.1.0-canary.55",
-    "@graphcommerce/magento-product": "^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/react-hook-form": "^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-customer": "^10.0.0-canary.57",
+    "@graphcommerce/magento-product": "^10.0.0-canary.57",
+    "@graphcommerce/magento-store": "^10.0.0-canary.57",
+    "@graphcommerce/next-ui": "^10.0.0-canary.57",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.57",
+    "@graphcommerce/react-hook-form": "^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",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "exports": {
+    ".": "./index.ts"
   }
 }