@nosto/nosto-react 2.2.1 → 2.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {
@@ -23,12 +23,18 @@
     "prettier": "prettier '{src,spec}/**' --list-different",
     "prettier:fix": "prettier '{src,spec}/**' --write",
     "test": "vitest run --silent",
+    "test-loud": "vitest run",
     "typedoc": "typedoc src/index.ts"
   },
   "files": [
     "dist",
     "src"
   ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@nosto/nosto-js": "*"
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
@@ -36,22 +42,19 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/user-event": "^4.1.1",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.53.0",
-    "eslint-plugin-promise": "^6.1.1",
+    "eslint": "^9.13.0",
+    "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
-    "prettier": "^2.0.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^6.25.1",
-    "react-router-dom": "^6.25.1",
-    "rimraf": "^3.0.2",
-    "typedoc": "^0.24.1",
-    "typescript": "^4.6.3",
+    "prettier": "^3.3.3",
+    "react-router": "^7.0.1",
+    "react-router-dom": "^7.0.1",
+    "rimraf": "^6.0.1",
+    "typedoc": "^0.27.2",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.13.0",
     "vite": "^5.2.10",
-    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-dts": "^4.2.2",
     "vitest": "^2.0.5"
   },
   "main": "./dist/index.umd.js",
@@ -60,9 +63,9 @@
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./shopify-hydrogen": "./dist/index.es.js"
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
   },
   "bugs": {
     "url": "https://github.com/Nosto/nosto-react/issues"

package/src/components/Nosto404.tsx

@@ -1,9 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type Nosto404Props = { placements?: string[] }
+import { Nosto404Props, useNosto404 } from "../hooks/useNosto404"
 
 /**
  * You can personalise your cart and checkout pages by using the `Nosto404` component.
@@ -25,25 +20,7 @@ export type Nosto404Props = { placements?: string[] }
  *
  * @group Components
  */
-export default function Nosto404(props: Nosto404Props) {
+export function Nosto404(props: Nosto404Props) {
   useNosto404(props)
   return null
 }
-
-/**
- * You can personalise your cart and checkout pages by using the `useNosto404` hook.
- * 
- * @group Hooks
- */
-export function useNosto404(props?: Nosto404Props) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewNotFound()
-        .setPlacements(props?.placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    })
-}

package/src/components/NostoCategory.tsx

@@ -1,12 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoCategoryProps = {
-  category: string
-  placements?: string[]
-}
+import { NostoCategoryProps, useNostoCategory } from "../hooks/useNostoCategory"
 
 /**
  * You can personalise your category and collection pages by using the NostoCategory component.
@@ -30,27 +22,7 @@ export type NostoCategoryProps = {
  *
  * @group Components
  */
-export default function NostoCategory(props: NostoCategoryProps) {
+export function NostoCategory(props: NostoCategoryProps) {
   useNostoCategory(props)
   return null
 }
-
-/**
- * You can personalise your category and collection pages by using the useNostoCategory hook.
- * 
- * @group Hooks
- */
-export function useNostoCategory({ category, placements }: NostoCategoryProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewCategory(category)
-        .setPlacements(placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    },
-    [category]
-  )
-}

package/src/components/NostoCheckout.tsx

@@ -1,9 +1,4 @@
-import { useNostoApi, useRenderCampaigns } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoCheckoutProps = { placements?: string[] }
+import { NostoCheckoutProps, useNostoCheckout } from "../hooks/useNostoCheckout"
 
 /**
  * You can personalise your cart and checkout pages by using the NostoCheckout component.
@@ -24,25 +19,7 @@ export type NostoCheckoutProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoCheckout(props: NostoCheckoutProps) {
+export function NostoCheckout(props: NostoCheckoutProps) {
   useNostoCheckout(props)
   return null
 }
-
-/**
- * You can personalise your cart and checkout pages by using the useNostoCheckout hook.
- * 
- * @group Hooks
- */
-export function useNostoCheckout(props?: NostoCheckoutProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewCart()
-        .setPlacements(props?.placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    })
-}

package/src/components/NostoHome.tsx

