@graphcommerce/image 9.1.0-canary.54 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # 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
+
+### Patch Changes
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`76adc6f`](https://github.com/graphcommerce-org/graphcommerce/commit/76adc6f6a5f76eb58998cef36f11a6a899a5e6ac) - Export generateSrcSet from Image component so it can be used for the avatar srcSet directly ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/components/Image.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 
 /* eslint-disable prefer-const */
@@ -142,16 +143,31 @@ function getWidths(
 type GenImgAttrsData = {
   src: string
   layout: LayoutValue
-  loader: ImageLoaderWithConfig
+  loader?: ImageLoaderWithConfig
   width?: number
   quality?: number
   sizes: string
   scale: number
-  config: ImageConfig
+  config?: ImageConfig
 }
 
-function generateSrcSet(props: GenImgAttrsData): string {
-  const { src, layout, width, quality = 52, sizes, loader, scale, config } = props
+export function generateSrcSet(props: GenImgAttrsData): string {
+  const defaultConfig = {
+    ...imageConfigEnv,
+    allSizes: [...imageConfigEnv.deviceSizes, ...imageConfigEnv.imageSizes].sort((a, b) => a - b),
+    deviceSizes: imageConfigEnv.deviceSizes.sort((a, b) => a - b),
+  }
+  const {
+    src,
+    layout,
+    width,
+    quality = 52,
+    sizes,
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    loader = defaultImageLoader,
+    scale,
+    config = defaultConfig,
+  } = props
   const { widths, kind } = getWidths(config, width, layout, sizes)
 
   return `${widths
@@ -212,7 +228,7 @@ function generateSizesString(sizes?: Sizes) {
 
 /** Since we're handling stuff ourselves we omit some stuff */
 type IntrisincImage = Omit<
-  JSX.IntrinsicElements['img'],
+  React.JSX.IntrinsicElements['img'],
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'sizes'
 > & { loading?: LoadingValue }
 
@@ -225,7 +241,7 @@ export type ImageProps = IntrisincImage & {
   dontReportWronglySizedImages?: boolean
   width?: number
   height?: number
-  pictureProps?: JSX.IntrinsicElements['picture'] & { sx?: SxProps<Theme> }
+  pictureProps?: React.JSX.IntrinsicElements['picture'] & { sx?: SxProps<Theme> }
   /**
    * Possible values:
    *
@@ -249,7 +265,7 @@ const Img = styled('img')({})
 const Picture = styled('picture')({})
 
 // eslint-disable-next-line no-underscore-dangle
-const configEnv = process.env.__NEXT_IMAGE_OPTS as unknown as ImageConfigComplete
+export const imageConfigEnv = process.env.__NEXT_IMAGE_OPTS as unknown as ImageConfigComplete
 
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   (
@@ -278,7 +294,7 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
 
     const configContext = useContext(ImageConfigContext)
     const config: ImageConfig = useMemo(() => {
-      const c = configEnv || configContext || imageConfigDefault
+      const c = imageConfigEnv || configContext || imageConfigDefault
       const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
       const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
       return { ...c, allSizes, deviceSizes }

package/package.json

@@ -2,11 +2,14 @@
   "name": "@graphcommerce/image",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
   },
+  "exports": {
+    ".": "./index.ts"
+  },
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
@@ -15,13 +18,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.54",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.54",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.54",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
     "@mui/material": "^5.10.16",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }