@graphcommerce/framer-scroller 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/components/ScrollerDot.tsx

@@ -1,7 +1,7 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { FabProps } from '@mui/material'
 import { Fab, styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -39,7 +39,7 @@ export function ScrollerDot(props: ScrollerDotProps) {
         scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
       }}
       className={classes.dot}
-      aria-label={i18n._(/* i18n */ 'Navigate to item {0}', { 0: idx + 1 })}
+      aria-label={t`Navigate to item ${idx + 1}`}
       sx={{
         boxShadow: 'none',
         background: 'transparent',

package/components/ScrollerProvider.tsx

@@ -67,8 +67,8 @@ function useObserveItems(scrollerRef: ReactHtmlRefObject, items: MotionValue<Ite
 }
 
 export function ScrollerProvider(props: ScrollerProviderProps) {
-  const scrollerRef = useRef<HTMLDivElement>()
-  const running = useRef<PlaybackControls>()
+  const scrollerRef = useRef<HTMLDivElement | null>(null)
+  const running = useRef<PlaybackControls | null>(null)
   const scroll = useElementScroll(scrollerRef)
 
   const {
@@ -94,7 +94,7 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
   // Cancel any running animations to prevent onComplete to be ran
   const stop = useCallback(() => {
     running.current?.stop()
-    running.current = undefined
+    running.current = null
   }, [])
 
   // Register any running animations so they become cancelable
@@ -225,7 +225,6 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
 
         // Skip child if it doesn't intersect the parent's opposite axis (it can never be in view)
         if (excludeOffAxis && !domRectIntersects(parentRect, childRect, orthogonalAxis)) {
-          // eslint-disable-next-line no-continue
           continue
         }
 

package/hooks/useScroller.ts

@@ -2,9 +2,9 @@ import { useConstant, useMotionValueValue } from '@graphcommerce/framer-utils'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import type { SxProps, Theme } from '@mui/material'
-import type { HTMLMotionProps, MotionValue, PanHandlers, PanInfo } from 'framer-motion'
+import type { HTMLMotionProps, PanHandlers, PanInfo } from 'framer-motion'
 import { motionValue, useTransform } from 'framer-motion'
-import type { MouseEventHandler, ReactHTML } from 'react'
+import type { MouseEventHandler } from 'react'
 import type React from 'react'
 import { useEffect, useState } from 'react'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
@@ -13,7 +13,7 @@ import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
 
-export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = Omit<
+export type ScrollableProps<TagName extends React.HTMLElementType = 'div'> = Omit<
   HTMLMotionProps<TagName>,
   'children'
 > & {
@@ -41,7 +41,7 @@ const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>
 
 /** Make any HTML */
 export function useScroller<
-  TagName extends keyof ReactHTML = 'div',
+  TagName extends React.HTMLElementType = 'div',
   E extends HTMLElement = HTMLElement,
 >(props: ScrollableProps<TagName>, forwardedRef: React.ForwardedRef<E>) {
   const { hideScrollbar = false, children, grid = false, disableDrag, ...divProps } = props
@@ -123,7 +123,7 @@ export function useScroller<
   }
 
   const ref: React.RefCallback<E> = (el) => {
-    scrollerRef.current = el ?? undefined
+    scrollerRef.current = el
     if (typeof forwardedRef === 'function') forwardedRef(el)
     else if (forwardedRef) forwardedRef.current = el
   }

package/hooks/useVelocitySnapTo.ts

@@ -21,7 +21,7 @@ const closest = (counts: number[], target: number) =>
     : undefined
 
 export const useVelocitySnapTo = (
-  ref: React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement | undefined>,
+  ref: React.RefObject<HTMLElement | null> | React.MutableRefObject<HTMLElement | null | undefined>,
 ) => {
   const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap, scroll } =
     useScrollerContext()

package/package.json

@@ -2,11 +2,14 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "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",
@@ -18,17 +21,17 @@
     "popmotion": "11.0.5"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.55",
-    "@graphcommerce/image": "^9.1.0-canary.55",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
-    "@lingui/core": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.56",
+    "@graphcommerce/image": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
+    "@lingui/core": "^5",
+    "@lingui/react": "^5",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }

package/types.ts

@@ -16,7 +16,7 @@ export type ScrollSnapProps = {
   scrollSnapStop: ScrollSnapStop
 }
 
-export type ReactHtmlRefObject = React.MutableRefObject<HTMLElement | undefined>
+export type ReactHtmlRefObject = React.MutableRefObject<HTMLElement | null>
 
 export type SnapPositionDirection = 'left' | 'right' | 'up' | 'down'