diff --git a/examples/nextjs/pages/heading.tsx b/examples/nextjs/pages/heading.tsx index 78bedc5..1524b51 100644 --- a/examples/nextjs/pages/heading.tsx +++ b/examples/nextjs/pages/heading.tsx @@ -1,4 +1,4 @@ -import { useVariable } from '@evolv/react'; +import { useVariable } from '@evolv/nextjs'; export default function Heading() { const headingText = useVariable('shop.checkout-steps', 'control'); diff --git a/packages/nextjs/src/get-evolv-server-side-props.tsx b/packages/nextjs/src/get-evolv-server-side-props.tsx index e6d4d49..8eb40f0 100644 --- a/packages/nextjs/src/get-evolv-server-side-props.tsx +++ b/packages/nextjs/src/get-evolv-server-side-props.tsx @@ -23,15 +23,27 @@ interface Result { } /** + * Server-side loader function that builds out the necessary data needed to hydrate page during rendering. The + * return value of this function will become the value of `props` that is passed to the page component. + * + * @description + * If a page does not need to export its own `getServerSideProps()` function, use the shorter form shown in the first example. + * If a page does need to export its own `getServerSideProps()` function, use the longer form inside the page's + * `getServerSideProps()` function to merge together page props and Evolv props. * * @example * export const getServerSideProps = getEvolvServerSideProps(options); * * @example * export function getServerSideProps(ctx) { + * const pageProps = {}; * const { props: evolvProps } = await getEvolvServerSideProps(options, ctx); + * * return { - * props: evolvProps + * props: { + * ...pageProps + * ...evolvProps + * } * }; * } */ diff --git a/packages/react/src/client.adapter.ts b/packages/react/src/client.adapter.ts index 5a75c24..10cc06e 100644 --- a/packages/react/src/client.adapter.ts +++ b/packages/react/src/client.adapter.ts @@ -40,10 +40,8 @@ export class ClientAdapter { async hydrate(): Promise { const keys = await this.client.getActiveKeys(); - if (keys.current) { - for (const key of keys.current) { - this.hydratedState[key] = await this.client.get(key); - } + for (const key of keys.current ?? []) { + this.hydratedState[key] = await this.client.get(key); } } diff --git a/packages/react/src/components/evolv.provider.tsx b/packages/react/src/components/evolv.provider.tsx index 194f0e6..4db41de 100644 --- a/packages/react/src/components/evolv.provider.tsx +++ b/packages/react/src/components/evolv.provider.tsx @@ -15,11 +15,11 @@ interface Props { } export const EvolvProvider: FC = - ({ children, options, uid, hydratedState, remoteContext, localContext }) => { - const [adapter] = useState(() => { + ({ children, options, uid, hydratedState, remoteContext, localContext }) => { + const [adapter] = useState(() => { const instance = new ClientAdapter(options, hydratedState); - instance.initialize(uid, remoteContext, localContext); + instance.initialize(uid, remoteContext, localContext); return instance; }); @@ -30,32 +30,32 @@ export const EvolvProvider: FC = globalThis.evolv.context = adapter.client.context; } - return ( - - {children} - - ); - }; + return ( + + {children} + + ); + }; export const EvolvConsumer: FC<{ children: (client: ClientAdapter) => JSX.Element }> = - ({ children }) => ( - - {adapter => { - if (!adapter) { - throw new Error('EvolvConsumer must be used within an EvolvProvider'); - } - - return children(adapter); - }} - - ); + ({ children }) => ( + + {adapter => { + if (!adapter) { + throw new Error('EvolvConsumer must be used within an EvolvProvider'); + } + + return children(adapter); + }} + + ); export function useEvolv(): ClientAdapter { - const adapter = useContext(EvolvContext); + const adapter = useContext(EvolvContext); - if (!adapter) { - throw new Error('useEvolv() must be used within an EvolvProvider'); - } + if (!adapter) { + throw new Error('useEvolv() must be used within an EvolvProvider'); + } - return adapter; + return adapter; }