@graphcommerce/docs 9.1.0-canary.55 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # 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
 
 ## 9.1.0-canary.54

package/framework/config.md

@@ -22,9 +22,9 @@ Configuration can be accessed in your project with the `import.meta.graphCommerc
 
 ```tsx
 import { storefrontAll, storefrontConfig, storefrontConfigDefault, useStorefrontConfig } from '@graphcommerce/next-ui'
-
+import { cartDisplayPricesInclTax } from '@graphcommerce/next-config/config'
 // Accessing a global value
-const globalConf = import.meta.graphCommerce.cartDisplayPricesInclTax
+const globalConf = cartDisplayPricesInclTax
 
 function MyComponent() {
   // Configuration configured per storefront locale.
@@ -35,7 +35,7 @@ function MyComponent() {
 
   // Or as single line
   const scopedConfigWithFallback2 =
-    useStorefrontConfig().cartDisplayPricesInclTax ?? import.meta.graphCommerce.cartDisplayPricesInclTax
+    useStorefrontConfig().cartDisplayPricesInclTax ?? cartDisplayPricesInclTax
 
   return <div>{googleRecaptchaKey}</div>
 }
@@ -96,7 +96,7 @@ Examples:
 
 #### hygraphEndpoint: string (required)
 
-The HyGraph endpoint.
+The Hygraph endpoint.
 
 > Read-only endpoint that allows low latency and high read-throughput content delivery.
 

package/framework/translations.md

@@ -14,12 +14,15 @@ Example of /locales/es.po
 
 ...
 
+
 msgid "Your cart is empty"
 msgstr "Su carrito está vacío"
 
+
 msgid "Your session is expired"
 msgstr "Su sesión ha caducado"
 
+
 msgid "canceled"
 msgstr "cancelado"
 ```
@@ -31,7 +34,7 @@ component:
 
 ```tsx
 <FullPageMessage
-  title={<Trans id="Your cart is empty" />}
+  title={<Trans>Your cart is empty</Trans>}
   ...
 >
 ```
@@ -61,23 +64,21 @@ in the `<Trans>` component:
 
 ```tsx
 <Typography variant='h3'>
-  <Trans id='Call us now' />
+  <Trans>Call us now</Trans>
 </Typography>
 ```
 
 To translate a string:
 
 ```tsx
-<PageMeta title={i18n._(/* i18n */ `Blog`)} />
+<PageMeta title={t`Blog`} />
 ```
 
-_The `/* i18n */` comment is required for `lingui extract` to work properly_
-
 Add Linqui to the component's imports:
 
 ```tsx
-import { Trans } from '@lingui/react'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 ```
 
 ## Generating translation files with all translations
@@ -104,6 +105,7 @@ Edit the translations files to add your translation:
 
 ...
 
+
 msgid "Call us now"
 msgstr ""
 ```
@@ -126,9 +128,11 @@ The syntax in the translation files:
 
 ...
 
+
 msgid "Cart"
 msgstr "Cart"
 
+
 msgid "Cart ({0})"
 msgstr "Cart ({0})"
 ```
@@ -187,6 +191,7 @@ const config = {
 ```tsx
 //Example from /locales/sv.po
 
+
 msgid ""
 msgstr ""
 "POT-Creation-Date: 2022-03-30 14:45+0200\n"
@@ -196,12 +201,15 @@ msgstr ""
 "X-Generator: @lingui/cli\n"
 "Language: sv\n"
 
+
 msgid "<0>{name}</0> has been added to your shopping cart!"
 msgstr ""
 
+
 msgid "Above <0/>"
 msgstr ""
 
+
 msgid "Account"
 msgstr ""
 

package/getting-started/pages.md

@@ -318,7 +318,7 @@ export const getStaticPaths: GetPageStaticPaths = async ({ locales = [] }) => {
     const { data } = await client.query({
       query: PagesStaticPathsDocument,
       variables: {
-        first: import.meta.graphCommerce.limitSsg ? 1 : 1000,
+        first: limitSsg ? 1 : 1000,
         urlStartsWith: 'about',
       },
     })

package/magento/multi-theme-multi-website.md

@@ -82,11 +82,13 @@ During deploy you'd have to set the theme that is being build:
 Create a separate theme for each brand:
 
 ```tsx
+import { themeName } from '@graphcommerce/next-config/config'
+
 let theme: Theme
-if (import.meta.graphCommerce.theme === 'BRAND_1') {
+if (themeName === 'BRAND_1') {
   const brand1Palette = ...
   theme = createThemeWithPalette(brand1Palette)
-} else if (import.meta.graphCommerce.theme === 'BRAND_2') {
+} else if (themeName === 'BRAND_2') {
   const brand2Palette = ...
   theme = createThemeWithPalette(brand2Palette)
 }

package/package.json

@@ -2,10 +2,10 @@
   "name": "@graphcommerce/docs",
   "homepage": "https://www.graphcommerce.org/docs",
   "repository": "github:graphcommerce-org/graphcommerce/docs",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.56",
   "sideEffects": true,
   "peerDependencies": {
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55"
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56"
   },
   "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/upgrading/graphcommerce-9-to-10.md

@@ -3,6 +3,50 @@
 Depending on the amounts of customisations you've made, there are some manual
 steps.
 
-1. Nothing yet
+## Trans and t import replacements
 
-## 1. Nothing yet
+```tsx
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+```
+
+Becomes
+
+```tsx
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+```
+
+And
+
+```tsx
+import { t, Trans } from '@lingui/macro'
+```
+
+Becomes
+
+```tsx
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
+```
+
+## Translations
+
+After changing all the imports in the step above. Please remove all occurences
+of `#. js-lingui-generated-id` in the .po files.
+
+Run `yarn lingui` again to extract all the new translations.
+
+## import.meta.graphCommerce replaced by '@graphcommerce/next-config/config'
+
+```tsx
+const jaja = import.meta.graphCommerce.cartDisplayPricesInclTax
+```
+
+becomes
+
+```tsx
+import { cartDisplayPricesInclTax } from '@graphcommerce/next-config/config'
+
+const jaja = cartDisplayPricesInclTax
+```