@graphcommerce/algolia-search 9.1.0-canary.55 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @graphcommerce/algolia-search
 
+## 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/Config.graphqls

@@ -71,12 +71,12 @@ extend input GraphCommerceConfig {
   algoliaSearchDebounceTime: Int
 
   """
-  Configure your Algolia HyGraph index. This will create a new index for HyGraph data if it doesn't exist in Algolia.
+  Configure your Algolia Hygraph index. This will create a new index for Hygraph data if it doesn't exist in Algolia.
   """
   algoliaHygraphIndex: String
 
   """
-  Configure your Algolia HyGraph secret. This will be used to authenticate the HyGraph data.
+  Configure your Algolia Hygraph secret. This will be used to authenticate the Hygraph data.
   """
   hygraphSecret: String
 }

package/README.md

@@ -167,15 +167,7 @@ return {
 
   return (
     <>
-      <PageMeta
-        title={
-          search
-            ? i18n._(/* i18n */ 'Results for ‘{search}’', { search })
-            : i18n._(/* i18n */ 'Search')
-        }
-        metaRobots={['noindex']}
-        canonical='/search'
-      />
+      <PageMeta title={search ? t`Results for ‘${search}’` : t`Search`} metaRobots={['noindex']} />
 
 +     <SearchContext serverProps={serverState}>
 ```
@@ -185,7 +177,7 @@ return {
 1. Follow the algolia docs to enable the Algolia integration in Magento 2
    [here](https://www.algolia.com/doc/integration/magento-2/getting-started/quick-start/?client=php).
 
-## Add Algolia indexing to HyGraph
+## Add Algolia indexing to Hygraph
 
 1. Add the `algoliasearch` package to your project
 
@@ -237,8 +229,8 @@ export default (req: NextApiRequest, res: NextApiResponse) =>
   await removeHygraphRecord(req, res)
 ```
 
-6. Follow the webhook setup guide to add the webhooks to your HyGraph project.
+6. Follow the webhook setup guide to add the webhooks to your Hygraph project.
 
 You can follow
 [these](https://hygraph.com/docs/guides/webhooks/webhooks-overview#configure-webhooks)
-instructions to configure the webhooks in your HyGraph project.
+instructions to configure the webhooks in your Hygraph project.

package/api/add-hygraph-record.ts

@@ -1,4 +1,11 @@
 import type { Page } from '@graphcommerce/graphql-mesh'
+import {
+  algoliaApplicationId,
+  algoliaHygraphIndex,
+  algoliaSearchOnlyApiKey,
+  canonicalBaseUrl,
+  hygraphSecret,
+} from '@graphcommerce/next-config/config'
 import { verifyWebhookSignature } from '@hygraph/utils'
 import algoliasearch from 'algoliasearch'
 import type { NextApiRequest, NextApiResponse } from 'next'
@@ -12,12 +19,9 @@ type AlgoliaResult = {
   algoliaLastUpdateAtCET: string
 }
 
-const algolia = algoliasearch(
-  import.meta.graphCommerce.algoliaApplicationId,
-  import.meta.graphCommerce.algoliaSearchOnlyApiKey,
-)
+const algolia = algoliasearch(algoliaApplicationId, algoliaSearchOnlyApiKey)
 
-const indexName = import.meta.graphCommerce.algoliaHygraphIndex
+const indexName = algoliaHygraphIndex
 const index = typeof indexName === 'string' ? algolia.initIndex(indexName) : undefined
 
 export function addHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
@@ -26,7 +30,7 @@ export function addHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
   const { body } = req
   const gcms = req.headers['gcms-signature']
   const signature = Array.isArray(gcms) ? gcms[0] : gcms
-  const secret = import.meta.graphCommerce.hygraphSecret
+  const secret = hygraphSecret
 
   if (!index) return res.status(400).send('Missing "algoliaHygraphIndex" config variable')
   if (!secret) return res.status(400).send('Missing "hygraphSecret" config variable')
@@ -40,7 +44,7 @@ export function addHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
     const { id: objectID, localizations } = data
 
     const objects = localizations.map((localization: Page & { updatedAt: string }) => {
-      const url = `${import.meta.graphCommerce.canonicalBaseUrl}/${localization?.url}`
+      const url = `${canonicalBaseUrl}/${localization?.url}`
       const algoliaObject: AlgoliaResult = {
         name: localization?.title ?? '',
         content: localization?.metaDescription,

package/api/remove-hygraph-record.ts

@@ -1,13 +1,16 @@
+import {
+  algoliaApplicationId,
+  algoliaHygraphIndex,
+  algoliaSearchOnlyApiKey,
+  hygraphSecret,
+} from '@graphcommerce/next-config/config'
 import { verifyWebhookSignature } from '@hygraph/utils'
 import algoliasearch from 'algoliasearch'
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-const algolia = algoliasearch(
-  import.meta.graphCommerce.algoliaApplicationId,
-  import.meta.graphCommerce.algoliaSearchOnlyApiKey,
-)
+const algolia = algoliasearch(algoliaApplicationId, algoliaSearchOnlyApiKey)
 
-const indexName = import.meta.graphCommerce.algoliaHygraphIndex
+const indexName = algoliaHygraphIndex
 const index = indexName ? algolia.initIndex(indexName) : undefined
 
 export async function removeHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
@@ -16,7 +19,7 @@ export async function removeHygraphRecord(req: NextApiRequest, res: NextApiRespo
   const { body } = req
   const gcms = req.headers['gcms-signature']
   const signature = Array.isArray(gcms) ? gcms[0] : gcms
-  const secret = import.meta.graphCommerce.hygraphSecret
+  const secret = hygraphSecret
 
   if (!index) return res.status(400).send('Missing "algoliaHygraphIndex" config variable')
   if (!secret) return res.status(400).send('Missing "hygraphSecret" config variable')

package/components/SearchBox/SearchBox.tsx

@@ -1,5 +1,6 @@
 import type { SearchFormProps } from '@graphcommerce/magento-search'
-import { Trans } from '@lingui/react'
+import { algoliaSearchDebounceTime } from '@graphcommerce/next-config/config'
+import { Trans } from '@lingui/react/macro'
 import { Box, debounce } from '@mui/material'
 import TextField from '@mui/material/TextField'
 import type { ChangeEvent } from 'react'
@@ -20,7 +21,7 @@ export function SearchBox(props: SearchBoxProps) {
   const debounceSearch = useCallback(
     debounce(
       (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => refine(e.target.value),
-      import.meta.graphCommerce.algoliaSearchDebounceTime ?? 0,
+      algoliaSearchDebounceTime ?? 0,
     ),
     [refine],
   )
@@ -39,8 +40,8 @@ export function SearchBox(props: SearchBoxProps) {
         paddingRight: '7px',
       })}
     >
-      {totalResults === 1 && <Trans id='{totalResults} result' values={{ totalResults }} />}
-      {totalResults > 1 && <Trans id='{totalResults} results' values={{ totalResults }} />}
+      {totalResults === 1 && <Trans>{totalResults} result</Trans>}
+      {totalResults > 1 && <Trans>{totalResults} results</Trans>}
     </Box>
   )
 

package/lib/configuration.ts

@@ -1,2 +1,4 @@
-export const applicationId = import.meta.graphCommerce.algoliaApplicationId ?? ''
-export const searchOnlyApiKey = import.meta.graphCommerce.algoliaSearchOnlyApiKey ?? ''
+import { algoliaApplicationId, algoliaSearchOnlyApiKey } from '@graphcommerce/next-config/config'
+
+export const applicationId = algoliaApplicationId ?? ''
+export const searchOnlyApiKey = algoliaSearchOnlyApiKey ?? ''

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/algolia-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,26 +12,38 @@
     }
   },
   "dependencies": {
-    "algoliasearch": "^4.24.0"
+    "algoliasearch": "^4.25.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.55",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/graphql": "^9.1.0-canary.55",
-    "@graphcommerce/graphql-mesh": "^9.1.0-canary.55",
-    "@graphcommerce/magento-product": "^9.1.0-canary.55",
-    "@graphcommerce/magento-search": "^9.1.0-canary.55",
-    "@graphcommerce/magento-store": "^9.1.0-canary.55",
-    "@graphcommerce/next-config": "^9.1.0-canary.55",
-    "@graphcommerce/next-ui": "^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/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.56",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/graphql": "^10.0.0-canary.56",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.56",
+    "@graphcommerce/magento-product": "^10.0.0-canary.56",
+    "@graphcommerce/magento-search": "^10.0.0-canary.56",
+    "@graphcommerce/magento-store": "^10.0.0-canary.56",
+    "@graphcommerce/next-config": "^10.0.0-canary.56",
+    "@graphcommerce/next-ui": "^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/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/material": "^5.10.16",
     "next": "*",
-    "react": "^18.3.1",
+    "react": "^19.2.0",
     "react-instantsearch-hooks-web": "^6.47.3"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./plugins/AlgoliaCategorySearchResults": "./plugins/AlgoliaCategorySearchResults.tsx",
+    "./plugins/AlgoliaFiltersPlugin": "./plugins/AlgoliaFiltersPlugin.tsx",
+    "./plugins/AlgoliaPageSearchResults": "./plugins/AlgoliaPageSearchResults.tsx",
+    "./plugins/AlgoliaPaginationPlugin": "./plugins/AlgoliaPaginationPlugin.tsx",
+    "./plugins/AlgoliaProductListCountPlugin": "./plugins/AlgoliaProductListCountPlugin.tsx",
+    "./plugins/AlgoliaProductSearchResultsPlugin": "./plugins/AlgoliaProductSearchResultsPlugin.tsx",
+    "./plugins/AlgoliaProductSortPlugin": "./plugins/AlgoliaProductSortPlugin.tsx",
+    "./plugins/AlgoliaSearchContextPlugin": "./plugins/AlgoliaSearchContextPlugin.tsx",
+    "./plugins/AlgoliaSearchFieldPlugin": "./plugins/AlgoliaSearchFieldPlugin.tsx"
   }
 }

package/plugins/AlgoliaProductSortPlugin.tsx

@@ -1,7 +1,7 @@
 import type { ProductFiltersProps } from '@graphcommerce/magento-product'
 import type { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { storefrontConfig } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { useRouter } from 'next/router'
 import { useSortBy } from 'react-instantsearch-hooks-web'
 import { RenderChip } from '../components/Chip/RenderChip'
@@ -20,14 +20,7 @@ function AlgoliaProductSortPlugin(props: PluginProps<ProductFiltersProps>) {
 
   if (!options) return null
 
-  return (
-    <RenderChip
-      __typename='Sort'
-      title={rest.title ?? i18n._(/* i18n */ 'Sort')}
-      attribute='sort'
-      {...sort}
-    />
-  )
+  return <RenderChip __typename='Sort' title={rest.title ?? t`Sort`} attribute='sort' {...sort} />
 }
 
 export const Plugin = AlgoliaProductSortPlugin