diff --git a/packages/headless-react/src/search-engine.test.tsx b/packages/headless-react/src/search-engine.test.tsx index 8b423c1001c..2dc1809f75b 100644 --- a/packages/headless-react/src/search-engine.test.tsx +++ b/packages/headless-react/src/search-engine.test.tsx @@ -21,25 +21,25 @@ describe('Headless react SSR utils', () => { test('defines react search engine', () => { const { - fetchInitialState, - hydrateInitialState, + fetchStaticState, + hydrateStaticState, build, useEngine, controllers, - SSRStateProvider, - CSRProvider, + StaticStateProvider, + HydratedStateProvider, ...rest } = defineSearchEngine({ configuration: sampleConfig, }); [ - fetchInitialState, - hydrateInitialState, + fetchStaticState, + hydrateStaticState, build, useEngine, - SSRStateProvider, - CSRProvider, + StaticStateProvider, + HydratedStateProvider, ].forEach((returnValue) => expect(typeof returnValue).toBe('function')); expect(controllers).toEqual({}); @@ -66,10 +66,10 @@ describe('Headless react SSR utils', () => { controllers: {resultList: defineResultList()}, }); const { - fetchInitialState, - hydrateInitialState, - SSRStateProvider, - CSRProvider, + fetchStaticState, + hydrateStaticState, + StaticStateProvider, + HydratedStateProvider, controllers, useEngine, } = engineDefinition; @@ -120,25 +120,25 @@ describe('Headless react SSR utils', () => { ); }); - test('should render with SSRProvider', async () => { - const ssrState = await fetchInitialState(); + test('should render with StaticStateProvider', async () => { + const staticState = await fetchStaticState(); render( - + - + ); await checkRenderedResultList(); }); - test('should hydrate results with CSRProvider', async () => { - const ssrState = await fetchInitialState(); - const {engine, controllers} = await hydrateInitialState(ssrState); + test('should hydrate results with HydratedStateProvider', async () => { + const staticState = await fetchStaticState(); + const {engine, controllers} = await hydrateStaticState(staticState); render( - + - + ); await checkRenderedResultList(); @@ -152,35 +152,35 @@ describe('Headless react SSR utils', () => { ); }); - test('should not return engine with SSRProvider', async () => { - const ssrState = await fetchInitialState(); - function ssrStateProviderWrapper({children}: PropsWithChildren) { + test('should not return engine with StaticStateProvider', async () => { + const staticState = await fetchStaticState(); + function staticStateProviderWrapper({children}: PropsWithChildren) { return ( - + {children} - + ); } const {result} = renderHook(() => useEngine(), { - wrapper: ssrStateProviderWrapper, + wrapper: staticStateProviderWrapper, }); expect(result.current).toBeUndefined(); }); - test('should return engine with CSRProvider', async () => { - const ssrState = await fetchInitialState(); - const {engine, controllers} = await hydrateInitialState(ssrState); - function csrStateProviderWrapper({children}: PropsWithChildren) { + test('should return engine with HydratedStateProvider', async () => { + const staticState = await fetchStaticState(); + const {engine, controllers} = await hydrateStaticState(staticState); + function hydratedStateProviderWrapper({children}: PropsWithChildren) { return ( - + {children} - + ); } const {result} = renderHook(() => useEngine(), { - wrapper: csrStateProviderWrapper, + wrapper: hydratedStateProviderWrapper, }); expect(result.current).toStrictEqual(engine); }); diff --git a/packages/headless-react/src/search-engine.tsx b/packages/headless-react/src/search-engine.tsx index bd1153dcf55..8f9bc14f554 100644 --- a/packages/headless-react/src/search-engine.tsx +++ b/packages/headless-react/src/search-engine.tsx @@ -10,7 +10,7 @@ import {useContext, useCallback, useMemo, Context} from 'react'; import React from 'react'; import {useSyncMemoizedStore} from './client-utils'; import { - ContextCSRState, + ContextHydratedState, ContextState, ControllerHook, InferControllerHooksMapFromDefinition, @@ -20,7 +20,7 @@ import {SingletonGetter, capitalize, singleton, mapObject} from './utils'; export class MissingEngineProviderError extends Error { static message = - 'Unable to find Context. Please make sure you are wrapping your component with either `SSRStateProvider` or `CSRProvider` component that can provide the required context.'; + 'Unable to find Context. Please make sure you are wrapping your component with either `StaticStateProvider` or `HydratedStateProvider` component that can provide the required context.'; constructor() { super(MissingEngineProviderError.message); } @@ -35,12 +35,12 @@ export function createSingletonContext< ); } -function isCSRContext< +function isHydratedStateContext< TEngine extends CoreEngine, TControllers extends ControllerDefinitionsMap, >( ctx: ContextState -): ctx is ContextCSRState { +): ctx is ContextHydratedState { return 'engine' in ctx; } @@ -61,13 +61,15 @@ function buildControllerHook< } const subscribe = useCallback( (listener: () => void) => - isCSRContext(ctx) ? ctx.controllers[key].subscribe(listener) : () => {}, + isHydratedStateContext(ctx) + ? ctx.controllers[key].subscribe(listener) + : () => {}, [ctx] ); - const getSSRState = useCallback(() => ctx.controllers[key].state, [ctx]); - const state = useSyncMemoizedStore(subscribe, getSSRState); + const getStaticState = useCallback(() => ctx.controllers[key].state, [ctx]); + const state = useSyncMemoizedStore(subscribe, getStaticState); const methods = useMemo(() => { - if (!isCSRContext(ctx)) { + if (!isHydratedStateContext(ctx)) { return undefined; } const controller = ctx.controllers[key]; @@ -98,7 +100,7 @@ export function defineSearchEngine< if (ctx === null) { throw new MissingEngineProviderError(); } - return isCSRContext(ctx) ? ctx.engine : undefined; + return isHydratedStateContext(ctx) ? ctx.engine : undefined; }, controllers: (options.controllers ? Object.fromEntries( @@ -108,11 +110,11 @@ export function defineSearchEngine< ]) ) : {}) as InferControllerHooksMapFromDefinition, - SSRStateProvider: ({controllers, children}) => { + StaticStateProvider: ({controllers, children}) => { const {Provider} = singletonContext.get(); return {children}; }, - CSRProvider: ({controllers, engine, children}) => { + HydratedStateProvider: ({controllers, engine, children}) => { const {Provider} = singletonContext.get(); return {children}; }, diff --git a/packages/headless-react/src/types.ts b/packages/headless-react/src/types.ts index 866d8f9035a..24f2b99cbf4 100644 --- a/packages/headless-react/src/types.ts +++ b/packages/headless-react/src/types.ts @@ -8,17 +8,17 @@ import {InferControllerFromDefinition} from '@coveo/headless/dist/definitions/ap import { ControllerDefinitionsMap, InferControllersMapFromDefinition, - InferControllerSSRStateMapFromDefinitions, + InferControllerStaticStateMapFromDefinitions, EngineDefinition, } from '@coveo/headless/ssr'; import {FunctionComponent, PropsWithChildren} from 'react'; -export type ContextSSRState< +export type ContextStaticState< TEngine extends CoreEngine, TControllers extends ControllerDefinitionsMap, -> = {controllers: InferControllerSSRStateMapFromDefinitions}; +> = {controllers: InferControllerStaticStateMapFromDefinitions}; -export type ContextCSRState< +export type ContextHydratedState< TEngine extends CoreEngine, TControllers extends ControllerDefinitionsMap, > = { @@ -30,8 +30,8 @@ export type ContextState< TEngine extends CoreEngine, TControllers extends ControllerDefinitionsMap, > = - | ContextSSRState - | ContextCSRState; + | ContextStaticState + | ContextHydratedState; export type ControllerHook = () => { state: TController['state']; @@ -53,12 +53,12 @@ export type ReactEngineDefinition< > = EngineDefinition & { controllers: InferControllerHooksMapFromDefinition; useEngine(): TEngine | undefined; - SSRStateProvider: FunctionComponent< + StaticStateProvider: FunctionComponent< PropsWithChildren<{ - controllers: InferControllerSSRStateMapFromDefinitions; + controllers: InferControllerStaticStateMapFromDefinitions; }> >; - CSRProvider: FunctionComponent< + HydratedStateProvider: FunctionComponent< PropsWithChildren<{ engine: TEngine; controllers: InferControllersMapFromDefinition; diff --git a/packages/headless/src/app/search-engine/search-engine.ssr.test.ts b/packages/headless/src/app/search-engine/search-engine.ssr.test.ts index f505f2a0279..46411687952 100644 --- a/packages/headless/src/app/search-engine/search-engine.ssr.test.ts +++ b/packages/headless/src/app/search-engine/search-engine.ssr.test.ts @@ -17,22 +17,22 @@ describe('SSR', () => { }); it('returns 3 functions', () => { - const {build, fetchInitialState, hydrateInitialState} = engineDefinition; + const {build, fetchStaticState, hydrateStaticState} = engineDefinition; expect(typeof build).toBe('function'); - expect(typeof fetchInitialState).toBe('function'); - expect(typeof hydrateInitialState).toBe('function'); + expect(typeof fetchStaticState).toBe('function'); + expect(typeof hydrateStaticState).toBe('function'); }); it('fetches initial state of engine', async () => { - const {fetchInitialState} = engineDefinition; - const engineSSRState = await fetchInitialState(); - expect(engineSSRState).toBeTruthy(); + const {fetchStaticState} = engineDefinition; + const engineStaticState = await fetchStaticState(); + expect(engineStaticState).toBeTruthy(); }); it('hydrates engine and fetches results using hydrated engine', async () => { - const {fetchInitialState, hydrateInitialState} = engineDefinition; - const engineSSRState = await fetchInitialState(); - const {engine} = await hydrateInitialState(engineSSRState); + const {fetchStaticState, hydrateStaticState} = engineDefinition; + const engineStaticState = await fetchStaticState(); + const {engine} = await hydrateStaticState(engineStaticState); expect(engine.state.configuration.organizationId).toEqual( getSampleSearchEngineConfiguration().organizationId ); diff --git a/packages/headless/src/app/search-engine/search-engine.ssr.ts b/packages/headless/src/app/search-engine/search-engine.ssr.ts index e3263810650..3331325f470 100644 --- a/packages/headless/src/app/search-engine/search-engine.ssr.ts +++ b/packages/headless/src/app/search-engine/search-engine.ssr.ts @@ -8,8 +8,8 @@ import {EngineDefinitionBuildOptionsWithProps} from '../ssr-engine/types/build'; import { ControllerDefinitionsMap, ControllersMap, - EngineSSRState, - InferControllerSSRStateMapFromDefinitions, + EngineStaticState, + InferControllerStaticStateMapFromDefinitions, InferControllersMapFromDefinition, OptionsExtender, } from '../ssr-engine/types/common'; @@ -84,26 +84,26 @@ export function defineSearchEngine< }; }; - const fetchInitialState: SearchEngineDefinition['fetchInitialState'] = + const fetchStaticState: SearchEngineDefinition['fetchStaticState'] = ( ...[executeOptions]: Parameters< - SearchEngineDefinition['fetchInitialState'] + SearchEngineDefinition['fetchStaticState'] > ) => new Promise< - EngineSSRState< + EngineStaticState< {type: string}, - InferControllerSSRStateMapFromDefinitions + InferControllerStaticStateMapFromDefinitions > >((resolve, reject) => { - let initialControllers: ControllersMap; + let staticControllers: ControllersMap; const middleware: Middleware = () => (next) => (action) => { next(action); if (action.type === 'search/executeSearch/fulfilled') { resolve({ - controllers: mapObject(initialControllers, (controller) => ({ + controllers: mapObject(staticControllers, (controller) => ({ state: controller.state, - })) as InferControllerSSRStateMapFromDefinitions, + })) as InferControllerStaticStateMapFromDefinitions, searchFulfilledAction: JSON.parse(JSON.stringify(action)), }); } @@ -123,15 +123,15 @@ export function defineSearchEngine< controllers: executeOptions.controllers, }), }).then(({engine, controllers}) => { - initialControllers = controllers; + staticControllers = controllers; engine.executeFirstSearch(); }); }); - const hydrateInitialState: SearchEngineDefinition['hydrateInitialState'] = + const hydrateStaticState: SearchEngineDefinition['hydrateStaticState'] = async ( ...[hydrateOptions]: Parameters< - SearchEngineDefinition['hydrateInitialState'] + SearchEngineDefinition['hydrateStaticState'] > ) => { const {engine, controllers} = await build( @@ -150,7 +150,7 @@ export function defineSearchEngine< return { build, - fetchInitialState, - hydrateInitialState, + fetchStaticState, + hydrateStaticState, }; } diff --git a/packages/headless/src/app/ssr-engine/types/build.ts b/packages/headless/src/app/ssr-engine/types/build.ts index 740e2ec5c03..b8b4fabdf0c 100644 --- a/packages/headless/src/app/ssr-engine/types/build.ts +++ b/packages/headless/src/app/ssr-engine/types/build.ts @@ -2,7 +2,7 @@ import {CoreEngine} from '../../engine'; import { ControllersMap, ControllersPropsMap, - EngineAndControllers, + HydratedState, OptionsExtender, } from './common'; @@ -31,7 +31,7 @@ export interface BuildWithProps< TEngineOptions, TControllersProps > - ): Promise>; + ): Promise>; } export interface BuildWithoutProps< @@ -44,5 +44,5 @@ export interface BuildWithoutProps< */ build( options?: EngineDefinitionBuildOptionsWithoutProps - ): Promise>; + ): Promise>; } diff --git a/packages/headless/src/app/ssr-engine/types/common.ts b/packages/headless/src/app/ssr-engine/types/common.ts index 490b55b3696..dafba2743ce 100644 --- a/packages/headless/src/app/ssr-engine/types/common.ts +++ b/packages/headless/src/app/ssr-engine/types/common.ts @@ -20,12 +20,12 @@ export interface ControllersMap { [customName: string]: Controller; } -export interface ControllerSSRState { +export interface ControllerStaticState { state: TState; } -export interface ControllerSSRStateMap { - [customName: string]: ControllerSSRState; +export interface ControllerStaticStateMap { + [customName: string]: ControllerStaticState; } /** * @internal @@ -68,15 +68,15 @@ export interface ControllerDefinitionsMap< [customName: string]: ControllerDefinition; } -export interface EngineSSRState< +export interface EngineStaticState< TSearchFulfilledAction extends AnyAction, - TControllers extends ControllerSSRStateMap + TControllers extends ControllerStaticStateMap > { searchFulfilledAction: TSearchFulfilledAction; controllers: TControllers; } -export interface EngineAndControllers< +export interface HydratedState< TEngine extends CoreEngine, TControllers extends ControllersMap > { @@ -122,16 +122,16 @@ export type InferControllersMapFromDefinition< TControllers extends ControllerDefinitionsMap > = {[K in keyof TControllers]: InferControllerFromDefinition}; -export type InferControllerSSRStateFromDefinition< +export type InferControllerStaticStateFromDefinition< TDefinition extends ControllerDefinition > = TDefinition extends ControllerDefinition - ? ControllerSSRState + ? ControllerStaticState : never; -export type InferControllerSSRStateMapFromDefinitions< +export type InferControllerStaticStateMapFromDefinitions< TControllers extends ControllerDefinitionsMap > = { - [K in keyof TControllers]: InferControllerSSRStateFromDefinition< + [K in keyof TControllers]: InferControllerStaticStateFromDefinition< TControllers[K] >; }; diff --git a/packages/headless/src/app/ssr-engine/types/core-engine.ts b/packages/headless/src/app/ssr-engine/types/core-engine.ts index 30369b52bfa..bdef7f9868d 100644 --- a/packages/headless/src/app/ssr-engine/types/core-engine.ts +++ b/packages/headless/src/app/ssr-engine/types/core-engine.ts @@ -8,19 +8,19 @@ import { ControllersPropsMap, HasKeys, InferControllerPropsMapFromDefinitions, - InferControllerSSRStateMapFromDefinitions, + InferControllerStaticStateMapFromDefinitions, InferControllersMapFromDefinition, - ControllerSSRStateMap, + ControllerStaticStateMap, ControllersMap, } from './common'; import { - FetchInitialStateWithProps, - FetchInitialStateWithoutProps, -} from './fetch-initial-state'; + FetchStaticStateWithProps, + FetchStaticStateWithoutProps, +} from './fetch-static-state'; import { - HydrateInitialStateWithProps, - HydrateInitialStateWithoutProps, -} from './hydrate-initial-state'; + HydrateStaticStateWithProps, + HydrateStaticStateWithoutProps, +} from './hydrate-static-state'; export type EngineDefinitionOptions< TOptions extends {configuration: EngineConfiguration}, @@ -58,11 +58,11 @@ export interface EngineDefinitionWithoutProps< TEngine extends CoreEngine, TControllers extends ControllerDefinitionsMap, TEngineOptions -> extends FetchInitialStateWithoutProps< - InferControllerSSRStateMapFromDefinitions, +> extends FetchStaticStateWithoutProps< + InferControllerStaticStateMapFromDefinitions, AnyAction >, - HydrateInitialStateWithoutProps< + HydrateStaticStateWithoutProps< TEngine, InferControllersMapFromDefinition, AnyAction @@ -78,12 +78,12 @@ export interface EngineDefinitionWithProps< TControllers extends ControllerDefinitionsMap, TEngineOptions, TControllerProps extends ControllersPropsMap -> extends FetchInitialStateWithProps< - InferControllerSSRStateMapFromDefinitions, +> extends FetchStaticStateWithProps< + InferControllerStaticStateMapFromDefinitions, AnyAction, TControllerProps >, - HydrateInitialStateWithProps< + HydrateStaticStateWithProps< TEngine, InferControllersMapFromDefinition, AnyAction, @@ -99,25 +99,25 @@ export interface EngineDefinitionWithProps< /** * @internal */ -export type InferSSRState< +export type InferStaticState< T extends - | FetchInitialStateWithoutProps - | FetchInitialStateWithProps< - ControllerSSRStateMap, + | FetchStaticStateWithoutProps + | FetchStaticStateWithProps< + ControllerStaticStateMap, AnyAction, ControllersPropsMap > -> = Awaited>; +> = Awaited>; /** * @internal */ -export type InferCSRState< +export type InferHydratedState< T extends - | HydrateInitialStateWithoutProps - | HydrateInitialStateWithProps< + | HydrateStaticStateWithoutProps + | HydrateStaticStateWithProps< CoreEngine, ControllersMap, AnyAction, ControllersPropsMap > -> = Awaited>; +> = Awaited>; diff --git a/packages/headless/src/app/ssr-engine/types/fetch-initial-state.ts b/packages/headless/src/app/ssr-engine/types/fetch-static-state.ts similarity index 51% rename from packages/headless/src/app/ssr-engine/types/fetch-initial-state.ts rename to packages/headless/src/app/ssr-engine/types/fetch-static-state.ts index 87cd7f86208..44e8ab8499f 100644 --- a/packages/headless/src/app/ssr-engine/types/fetch-initial-state.ts +++ b/packages/headless/src/app/ssr-engine/types/fetch-static-state.ts @@ -1,16 +1,16 @@ import {AnyAction} from '@reduxjs/toolkit'; import { - ControllerSSRStateMap, + ControllerStaticStateMap, ControllersPropsMap, - EngineSSRState, + EngineStaticState, } from './common'; -export type EngineDefinitionFetchInitialStateOptions< - TControllersSSRState extends ControllersPropsMap -> = {controllers: TControllersSSRState}; +export type EngineDefinitionFetchStaticStateOptions< + TControllersStaticState extends ControllersPropsMap +> = {controllers: TControllersStaticState}; -export type FetchInitialStateWithoutProps< - TControllersSSRState extends ControllerSSRStateMap, +export type FetchStaticStateWithoutProps< + TControllersStaticState extends ControllerStaticStateMap, TSearchFulfilledAction extends AnyAction > = { /** @@ -18,13 +18,13 @@ export type FetchInitialStateWithoutProps< * * Useful for static generation and server-side rendering. */ - fetchInitialState(): Promise< - EngineSSRState + fetchStaticState(): Promise< + EngineStaticState >; }; -export type FetchInitialStateWithProps< - TControllersSSRState extends ControllerSSRStateMap, +export type FetchStaticStateWithProps< + TControllersStaticState extends ControllerStaticStateMap, TSearchFulfilledAction extends AnyAction, TControllersProps extends ControllersPropsMap > = { @@ -33,7 +33,9 @@ export type FetchInitialStateWithProps< * * Useful for static generation and server-side rendering. */ - fetchInitialState( - options: EngineDefinitionFetchInitialStateOptions - ): Promise>; + fetchStaticState( + options: EngineDefinitionFetchStaticStateOptions + ): Promise< + EngineStaticState + >; }; diff --git a/packages/headless/src/app/ssr-engine/types/hydrate-initial-state.ts b/packages/headless/src/app/ssr-engine/types/hydrate-static-state.ts similarity index 75% rename from packages/headless/src/app/ssr-engine/types/hydrate-initial-state.ts rename to packages/headless/src/app/ssr-engine/types/hydrate-static-state.ts index 5ec465f3f1c..0b2c7fc4615 100644 --- a/packages/headless/src/app/ssr-engine/types/hydrate-initial-state.ts +++ b/packages/headless/src/app/ssr-engine/types/hydrate-static-state.ts @@ -1,10 +1,6 @@ import {AnyAction} from '@reduxjs/toolkit'; import {CoreEngine} from '../../engine'; -import { - ControllersMap, - ControllersPropsMap, - EngineAndControllers, -} from './common'; +import {ControllersMap, ControllersPropsMap, HydratedState} from './common'; export interface EngineDefinitionHydrateOptionsWithoutProps< TSearchFulfilledAction extends AnyAction @@ -12,19 +8,19 @@ export interface EngineDefinitionHydrateOptionsWithoutProps< searchFulfilledAction: TSearchFulfilledAction; } -export type HydrateInitialStateWithoutProps< +export type HydrateStaticStateWithoutProps< TEngine extends CoreEngine, TControllers extends ControllersMap, TSearchFulfilledAction extends AnyAction > = { /** - * Creates a new engine from the snapshot of the engine created in SSR with fetchInitialState. + * Creates a new engine from the snapshot of the engine created in SSR with fetchStaticState. * * Useful when hydrating a server-side-rendered engine in CSR. */ - hydrateInitialState( + hydrateStaticState( options: EngineDefinitionHydrateOptionsWithoutProps - ): Promise>; + ): Promise>; }; export interface EngineDefinitionHydrateOptionsWithProps< @@ -34,21 +30,21 @@ export interface EngineDefinitionHydrateOptionsWithProps< controllers: TControllersProps; } -export type HydrateInitialStateWithProps< +export type HydrateStaticStateWithProps< TEngine extends CoreEngine, TControllers extends ControllersMap, TSearchFulfilledAction extends AnyAction, TControllersProps extends ControllersPropsMap > = { /** - * Creates a new engine from the snapshot of the engine created in SSR with fetchInitialState. + * Creates a new engine from the snapshot of the engine created in SSR with fetchStaticState. * * Useful when hydrating a server-side-rendered engine. */ - hydrateInitialState( + hydrateStaticState( options: EngineDefinitionHydrateOptionsWithProps< TSearchFulfilledAction, TControllersProps > - ): Promise>; + ): Promise>; }; diff --git a/packages/headless/src/ssr.index.ts b/packages/headless/src/ssr.index.ts index 3b74790ed00..ffe4693fcd6 100644 --- a/packages/headless/src/ssr.index.ts +++ b/packages/headless/src/ssr.index.ts @@ -12,14 +12,14 @@ export type { ControllerDefinitionsMap, InferControllerFromDefinition, InferControllersMapFromDefinition, - InferControllerSSRStateFromDefinition, - InferControllerSSRStateMapFromDefinitions, + InferControllerStaticStateFromDefinition, + InferControllerStaticStateMapFromDefinitions, } from './app/ssr-engine/types/common'; export type { EngineDefinition, - InferSSRState, - InferCSRState, + InferStaticState, + InferHydratedState, } from './app/ssr-engine/types/core-engine'; export type { diff --git a/packages/samples/headless-ssr/cypress/e2e/smoke.cy.ts b/packages/samples/headless-ssr/cypress/e2e/smoke.cy.ts index 28f28cf5658..3a35261e9f3 100644 --- a/packages/samples/headless-ssr/cypress/e2e/smoke.cy.ts +++ b/packages/samples/headless-ssr/cypress/e2e/smoke.cy.ts @@ -75,8 +75,8 @@ routes.forEach((route) => { ); expect(ssrTimestamp).to.not.be.undefined; cy.get(timestampSelector).should((timeStampElement) => { - const csrTimestamp = Date.parse(timeStampElement.text()); - expect(csrTimestamp).to.be.greaterThan(ssrTimestamp); + const hydratedTimestamp = Date.parse(timeStampElement.text()); + expect(hydratedTimestamp).to.be.greaterThan(ssrTimestamp); }); }); }); diff --git a/packages/samples/headless-ssr/src/app/common/hydration-metadata.tsx b/packages/samples/headless-ssr/src/app/common/hydration-metadata.tsx index a1dfeb50017..cb0ea0676b0 100644 --- a/packages/samples/headless-ssr/src/app/common/hydration-metadata.tsx +++ b/packages/samples/headless-ssr/src/app/common/hydration-metadata.tsx @@ -1,14 +1,14 @@ import {FunctionComponent} from 'react'; -import {SearchCSRState, SearchSSRState} from '../generic/common/engine'; +import {SearchHydratedState, SearchStaticState} from '../generic/common/engine'; export interface HydrationMetadataProps { - ssrState: SearchSSRState; - csrResult?: SearchCSRState; + staticState: SearchStaticState; + hydratedState?: SearchHydratedState; } export const HydrationMetadata: FunctionComponent = ({ - ssrState, - csrResult, + staticState, + hydratedState, }) => ( <>
@@ -17,12 +17,15 @@ export const HydrationMetadata: FunctionComponent = ({ id="hydrated-indicator" type="checkbox" disabled - checked={!!csrResult} + checked={!!hydratedState} />
Rendered page with{' '} - {(csrResult ?? ssrState).controllers.resultList.state.results.length}{' '} + { + (hydratedState ?? staticState).controllers.resultList.state.results + .length + }{' '} results
diff --git a/packages/samples/headless-ssr/src/app/generic/common/engine.ts b/packages/samples/headless-ssr/src/app/generic/common/engine.ts index 8e6b7f25890..3774214dc71 100644 --- a/packages/samples/headless-ssr/src/app/generic/common/engine.ts +++ b/packages/samples/headless-ssr/src/app/generic/common/engine.ts @@ -1,13 +1,13 @@ import { defineSearchEngine, - InferSSRState, - InferCSRState, + InferStaticState, + InferHydratedState, } from '@coveo/headless/ssr'; import {config} from '../../common/search-engine-config'; const engineDefinition = defineSearchEngine(config); -export type SearchSSRState = InferSSRState; -export type SearchCSRState = InferCSRState; +export type SearchStaticState = InferStaticState; +export type SearchHydratedState = InferHydratedState; -export const {fetchInitialState, hydrateInitialState} = engineDefinition; +export const {fetchStaticState, hydrateStaticState} = engineDefinition; diff --git a/packages/samples/headless-ssr/src/app/generic/components/result-list.tsx b/packages/samples/headless-ssr/src/app/generic/components/result-list.tsx index 53a91525e68..4c8ff505eb4 100644 --- a/packages/samples/headless-ssr/src/app/generic/components/result-list.tsx +++ b/packages/samples/headless-ssr/src/app/generic/components/result-list.tsx @@ -6,15 +6,15 @@ import {useEffect, useState, FunctionComponent} from 'react'; import ResultListCommon from '../../common/result-list'; interface ResultListProps { - ssrState: ResultListState; + staticState: ResultListState; controller?: ResultListController; } export const ResultList: FunctionComponent = ({ - ssrState, + staticState, controller, }) => { - const [state, setState] = useState(ssrState); + const [state, setState] = useState(staticState); useEffect( () => controller?.subscribe(() => setState({...controller.state})), diff --git a/packages/samples/headless-ssr/src/app/generic/components/search-box.tsx b/packages/samples/headless-ssr/src/app/generic/components/search-box.tsx index dc75e606d38..7484ff94a74 100644 --- a/packages/samples/headless-ssr/src/app/generic/components/search-box.tsx +++ b/packages/samples/headless-ssr/src/app/generic/components/search-box.tsx @@ -6,15 +6,15 @@ import {useEffect, useState, FunctionComponent} from 'react'; import SearchBoxCommon from '../../common/search-box'; interface SearchBoxProps { - ssrState: SearchBoxState; + staticState: SearchBoxState; controller?: SearchBoxController; } export const SearchBox: FunctionComponent = ({ - ssrState, + staticState, controller, }: SearchBoxProps) => { - const [state, setState] = useState(ssrState); + const [state, setState] = useState(staticState); useEffect( () => controller?.subscribe?.(() => setState({...controller.state})), diff --git a/packages/samples/headless-ssr/src/app/generic/components/search-page.tsx b/packages/samples/headless-ssr/src/app/generic/components/search-page.tsx index 534c75437ac..42036080989 100644 --- a/packages/samples/headless-ssr/src/app/generic/components/search-page.tsx +++ b/packages/samples/headless-ssr/src/app/generic/components/search-page.tsx @@ -1,9 +1,9 @@ 'use client'; import { - SearchSSRState, - SearchCSRState, - hydrateInitialState, + SearchStaticState, + SearchHydratedState, + hydrateStaticState, } from '@/src/app/generic/common/engine'; import {useEffect, useState} from 'react'; import {HydrationMetadata} from '../../common/hydration-metadata'; @@ -11,40 +11,47 @@ import {useSyncSearchParameters} from '../hooks/search-parameters'; import {ResultList} from './result-list'; import {SearchBox} from './search-box'; -export default function SearchPage({ssrState}: {ssrState: SearchSSRState}) { - const [csrResult, setCSRResult] = useState( - undefined - ); +export default function SearchPage({ + staticState, +}: { + staticState: SearchStaticState; +}) { + const [hydratedState, setHydratedState] = useState< + SearchHydratedState | undefined + >(undefined); useEffect(() => { - hydrateInitialState({ - searchFulfilledAction: ssrState.searchFulfilledAction, + hydrateStaticState({ + searchFulfilledAction: staticState.searchFulfilledAction, controllers: { searchParameters: { - initialState: ssrState.controllers.searchParameters.state, + initialState: staticState.controllers.searchParameters.state, }, }, }).then(({engine, controllers}) => { - setCSRResult({engine, controllers}); + setHydratedState({engine, controllers}); }); - }, [ssrState]); + }, [staticState]); useSyncSearchParameters({ - ssrState: ssrState.controllers.searchParameters.state, - controller: csrResult?.controllers.searchParameters, + staticState: staticState.controllers.searchParameters.state, + controller: hydratedState?.controllers.searchParameters, }); return ( <> + - ); } diff --git a/packages/samples/headless-ssr/src/app/generic/hooks/search-parameters.ts b/packages/samples/headless-ssr/src/app/generic/hooks/search-parameters.ts index 09acf70fe89..60545adf65d 100644 --- a/packages/samples/headless-ssr/src/app/generic/hooks/search-parameters.ts +++ b/packages/samples/headless-ssr/src/app/generic/hooks/search-parameters.ts @@ -9,15 +9,15 @@ import {useHistoryRouter} from '../../common/search-parameters'; import {CoveoNextJsSearchParametersSerializer} from '../../common/search-parameters-serializer'; interface UseSyncSearchParametersProps { - ssrState: SearchParameterManagerState; + staticState: SearchParameterManagerState; controller?: SearchParameterManager; } function useSearchParameters({ - ssrState, + staticState, controller, }: UseSyncSearchParametersProps) { - const [searchParameters, setSearchParameters] = useState(ssrState); + const [searchParameters, setSearchParameters] = useState(staticState); useEffect(() => { if (!controller) { return; @@ -28,11 +28,11 @@ function useSearchParameters({ } export function useSyncSearchParameters({ - ssrState, + staticState, controller, }: UseSyncSearchParametersProps) { const historyRouter = useHistoryRouter(); - const state = useSearchParameters({ssrState, controller}); + const state = useSearchParameters({staticState, controller}); // Update the search interface. useEffect( @@ -63,8 +63,8 @@ export function useSyncSearchParameters({ if (!correctedUrl || correctedUrl === historyRouter.url?.href) { return; } - const isInitialState = controller === undefined; - if (isInitialState) { + const isStaticState = controller === undefined; + if (isStaticState) { historyRouter.replace(correctedUrl); } else { historyRouter.push(correctedUrl); diff --git a/packages/samples/headless-ssr/src/app/generic/page.tsx b/packages/samples/headless-ssr/src/app/generic/page.tsx index b3b83bb3401..970125f3733 100644 --- a/packages/samples/headless-ssr/src/app/generic/page.tsx +++ b/packages/samples/headless-ssr/src/app/generic/page.tsx @@ -2,7 +2,7 @@ import { CoveoNextJsSearchParametersSerializer, NextJSServerSideSearchParams, } from '@/src/app/common/search-parameters-serializer'; -import {fetchInitialState} from '@/src/app/generic/common/engine'; +import {fetchStaticState} from '@/src/app/generic/common/engine'; import SearchPage from '@/src/app/generic/components/search-page'; // Entry point SSR function @@ -13,7 +13,7 @@ export default async function Search(url: { CoveoNextJsSearchParametersSerializer.fromServerSideUrlSearchParams( url.searchParams ); - const ssrState = await fetchInitialState({ + const staticState = await fetchStaticState({ controllers: { searchParameters: { initialState: { @@ -22,7 +22,7 @@ export default async function Search(url: { }, }, }); - return ; + return ; } // A page with search parameters cannot be statically rendered, since its rendered state should look different based on the current search parameters. diff --git a/packages/samples/headless-ssr/src/app/react/common/engine.ts b/packages/samples/headless-ssr/src/app/react/common/engine.ts index c75265f2e0c..a7936a8b288 100644 --- a/packages/samples/headless-ssr/src/app/react/common/engine.ts +++ b/packages/samples/headless-ssr/src/app/react/common/engine.ts @@ -1,17 +1,17 @@ import {defineSearchEngine} from '@coveo/headless-react'; -import {InferSSRState, InferCSRState} from '@coveo/headless/ssr'; +import {InferStaticState, InferHydratedState} from '@coveo/headless/ssr'; import {config} from '../../common/search-engine-config'; const engineDefinition = defineSearchEngine(config); -export type SearchSSRState = InferSSRState; -export type SearchCSRState = InferCSRState; +export type SearchStaticState = InferStaticState; +export type SearchHydratedState = InferHydratedState; export const { - fetchInitialState, - hydrateInitialState, - SSRStateProvider, - CSRProvider, + fetchStaticState, + hydrateStaticState, + StaticStateProvider, + HydratedStateProvider, } = engineDefinition; export const {useResultList, useSearchBox, useSearchParameters} = diff --git a/packages/samples/headless-ssr/src/app/react/components/search-page.tsx b/packages/samples/headless-ssr/src/app/react/components/search-page.tsx index fb59801ef22..6072d01ee20 100644 --- a/packages/samples/headless-ssr/src/app/react/components/search-page.tsx +++ b/packages/samples/headless-ssr/src/app/react/components/search-page.tsx @@ -1,56 +1,62 @@ 'use client'; import { - SearchSSRState, - SearchCSRState, - hydrateInitialState, - CSRProvider, - SSRStateProvider, + SearchStaticState, + SearchHydratedState, + hydrateStaticState, + HydratedStateProvider, + StaticStateProvider, } from '@/src/app/react/common/engine'; import {useEffect, useState, PropsWithChildren} from 'react'; import {HydrationMetadata} from '../../common/hydration-metadata'; interface SearchPageProviderProps { - ssrState: SearchSSRState; + staticState: SearchStaticState; } export function SearchPageProvider({ - ssrState, + staticState, children, }: PropsWithChildren) { - const [csrResult, setCSRResult] = useState( - undefined - ); + const [hydratedState, setHydratedState] = useState< + SearchHydratedState | undefined + >(undefined); useEffect(() => { - hydrateInitialState({ - searchFulfilledAction: ssrState.searchFulfilledAction, + hydrateStaticState({ + searchFulfilledAction: staticState.searchFulfilledAction, controllers: { searchParameters: { - initialState: ssrState.controllers.searchParameters.state, + initialState: staticState.controllers.searchParameters.state, }, }, }).then(({engine, controllers}) => { - setCSRResult({engine, controllers}); + setHydratedState({engine, controllers}); }); - }, [ssrState]); + }, [staticState]); - if (csrResult) { + if (hydratedState) { return ( - {children} - - + + ); } else { return ( - + {children} - - + + ); } } diff --git a/packages/samples/headless-ssr/src/app/react/components/search-parameters.tsx b/packages/samples/headless-ssr/src/app/react/components/search-parameters.tsx index ab831de7a4b..d4d094c51df 100644 --- a/packages/samples/headless-ssr/src/app/react/components/search-parameters.tsx +++ b/packages/samples/headless-ssr/src/app/react/components/search-parameters.tsx @@ -38,8 +38,8 @@ export default function SearchParameters() { if (!correctedUrl || correctedUrl === historyRouter.url?.href) { return; } - const isInitialState = methods === undefined; - if (isInitialState) { + const isStaticState = methods === undefined; + if (isStaticState) { historyRouter.replace(correctedUrl); } else { historyRouter.push(correctedUrl); diff --git a/packages/samples/headless-ssr/src/app/react/page.tsx b/packages/samples/headless-ssr/src/app/react/page.tsx index 1eb454dfe2f..df8deb8ef6a 100644 --- a/packages/samples/headless-ssr/src/app/react/page.tsx +++ b/packages/samples/headless-ssr/src/app/react/page.tsx @@ -1,4 +1,4 @@ -import {fetchInitialState} from '@/src/app/react/common/engine'; +import {fetchStaticState} from '@/src/app/react/common/engine'; import {SearchPageProvider} from '@/src/app/react/components/search-page'; import { CoveoNextJsSearchParametersSerializer, @@ -16,7 +16,7 @@ export default async function Search(url: { CoveoNextJsSearchParametersSerializer.fromServerSideUrlSearchParams( url.searchParams ); - const ssrState = await fetchInitialState({ + const staticState = await fetchStaticState({ controllers: { searchParameters: { initialState: { @@ -27,7 +27,7 @@ export default async function Search(url: { }); return ( - +