@graphcommerce/react-hook-form 9.1.0-canary.54 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,95 @@
 # 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) [`5036171`](https://github.com/graphcommerce-org/graphcommerce/commit/5036171618492d7587cc02c557a4e9343e8240cd) - Fix typescript infer ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`31ef9c5`](https://github.com/graphcommerce-org/graphcommerce/commit/31ef9c59b18dd58fbb3625abf586f0a53f3d63cb) - Solve an issue where the false value of the useFormGql was incorrectly interpreted as an error while it was a SKIP. Fixes an issue where the CustomerAddressForm is not submitting properly when the user is adding a new address. ([@paales](https://github.com/paales))
+
+- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`9bf02b6`](https://github.com/graphcommerce-org/graphcommerce/commit/9bf02b6dd20c086db0c93fe9efea140b673bc4a2) - Solve issue with react-hook-form causing ts errors, now version is fixed and the ts error is solved ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.54
 
 ## 9.1.0-canary.53

package/index.ts

@@ -1,4 +1,5 @@
 export * from 'react-hook-form'
+export { default as diff } from './src/diff'
 export * from './src/ComposedForm'
 export * from './src/useFormAutoSubmit'
 export * from './src/useFormGql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.54",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,17 +13,20 @@
   },
   "peerDependencies": {
     "@apollo/client": "*",
-    "@graphcommerce/eslint-config-pwa": "^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/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
     "@mui/utils": "^5",
     "graphql": "^16.6.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7"
   },
   "dependencies": {
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.21",
     "lodash": "^4.17.21"
+  },
+  "exports": {
+    ".": "./index.ts"
   }
 }

package/src/ComposedForm/types.ts

@@ -86,5 +86,5 @@ export type ComposedFormReducer = React.Reducer<ComposedFormState, Actions>
 
 export type ComposedFormContext = [
   React.ReducerState<ComposedFormReducer>,
-  React.Dispatch<React.ReducerAction<ComposedFormReducer>>,
+  React.Dispatch<Actions>,
 ]

package/src/useFormAutoSubmit.tsx

@@ -6,9 +6,10 @@ import { cloneDeep } from '@apollo/client/utilities'
 import { debounce } from '@mui/material'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import type {
-  DeepPartialSkipArrayKey,
   FieldPath,
   FieldValues,
+  Path,
+  PathValue,
   UseFormHandleSubmit,
   UseFormReturn,
   UseWatchProps,
@@ -125,7 +126,8 @@ export type FormAutoSubmitProps<TFieldValues extends FieldValues = FieldValues>
    * @deprecated Please use leading instead
    */
   initialWait?: number
-} & Omit<UseWatchProps<TFieldValues>, 'defaultValue'> &
+  name?: readonly [...FieldPath<TFieldValues>[]]
+} & Omit<UseWatchProps<TFieldValues>, 'defaultValue' | 'compute'> &
   DebounceSettings
 
 function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
@@ -141,12 +143,13 @@ function useAutoSubmitBase<TFieldValues extends FieldValues = FieldValues>(
     submit,
     parallel,
     noValidate,
+    name = [],
     ...watchOptions
   } = props
 
   // We create a stable object from the values, so that we can compare them later
-  const values = useMemoObject(cloneDeep(useWatch(watchOptions)))
-  const oldValues = useRef<DeepPartialSkipArrayKey<TFieldValues>>(values)
+  const values = useMemoObject(cloneDeep(useWatch({ ...watchOptions, name })))
+  const oldValues = useRef<PathValue<TFieldValues, Path<TFieldValues>>[]>(values)
   const { isValidating, isSubmitting, isValid } = useFormState(watchOptions)
 
   const submitDebounced = useDebounce(

package/src/useFormGql.tsx

@@ -22,8 +22,8 @@ type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
    * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
    * Mutation.
    *
-   * When returning false, it will silently stop the submission. When an error is thrown, it will be
-   * set as an ApolloError
+   * When returning false, it will SKIP the submission. When an Error is thrown, it will be set as
+   * an ApolloError.
    */
   onBeforeSubmit?: (variables: V, form?: UseFormReturn<V>) => V | false | Promise<V | false>
   /**
@@ -32,7 +32,7 @@ type UseFormGraphQLCallbacks<Q, V extends FieldValues> = {
    * When an error is thrown, it will be set as an ApolloError
    */
   onComplete?: (
-    data: FetchResult<MaybeMasked<Q>>,
+    result: FetchResult<MaybeMasked<Q>>,
     variables: V,
     form?: UseFormReturn<V>,
   ) => void | Promise<void>
@@ -88,8 +88,8 @@ export type UseFormGqlMethods<Q, V extends FieldValues> = Omit<
 > &
   Pick<UseFormReturn<V>, 'handleSubmit'> & {
     data?: MaybeMasked<Q> | null
-    error?: ApolloError
-    submittedVariables?: V
+    error?: ApolloError | null
+    submittedVariables?: V | null
   }
 
 /**
@@ -126,12 +126,12 @@ export function useFormGql<Q, V extends FieldValues>(
   const { encode, type, ...gqlDocumentHandler } = useGqlDocumentHandler<Q, V>(document)
   const [execute, { data, error, loading }] = tuple
 
-  const submittedVariables = useRef<V>()
-  const returnedError = useRef<ApolloError>()
+  const submittedVariables = useRef<V | null>(null)
+  const returnedError = useRef<ApolloError | null>(null)
 
   // automatically updates the default values
   const initital = useRef(true)
-  const controllerRef = useRef<AbortController | undefined>()
+  const controllerRef = useRef<AbortController | null>(null)
   const valuesString = JSON.stringify(defaultValues)
   useEffect(() => {
     if (!deprecated_useV1) return
@@ -166,8 +166,8 @@ export function useFormGql<Q, V extends FieldValues>(
         return
       }
 
-      returnedError.current = undefined
-      submittedVariables.current = undefined
+      returnedError.current = null
+      submittedVariables.current = null
 
       // Combine defaults with the formValues and encode
       let variables = !deprecated_useV1 ? formValues : encode({ ...defaultValues, ...formValues })
@@ -189,10 +189,7 @@ export function useFormGql<Q, V extends FieldValues>(
         return
       }
 
-      if (onBeforeSubmitResult === false) {
-        form.setError('root', { message: 'Form submission cancelled' })
-        return
-      }
+      if (onBeforeSubmitResult === false) return
 
       variables = onBeforeSubmitResult
 

package/src/useFormGqlMutation.tsx

@@ -41,7 +41,7 @@ export function assertFormGqlOperation<
 /** Bindings between react-hook-form's useForm and Apollo Client's useMutation hook. */
 export function useFormGqlMutation<Q extends Record<string, unknown>, V extends FieldValues>(
   document: TypedDocumentNode<Q, V>,
-  options: UseFormGraphQlOptions<Q, V> = {},
+  options: NoInfer<UseFormGraphQlOptions<Q, V>> = {},
   operationOptions?: MutationHookOptions<Q, V>,
 ): UseFormGqlMutationReturn<Q, V> {
   const form = useForm<V>(options)