@@ -1,9 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoHomeProps = { placements?: string[] }
+import { NostoHomeProps, useNostoHome } from "../hooks/useNostoHome"
 
 /**
  * The `NostoHome` component must be used to personalise the home page. The component does not require any props.
@@ -28,26 +23,7 @@ export type NostoHomeProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoHome(props: NostoHomeProps) {
+export function NostoHome(props: NostoHomeProps) {
   useNostoHome(props)
   return null
 }
-
-/**
- * You can personalise your home page by using the useNostoHome hook.
- * 
- * @group Hooks
- */
-export function useNostoHome(props?: NostoHomeProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewFrontPage()
-        .setPlacements(props?.placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    }
-  )
-}

package/src/components/NostoOrder.tsx

@@ -1,14 +1,4 @@
-import { Order } from "../types"
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-import { snakeize } from "../utils/snakeize"
-
-/**
- * @group Components
- */
-export type NostoOrderProps = { 
-  order: Order
-  placements?: string[]
-}
+import { NostoOrderProps, useNostoOrder } from "../hooks/useNostoOrder"
 
 /**
  * You can personalise your order-confirmation/thank-you page by using the `NostoOrder` component.
@@ -29,28 +19,7 @@ export type NostoOrderProps = {
  *
  * @group Components
  */
-export default function NostoOrder(props: NostoOrderProps) {
+export function NostoOrder(props: NostoOrderProps) {
   useNostoOrder(props)
   return null
 }
-
-/**
- * You can personalise your order-confirmation/thank-you page by using the `useNostoOrder` hook.
- * 
- * @group Hooks
- */
-export function useNostoOrder({ order, placements }: NostoOrderProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .addOrder(snakeize(order))
-        .setPlacements(placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    },
-    [order],
-    { deep: true }
-  )
-}

package/src/components/NostoOther.tsx

@@ -1,9 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoOtherProps = { placements?: string[] }
+import { NostoOtherProps, useNostoOther } from "../hooks/useNostoOther"
 
 /**
  * You can personalise your miscellaneous pages by using the NostoOther component.
@@ -24,25 +19,7 @@ export type NostoOtherProps = { placements?: string[] }
  *
  * @group Components
  */
-export default function NostoOther(props: NostoOtherProps) {
+export function NostoOther(props: NostoOtherProps) {
   useNostoOther(props)
   return null
 }
-
-/**
- * You can personalise your miscellaneous pages by using the useNostoOther hook.
- * 
- * @group Hooks
- */
-export function useNostoOther(props?: NostoOtherProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewOther()
-        .setPlacements(props?.placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    })
-}

package/src/components/NostoPlacement.tsx

@@ -16,6 +16,6 @@ export type NostoPlacementProps = { id: string; pageType?: string }
  *
  * @group Components
  */
