@graphcommerce/magento-review 10.0.0 → 10.0.1-canary.1

package/CHANGELOG.md

@@ -1,128 +1,14 @@
 # Change Log
 
-## 10.0.0
-
-### 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))
-
-- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
-
-  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
-
-## 10.0.0-canary.72
-
-## 10.0.0-canary.71
-
-## 10.0.0-canary.70
-
-## 10.0.0-canary.69
-
-## 10.0.0-canary.68
-
-### Major Changes
-
-- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
-
-  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
-
-## 10.0.0-canary.67
-
-## 10.0.0-canary.66
-
-## 10.0.0-canary.65
-
-## 10.0.0-canary.64
-
-## 10.0.0-canary.63
-
-## 10.0.0-canary.62
+## 10.0.1-canary.1
 
-## 10.0.0-canary.61
+## 10.0.1-canary.0
 
-## 10.0.0-canary.60
-
-## 10.0.0-canary.59
-
-## 10.0.0-canary.58
+### Patch Changes
 
-## 10.0.0-canary.57
+- [#2568](https://github.com/graphcommerce-org/graphcommerce/pull/2568) [`ddeaf5d`](https://github.com/graphcommerce-org/graphcommerce/commit/ddeaf5df2c1f3902a80738a547a703221e02170f) - Solve hydration erorr while loading reviews ([@paales](https://github.com/paales))
 
-## 10.0.0-canary.56
+## 10.0.0
 
 ### Major Changes
 
@@ -202,117 +88,9 @@
   - `@mui/*` modern alias rewrites
   - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
 
-## 9.1.0-canary.55
-
-## 9.1.0-canary.54
-
-## 9.1.0-canary.53
-
-## 9.1.0-canary.52
-
-## 9.1.0-canary.51
-
-## 9.1.0-canary.50
-
-## 9.1.0-canary.49
-
-## 9.1.0-canary.48
-
-## 9.1.0-canary.47
-
-## 9.1.0-canary.46
-
-## 9.1.0-canary.45
-
-## 9.1.0-canary.44
-
-## 9.1.0-canary.43
-
-## 9.1.0-canary.42
-
-## 9.1.0-canary.41
-
-## 9.1.0-canary.40
-
-## 9.1.0-canary.39
-
-## 9.1.0-canary.38
-
-## 9.1.0-canary.37
-
-## 9.1.0-canary.36
-
-## 9.1.0-canary.35
-
-## 9.1.0-canary.34
-
-## 9.1.0-canary.33
-
-## 9.1.0-canary.32
-
-## 9.1.0-canary.31
-
-## 9.1.0-canary.30
-
-## 9.1.0-canary.29
-
-## 9.1.0-canary.28
-
-## 9.1.0-canary.27
-
-## 9.1.0-canary.26
-
-## 9.1.0-canary.25
-
-## 9.1.0-canary.24
-
-## 9.1.0-canary.23
-
-## 9.1.0-canary.22
-
-## 9.1.0-canary.21
-
-## 9.1.0-canary.20
-
-## 9.1.0-canary.19
-
-## 9.1.0-canary.18
-
-## 9.1.0-canary.17
-
-## 9.1.0-canary.16
-
-## 9.1.0-canary.15
-
-## 9.0.4-canary.14
-
-## 9.0.4-canary.13
-
-## 9.0.4-canary.12
-
-## 9.0.4-canary.11
-
-## 9.0.4-canary.10
-
-## 9.0.4-canary.9
-
-## 9.0.4-canary.8
-
-## 9.0.4-canary.7
-
-## 9.0.4-canary.6
-
-## 9.0.4-canary.5
-
-## 9.0.4-canary.4
-
-## 9.0.4-canary.3
-
-## 9.0.4-canary.2
-
-## 9.0.4-canary.1
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
 
-## 9.0.4-canary.0
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
 
 ## 9.0.0
 

package/components/ProductReviews/ProductReviews.tsx

@@ -41,7 +41,7 @@ export function ProductReviews(props: ProductReviewsProps) {
 
   const [reviewPage, setPage] = useState<number>(1)
 
-  const { data: otherReviewsPage, loading } = useQuery(ProductReviewsPageDocument, {
+  const { data: otherReviewsPage } = useQuery(ProductReviewsPageDocument, {
     skip: reviewPage === 1,
     variables: {
       urlKey: url_key ?? '',
@@ -142,96 +142,95 @@ export function ProductReviews(props: ProductReviewsProps) {
       className={classes.container}
       sx={sxx((theme) => ({ marginTop: `calc(${theme.spacings.xxs} * -1)` }), sx)}
     >
-      {!loading &&
-        myReviews.items.map((review) => (
+      {myReviews.items.map((review) => (
+        <Box
+          key={review?.summary}
+          className={classes.review}
+          sx={(theme) => ({
+            display: 'grid',
+            gap: theme.spacings.sm,
+            borderBottom: `1px solid ${theme.vars.palette.divider}`,
+            padding: `${theme.spacings.md} 0`,
+            typography: 'body1',
+          })}
+        >
           <Box
-            key={review?.summary}
-            className={classes.review}
+            className={classes.title}
             sx={(theme) => ({
               display: 'grid',
-              gap: theme.spacings.sm,
-              borderBottom: `1px solid ${theme.vars.palette.divider}`,
-              padding: `${theme.spacings.md} 0`,
-              typography: 'body1',
+              gridAutoFlow: 'column',
+              justifyContent: 'start',
+              gap: theme.spacings.xs,
+              alignItems: 'center',
             })}
           >
+            <ProductReviewChip rating={review?.average_rating} />
+            <Typography component='h3' variant='h5'>
+              {review?.summary}
+            </Typography>
+          </Box>
+          <Typography variant='body1'>{review?.text}</Typography>
+
+          {(review?.ratings_breakdown.length ?? 0) > 1 && (
             <Box
-              className={classes.title}
+              className={classes.ratingRow}
               sx={(theme) => ({
-                display: 'grid',
-                gridAutoFlow: 'column',
-                justifyContent: 'start',
-                gap: theme.spacings.xs,
-                alignItems: 'center',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacings.sm,
+                color: theme.vars.palette.text.disabled,
+                typography: 'body2',
               })}
             >
-              <ProductReviewChip rating={review?.average_rating} />
-              <Typography component='h3' variant='h5'>
-                {review?.summary}
-              </Typography>
+              {review?.ratings_breakdown.map((ratingBreakdown) => (
+                <Box
+                  key={`rating-${ratingBreakdown?.value}`}
+                  className={classes.rating}
+                  sx={(theme) => ({
+                    display: 'grid',
+                    gridAutoFlow: 'column',
+                    gridTemplateColumns: '0.4fr 0.6fr',
+                    justifyContent: 'space-between',
+                    marginRight: theme.spacings.xxs,
+                    rowGap: responsiveVal(8, 16),
+                    gap: 8,
+                    alignItems: 'center',
+                  })}
+                >
+                  <span>{ratingBreakdown?.name}</span>
+                  <StarRatingField
+                    readOnly
+                    size='small'
+                    defaultValue={Number(ratingBreakdown?.value ?? 0)}
+                  />
+                </Box>
+              ))}
             </Box>
-            <Typography variant='body1'>{review?.text}</Typography>
-
-            {(review?.ratings_breakdown.length ?? 0) > 1 && (
-              <Box
-                className={classes.ratingRow}
-                sx={(theme) => ({
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: theme.spacings.sm,
-                  color: theme.vars.palette.text.disabled,
-                  typography: 'body2',
-                })}
-              >
-                {review?.ratings_breakdown.map((ratingBreakdown) => (
-                  <Box
-                    key={`rating-${ratingBreakdown?.value}`}
-                    className={classes.rating}
-                    sx={(theme) => ({
-                      display: 'grid',
-                      gridAutoFlow: 'column',
-                      gridTemplateColumns: '0.4fr 0.6fr',
-                      justifyContent: 'space-between',
-                      marginRight: theme.spacings.xxs,
-                      rowGap: responsiveVal(8, 16),
-                      gap: 8,
-                      alignItems: 'center',
-                    })}
-                  >
-                    <span>{ratingBreakdown?.name}</span>
-                    <StarRatingField
-                      readOnly
-                      size='small'
-                      defaultValue={Number(ratingBreakdown?.value ?? 0)}
-                    />
-                  </Box>
-                ))}
-              </Box>
-            )}
+          )}
 
+          <Box
+            className={classes.meta}
+            sx={(theme) => ({
+              color: theme.vars.palette.text.disabled,
+              display: 'grid',
+              gridAutoFlow: 'column',
+              justifyContent: 'space-between',
+            })}
+          >
+            <Box className={classes.nickname} sx={{ typography: 'body2' }}>
+              <Trans>Written by {review?.nickname}</Trans>
+            </Box>
             <Box
-              className={classes.meta}
-              sx={(theme) => ({
-                color: theme.vars.palette.text.disabled,
-                display: 'grid',
-                gridAutoFlow: 'column',
-                justifyContent: 'space-between',
-              })}
+              component='time'
+              className={classes.date}
+              dateTime={review?.created_at}
+              sx={{ typography: 'body2' }}
             >
-              <Box className={classes.nickname} sx={{ typography: 'body2' }}>
-                <Trans>Written by {review?.nickname}</Trans>
-              </Box>
-              <Box
-                component='time'
-                className={classes.date}
-                dateTime={review?.created_at}
-                sx={{ typography: 'body2' }}
-              >
-                <DateTimeFormat dateStyle='long' timeStyle='short' date={review?.created_at} />
-              </Box>
+              <DateTimeFormat dateStyle='long' timeStyle='short' date={review?.created_at} />
             </Box>
           </Box>
-        ))}
+        </Box>
+      ))}
       {actions}
     </Box>
   )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-review",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0",
+  "version": "10.0.1-canary.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0",
-    "@graphcommerce/graphql": "^10.0.0",
-    "@graphcommerce/graphql-mesh": "^10.0.0",
-    "@graphcommerce/image": "^10.0.0",
-    "@graphcommerce/magento-customer": "^10.0.0",
-    "@graphcommerce/magento-product": "^10.0.0",
-    "@graphcommerce/magento-store": "^10.0.0",
-    "@graphcommerce/next-ui": "^10.0.0",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0",
-    "@graphcommerce/react-hook-form": "^10.0.0",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0",
+    "@graphcommerce/ecommerce-ui": "^10.0.1-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.1-canary.1",
+    "@graphcommerce/graphql": "^10.0.1-canary.1",
+    "@graphcommerce/graphql-mesh": "^10.0.1-canary.1",
+    "@graphcommerce/image": "^10.0.1-canary.1",
+    "@graphcommerce/magento-customer": "^10.0.1-canary.1",
+    "@graphcommerce/magento-product": "^10.0.1-canary.1",
+    "@graphcommerce/magento-store": "^10.0.1-canary.1",
+    "@graphcommerce/next-ui": "^10.0.1-canary.1",
+    "@graphcommerce/prettier-config-pwa": "^10.0.1-canary.1",
+    "@graphcommerce/react-hook-form": "^10.0.1-canary.1",
+    "@graphcommerce/typescript-config-pwa": "^10.0.1-canary.1",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",