@nosto/nosto-react 2.0.0 → 2.2.0

package/src/components/NostoProvider.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, isValidElement } from "react"
+import { isValidElement } from "react"
 import { NostoContext, RecommendationComponent } from "../context"
-import { NostoClient } from "../types"
-import { isNostoLoaded } from "./helpers"
+import { useLoadClientScript } from "../hooks"
+import type { ReactElement } from "react"
+import { ScriptLoadOptions } from "../hooks/scriptLoader"
 
 /**
  * @group Components
@@ -22,7 +23,7 @@ export interface NostoProviderProps {
   /**
    * children
    */
-  children: React.ReactElement | React.ReactElement[]
+  children: ReactElement | ReactElement[]
   /**
    * Indicates if merchant uses multiple currencies
    */
@@ -38,6 +39,14 @@ export interface NostoProviderProps {
     language?: string
     marketId?: string | number
   }
+  /**
+   * Load nosto script (should be false if loading the script outside of nosto-react)
+   */
+  loadScript?: boolean
+  /**
+   * Custom script loader
+   */
+  scriptLoader?: (scriptSrc: string, options?: ScriptLoadOptions) => Promise<void>
 }
 
 /**
@@ -65,88 +74,23 @@ export default function NostoProvider(props: NostoProviderProps) {
   const {
     account,
     multiCurrency = false,
-    host,
     children,
     recommendationComponent,
-    shopifyMarkets
   } = props
-  const [clientScriptLoadedState, setClientScriptLoadedState] = React.useState(false)
-  const clientScriptLoaded = React.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState])
 
   // Pass currentVariation as empty string if multiCurrency is disabled
   const currentVariation = multiCurrency ? props.currentVariation : ""
 
-  // Set responseMode for loading campaigns:
-  const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML"
-
-  useEffect(() => {
-    if (!window.nostojs) {
-      window.nostojs = (cb: (api: NostoClient) => void) => {
-        (window.nostojs.q = window.nostojs.q || []).push(cb)
-      }
-      window.nostojs(api => api.setAutoLoad(false))
-    }
-
-    if (!isNostoLoaded() && !shopifyMarkets) {
-      const script = document.createElement("script")
-      script.type = "text/javascript"
-      script.src = "//" + (host || "connect.nosto.com") + "/include/" + account
-      script.async = true
-      script.setAttribute("nosto-client-script", "")
-
-      script.onload = () => {
-        if (typeof jest !== "undefined") {
-          window.nosto?.reload({
-            site: "localhost",
-          })
-        }
-        setClientScriptLoadedState(true)
-      }
-      document.body.appendChild(script)
-    }
-
-    // Enable Shopify markets functionality:
-    if (shopifyMarkets) {
-      const existingScript = document.querySelector("[nosto-client-script]")
-      const nostoSandbox = document.querySelector("#nosto-sandbox")
-
-      if (
-        !existingScript ||
-        existingScript?.getAttribute("nosto-language") !== shopifyMarkets?.language ||
-        existingScript?.getAttribute("nosto-market-id") !== shopifyMarkets?.marketId
-      ) {
-        if (clientScriptLoadedState) {
-          setClientScriptLoadedState(false)
-        }
-
-        existingScript?.parentNode?.removeChild(existingScript)
-        nostoSandbox?.parentNode?.removeChild(nostoSandbox)
+  if (recommendationComponent && !isValidElement(recommendationComponent)) {
+    throw new Error(
+      "The recommendationComponent prop must be a valid React element. Please provide a valid React element."
+    )
+  }
 
-        const script = document.createElement("script")
-        script.type = "text/javascript"
-        script.src =
-          "//" +
-          (host || "connect.nosto.com") +
-          `/script/shopify/market/nosto.js?merchant=${account}&market=${
-            shopifyMarkets.marketId || ""
-          }&locale=${shopifyMarkets?.language?.toLowerCase() || ""}`
-        script.async = true
-        script.setAttribute("nosto-client-script", "")
-        script.setAttribute("nosto-language", shopifyMarkets?.language || "")
-        script.setAttribute("nosto-market-id", String(shopifyMarkets?.marketId))
+  // Set responseMode for loading campaigns:
+  const responseMode = recommendationComponent ? "JSON_ORIGINAL" : "HTML"
 
-        script.onload = () => {
-          if (typeof jest !== "undefined") {
-            window.nosto?.reload({
-              site: "localhost",
-            })
-          }
-          setClientScriptLoadedState(true)
-        }
-        document.body.appendChild(script)
-      }
-    }
-  }, [clientScriptLoadedState, shopifyMarkets])
+  const { clientScriptLoaded } = useLoadClientScript(props)
 
   return (
     <NostoContext.Provider

package/src/components/NostoSearch.tsx

@@ -1,5 +1,13 @@
 import { useRenderCampaigns, useNostoApi } from "../hooks"
 
+/**
+ * @group Components
+ */
+export type NostoSearchProps = {
+  query: string
+  placements?: string[]
+}
+
 /**
  * You can personalise your search pages by using the NostoSearch component.
  * The component requires that you provide it the current search term.
@@ -23,8 +31,17 @@ import { useRenderCampaigns, useNostoApi } from "../hooks"
  *
  * @group Components
  */
