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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +80 -0
  2. package/components/CompareFab.tsx +4 -4
  3. package/components/CompareListRowMoreInformation.tsx +3 -3
  4. package/components/CompareMessageSnackbar.tsx +6 -8
  5. package/components/CompareProductButton.tsx +2 -2
  6. package/components/CompareProductToggle.tsx +6 -7
  7. package/components/EmptyCompareList.tsx +6 -4
  8. package/components/EmptyCompareListButton.tsx +2 -2
  9. package/hooks/useCompareListUidCreate.ts +2 -3
  10. package/package.json +23 -16
  11. package/plugins/AddCompareToProductPage.tsx +3 -5
  12. package/plugins/CompareAbleProductListItem.tsx +3 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,85 @@
1
1
  # @graphcommerce/magento-compare
2
2
 
3
+ ## 10.0.0-canary.56
4
+
5
+ ### Major Changes
6
+
7
+ - [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
8
+
9
+ This major release brings full Turbopack compatibility, dramatically improving development speed.
10
+
11
+ ### 🚀 Turbopack-Compatible Interceptor System
12
+
13
+ The entire plugin/interceptor system has been rewritten to work with Turbopack:
14
+
15
+ - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
16
+ - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
17
+ - **Direct imports** - Interceptors import from `.original` files instead of embedding source
18
+ - **New CLI commands**:
19
+ - `graphcommerce codegen-interceptors` - Generate interceptor files
20
+ - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
21
+ - **Stable file hashing** - Deterministic interceptor generation for better caching
22
+
23
+ ### ⚙️ Treeshakable Configuration System
24
+
25
+ Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
26
+
27
+ - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
28
+ - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
29
+ - **Fully treeshakable** - Unused config values are eliminated from the bundle
30
+ - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
31
+ - **Separate files for nested objects** - Optimal treeshaking for complex configurations
32
+
33
+ ### 🔧 withGraphCommerce Changes
34
+
35
+ - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
36
+ - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
37
+ - **Removed** `@mui/*` alias rewrites - No longer required
38
+ - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
39
+ - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
40
+ - **Added** `optimizePackageImports` for better bundle optimization
41
+ - **Added** `images.qualities: [52, 75]` for Next.js image optimization
42
+
43
+ ### 📦 Lingui Configuration
44
+
45
+ - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
46
+ - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
47
+ - **Simplified** formatter options
48
+
49
+ ### ⚛️ React 19 & Next.js 16 Compatibility
50
+
51
+ - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
52
+ - Replaced deprecated `React.VFC` with `React.FC`
53
+ - Fixed `useRef` calls to require explicit initial values
54
+ - Updated `MutableRefObject` usage in `framer-scroller`
55
+
56
+ ### 📋 ESLint 9 Flat Config
57
+
58
+ - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
59
+ - Updated `@typescript-eslint/*` packages to v8
60
+ - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
61
+
62
+ ### 🔄 Apollo Client
63
+
64
+ - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
65
+ - Updated error handling types to accept `ApolloError | null | undefined`
66
+
67
+ ### ⚠️ Breaking Changes
68
+
69
+ - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
70
+ - **Interceptor files changed** - Original components now at `.original.tsx`
71
+ - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
72
+ - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
73
+ - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
74
+
75
+ ### 🗑️ Removed
76
+
77
+ - `InterceptorPlugin` webpack plugin
78
+ - `configToImportMeta` utility
79
+ - Webpack `DefinePlugin` usage for config
80
+ - `@mui/*` modern alias rewrites
81
+ - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
82
+
3
83
  ## 9.1.0-canary.55
4
84
 
5
85
  ## 9.1.0-canary.54
package/components/CompareFab.tsx CHANGED
@@ -5,8 +5,8 @@ import {
5
5
  useFabSize,
6
6
  useScrollY,
7
7
  } from '@graphcommerce/next-ui'
8
- import { i18n } from '@lingui/core'
9
- import { Trans } from '@lingui/react'
8
+ import { t } from '@lingui/core/macro'
9
+ import { Trans } from '@lingui/react/macro'
10
10
  import { Badge, Box, Button, styled } from '@mui/material'
11
11
  import type { ButtonProps, SxProps, Theme } from '@mui/material'
12
12
  import { m, useTransform } from 'framer-motion'
@@ -56,7 +56,7 @@ function CompareFabContent(props: CompareFabContentProps) {
56
56
  <MotionFab
57
57
  href='/compare'
58
58
  className={classes.compare}
59
- aria-label={i18n._(/* i18n */ 'Compare')}
59
+ aria-label={t`Compare`}
60
60
  color='inherit'
61
61
  sx={(theme) => ({
62
62
  width: 'unset',
@@ -65,7 +65,7 @@ function CompareFabContent(props: CompareFabContentProps) {
65
65
  })}
66
66
  {...rest}
67
67
  >
68
- {compareIcon} <Trans id='Compare' />
68
+ {compareIcon} <Trans>Compare</Trans>
69
69
  </MotionFab>
70
70
  </Badge>
71
71
 
package/components/CompareListRowMoreInformation.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { productLink } from '@graphcommerce/magento-product'
2
2
  import { Button, iconChevronRight, IconSvg, SectionContainer } from '@graphcommerce/next-ui'
3
- import { Trans } from '@lingui/react'
3
+ import { Trans } from '@lingui/react/macro'
4
4
  import { Box } from '@mui/material'
5
5
  import { useCompareListStyles } from '../hooks/useCompareListStyles'
6
6
  import type { CompareRowProps } from './CompareListRow'
@@ -16,7 +16,7 @@ export function CompareListRowMoreInformation(props: CompareListRowMoreInformati
16
16
  return (
17
17
  <Box>
18
18
  <SectionContainer
19
- labelLeft={<Trans id='More information' />}
19
+ labelLeft={<Trans>More information</Trans>}
20
20
  sx={(theme) => ({
21
21
  '& .SectionHeader-root': {
22
22
  justifyContent: 'center',
@@ -46,7 +46,7 @@ export function CompareListRowMoreInformation(props: CompareListRowMoreInformati
46
46
  endIcon={<IconSvg key='icon' src={iconChevronRight} size='inherit' />}
47
47
  sx={{ justifyContent: 'flex-start' }}
48
48
  >
49
- <Trans id='View Product' />
49
+ <Trans>View Product</Trans>
50
50
  </Button>
51
51
  </Box>
52
52
  )
package/components/CompareMessageSnackbar.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Button, iconChevronRight, IconSvg, MessageSnackbar } from '@graphcommerce/next-ui'
2
- import { Trans } from '@lingui/react'
2
+ import { Trans } from '@lingui/react/macro'
3
3
  import type { SetStateAction } from 'react'
4
4
 
5
5
  export type CompareMessageSnackbarProps = {
@@ -37,21 +37,19 @@ export function CompareMessageSnackbar(props: CompareMessageSnackbarProps) {
37
37
  fullWidth
38
38
  endIcon={<IconSvg src={iconChevronRight} />}
39
39
  >
40
- <Trans id='View comparison' />
40
+ <Trans>View comparison</Trans>
41
41
  </Button>
42
42
  ) : null
43
43
  }
44
44
  >
45
45
  <>
46
- <Trans
47
- id='<0>{name}</0> has been added to your comparison!'
48
- components={{ 0: <strong /> }}
49
- values={{ name }}
50
- />
46
+ <Trans>
47
+ <strong>{name}</strong> has been added to your comparison!
48
+ </Trans>
51
49
  {count === 1 ? (
52
50
  <>
53
51
  {' '}
54
- <Trans id='Add another product to start comparing.' />
52
+ <Trans>Add another product to start comparing.</Trans>
55
53
  </>
56
54
  ) : null}
57
55
  </>
package/components/CompareProductButton.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useMutation } from '@graphcommerce/graphql'
2
- import { Trans } from '@lingui/react'
2
+ import { Trans } from '@lingui/react/macro'
3
3
  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
4
4
  import type { SxProps, Theme } from '@mui/material'
5
5
  import { Badge, Box, Button, Checkbox } from '@mui/material'
@@ -42,7 +42,7 @@ export function CompareProductButton(props: CompareProductButtonProps) {
42
42
  onMouseDown={(e) => e.stopPropagation()}
43
43
  startIcon={<Checkbox checked={inCompareList} />}
44
44
  >
45
- {inCompareList ? <Trans id='In comparelist' /> : <Trans id='Compare' />}
45
+ {inCompareList ? <Trans>In comparelist</Trans> : <Trans>Compare</Trans>}
46
46
  </Button>
47
47
  </Badge>
48
48
 
package/components/CompareProductToggle.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import { useMutation } from '@graphcommerce/graphql'
2
+ import { compareVariant } from '@graphcommerce/next-config/config'
2
3
  import type { FabProps } from '@graphcommerce/next-ui'
3
4
  import { Button, Fab, iconCompare } from '@graphcommerce/next-ui'
4
- import { i18n } from '@lingui/core'
5
- import { Trans } from '@lingui/react'
5
+ import { t } from '@lingui/core/macro'
6
+ import { Trans } from '@lingui/react/macro'
6
7
  import type { SxProps, Theme } from '@mui/material'
7
8
  import { alpha, Checkbox, useTheme } from '@mui/material'
8
9
  import { useState } from 'react'
@@ -30,9 +31,7 @@ function CompareProductToggleBase(
30
31
  const loading = addResult.loading || removeResult.loading
31
32
 
32
33
  const [displayMessageBar, setDisplayMessageBar] = useState(false)
33
- const label = inCompareList
34
- ? i18n._(/* i18n */ 'Remove from comparison')
35
- : i18n._(/* i18n */ 'Add to comparison')
34
+ const label = inCompareList ? t`Remove from comparison` : t`Add to comparison`
36
35
 
37
36
  const handleClick: React.MouseEventHandler<HTMLButtonElement> = async (e) => {
38
37
  e.preventDefault()
@@ -78,7 +77,7 @@ function CompareProductToggleBase(
78
77
 
79
78
  return (
80
79
  <>
81
- {import.meta.graphCommerce.compareVariant === 'CHECKBOX' ? (
80
+ {compareVariant === 'CHECKBOX' ? (
82
81
  <Button
83
82
  variant='text'
84
83
  size='small'
@@ -96,7 +95,7 @@ function CompareProductToggleBase(
96
95
  loading={loading}
97
96
  >
98
97
  <Checkbox checked={inCompareList} />
99
- <Trans id='Compare' />
98
+ <Trans>Compare</Trans>
100
99
  </Button>
101
100
  ) : (
102
101
  <Fab
package/components/EmptyCompareList.tsx CHANGED
@@ -1,18 +1,20 @@
1
1
  import { FullPageMessage, iconCompare, IconSvg, OverlayCloseButton } from '@graphcommerce/next-ui'
2
- import { Trans } from '@lingui/react'
2
+ import { Trans } from '@lingui/react/macro'
3
3
 
4
4
  export function EmptyCompareList() {
5
5
  return (
6
6
  <FullPageMessage
7
- title={<Trans id='Your comparelist is empty' />}
7
+ title={<Trans>Your comparelist is empty</Trans>}
8
8
  icon={<IconSvg src={iconCompare} size='xxl' />}
9
9
  button={
10
10
  <OverlayCloseButton variant='pill' color='secondary' size='large'>
11
- <Trans id='Continue shopping'>Continue shopping</Trans>
11
+ <Trans>Continue shopping</Trans>
12
12
  </OverlayCloseButton>
13
13
  }
14
14
  >
15
- <Trans id='Discover our collection and add items to your comparelist!' />
15
+ <Trans>
16
+ Discover our collection and add items to your comparelist!
17
+ </Trans>
16
18
  </FullPageMessage>
17
19
  )
18
20
  }
package/components/EmptyCompareListButton.tsx CHANGED
@@ -2,7 +2,7 @@ import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
2
2
  import { useMutation } from '@graphcommerce/graphql'
3
3
  import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
4
4
  import { LinkOrButton } from '@graphcommerce/next-ui'
5
- import { Trans } from '@lingui/react'
5
+ import { Trans } from '@lingui/react/macro'
6
6
  import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
7
7
  import { useCompareList } from '../hooks'
8
8
  import { useClearCurrentCompareListUid } from '../hooks/useClearCurrentCompareListUid'
@@ -53,7 +53,7 @@ export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
53
53
  deleteCompareList()
54
54
  }}
55
55
  >
56
- <Trans id='Empty comparelist' />
56
+ <Trans>Empty comparelist</Trans>
57
57
  </LinkOrButton>
58
58
  )
59
59
  }
package/hooks/useCompareListUidCreate.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useApolloClient } from '@graphcommerce/graphql'
2
- import { i18n } from '@lingui/core'
2
+ import { t } from '@lingui/core/macro'
3
3
  import { CreateCompareListDocument, CurrentCompareUidDocument } from '../graphql'
4
4
  import { useAssignCurrentCompareListUid } from './useAssignCurrentCompareListUid'
5
5
 
@@ -16,8 +16,7 @@ export function useCompareListUidCreate() {
16
16
  mutation: CreateCompareListDocument,
17
17
  variables: { products: [] },
18
18
  })
19
- if (!data?.createCompareList)
20
- throw Error(i18n._(/* i18n */ 'Could not create a new compare list'))
19
+ if (!data?.createCompareList) throw Error(t`Could not create a new compare list`)
21
20
 
22
21
  // We store the uid that is returned as the currentCompareList result
23
22
  assign(data.createCompareList.uid)
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-compare",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "9.1.0-canary.55",
5
+ "version": "10.0.0-canary.56",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -11,25 +11,32 @@
11
11
  "project": "./tsconfig.json"
12
12
  }
13
13
  },
14
+ "exports": {
15
+ ".": "./index.ts",
16
+ "./plugins/CompareAbleProductListItem": "./plugins/CompareAbleProductListItem.tsx",
17
+ "./plugins/AddCompareToProductPage": "./plugins/AddCompareToProductPage.tsx",
18
+ "./plugins/AddCompareFabNextToCart": "./plugins/AddCompareFabNextToCart.tsx",
19
+ "./plugins/AddCompareTypePolicies": "./plugins/AddCompareTypePolicies.tsx"
20
+ },
14
21
  "peerDependencies": {
15
- "@graphcommerce/ecommerce-ui": "^9.1.0-canary.55",
16
- "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
17
- "@graphcommerce/framer-next-pages": "^9.1.0-canary.55",
18
- "@graphcommerce/framer-utils": "^9.1.0-canary.55",
19
- "@graphcommerce/graphql": "^9.1.0-canary.55",
20
- "@graphcommerce/magento-cart": "^9.1.0-canary.55",
21
- "@graphcommerce/magento-product": "^9.1.0-canary.55",
22
- "@graphcommerce/next-ui": "^9.1.0-canary.55",
23
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
24
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
25
- "@lingui/core": "^4.2.1",
26
- "@lingui/macro": "^4.2.1",
27
- "@lingui/react": "^4.2.1",
22
+ "@graphcommerce/ecommerce-ui": "^10.0.0-canary.56",
23
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
24
+ "@graphcommerce/framer-next-pages": "^10.0.0-canary.56",
25
+ "@graphcommerce/framer-utils": "^10.0.0-canary.56",
26
+ "@graphcommerce/graphql": "^10.0.0-canary.56",
27
+ "@graphcommerce/magento-cart": "^10.0.0-canary.56",
28
+ "@graphcommerce/magento-product": "^10.0.0-canary.56",
29
+ "@graphcommerce/next-ui": "^10.0.0-canary.56",
30
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
31
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
32
+ "@lingui/core": "^5",
33
+ "@lingui/macro": "^5",
34
+ "@lingui/react": "^5",
28
35
  "@mui/material": "^5.10.16",
29
36
  "framer-motion": "^11.0.0",
30
37
  "graphql": "^16.0.0",
31
38
  "next": "*",
32
- "react": "^18.2.0",
33
- "react-dom": "^18.2.0"
39
+ "react": "^19.2.0",
40
+ "react-dom": "^19.2.0"
34
41
  }
35
42
  }
package/plugins/AddCompareToProductPage.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ProductPageAddToCartRowProps } from '@graphcommerce/magento-product'
2
2
  import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
+ import { compareVariant } from '@graphcommerce/next-config/config'
3
4
  import { CompareProductToggle } from '../components'
4
5
 
5
6
  export const config: PluginConfig = {
@@ -11,7 +12,7 @@ export const config: PluginConfig = {
11
12
  export function ProductPageAddToCartActionsRow(props: PluginProps<ProductPageAddToCartRowProps>) {
12
13
  const { Prev, ...rest } = props
13
14
  const { children, after, product } = props
14
- if (import.meta.graphCommerce.compareVariant === 'CHECKBOX')
15
+ if (compareVariant === 'CHECKBOX')
15
16
  return (
16
17
  <Prev
17
18
  {...rest}
@@ -24,10 +25,7 @@ export function ProductPageAddToCartActionsRow(props: PluginProps<ProductPageAdd
24
25
  />
25
26
  )
26
27
 
27
- if (
28
- import.meta.graphCommerce.compareVariant === 'ICON' ||
29
- !import.meta.graphCommerce.compareVariant
30
- )
28
+ if (compareVariant === 'ICON' || !compareVariant)
31
29
  return (
32
30
  <Prev {...rest}>
33
31
  {children}
package/plugins/CompareAbleProductListItem.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { ProductListItemProps } from '@graphcommerce/magento-product'
2
2
  import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
3
+ import { compareVariant } from '@graphcommerce/next-config/config'
3
4
  import { Box } from '@mui/material'
4
5
  import { CompareProductToggle } from '../components'
5
6
  import type { CompareProductIdInternalFragment } from '../graphql'
@@ -13,7 +14,7 @@ export const config: PluginConfig = {
13
14
  export function ProductListItem(props: PluginProps<ProductListItemProps>) {
14
15
  const { Prev, ...rest } = props
15
16
  const { children, topRight } = props
16
- if (import.meta.graphCommerce.compareVariant === 'CHECKBOX')
17
+ if (compareVariant === 'CHECKBOX')
17
18
  return (
18
19
  <Prev topRight={topRight} {...rest}>
19
20
  <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -23,10 +24,7 @@ export function ProductListItem(props: PluginProps<ProductListItemProps>) {
23
24
  </Prev>
24
25
  )
25
26
 
26
- if (
27
- import.meta.graphCommerce.compareVariant === 'ICON' ||
28
- !import.meta.graphCommerce.compareVariant
29
- )
27
+ if (compareVariant === 'ICON' || !compareVariant)
30
28
  return (
31
29
  <Prev
32
30
  {...rest}