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

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 +82 -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,87 @@
1
1
  # @graphcommerce/magento-compare
2
2
 
3
+ ## 10.0.0-canary.57
4
+
5
+ ## 10.0.0-canary.56
6
+
7
+ ### Major Changes
8
+
9
+ - [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
10
+
11
+ This major release brings full Turbopack compatibility, dramatically improving development speed.
12
+
13
+ ### 🚀 Turbopack-Compatible Interceptor System
14
+
15
+ The entire plugin/interceptor system has been rewritten to work with Turbopack:
16
+
17
+ - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
18
+ - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
19
+ - **Direct imports** - Interceptors import from `.original` files instead of embedding source
20
+ - **New CLI commands**:
21
+ - `graphcommerce codegen-interceptors` - Generate interceptor files
22
+ - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
23
+ - **Stable file hashing** - Deterministic interceptor generation for better caching
24
+
25
+ ### ⚙️ Treeshakable Configuration System
26
+
27
+ Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
28
+
29
+ - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
30
+ - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
31
+ - **Fully treeshakable** - Unused config values are eliminated from the bundle
32
+ - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
33
+ - **Separate files for nested objects** - Optimal treeshaking for complex configurations
34
+
35
+ ### 🔧 withGraphCommerce Changes
36
+
37
+ - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
38
+ - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
39
+ - **Removed** `@mui/*` alias rewrites - No longer required
40
+ - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
41
+ - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
42
+ - **Added** `optimizePackageImports` for better bundle optimization
43
+ - **Added** `images.qualities: [52, 75]` for Next.js image optimization
44
+
45
+ ### 📦 Lingui Configuration
46
+
47
+ - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
48
+ - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
49
+ - **Simplified** formatter options
50
+
51
+ ### ⚛️ React 19 & Next.js 16 Compatibility
52
+
53
+ - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
54
+ - Replaced deprecated `React.VFC` with `React.FC`
55
+ - Fixed `useRef` calls to require explicit initial values
56
+ - Updated `MutableRefObject` usage in `framer-scroller`
57
+
58
+ ### 📋 ESLint 9 Flat Config
59
+
60
+ - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
61
+ - Updated `@typescript-eslint/*` packages to v8
62
+ - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
63
+
64
+ ### 🔄 Apollo Client
65
+
66
+ - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
67
+ - Updated error handling types to accept `ApolloError | null | undefined`
68
+
69
+ ### ⚠️ Breaking Changes
70
+
71
+ - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
72
+ - **Interceptor files changed** - Original components now at `.original.tsx`
73
+ - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
74
+ - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
75
+ - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
76
+
77
+ ### 🗑️ Removed
78
+
79
+ - `InterceptorPlugin` webpack plugin
80
+ - `configToImportMeta` utility
81
+ - Webpack `DefinePlugin` usage for config
82
+ - `@mui/*` modern alias rewrites
83
+ - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
84
+
3
85
  ## 9.1.0-canary.55
4
86
 
5
87
  ## 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.57",
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.57",
23
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.57",
24
+ "@graphcommerce/framer-next-pages": "^10.0.0-canary.57",
25
+ "@graphcommerce/framer-utils": "^10.0.0-canary.57",
26
+ "@graphcommerce/graphql": "^10.0.0-canary.57",
27
+ "@graphcommerce/magento-cart": "^10.0.0-canary.57",
28
+ "@graphcommerce/magento-product": "^10.0.0-canary.57",
29
+ "@graphcommerce/next-ui": "^10.0.0-canary.57",
30
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.57",
31
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.57",
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}