@nosto/nosto-react 0.5.0 → 2.0.0

package/src/components/NostoProvider.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, isValidElement, useState, useRef } from "react"
-import { NostoContext } from "./context"
-import { createRoot, Root } from "react-dom/client"
-import { NostoClient, Recommendation } from "../types"
+import React, { useEffect, isValidElement } from "react"
+import { NostoContext, RecommendationComponent } from "../context"
+import { NostoClient } from "../types"
+import { isNostoLoaded } from "./helpers"
 
 /**
  * @group Components
@@ -19,7 +19,10 @@ export interface NostoProviderProps {
    * Indicates an url of a server
    */
   host?: string
-  children: React.ReactElement
+  /**
+   * children
+   */
+  children: React.ReactElement | React.ReactElement[]
   /**
    * Indicates if merchant uses multiple currencies
    */
@@ -27,9 +30,7 @@ export interface NostoProviderProps {
   /**
    * Recommendation component which holds nostoRecommendation object
    */
-  recommendationComponent?: React.ReactElement<{
-    nostoRecommendation: Recommendation
-  }>
+  recommendationComponent?: RecommendationComponent
   /**
    * Enables Shopify markets with language and market id
    */
@@ -67,7 +68,7 @@ export default function NostoProvider(props: NostoProviderProps) {
     host,
     children,
     recommendationComponent,
-    shopifyMarkets,
+    shopifyMarkets
   } = props
   const [clientScriptLoadedState, setClientScriptLoadedState] = React.useState(false)
   const clientScriptLoaded = React.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState])