-export default function NostoSearch(props: { query: string; placements?: string[] }) {
-  const { query, placements } = props
+export default function NostoSearch(props: NostoSearchProps) {
+  useNostoSearch(props)
+  return null
+}
+
+/**
+ * You can personalise your search pages by using the useNostoSearch hook.
+ * 
+ * @group Hooks
+ */
+export function useNostoSearch({ query, placements }: NostoSearchProps) {
   const { renderCampaigns } = useRenderCampaigns()
 
   useNostoApi(
@@ -37,5 +54,4 @@ export default function NostoSearch(props: { query: string; placements?: string[
     },
     [query]
   )
-  return null
 }

package/src/components/NostoSession.tsx

@@ -1,6 +1,18 @@
 import { useNostoContext, useDeepCompareEffect } from "../hooks"
-import { Cart, Customer } from "../types"
+import { Cart as CartSnakeCase, Customer as CustomerSnakeCase } from "../types"
 import { snakeize } from "../utils/snakeize"
+import { ToCamelCase } from "../utils/types"
+
+type Cart = CartSnakeCase | ToCamelCase<CartSnakeCase>
+type Customer = CustomerSnakeCase | ToCamelCase<CustomerSnakeCase>
+
+/**
+ * @group Components
+ */
+export type NostoSessionProps = {
+  cart?: Cart
+  customer?: Customer
+}
 
 /**
  * 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.
@@ -10,10 +22,19 @@ import { snakeize } from "../utils/snakeize"
  *
  * The cart prop requires a value that adheres to the type `Cart`, while the customer prop requires a value that adheres to the type `Customer`.
  *
- * @group Essential Functions
+ * @group Components
+ */
+export default function NostoSession(props?: NostoSessionProps) {
+  useNostoSession(props)
+  return null
+}
+
+/**
+ * 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.
+ * 
+ * @group Hooks
  */
-export default function NostoSession(props?: { cart?: Cart; customer?: Customer }) {
-  const { cart, customer } = props ?? {}
+export function useNostoSession({ cart, customer }: NostoSessionProps = {}) {
   const { clientScriptLoaded } = useNostoContext()
 
   useDeepCompareEffect(() => {
@@ -28,10 +49,9 @@ export default function NostoSession(props?: { cart?: Cart; customer?: Customer
           .setCart(currentCart)
           .setCustomer(currentCustomer)
           .viewOther()
-          .load()
+          .load({ skipPageViews: true })
       })
     }
   }, [clientScriptLoaded, cart, customer])
 
-  return <></>
 }

package/src/components/index.ts

@@ -1,11 +1,11 @@
-export { default as Nosto404 } from "./Nosto404"
-export { default as NostoOther } from "./NostoOther"
-export { default as NostoCheckout } from "./NostoCheckout"
-export { default as NostoProduct } from "./NostoProduct"
-export { default as NostoCategory } from "./NostoCategory"
-export { default as NostoSearch } from "./NostoSearch"
-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 { default as NostoSession } from "./NostoSession"
+export { default as Nosto404, useNosto404, type Nosto404Props } from "./Nosto404"
+export { default as NostoOther, useNostoOther, type NostoOtherProps } from "./NostoOther"
+export { default as NostoCheckout, useNostoCheckout, type NostoCheckoutProps } from "./NostoCheckout"
+export { default as NostoProduct, useNostoProduct, type NostoProductProps } from "./NostoProduct"
+export { default as NostoCategory, useNostoCategory, type NostoCategoryProps } from "./NostoCategory"
+export { default as NostoSearch, useNostoSearch, type NostoSearchProps } from "./NostoSearch"
+export { default as NostoOrder, useNostoOrder, type NostoOrderProps } from "./NostoOrder"
+export { default as NostoHome, useNostoHome, type NostoHomeProps } from "./NostoHome"
+export { default as NostoPlacement, type NostoPlacementProps } from "./NostoPlacement"
+export { default as NostoProvider, type NostoProviderProps } from "./NostoProvider"
+export { default as NostoSession, useNostoSession, type NostoSessionProps } from "./NostoSession"

package/src/context.ts

@@ -1,9 +1,9 @@
-import { createContext } from "react"
+import { createContext, ReactElement } from "react"
 import { Recommendation, RenderMode } from "./types"
 
 type AnyFunction = (...args: unknown[]) => unknown
 
-export type RecommendationComponent = React.ReactElement<{
+export type RecommendationComponent = ReactElement<{
   nostoRecommendation: Recommendation
 }>
 

package/src/hooks/index.ts

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

package/src/hooks/scriptLoader.ts

@@ -0,0 +1,30 @@
+export default function scriptLoader(scriptSrc: string, options?: ScriptLoadOptions): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script")
+    script.type = "text/javascript"
+    script.src = scriptSrc
+    script.async = true
+    script.onload = () => resolve()
+    script.onerror = () => reject()
+    Object.entries(options?.attributes ?? {}).forEach(([k, v]) => script.setAttribute(k, v))
+    if (options?.position === "head") {
+      document.head.appendChild(script)    
+    } else {
+      document.body.appendChild(script)    
+    }
+  })
+}
+
+/**
+ * @group Types
+ */
+export type ScriptLoadOptions = {
+  /**
+   * Indicates the position of the script, default is "body"
+   */
+  position?: "head" | "body"
+  /**
+   * Indicates the attributes of the script element
+   */
+  attributes?: Record<string, string>    
+}  

package/src/hooks/useLoadClientScript.ts

@@ -0,0 +1,84 @@
+import { useState, useEffect } from "react"
+import { isNostoLoaded } from "../components/helpers"
+import type { NostoClient } from "../types"
+import type { NostoProviderProps } from "../components/NostoProvider"
+import scriptLoaderFn from "./scriptLoader"
+
+type NostoScriptProps = Pick<NostoProviderProps, "account" | "host" | "shopifyMarkets" | "loadScript" | "scriptLoader">
+
+export function useLoadClientScript(props: NostoScriptProps) {
+  const { host = "connect.nosto.com", scriptLoader = scriptLoaderFn, account, shopifyMarkets, loadScript = true } = props
+  const [clientScriptLoaded, setClientScriptLoaded] = useState(false)
+
+  useEffect(() => {
+    function scriptOnload() {
+      // Override for production scripts to work in unit tests
+      if ("nostoReactTest" in window) {
+        window.nosto?.reload({
+          site: "localhost"
+        })
+      }
+      setClientScriptLoaded(true)
+    }
+
+    // Create and append script element
+    async function injectScriptElement(urlPartial: string, extraAttributes: Record<string, string> = {}) {
+      const scriptSrc = `//${host}${urlPartial}`
+      const attributes = { "nosto-client-script": "", ...extraAttributes }
+      await scriptLoader(scriptSrc, { attributes })
+      scriptOnload()
+    }
+
+    function prepareShopifyMarketsScript() {
+      const existingScript = document.querySelector("[nosto-client-script]")
+
+      const marketId = String(shopifyMarkets?.marketId || "")
+      const language = shopifyMarkets?.language || ""
+
+      const attributeMismatch =
+        existingScript?.getAttribute("nosto-language") !== language ||
+        existingScript?.getAttribute("nosto-market-id") !== marketId
+
+      if (!existingScript || attributeMismatch) {
+        if (clientScriptLoaded) {
+          setClientScriptLoaded(false)
+        }
+
+        const nostoSandbox = document.querySelector("#nosto-sandbox")
+
+        existingScript?.parentNode?.removeChild(existingScript)
+        nostoSandbox?.parentNode?.removeChild(nostoSandbox)
+
+        const urlPartial =
+          `/script/shopify/market/nosto.js?merchant=${account}&market=${marketId}&locale=${language.toLowerCase()}`
+        injectScriptElement(urlPartial, { "nosto-language": language, "nosto-market-id": marketId })
+      }
+    }
+
+    // Load Nosto API stub
+    if (!window.nostojs) {
+      window.nostojs = (cb: (api: NostoClient) => void) => {
+        (window.nostojs.q = window.nostojs.q || []).push(cb)
+      }
+      window.nostojs(api => api.setAutoLoad(false))
+    }
+
+    if (!loadScript) {
+      window.nosto ? scriptOnload() : window.nostojs(scriptOnload)
+      return
+    }
+
+    // Load Nosto client script if not already loaded externally
+    if (!isNostoLoaded() && !shopifyMarkets) {
+      const urlPartial = `/include/${account}`
+      injectScriptElement(urlPartial)
+    }
+
+    // Load Shopify Markets scripts
+    if (shopifyMarkets) {
+      prepareShopifyMarketsScript()
+    }
+  }, [shopifyMarkets?.marketId, shopifyMarkets?.language])
+
+  return { clientScriptLoaded }
+}

package/src/hooks/useNostoApi.ts

@@ -1,11 +1,11 @@
-import { useEffect } from "react"
+import { DependencyList, 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,
+  deps?: DependencyList,
   flags?: { deep?: boolean }
 ): void {
   const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext()

package/src/hooks/useNostoContext.ts

@@ -7,12 +7,6 @@ import { NostoContext, NostoContextType } from "../context"
  * @group Essential Functions
  */
 export function useNostoContext(): NostoContextType {
-    const context = useContext(NostoContext)
-  
-    if (!context) {
-      throw new Error("No nosto context found")
-    }
-  
-    return context
+    return useContext(NostoContext)
   }
   

package/src/hooks/useRenderCampaigns.tsx

@@ -1,8 +1,7 @@
-import { useRef } from "react"
+import { cloneElement, 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:
@@ -10,7 +9,7 @@ function RecommendationComponentWrapper(props: {
     recommendationComponent: RecommendationComponent,
     nostoRecommendation: Recommendation }) {
 
-  return React.cloneElement(props.recommendationComponent, {
+  return cloneElement(props.recommendationComponent, {
     // eslint-disable-next-line react/prop-types
     nostoRecommendation: props.nostoRecommendation,
   })

package/src/index.ts

@@ -1,4 +1,5 @@
 export type { Cart, Customer, Product, Order, Recommendation } from "./types"
 export * from "./components"
+export { type ScriptLoadOptions } from "./hooks/scriptLoader"
 export { NostoContext, type NostoContextType } from "./context"
 export { useNostoContext } from "./hooks/useNostoContext"

package/src/utils/snakeize.ts

@@ -1,4 +1,8 @@
-export function snakeize<T>(obj: T): T {
+import { ToSnakeCase } from "./types"
+
+// signature override
+export function snakeize<T>(obj: T): ToSnakeCase<T>
+export function snakeize<T>(obj: T): unknown {
   if (!obj || typeof obj !== "object") {
     return obj
   }

package/src/utils/types.ts

@@ -0,0 +1,29 @@
+type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
+  ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
+  : S
+
+// Recursive type to apply the conversion to all keys in an object type
+export type ToCamelCase<T> = T extends (infer U)[]
+  ? ToCamelCase<U>[]
+  : T extends Date ? T
+  : T extends object
+  ? {
+      [K in keyof T as SnakeToCamelCase<K & string>]: ToCamelCase<T[K]>
+    }
+  : T
+
+type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}`
+  ? U extends Uncapitalize<U>
+    ? `${Lowercase<T>}${CamelToSnakeCase<U>}`
+    : `${Lowercase<T>}_${CamelToSnakeCase<Uncapitalize<U>>}`
+  : S
+
+// Recursive type to apply the conversion to all keys in an object type
+export type ToSnakeCase<T> = T extends (infer U)[]
+  ? ToSnakeCase<U>[]
+  : T extends Date ? T
+  : T extends object
+  ? {
+      [K in keyof T as CamelToSnakeCase<K & string>]: ToSnakeCase<T[K]>
+    }
+  : T