-export default function NostoPlacement({ id, pageType }: NostoPlacementProps) {
+export function NostoPlacement({ id, pageType }: NostoPlacementProps) {
   return <div className="nosto_element" id={id} key={id + (pageType || "")} />
 }

package/src/components/NostoProduct.tsx

@@ -1,14 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-import { Product } from "../types"
-
-/**
- * @group Components
- */
-export type NostoProductProps = {
-  product: string
-  tagging?: Product
-  placements?: string[]
-}
+import { NostoProductProps, useNostoProduct } from "../hooks/useNostoProduct"
 
 /**
  * The NostoProduct component must be used to personalise the product page.
@@ -34,27 +24,7 @@ export type NostoProductProps = {
  *
  * @group Components
  */
-export default function NostoProduct(props: NostoProductProps) {
+export function NostoProduct(props: NostoProductProps) {
   useNostoProduct(props)
   return null
 }
-
-/**
- * You can personalise your product pages by using the useNostoProduct hook.
- * 
- * @group Hooks
- */
-export function useNostoProduct({ product, tagging, placements }: NostoProductProps) {
-  const { renderCampaigns } = useRenderCampaigns()
-
-  useNostoApi(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewProduct(tagging ?? product)
-        .setPlacements(placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    },
-    [product, tagging?.selected_sku_id]
-  )
-}

package/src/components/NostoProvider.tsx

@@ -1,8 +1,9 @@
 import { isValidElement } from "react"
 import { NostoContext, RecommendationComponent } from "../context"
-import { useLoadClientScript } from "../hooks"
 import type { ReactNode } from "react"
 import { ScriptLoadOptions } from "../hooks/scriptLoader"
+import { useLoadClientScript } from "../hooks/useLoadClientScript"
+import { nostojs } from "@nosto/nosto-js"
 
 /**
  * @group Components
@@ -70,13 +71,8 @@ export interface NostoProviderProps {
  *
  * @group Components
  */
-export default function NostoProvider(props: NostoProviderProps) {
-  const {
-    account,
-    multiCurrency = false,
-    children,
-    recommendationComponent,
-  } = props
+export function NostoProvider(props: NostoProviderProps) {
+  const { account, multiCurrency = false, children, recommendationComponent } = props
 
   // Pass currentVariation as empty string if multiCurrency is disabled
   const currentVariation = multiCurrency ? props.currentVariation : ""
@@ -93,7 +89,7 @@ export default function NostoProvider(props: NostoProviderProps) {
   const { clientScriptLoaded } = useLoadClientScript(props)
 
   if (clientScriptLoaded) {
-    window.nostojs(api => {
+    nostojs(api => {
       api.defaultSession().setVariation(currentVariation!).setResponseMode(responseMode)
     })
   }

package/src/components/NostoSearch.tsx

@@ -1,12 +1,4 @@
-import { useRenderCampaigns, useNostoApi } from "../hooks"
-
-/**
- * @group Components
- */
-export type NostoSearchProps = {
-  query: string
-  placements?: string[]
-}
+import { NostoSearchProps, useNostoSearch } from "../hooks/useNostoSearch"
 
 /**
  * You can personalise your search pages by using the NostoSearch component.
@@ -31,27 +23,7 @@ export type NostoSearchProps = {
  *
  * @group Components
  */
-export default function NostoSearch(props: NostoSearchProps) {
+export 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(
-    async (api) => {
-      const data = await api.defaultSession()
-        .viewSearch(query)
-        .setPlacements(placements || api.placements.getPlacements())
-        .load()
-      renderCampaigns(data)
-    },
-    [query]
-  )
-}

package/src/components/NostoSession.tsx

@@ -1,18 +1,4 @@
-import { useNostoContext, useDeepCompareEffect } from "../hooks"
-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
-}
+import { NostoSessionProps, useNostoSession } from "../hooks/useNostoSession"
 
 /**
  * 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.
@@ -24,33 +10,7 @@ export type NostoSessionProps = {
  *
  * @group Components
  */
-export default function NostoSession(props?: NostoSessionProps) {
+export 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 function useNostoSession({ cart, customer }: NostoSessionProps = {}) {
-  const { clientScriptLoaded } = useNostoContext()
-
-  useDeepCompareEffect(() => {
-    const currentCart = cart ? snakeize(cart) : undefined
-    const currentCustomer = customer ? snakeize(customer) : undefined
-
-    if (clientScriptLoaded) {
-      window.nostojs(api => {
-        api
-          .defaultSession()
-          .setCart(currentCart)
-          .setCustomer(currentCustomer)
-          .viewOther()
-          .load({ skipPageViews: true })
-      })
-    }
-  }, [clientScriptLoaded, cart, customer])
-
-}

package/src/context.ts

@@ -1,5 +1,6 @@
 import { createContext, ReactElement } from "react"
-import { Recommendation, RenderMode } from "./types"
+import { Recommendation } from "./types"
+import { RenderMode } from "@nosto/nosto-js/client"
 
 type AnyFunction = (...args: unknown[]) => unknown
 
@@ -28,4 +29,3 @@ export const NostoContext = createContext<NostoContextType>({
   responseMode: "HTML",
   clientScriptLoaded: false
 })
-

package/src/hooks/scriptLoader.ts

@@ -8,9 +8,9 @@ export default function scriptLoader(scriptSrc: string, options?: ScriptLoadOpti
     script.onerror = () => reject()
     Object.entries(options?.attributes ?? {}).forEach(([k, v]) => script.setAttribute(k, v))
     if (options?.position === "head") {
-      document.head.appendChild(script)    
+      document.head.appendChild(script)
     } else {
-      document.body.appendChild(script)    
+      document.body.appendChild(script)
     }
   })
 }
@@ -26,5 +26,5 @@ export type ScriptLoadOptions = {
   /**
    * Indicates the attributes of the script element
    */
-  attributes?: Record<string, string>    
-}  
+  attributes?: Record<string, string>
+}

package/src/hooks/useDeepCompareEffect.ts

@@ -1,10 +1,7 @@
 import { useEffect, useRef, useMemo, type EffectCallback, type DependencyList } from "react"
 import { deepCompare } from "../utils/compare"
 
-export function useDeepCompareEffect(
-  callback: EffectCallback,
-  dependencies: DependencyList
-) {
+export function useDeepCompareEffect(callback: EffectCallback, dependencies: DependencyList) {
   return useEffect(callback, useDeepCompareMemoize(dependencies))
 }
 

package/src/hooks/useLoadClientScript.ts

@@ -1,20 +1,26 @@
 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"
+import { init, initNostoStub, isNostoLoaded, nostojs } from "@nosto/nosto-js"
+import { reloadNosto } from "@nosto/nosto-js/testing"
 
 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 {
+    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({
+        reloadNosto({
           site: "localhost"
         })
       }
@@ -49,29 +55,32 @@ export function useLoadClientScript(props: NostoScriptProps) {
         existingScript?.parentNode?.removeChild(existingScript)
         nostoSandbox?.parentNode?.removeChild(nostoSandbox)
 
-        const urlPartial =
-          `/script/shopify/market/nosto.js?merchant=${account}&market=${marketId}&locale=${language.toLowerCase()}`
+        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))
-    }
+    initNostoStub()
 
     if (!loadScript) {
-      window.nosto ? scriptOnload() : window.nostojs(scriptOnload)
+      nostojs(scriptOnload)
       return
     }
 
+    async function initClientScript() {
+      await init({
+        merchantId: account,
+        options: {
+          attributes: { "nosto-client-script": ""}
+        },
+        scriptLoader
+      })
+      scriptOnload()
+    }
+
     // Load Nosto client script if not already loaded externally
     if (!isNostoLoaded() && !shopifyMarkets) {
-      const urlPartial = `/include/${account}`
-      injectScriptElement(urlPartial)
+      initClientScript()
     }
 
     // Load Shopify Markets scripts
@@ -81,4 +90,4 @@ export function useLoadClientScript(props: NostoScriptProps) {
   }, [shopifyMarkets?.marketId, shopifyMarkets?.language])
 
   return { clientScriptLoaded }
-}
+}

package/src/hooks/useNosto404.tsx

@@ -0,0 +1,25 @@
+import { useNostoApi } from "./useNostoApi"
+import { useRenderCampaigns } from "./useRenderCampaigns"
+
+/**
+ * @group Hooks
+ */
+export type Nosto404Props = { placements?: string[] }
+
+/**
+ * You can personalise your cart and checkout pages by using the `useNosto404` hook.
+ *
+ * @group Hooks
+ */
+export function useNosto404(props?: Nosto404Props) {
+  const { renderCampaigns } = useRenderCampaigns()
+
+  useNostoApi(async api => {
+    const data = await api
+      .defaultSession()
+      .viewNotFound()
+      .setPlacements(props?.placements || api.placements.getPlacements())
+      .load()
+    renderCampaigns(data)
+  })
+}

package/src/hooks/useNostoApi.ts

@@ -1,19 +1,16 @@
 import { DependencyList, useEffect } from "react"
 import { useNostoContext } from "./useNostoContext"
-import { NostoClient } from "../types"
 import { useDeepCompareEffect } from "./useDeepCompareEffect"
+import { nostojs } from "@nosto/nosto-js"
+import { API } from "@nosto/nosto-js/client"
 
-export function useNostoApi(
-  cb: (api: NostoClient) => void,
-  deps?: DependencyList,
-  flags?: { deep?: boolean }
-): void {
+export function useNostoApi(cb: (api: API) => void, deps?: DependencyList, flags?: { deep?: boolean }): void {
   const { clientScriptLoaded } = useNostoContext()
   const useEffectFn = flags?.deep ? useDeepCompareEffect : useEffect
 
   useEffectFn(() => {
     if (clientScriptLoaded) {
-      window.nostojs(cb)
+      nostojs(cb)
     }
   }, [clientScriptLoaded, ...(deps ?? [])])
 }