@@ -78,61 +79,6 @@ export default function NostoProvider(props: NostoProviderProps) {
   // Set responseMode for loading campaigns:
   const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML"
 
-  // RecommendationComponent for client-side rendering:
-  function RecommendationComponentWrapper(props: { nostoRecommendation: Recommendation }) {
-    return React.cloneElement(recommendationComponent!, {
-      // eslint-disable-next-line react/prop-types
-      nostoRecommendation: props.nostoRecommendation,
-    })
-  }
-
-  // custom hook for rendering campaigns (CSR/SSR):
-  const [pageType, setPageType] = useState("")
-  function useRenderCampaigns(type: string = "") {
-    const placementRefs = useRef<Record<string, Root>>({})
-    useEffect(() => {
-      if (pageType !== type) {
-        setPageType(type)
-      }
-    }, [])
-
-    const pageTypeUpdated = type === pageType
-
-    function renderCampaigns(
-      data: {
-        recommendations: Record<string, Recommendation>
-        campaigns: {
-          recommendations: Record<string, Recommendation>
-        }
-      },
-      api: NostoClient
-    ) {
-      if (responseMode == "HTML") {
-        // inject content campaigns as usual:
-        api.placements.injectCampaigns(data.recommendations)
-      } else {
-        // render recommendation component into placements:
-        const recommendations = data.campaigns.recommendations
-        for (const key in recommendations) {
-          const recommendation = recommendations[key]
-          const placementSelector = "#" + key
-          const placement = () => document.querySelector(placementSelector)
-
-          if (placement()) {
-            if (!placementRefs.current[key]) placementRefs.current[key] = createRoot(placement()!)
-            const root = placementRefs.current[key]!
-            root.render(
-              <RecommendationComponentWrapper
-                nostoRecommendation={recommendation}
-              ></RecommendationComponentWrapper>
-            )
-          }
-        }
-      }
-    }
-    return { renderCampaigns, pageTypeUpdated }
-  }
-
   useEffect(() => {
     if (!window.nostojs) {
       window.nostojs = (cb: (api: NostoClient) => void) => {
@@ -141,7 +87,7 @@ export default function NostoProvider(props: NostoProviderProps) {
       window.nostojs(api => api.setAutoLoad(false))
     }
 
-    if (!document.querySelectorAll("[nosto-client-script]").length && !shopifyMarkets) {
+    if (!isNostoLoaded() && !shopifyMarkets) {
       const script = document.createElement("script")
       script.type = "text/javascript"
       script.src = "//" + (host || "connect.nosto.com") + "/include/" + account
@@ -209,9 +155,7 @@ export default function NostoProvider(props: NostoProviderProps) {
         clientScriptLoaded,
         currentVariation,
         responseMode,
-        recommendationComponent,
-        useRenderCampaigns,
-        pageType,
+        recommendationComponent
       }}
     >
       {children}

package/src/components/NostoSearch.tsx

@@ -1,5 +1,4 @@
-import { useNostoContext } from "./context"
-import { useNostoApi } from "../utils/hooks"
+import { useRenderCampaigns, useNostoApi } from "../hooks"
 
 /**
  * You can personalise your search pages by using the NostoSearch component.
@@ -26,9 +25,7 @@ import { useNostoApi } from "../utils/hooks"
  */
 export default function NostoSearch(props: { query: string; placements?: string[] }) {
   const { query, placements } = props
-  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
-
-  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("search")
+  const { renderCampaigns } = useRenderCampaigns()
 
   useNostoApi(
     async (api) => {
@@ -36,19 +33,9 @@ export default function NostoSearch(props: { query: string; placements?: string[
         .viewSearch(query)
         .setPlacements(placements || api.placements.getPlacements())
         .load()
-      renderCampaigns(data, api)
+      renderCampaigns(data)
     },
-    [query, recommendationComponent, pageTypeUpdated]
-  )
-
-  return (
-    <>
-      <div className="nosto_page_type" style={{ display: "none" }}>
-        search
-      </div>
-      <div className="nosto_search" style={{ display: "none" }}>
-        {query}
-      </div>
-    </>
+    [query]
   )
+  return null
 }

package/src/components/NostoSession.tsx

@@ -1,7 +1,6 @@
-import { useNostoContext } from "./context"
+import { useNostoContext, useDeepCompareEffect } from "../hooks"
 import { Cart, Customer } from "../types"
 import { snakeize } from "../utils/snakeize"
-import { useDeepCompareEffect } from "../utils/hooks"
 
 /**
  * Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change.
@@ -13,8 +12,8 @@ import { useDeepCompareEffect } from "../utils/hooks"
  *
  * @group Essential Functions
  */
-export default function NostoSession(props: { cart: Cart; customer: Customer }) {
-  const { cart, customer } = props
+export default function NostoSession(props?: { cart?: Cart; customer?: Customer }) {
+  const { cart, customer } = props ?? {}
   const { clientScriptLoaded } = useNostoContext()
 
   useDeepCompareEffect(() => {

package/src/components/helpers.ts

@@ -0,0 +1,3 @@
+export function isNostoLoaded() {
+  return typeof window.nosto !== "undefined"    
+}

package/src/components/index.ts

@@ -8,7 +8,4 @@ export { default as NostoOrder } from "./NostoOrder"
 export { default as NostoHome } from "./NostoHome"
 export { default as NostoPlacement } from "./NostoPlacement"
 export { default as NostoProvider } from "./NostoProvider"
-
-export { NostoContext, useNostoContext } from "./context"
-export type { NostoContextType } from "./context"
 export { default as NostoSession } from "./NostoSession"

package/src/context.ts

@@ -0,0 +1,31 @@
+import { createContext } from "react"
+import { Recommendation, RenderMode } from "./types"
+
+type AnyFunction = (...args: unknown[]) => unknown
+
+export type RecommendationComponent = React.ReactElement<{
+  nostoRecommendation: Recommendation
+}>
+
+/**
+ * @group Types
+ */
+export interface NostoContextType {
+  account: string
+  clientScriptLoaded: boolean
+  currentVariation?: string
+  renderFunction?: AnyFunction
+  responseMode: RenderMode
+  recommendationComponent?: RecommendationComponent
+}
+
+/**
+ * @group Essential Functions
+ */
+export const NostoContext = createContext<NostoContextType>({
+  account: "",
+  currentVariation: "",
+  responseMode: "HTML",
+  clientScriptLoaded: false
+})
+

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useDeepCompareEffect } from "./useDeepCompareEffect"
+export { useNostoApi } from "./useNostoApi"
+export { useNostoContext } from "./useNostoContext"
+export { useRenderCampaigns } from "./useRenderCampaigns"

package/src/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef, useMemo } from "react"
+import { deepCompare } from "../utils/compare"
+
+export function useDeepCompareEffect(
+  callback: Parameters<typeof useEffect>[0],
+  dependencies: Parameters<typeof useEffect>[1]
+): ReturnType<typeof useEffect> {
+  return useEffect(callback, useDeepCompareMemoize(dependencies))
+}
+
+function useDeepCompareMemoize<T>(value: T) {
+  const ref = useRef<T>(value);
+  const signalRef = useRef<number>(0)
+
+  if (!deepCompare(value, ref.current)) {
+    ref.current = value
+    signalRef.current += 1
+  }
+
+  return useMemo(() => ref.current, [signalRef.current])
+}

package/src/hooks/useNostoApi.ts

@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { useNostoContext } from "./useNostoContext"
+import { NostoClient } from "../types"
+import { useDeepCompareEffect } from "./useDeepCompareEffect"
+
+export function useNostoApi(
+  cb: (api: NostoClient) => void,
+  deps?: React.DependencyList,
+  flags?: { deep?: boolean }
+): void {
+  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()
+  const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
+
+  useEffectFn(() => {
+    if (clientScriptLoaded) {
+      window.nostojs(api => {
+        api.defaultSession().setVariation(currentVariation!).setResponseMode(responseMode)
+        cb(api)
+      })
+    }
+  }, [clientScriptLoaded, currentVariation, responseMode, ...(deps ?? [])])
+}

package/src/hooks/useNostoContext.ts

@@ -0,0 +1,18 @@
+import { useContext } from "react"
+import { NostoContext, NostoContextType } from "../context"
+
+/**
+ * A hook that allows you to access the NostoContext and retrieve Nosto-related data from it in React components.
+ *
+ * @group Essential Functions
+ */
+export function useNostoContext(): NostoContextType {
+    const context = useContext(NostoContext)
+  
+    if (!context) {
+      throw new Error("No nosto context found")
+    }
+  
+    return context
+  }
+  

package/src/hooks/useRenderCampaigns.tsx

@@ -0,0 +1,60 @@
+import { useRef } from "react"
+import { createRoot, Root } from "react-dom/client"
+import { ActionResponse, Recommendation } from "../types"
+import { useNostoContext } from "./useNostoContext"
+import React from "react"
+import { RecommendationComponent } from "../context"
+
+// RecommendationComponent for client-side rendering:
+function RecommendationComponentWrapper(props: { 
+    recommendationComponent: RecommendationComponent,
+    nostoRecommendation: Recommendation }) {
+
+  return React.cloneElement(props.recommendationComponent, {
+    // eslint-disable-next-line react/prop-types
+    nostoRecommendation: props.nostoRecommendation,
+  })
+}
+
+function injectCampaigns(data: ActionResponse) {
+  if (!window.nostojs) {
+    throw new Error("Nosto has not yet been initialized")
+  }
+  window.nostojs(api => {
+    api.placements.injectCampaigns(data.recommendations)
+  })
+}
+
+export function useRenderCampaigns() {
+  const { responseMode, recommendationComponent } = useNostoContext()
+  const placementRefs = useRef<Record<string, Root>>({})
+
+  if (responseMode == "HTML") {
+    return { renderCampaigns: injectCampaigns }
+  }
+
+  function renderCampaigns(data: ActionResponse) {
+    // render recommendation component into placements:
+    const recommendations = data.campaigns?.recommendations ?? {}
+    for (const key in recommendations) {
+      const recommendation = recommendations[key] as Recommendation
+      const placementSelector = "#" + key
+      const placementElement = document.querySelector(placementSelector)
+
+      if (placementElement) {
+        if (!placementRefs.current[key]) {
+          placementRefs.current[key] = createRoot(placementElement)
+        }
+        const root = placementRefs.current[key]!
+        root.render(
+          <RecommendationComponentWrapper
+            recommendationComponent={recommendationComponent!}
+            nostoRecommendation={recommendation}
+          ></RecommendationComponentWrapper>
+        )
+      }
+    }
+  }
+
+  return { renderCampaigns }
+}

package/src/index.ts

@@ -1,3 +1,4 @@
-export type { Buyer, Cart, Customer, Item, Product, Purchase, Recommendation, SKU } from "./types"
-
+export type { Cart, Customer, Product, Order, Recommendation } from "./types"
 export * from "./components"
+export { NostoContext, type NostoContextType } from "./context"
+export { useNostoContext } from "./hooks/useNostoContext"