fix(AP-1778): fixes from code review

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');

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
+ *         }
  *     };
  * }
  */

packages/react/src/client.adapter.ts

@@ -40,10 +40,8 @@ export class ClientAdapter {
 	async hydrate(): Promise<void> {
 		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);
 		}
 	}
 

packages/react/src/components/evolv.provider.tsx

@@ -15,11 +15,11 @@ interface Props {
 }
 
 export const EvolvProvider: FC<Props> =
-    ({ 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<Props> =
 			globalThis.evolv.context = adapter.client.context;
 		}
 
-        return (
-            <EvolvContext.Provider value={adapter}>
-                {children}
-            </EvolvContext.Provider>
-        );
-    };
+		return (
+			<EvolvContext.Provider value={adapter}>
+				{children}
+			</EvolvContext.Provider>
+		);
+	};
 
 export const EvolvConsumer: FC<{ children: (client: ClientAdapter) => JSX.Element }> =
-    ({ children }) => (
-        <EvolvContext.Consumer>
-            {adapter => {
-                if (!adapter) {
-                    throw new Error('EvolvConsumer must be used within an EvolvProvider');
-                }
-
-                return children(adapter);
-            }}
-        </EvolvContext.Consumer>
-    );
+	({ children }) => (
+		<EvolvContext.Consumer>
+			{adapter => {
+				if (!adapter) {
+					throw new Error('EvolvConsumer must be used within an EvolvProvider');
+				}
+
+				return children(adapter);
+			}}
+		</EvolvContext.Consumer>
+	);
 
 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;
 }