feat(headless-react): create providers with definition

packages/headless-react/src/ssr-commerce/commerce-engine.test.tsx

@@ -49,6 +49,7 @@ describe('Headless react SSR utils', () => {
       listingEngineDefinition,
       searchEngineDefinition,
       standaloneEngineDefinition,
+      recommendationEngineDefinition,
       ...rest
     } = defineCommerceEngine({configuration: sampleConfig});
     const {

packages/headless-react/src/ssr-commerce/commerce-engine.tsx

@@ -46,12 +46,14 @@ export function defineCommerceEngine<
   >;
   type ListingContext = ContextStateType<SolutionType.listing>;
   type SearchContext = ContextStateType<SolutionType.search>;
+  type RecommendationContext = ContextStateType<SolutionType.recommendation>;
   type StandaloneContext = ContextStateType<SolutionType.standalone>;
 
   const {
     listingEngineDefinition,
     searchEngineDefinition,
     standaloneEngineDefinition,
+    recommendationEngineDefinition,
   } = defineBaseCommerceEngine({...options});
   return {
     useEngine: buildEngineHook(singletonContext),
@@ -84,5 +86,14 @@ export function defineCommerceEngine<
         singletonContext as StandaloneContext
       ),
     },
+    recommendationEngineDefinition: {
+      ...recommendationEngineDefinition,
+      StaticStateProvider: buildStaticStateProvider(
+        singletonContext as RecommendationContext
+      ),
+      HydratedStateProvider: buildHydratedStateProvider(
+        singletonContext as RecommendationContext
+      ),
+    },
   };
 }

packages/headless-react/src/ssr-commerce/index.ts

@@ -1,4 +1,5 @@
 export {defineCommerceEngine} from './commerce-engine.js';
+export {buildProviderWithDefinition} from './providers.js';
 export type {ReactCommerceEngineDefinition} from './commerce-engine.js';
 export {MissingEngineProviderError} from '../errors.js';
 export * from '@coveo/headless/ssr-commerce';

packages/headless-react/src/ssr-commerce/providers.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import {
+  InferHydratedState,
+  InferStaticState,
+  NavigatorContext,
+} from '@coveo/headless/ssr-commerce';
+import {PropsWithChildren, useEffect, useState} from 'react';
+import {defineCommerceEngine} from './commerce-engine.js';
+
+interface WithDefinitionProps {
+  staticState: InferStaticState<RealDefinition>;
+  navigatorContext: NavigatorContext;
+}
+
+type LooseDefinition = {
+  setNavigatorContextProvider: unknown;
+  build: unknown;
+  hydrateStaticState: unknown;
+  fetchStaticState: unknown;
+  HydratedStateProvider: unknown;
+  StaticStateProvider: unknown;
+};
+
+type RealDefinition =
+  | ReturnType<typeof defineCommerceEngine>['recommendationEngineDefinition']
+  | ReturnType<typeof defineCommerceEngine>['listingEngineDefinition']
+  | ReturnType<typeof defineCommerceEngine>['searchEngineDefinition']
+  | ReturnType<typeof defineCommerceEngine>['standaloneEngineDefinition'];
+
+export function buildProviderWithDefinition(looseDefinition: LooseDefinition) {
+  return function WrappedProvider({
+    staticState,
+    navigatorContext,
+    children,
+  }: PropsWithChildren<WithDefinitionProps>) {
+    const definition = looseDefinition as RealDefinition;
+    type RecommendationHydratedState = InferHydratedState<typeof definition>;
+    const [hydratedState, setHydratedState] = useState<
+      RecommendationHydratedState | undefined
+    >(undefined);
+
+    definition.setNavigatorContextProvider(() => navigatorContext);
+
+    useEffect(() => {
+      const {searchActions, controllers} = staticState;
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const hydrateControllers: Record<string, any> = {};
+
+      if ('cart' in controllers) {
+        hydrateControllers.cart = {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          initialState: {items: (controllers as any).cart.state.items},
+        };
+      }
+
+      if ('context' in controllers) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        hydrateControllers.context = (controllers as any).context.state;
+      }
+
+      definition
+        .hydrateStaticState({
+          searchActions,
+          controllers: {
+            ...controllers,
+            ...hydrateControllers,
+          },
+        })
+        .then(({engine, controllers}) => {
+          setHydratedState({engine, controllers});
+        });
+    }, [staticState]);
+
+    if (hydratedState) {
+      return (
+        <definition.HydratedStateProvider
+          engine={hydratedState.engine}
+          controllers={hydratedState.controllers}
+        >
+          {children}
+        </definition.HydratedStateProvider>
+      );
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const StaticStateProviderWithAnyControllers = (looseDefinition as any)
+      .StaticStateProvider as React.ComponentType<{
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      controllers: any;
+      children: React.ReactNode;
+    }>;
+
+    return (
+      <StaticStateProviderWithAnyControllers
+        controllers={staticState.controllers}
+      >
+        {children}
+      </StaticStateProviderWithAnyControllers>
+    );
+  };
+}