@nosto/nosto-react 2.3.0 → 2.5.0

package/README.md

@@ -42,8 +42,8 @@ _\*\*Note: The search feature is available when implemented via our code editor.
 
 #### Required versions
 
-- npm: 9.8.1
-- node: v18.18.0
+- npm: 10.9.0
+- node: v22.12.0
 
 ### Installation
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { Cart } from '@nosto/nosto-js/client';
 import { Context } from 'react';
 import { PushedCustomer as Customer } from '@nosto/nosto-js/client';
-import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { WebsiteOrder as Order } from '@nosto/nosto-js/client';
 import { Product } from '@nosto/nosto-js/client';
 import { PushedProduct } from '@nosto/nosto-js/client';
@@ -223,7 +223,7 @@ export declare type NostoOtherProps = {
  *
  * @group Components
  */
-export declare function NostoPlacement({ id, pageType }: NostoPlacementProps): JSX_2.Element;
+export declare function NostoPlacement({ id, pageType }: NostoPlacementProps): JSX.Element;
 
 /**
  * @group Components
@@ -290,7 +290,7 @@ export declare type NostoProductProps = {
  *
  * @group Components
  */
-export declare function NostoProvider(props: NostoProviderProps): JSX_2.Element;
+export declare function NostoProvider(props: NostoProviderProps): JSX.Element;
 
 /**
  * @group Components
@@ -324,8 +324,8 @@ export declare interface NostoProviderProps {
      * Enables Shopify markets with language and market id
      */
     shopifyMarkets?: {
-        language?: string;
-        marketId?: string | number;
+        language: string;
+        marketId: string | number;
     };
     /**
      * Load nosto script (should be false if loading the script outside of nosto-react)

package/dist/index.es.js

@@ -1,351 +1,339 @@
-import { createContext as V, useContext as q, useEffect as E, useRef as P, useMemo as x, cloneElement as F, useState as H, isValidElement as M } from "react";
-import { jsx as R } from "react/jsx-runtime";
-import z from "react-dom";
-const T = V({
+import { createContext as k, useContext as x, useEffect as S, useRef as h, useMemo as I, cloneElement as _, useState as T, isValidElement as D } from "react";
+import { jsx as v } from "react/jsx-runtime";
+import { createRoot as M } from "react-dom/client";
+const O = k({
   account: "",
   currentVariation: "",
   responseMode: "HTML",
   clientScriptLoaded: !1
 });
-function L() {
-  return q(T);
+function P() {
+  return x(O);
 }
-const A = (e) => String(e) === "[object Object]";
-function b(e) {
-  if (!A(e)) return !1;
+const N = (e) => String(e) === "[object Object]";
+function L(e) {
+  if (!N(e)) return !1;
   const t = e.constructor;
   if (t === void 0) return !0;
   const n = t.prototype;
-  return !(!A(n) || !n.hasOwnProperty("isPrototypeOf"));
+  return !(!N(n) || !n.hasOwnProperty("isPrototypeOf"));
 }
-function v(e, t) {
+function y(e, t) {
   if (e === t)
     return !0;
   if (e instanceof Date && t instanceof Date)
     return e.getTime() === t.getTime();
   if (e instanceof Array && t instanceof Array)
-    return e.length !== t.length ? !1 : e.every((n, r) => v(n, t[r]));
-  if (b(e) && b(t)) {
+    return e.length !== t.length ? !1 : e.every((n, o) => y(n, t[o]));
+  if (L(e) && L(t)) {
     const n = Object.entries(e);
-    return n.length !== Object.keys(t).length ? !1 : n.every(([r, o]) => v(o, t[r]));
+    return n.length !== Object.keys(t).length ? !1 : n.every(([o, r]) => y(r, t[o]));
   }
   return !1;
 }
-function $(e, t) {
-  return E(e, U(t));
+function g(e, t) {
+  return S(e, V(t));
 }
-function U(e) {
-  const t = P(e), n = P(0);
-  return v(e, t.current) || (t.current = e, n.current += 1), x(() => t.current, [n.current]);
+function V(e) {
+  const t = h(e), n = h(0);
+  return y(e, t.current) || (t.current = e, n.current += 1), I(() => t.current, [n.current]);
 }
-function D() {
+function j() {
   window.nostojs = window.nostojs ?? function(e) {
     (window.nostojs.q = window.nostojs.q ?? []).push(e);
   };
 }
-function W() {
+function H() {
   return typeof window.nosto < "u";
 }
-const B = {
+const q = {
   production: "https://connect.nosto.com/",
   staging: "https://connect.staging.nosto.com/",
   local: "https://connect.nosto.com/"
 };
-function G(e) {
-  return B[e ?? "production"];
-}
-function J({ merchantId: e, env: t, options: n, scriptLoader: r }) {
-  const o = new URL(`/include/${e}`, G(t));
-  return (r ?? Y)(o.toString(), n);
-}
-function Y(e, t) {
-  return new Promise((n, r) => {
-    const o = document.createElement("script");
-    o.src = e, o.async = !0, o.type = "text/javascript", o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
+function R(e) {
+  return q[e ?? "production"];
+}
+function F({ merchantId: e, env: t, options: n, shopifyInternational: o, scriptLoader: r }) {
+  var c, a;
+  const s = document.querySelector("script[nosto-language], script[nosto-market-id]"), i = String((o == null ? void 0 : o.marketId) || ""), m = (o == null ? void 0 : o.language) || "", C = (s == null ? void 0 : s.getAttribute("nosto-language")) !== m || (s == null ? void 0 : s.getAttribute("nosto-market-id")) !== i;
+  if (!s || C) {
+    const l = document.querySelector("#nosto-sandbox");
+    (c = s == null ? void 0 : s.parentNode) == null || c.removeChild(s), (a = l == null ? void 0 : l.parentNode) == null || a.removeChild(l);
+    const f = new URL("/script/shopify/market/nosto.js", R(t));
+    f.searchParams.append("merchant", e), f.searchParams.append("market", i), f.searchParams.append("locale", m.toLowerCase());
+    const A = {
+      ...n == null ? void 0 : n.attributes,
+      "nosto-language": m,
+      "nosto-market-id": i
+    };
+    return (r ?? E)(f.toString(), { ...n, attributes: A });
+  }
+  return Promise.resolve();
+}
+function z(e) {
+  if (e.shopifyInternational)
+    return F(e);
+  const { merchantId: t, env: n, options: o, scriptLoader: r } = e, c = r ?? E, a = new URL(`/include/${t}`, R(n));
+  return c(a.toString(), o);
+}
+function E(e, t) {
+  return new Promise((n, o) => {
+    const r = document.createElement("script");
+    r.src = e, r.async = !0, r.type = "text/javascript", r.onload = () => n(), r.onerror = () => o(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, a]) => r.setAttribute(c, a)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(r) : document.body.appendChild(r);
   });
 }
 async function w(e) {
   return window.nostojs(e);
 }
-D();
-function d(e, t, n) {
-  const { clientScriptLoaded: r } = L();
-  (n != null && n.deep ? $ : E)(() => {
-    r && w(e);
-  }, [r, ...t ?? []]);
-}
-var O, y = z;
-if (process.env.NODE_ENV === "production")
-  O = y.createRoot, y.hydrateRoot;
-else {
-  var I = y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  O = function(e, t) {
-    I.usingClientEntryPoint = !0;
-    try {
-      return y.createRoot(e, t);
-    } finally {
-      I.usingClientEntryPoint = !1;
-    }
-  };
+typeof window < "u" && j();
+function u(e, t, n) {
+  const { clientScriptLoaded: o } = P();
+  (n != null && n.deep ? g : S)(() => {
+    o && w(e);
+  }, [o, ...t ?? []]);
 }
-function Z(e) {
-  return F(e.recommendationComponent, {
+function U(e) {
+  return _(e.recommendationComponent, {
     // eslint-disable-next-line react/prop-types
     nostoRecommendation: e.nostoRecommendation
   });
 }
-function K(e) {
+function b(e) {
+  w((t) => t.placements.injectCampaigns(e));
+}
+function $(e) {
   if (!window.nostojs)
     throw new Error("Nosto has not yet been initialized");
-  w((t) => {
-    t.placements.injectCampaigns(e.recommendations);
-  });
+  b(e.recommendations);
 }
-function l() {
-  const { responseMode: e, recommendationComponent: t } = L(), n = P({});
+function d() {
+  const { responseMode: e, recommendationComponent: t } = P(), n = h({});
   if (e == "HTML")
-    return { renderCampaigns: K };
-  function r(o) {
-    var s;
-    const c = ((s = o.campaigns) == null ? void 0 : s.recommendations) ?? {};
-    for (const a in c) {
-      const u = c[a], S = "#" + a, C = document.querySelector(S);
-      C && (n.current[a] || (n.current[a] = O(C)), n.current[a].render(
-        /* @__PURE__ */ R(
-          Z,
+    return { renderCampaigns: $ };
+  function o(r) {
+    var a, s;
+    b(((a = r.campaigns) == null ? void 0 : a.content) ?? {});
+    const c = ((s = r.campaigns) == null ? void 0 : s.recommendations) ?? {};
+    for (const i in c) {
+      const m = c[i], C = "#" + i, l = document.querySelector(C);
+      l && (n.current[i] || (n.current[i] = M(l)), n.current[i].render(
+        /* @__PURE__ */ v(
+          U,
           {
             recommendationComponent: t,
-            nostoRecommendation: u
+            nostoRecommendation: m
           }
         )
       ));
     }
   }
-  return { renderCampaigns: r };
+  return { renderCampaigns: o };
 }
-function Q(e) {
-  const { renderCampaigns: t } = l();
-  d(async (n) => {
-    const r = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
-    t(r);
+function G(e) {
+  const { renderCampaigns: t } = d();
+  u(async (n) => {
+    const o = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
+    t(o);
   });
 }
-function we(e) {
-  return Q(e), null;
-}
-function X({ category: e, placements: t }) {
-  const { renderCampaigns: n } = l();
-  d(
-    async (r) => {
-      const o = await r.defaultSession().viewCategory(e).setPlacements(t || r.placements.getPlacements()).load();
-      n(o);
+function ie(e) {
+  return G(e), null;
+}
+function J({ category: e, placements: t }) {
+  const { renderCampaigns: n } = d();
+  u(
+    async (o) => {
+      const r = await o.defaultSession().viewCategory(e).setPlacements(t || o.placements.getPlacements()).load();
+      n(r);
     },
     [e]
   );
 }
-function Ce(e) {
-  return X(e), null;
+function ue(e) {
+  return J(e), null;
 }
-function ee(e) {
-  const { renderCampaigns: t } = l();
-  d(async (n) => {
-    const r = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
-    t(r);
+function W(e) {
+  const { renderCampaigns: t } = d();
+  u(async (n) => {
+    const o = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
+    t(o);
   });
 }
-function he(e) {
-  return ee(e), null;
+function de(e) {
+  return W(e), null;
 }
-function te(e) {
-  const { renderCampaigns: t } = l();
-  d(async (n) => {
-    const r = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
-    t(r);
+function Z(e) {
+  const { renderCampaigns: t } = d();
+  u(async (n) => {
+    const o = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
+    t(o);
   });
 }
-function ye(e) {
-  return te(e), null;
+function le(e) {
+  return Z(e), null;
 }
 function p(e) {
-  return !e || typeof e != "object" || ne(e) || oe(e) ? e : Array.isArray(e) ? e.map(p) : Object.keys(e).reduce((t, n) => {
-    const r = n[0].toLowerCase() + n.slice(1).replace(/([A-Z]+)/g, (o, c) => "_" + c.toLowerCase());
-    return t[r] = p(e[n]), t;
+  return !e || typeof e != "object" || B(e) || K(e) ? e : Array.isArray(e) ? e.map(p) : Object.keys(e).reduce((t, n) => {
+    const o = n[0].toLowerCase() + n.slice(1).replace(/([A-Z]+)/g, (r, c) => "_" + c.toLowerCase());
+    return t[o] = p(e[n]), t;
   }, {});
 }
-function ne(e) {
+function B(e) {
   return Object.prototype.toString.call(e) === "[object Date]";
 }
-function oe(e) {
+function K(e) {
   return Object.prototype.toString.call(e) === "[object RegExp]";
 }
-function re({ order: e, placements: t }) {
-  const { renderCampaigns: n } = l();
-  d(
-    async (r) => {
-      const o = await r.defaultSession().addOrder(p(e)).setPlacements(t || r.placements.getPlacements()).load();
-      n(o);
+function Q({ order: e, placements: t }) {
+  const { renderCampaigns: n } = d();
+  u(
+    async (o) => {
+      const r = await o.defaultSession().addOrder(p(e)).setPlacements(t || o.placements.getPlacements()).load();
+      n(r);
     },
     [e],
     { deep: !0 }
   );
 }
-function Se(e) {
-  return re(e), null;
+function me(e) {
+  return Q(e), null;
 }
-function ce(e) {
-  const { renderCampaigns: t } = l();
-  d(async (n) => {
-    const r = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
-    t(r);
+function X(e) {
+  const { renderCampaigns: t } = d();
+  u(async (n) => {
+    const o = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
+    t(o);
   });
 }
-function Ne(e) {
-  return ce(e), null;
+function fe(e) {
+  return X(e), null;
 }
-function Pe({ id: e, pageType: t }) {
-  return /* @__PURE__ */ R("div", { className: "nosto_element", id: e }, e + (t || ""));
+function pe({ id: e, pageType: t }) {
+  return /* @__PURE__ */ v("div", { className: "nosto_element", id: e }, e + (t || ""));
 }
-function se({ product: e, tagging: t, placements: n, reference: r }) {
-  const { renderCampaigns: o } = l();
+function Y({ product: e, tagging: t, placements: n, reference: o }) {
+  const { renderCampaigns: r } = d();
   if (t && !t.product_id)
     throw new Error("The product object must contain a product_id property");
   const c = (t == null ? void 0 : t.product_id) ?? e;
-  d(
-    async (s) => {
-      const a = s.defaultSession().viewProduct(t ?? e).setPlacements(n || s.placements.getPlacements());
-      r && a.setRef(c, r);
-      const u = await a.load();
-      o(u);
+  u(
+    async (a) => {
+      const s = a.defaultSession().viewProduct(t ?? e).setPlacements(n || a.placements.getPlacements());
+      o && s.setRef(c, o);
+      const i = await s.load();
+      r(i);
     },
     [c, t == null ? void 0 : t.selected_sku_id]
   );
 }
-function ve(e) {
-  return se(e), null;
+function we(e) {
+  return Y(e), null;
 }
-function ae(e, t) {
-  return new Promise((n, r) => {
-    const o = document.createElement("script");
-    o.type = "text/javascript", o.src = e, o.async = !0, o.onload = () => n(), o.onerror = () => r(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, s]) => o.setAttribute(c, s)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(o) : document.body.appendChild(o);
+function ee(e, t) {
+  return new Promise((n, o) => {
+    const r = document.createElement("script");
+    r.type = "text/javascript", r.src = e, r.async = !0, r.onload = () => n(), r.onerror = () => o(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, a]) => r.setAttribute(c, a)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(r) : document.body.appendChild(r);
   });
 }
-function ie(e) {
-  return window.nosto && "reload" in window.nosto ? (window.nosto.reload(e), !0) : !1;
-}
-function ue(e) {
+const te = { "nosto-client-script": "" };
+function ne(e) {
   const {
-    host: t = "connect.nosto.com",
-    scriptLoader: n = ae,
-    account: r,
+    scriptLoader: t = ee,
+    account: n,
     shopifyMarkets: o,
-    loadScript: c = !0
-  } = e, [s, a] = H(!1);
-  return E(() => {
-    function u() {
-      "nostoReactTest" in window && ie({
-        site: "localhost"
-      }), a(!0);
-    }
-    async function S(i, m = {}) {
-      const f = `//${t}${i}`, N = { "nosto-client-script": "", ...m };
-      await n(f, { attributes: N }), u();
+    loadScript: r = !0
+  } = e, [c, a] = T(!1);
+  return S(() => {
+    function s() {
+      a(!0);
     }
-    function C() {
-      var j, g;
-      const i = document.querySelector("[nosto-client-script]"), m = String((o == null ? void 0 : o.marketId) || ""), f = (o == null ? void 0 : o.language) || "", N = (i == null ? void 0 : i.getAttribute("nosto-language")) !== f || (i == null ? void 0 : i.getAttribute("nosto-market-id")) !== m;
-      if (!i || N) {
-        s && a(!1);
-        const h = document.querySelector("#nosto-sandbox");
-        (j = i == null ? void 0 : i.parentNode) == null || j.removeChild(i), (g = h == null ? void 0 : h.parentNode) == null || g.removeChild(h);
-        const k = `/script/shopify/market/nosto.js?merchant=${r}&market=${m}&locale=${f.toLowerCase()}`;
-        S(k, { "nosto-language": f, "nosto-market-id": m });
-      }
-    }
-    if (D(), !c) {
-      w(u);
+    if (j(), !r) {
+      w(s);
       return;
     }
-    async function _() {
-      await J({
-        merchantId: r,
+    async function i() {
+      await z({
+        merchantId: n,
+        shopifyInternational: o,
         options: {
-          attributes: { "nosto-client-script": "" }
+          attributes: te
         },
-        scriptLoader: n
-      }), u();
+        scriptLoader: t
+      }), s();
     }
-    !W() && !o && _(), o && C();
-  }, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: s };
+    (!H() || o) && i();
+  }, [o == null ? void 0 : o.marketId, o == null ? void 0 : o.language]), { clientScriptLoaded: c };
 }
-function Oe(e) {
-  const { account: t, multiCurrency: n = !1, children: r, recommendationComponent: o } = e, c = n ? e.currentVariation : "";
-  if (o && !M(o))
+function Ce(e) {
+  const { account: t, multiCurrency: n = !1, children: o, recommendationComponent: r } = e, c = n ? e.currentVariation : "";
+  if (r && !D(r))
     throw new Error(
       "The recommendationComponent prop must be a valid React element. Please provide a valid React element."
     );
-  const s = o ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: a } = ue(e);
-  return a && w((u) => {
-    u.defaultSession().setVariation(c).setResponseMode(s);
-  }), /* @__PURE__ */ R(
-    T.Provider,
+  const a = r ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: s } = ne(e);
+  return s && w((i) => {
+    i.defaultSession().setVariation(c).setResponseMode(a);
+  }), /* @__PURE__ */ v(
+    O.Provider,
     {
       value: {
         account: t,
-        clientScriptLoaded: a,
+        clientScriptLoaded: s,
         currentVariation: c,
-        responseMode: s,
-        recommendationComponent: o
+        responseMode: a,
+        recommendationComponent: r
       },
-      children: r
+      children: o
     }
   );
 }
-function de({ query: e, placements: t }) {
-  const { renderCampaigns: n } = l();
-  d(
-    async (r) => {
-      const o = await r.defaultSession().viewSearch(e).setPlacements(t || r.placements.getPlacements()).load();
-      n(o);
+function oe({ query: e, placements: t }) {
+  const { renderCampaigns: n } = d();
+  u(
+    async (o) => {
+      const r = await o.defaultSession().viewSearch(e).setPlacements(t || o.placements.getPlacements()).load();
+      n(r);
     },
     [e]
   );
 }
-function Ee(e) {
-  return de(e), null;
+function he(e) {
+  return oe(e), null;
 }
-function le({ cart: e, customer: t } = {}) {
-  const { clientScriptLoaded: n } = L();
-  $(() => {
-    const r = e ? p(e) : void 0, o = t ? p(t) : void 0;
+function re({ cart: e, customer: t } = {}) {
+  const { clientScriptLoaded: n } = P();
+  g(() => {
+    const o = e ? p(e) : void 0, r = t ? p(t) : void 0;
     n && w((c) => {
-      c.defaultSession().setCart(r).setCustomer(o).viewOther().load({ skipPageViews: !0 });
+      c.defaultSession().setCart(o).setCustomer(r).viewOther().load({ skipPageViews: !0 });
     });
   }, [n, e, t]);
 }
-function Re(e) {
-  return le(e), null;
+function ye(e) {
+  return re(e), null;
 }
 export {
-  we as Nosto404,
-  Ce as NostoCategory,
-  he as NostoCheckout,
-  T as NostoContext,
-  ye as NostoHome,
-  Se as NostoOrder,
-  Ne as NostoOther,
-  Pe as NostoPlacement,
-  ve as NostoProduct,
-  Oe as NostoProvider,
-  Ee as NostoSearch,
-  Re as NostoSession,
-  Q as useNosto404,
-  X as useNostoCategory,
-  ee as useNostoCheckout,
-  L as useNostoContext,
-  te as useNostoHome,
-  re as useNostoOrder,
-  ce as useNostoOther,
-  se as useNostoProduct,
-  de as useNostoSearch,
-  le as useNostoSession
+  ie as Nosto404,
+  ue as NostoCategory,
+  de as NostoCheckout,
+  O as NostoContext,
+  le as NostoHome,
+  me as NostoOrder,
+  fe as NostoOther,
+  pe as NostoPlacement,
+  we as NostoProduct,
+  Ce as NostoProvider,
+  he as NostoSearch,
+  ye as NostoSession,
+  G as useNosto404,
+  J as useNostoCategory,
+  W as useNostoCheckout,
+  P as useNostoContext,
+  Z as useNostoHome,
+  Q as useNostoOrder,
+  X as useNostoOther,
+  Y as useNostoProduct,
+  oe as useNostoSearch,
+  re as useNostoSession
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(r,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react"),require("react/jsx-runtime"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","react-dom"],i):(r=typeof globalThis<"u"?globalThis:r||self,i(r["@nosto/nosto-react"]={},r.React,r["react/jsx-runtime"],r.ReactDOM))})(this,function(r,i,O,B){"use strict";const v=i.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function h(){return i.useContext(v)}const _=e=>String(e)==="[object Object]";function g(e){if(!_(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!_(n)||!n.hasOwnProperty("isPrototypeOf"))}function E(e,t){if(e===t)return!0;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof Array&&t instanceof Array)return e.length!==t.length?!1:e.every((n,c)=>E(n,t[c]));if(g(e)&&g(t)){const n=Object.entries(e);return n.length!==Object.keys(t).length?!1:n.every(([c,o])=>E(o,t[c]))}return!1}function T(e,t){return i.useEffect(e,G(t))}function G(e){const t=i.useRef(e),n=i.useRef(0);return E(e,t.current)||(t.current=e,n.current+=1),i.useMemo(()=>t.current,[n.current])}function A(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}function J(){return typeof window.nosto<"u"}const Y={production:"https://connect.nosto.com/",staging:"https://connect.staging.nosto.com/",local:"https://connect.nosto.com/"};function Z(e){return Y[e??"production"]}function K({merchantId:e,env:t,options:n,scriptLoader:c}){const o=new URL(`/include/${e}`,Z(t));return(c??Q)(o.toString(),n)}function Q(e,t){return new Promise((n,c)=>{const o=document.createElement("script");o.src=e,o.async=!0,o.type="text/javascript",o.onload=()=>n(),o.onerror=()=>c(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([s,a])=>o.setAttribute(s,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(o):document.body.appendChild(o)})}async function C(e){return window.nostojs(e)}A();function m(e,t,n){const{clientScriptLoaded:c}=h();(n!=null&&n.deep?T:i.useEffect)(()=>{c&&C(e)},[c,...t??[]])}var R,y=B;if(process.env.NODE_ENV==="production")R=y.createRoot,y.hydrateRoot;else{var b=y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;R=function(e,t){b.usingClientEntryPoint=!0;try{return y.createRoot(e,t)}finally{b.usingClientEntryPoint=!1}}}function X(e){return i.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function x(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");C(t=>{t.placements.injectCampaigns(e.recommendations)})}function f(){const{responseMode:e,recommendationComponent:t}=h(),n=i.useRef({});if(e=="HTML")return{renderCampaigns:x};function c(o){var a;const s=((a=o.campaigns)==null?void 0:a.recommendations)??{};for(const u in s){const l=s[u],j="#"+u,S=document.querySelector(j);S&&(n.current[u]||(n.current[u]=R(S)),n.current[u].render(O.jsx(X,{recommendationComponent:t,nostoRecommendation:l})))}}return{renderCampaigns:c}}function I(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewNotFound().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ee(e){return I(e),null}function D({category:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().viewCategory(e).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e])}function te(e){return D(e),null}function k(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewCart().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ne(e){return k(e),null}function $(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewFrontPage().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function oe(e){return $(e),null}function N(e){return!e||typeof e!="object"||ce(e)||re(e)?e:Array.isArray(e)?e.map(N):Object.keys(e).reduce((t,n)=>{const c=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,(o,s)=>"_"+s.toLowerCase());return t[c]=N(e[n]),t},{})}function ce(e){return Object.prototype.toString.call(e)==="[object Date]"}function re(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function q({order:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().addOrder(N(e)).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e],{deep:!0})}function se(e){return q(e),null}function H(e){const{renderCampaigns:t}=f();m(async n=>{const c=await n.defaultSession().viewOther().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(c)})}function ie(e){return H(e),null}function ae({id:e,pageType:t}){return O.jsx("div",{className:"nosto_element",id:e},e+(t||""))}function V({product:e,tagging:t,placements:n,reference:c}){const{renderCampaigns:o}=f();if(t&&!t.product_id)throw new Error("The product object must contain a product_id property");const s=(t==null?void 0:t.product_id)??e;m(async a=>{const u=a.defaultSession().viewProduct(t??e).setPlacements(n||a.placements.getPlacements());c&&u.setRef(s,c);const l=await u.load();o(l)},[s,t==null?void 0:t.selected_sku_id])}function ue(e){return V(e),null}function de(e,t){return new Promise((n,c)=>{const o=document.createElement("script");o.type="text/javascript",o.src=e,o.async=!0,o.onload=()=>n(),o.onerror=()=>c(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([s,a])=>o.setAttribute(s,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(o):document.body.appendChild(o)})}function le(e){return window.nosto&&"reload"in window.nosto?(window.nosto.reload(e),!0):!1}function me(e){const{host:t="connect.nosto.com",scriptLoader:n=de,account:c,shopifyMarkets:o,loadScript:s=!0}=e,[a,u]=i.useState(!1);return i.useEffect(()=>{function l(){"nostoReactTest"in window&&le({site:"localhost"}),u(!0)}async function j(d,w={}){const p=`//${t}${d}`,L={"nosto-client-script":"",...w};await n(p,{attributes:L}),l()}function S(){var U,W;const d=document.querySelector("[nosto-client-script]"),w=String((o==null?void 0:o.marketId)||""),p=(o==null?void 0:o.language)||"",L=(d==null?void 0:d.getAttribute("nosto-language"))!==p||(d==null?void 0:d.getAttribute("nosto-market-id"))!==w;if(!d||L){a&&u(!1);const P=document.querySelector("#nosto-sandbox");(U=d==null?void 0:d.parentNode)==null||U.removeChild(d),(W=P==null?void 0:P.parentNode)==null||W.removeChild(P);const we=`/script/shopify/market/nosto.js?merchant=${c}&market=${w}&locale=${p.toLowerCase()}`;j(we,{"nosto-language":p,"nosto-market-id":w})}}if(A(),!s){C(l);return}async function z(){await K({merchantId:c,options:{attributes:{"nosto-client-script":""}},scriptLoader:n}),l()}!J()&&!o&&z(),o&&S()},[o==null?void 0:o.marketId,o==null?void 0:o.language]),{clientScriptLoaded:a}}function fe(e){const{account:t,multiCurrency:n=!1,children:c,recommendationComponent:o}=e,s=n?e.currentVariation:"";if(o&&!i.isValidElement(o))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const a=o?"JSON_ORIGINAL":"HTML",{clientScriptLoaded:u}=me(e);return u&&C(l=>{l.defaultSession().setVariation(s).setResponseMode(a)}),O.jsx(v.Provider,{value:{account:t,clientScriptLoaded:u,currentVariation:s,responseMode:a,recommendationComponent:o},children:c})}function M({query:e,placements:t}){const{renderCampaigns:n}=f();m(async c=>{const o=await c.defaultSession().viewSearch(e).setPlacements(t||c.placements.getPlacements()).load();n(o)},[e])}function Ce(e){return M(e),null}function F({cart:e,customer:t}={}){const{clientScriptLoaded:n}=h();T(()=>{const c=e?N(e):void 0,o=t?N(t):void 0;n&&C(s=>{s.defaultSession().setCart(c).setCustomer(o).viewOther().load({skipPageViews:!0})})},[n,e,t])}function Ne(e){return F(e),null}r.Nosto404=ee,r.NostoCategory=te,r.NostoCheckout=ne,r.NostoContext=v,r.NostoHome=oe,r.NostoOrder=se,r.NostoOther=ie,r.NostoPlacement=ae,r.NostoProduct=ue,r.NostoProvider=fe,r.NostoSearch=Ce,r.NostoSession=Ne,r.useNosto404=I,r.useNostoCategory=D,r.useNostoCheckout=k,r.useNostoContext=h,r.useNostoHome=$,r.useNostoOrder=q,r.useNostoOther=H,r.useNostoProduct=V,r.useNostoSearch=M,r.useNostoSession=F,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+(function(r,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react/jsx-runtime"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react/jsx-runtime","react-dom/client"],u):(r=typeof globalThis<"u"?globalThis:r||self,u(r["@nosto/nosto-react"]={},r.React,r["react/jsx-runtime"],r.client))})(this,function(r,u,y,V){"use strict";const S=u.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function w(){return u.useContext(S)}const O=e=>String(e)==="[object Object]";function j(e){if(!O(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!O(n)||!n.hasOwnProperty("isPrototypeOf"))}function P(e,t){if(e===t)return!0;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof Array&&t instanceof Array)return e.length!==t.length?!1:e.every((n,o)=>P(n,t[o]));if(j(e)&&j(t)){const n=Object.entries(e);return n.length!==Object.keys(t).length?!1:n.every(([o,s])=>P(s,t[o]))}return!1}function L(e,t){return u.useEffect(e,F(t))}function F(e){const t=u.useRef(e),n=u.useRef(0);return P(e,t.current)||(t.current=e,n.current+=1),u.useMemo(()=>t.current,[n.current])}function g(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}function z(){return typeof window.nosto<"u"}const U={production:"https://connect.nosto.com/",staging:"https://connect.staging.nosto.com/",local:"https://connect.nosto.com/"};function R(e){return U[e??"production"]}function $({merchantId:e,env:t,options:n,shopifyInternational:o,scriptLoader:s}){var c,a;const i=document.querySelector("script[nosto-language], script[nosto-market-id]"),d=String((o==null?void 0:o.marketId)||""),C=(o==null?void 0:o.language)||"",v=(i==null?void 0:i.getAttribute("nosto-language"))!==C||(i==null?void 0:i.getAttribute("nosto-market-id"))!==d;if(!i||v){const f=document.querySelector("#nosto-sandbox");(c=i==null?void 0:i.parentNode)==null||c.removeChild(i),(a=f==null?void 0:f.parentNode)==null||a.removeChild(f);const N=new URL("/script/shopify/market/nosto.js",R(t));N.searchParams.append("merchant",e),N.searchParams.append("market",d),N.searchParams.append("locale",C.toLowerCase());const ue={...n==null?void 0:n.attributes,"nosto-language":C,"nosto-market-id":d};return(s??E)(N.toString(),{...n,attributes:ue})}return Promise.resolve()}function G(e){if(e.shopifyInternational)return $(e);const{merchantId:t,env:n,options:o,scriptLoader:s}=e,c=s??E,a=new URL(`/include/${t}`,R(n));return c(a.toString(),o)}function E(e,t){return new Promise((n,o)=>{const s=document.createElement("script");s.src=e,s.async=!0,s.type="text/javascript",s.onload=()=>n(),s.onerror=()=>o(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([c,a])=>s.setAttribute(c,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(s):document.body.appendChild(s)})}async function p(e){return window.nostojs(e)}typeof window<"u"&&g();function l(e,t,n){const{clientScriptLoaded:o}=w();(n!=null&&n.deep?L:u.useEffect)(()=>{o&&p(e)},[o,...t??[]])}function J(e){return u.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function b(e){p(t=>t.placements.injectCampaigns(e))}function W(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");b(e.recommendations)}function m(){const{responseMode:e,recommendationComponent:t}=w(),n=u.useRef({});if(e=="HTML")return{renderCampaigns:W};function o(s){var a,i;b(((a=s.campaigns)==null?void 0:a.content)??{});const c=((i=s.campaigns)==null?void 0:i.recommendations)??{};for(const d in c){const C=c[d],v="#"+d,f=document.querySelector(v);f&&(n.current[d]||(n.current[d]=V.createRoot(f)),n.current[d].render(y.jsx(J,{recommendationComponent:t,nostoRecommendation:C})))}}return{renderCampaigns:o}}function k(e){const{renderCampaigns:t}=m();l(async n=>{const o=await n.defaultSession().viewNotFound().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(o)})}function Z(e){return k(e),null}function A({category:e,placements:t}){const{renderCampaigns:n}=m();l(async o=>{const s=await o.defaultSession().viewCategory(e).setPlacements(t||o.placements.getPlacements()).load();n(s)},[e])}function B(e){return A(e),null}function I(e){const{renderCampaigns:t}=m();l(async n=>{const o=await n.defaultSession().viewCart().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(o)})}function K(e){return I(e),null}function T(e){const{renderCampaigns:t}=m();l(async n=>{const o=await n.defaultSession().viewFrontPage().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(o)})}function Q(e){return T(e),null}function h(e){return!e||typeof e!="object"||X(e)||Y(e)?e:Array.isArray(e)?e.map(h):Object.keys(e).reduce((t,n)=>{const o=n[0].toLowerCase()+n.slice(1).replace(/([A-Z]+)/g,(s,c)=>"_"+c.toLowerCase());return t[o]=h(e[n]),t},{})}function X(e){return Object.prototype.toString.call(e)==="[object Date]"}function Y(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function _({order:e,placements:t}){const{renderCampaigns:n}=m();l(async o=>{const s=await o.defaultSession().addOrder(h(e)).setPlacements(t||o.placements.getPlacements()).load();n(s)},[e],{deep:!0})}function x(e){return _(e),null}function q(e){const{renderCampaigns:t}=m();l(async n=>{const o=await n.defaultSession().viewOther().setPlacements((e==null?void 0:e.placements)||n.placements.getPlacements()).load();t(o)})}function ee(e){return q(e),null}function te({id:e,pageType:t}){return y.jsx("div",{className:"nosto_element",id:e},e+(t||""))}function H({product:e,tagging:t,placements:n,reference:o}){const{renderCampaigns:s}=m();if(t&&!t.product_id)throw new Error("The product object must contain a product_id property");const c=(t==null?void 0:t.product_id)??e;l(async a=>{const i=a.defaultSession().viewProduct(t??e).setPlacements(n||a.placements.getPlacements());o&&i.setRef(c,o);const d=await i.load();s(d)},[c,t==null?void 0:t.selected_sku_id])}function ne(e){return H(e),null}function oe(e,t){return new Promise((n,o)=>{const s=document.createElement("script");s.type="text/javascript",s.src=e,s.async=!0,s.onload=()=>n(),s.onerror=()=>o(),Object.entries((t==null?void 0:t.attributes)??{}).forEach(([c,a])=>s.setAttribute(c,a)),(t==null?void 0:t.position)==="head"?document.head.appendChild(s):document.body.appendChild(s)})}const se={"nosto-client-script":""};function re(e){const{scriptLoader:t=oe,account:n,shopifyMarkets:o,loadScript:s=!0}=e,[c,a]=u.useState(!1);return u.useEffect(()=>{function i(){a(!0)}if(g(),!s){p(i);return}async function d(){await G({merchantId:n,shopifyInternational:o,options:{attributes:se},scriptLoader:t}),i()}(!z()||o)&&d()},[o==null?void 0:o.marketId,o==null?void 0:o.language]),{clientScriptLoaded:c}}function ce(e){const{account:t,multiCurrency:n=!1,children:o,recommendationComponent:s}=e,c=n?e.currentVariation:"";if(s&&!u.isValidElement(s))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const a=s?"JSON_ORIGINAL":"HTML",{clientScriptLoaded:i}=re(e);return i&&p(d=>{d.defaultSession().setVariation(c).setResponseMode(a)}),y.jsx(S.Provider,{value:{account:t,clientScriptLoaded:i,currentVariation:c,responseMode:a,recommendationComponent:s},children:o})}function M({query:e,placements:t}){const{renderCampaigns:n}=m();l(async o=>{const s=await o.defaultSession().viewSearch(e).setPlacements(t||o.placements.getPlacements()).load();n(s)},[e])}function ie(e){return M(e),null}function D({cart:e,customer:t}={}){const{clientScriptLoaded:n}=w();L(()=>{const o=e?h(e):void 0,s=t?h(t):void 0;n&&p(c=>{c.defaultSession().setCart(o).setCustomer(s).viewOther().load({skipPageViews:!0})})},[n,e,t])}function ae(e){return D(e),null}r.Nosto404=Z,r.NostoCategory=B,r.NostoCheckout=K,r.NostoContext=S,r.NostoHome=Q,r.NostoOrder=x,r.NostoOther=ee,r.NostoPlacement=te,r.NostoProduct=ne,r.NostoProvider=ce,r.NostoSearch=ie,r.NostoSession=ae,r.useNosto404=k,r.useNostoCategory=A,r.useNostoCheckout=I,r.useNostoContext=w,r.useNostoHome=T,r.useNostoOrder=_,r.useNostoOther=q,r.useNostoProduct=H,r.useNostoSearch=M,r.useNostoSession=D,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {
@@ -30,30 +30,33 @@
     "dist",
     "src"
   ],
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@nosto/nosto-js": "*"
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
   },
   "devDependencies": {
+    "@nosto/nosto-js": "^1.3.1",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.0",
     "@types/user-event": "^4.1.1",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.13.0",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.3.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router": "^7.0.1",
     "react-router-dom": "^7.0.1",
     "rimraf": "^6.0.1",
+    "rollup-plugin-visualizer": "^5.13.1",
     "typedoc": "^0.27.2",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.13.0",
-    "vite": "^5.2.10",
+    "vite": "^6.0.3",
     "vite-plugin-dts": "^4.2.2",
     "vitest": "^2.0.5"
   },

package/src/components/NostoProvider.tsx

@@ -37,8 +37,8 @@ export interface NostoProviderProps {
    * Enables Shopify markets with language and market id
    */
   shopifyMarkets?: {
-    language?: string
-    marketId?: string | number
+    language: string
+    marketId: string | number
   }
   /**
    * Load nosto script (should be false if loading the script outside of nosto-react)

package/src/hooks/useLoadClientScript.ts

@@ -2,13 +2,13 @@ import { useState, useEffect } from "react"
 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">
 
+const defaultAttributes = { "nosto-client-script": "" }
+
 export function useLoadClientScript(props: NostoScriptProps) {
   const {
-    host = "connect.nosto.com",
     scriptLoader = scriptLoaderFn,
     account,
     shopifyMarkets,
@@ -18,48 +18,9 @@ export function useLoadClientScript(props: NostoScriptProps) {
 
   useEffect(() => {
     function scriptOnload() {
-      // Override for production scripts to work in unit tests
-      if ("nostoReactTest" in window) {
-        reloadNosto({
-          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 })
-      }
-    }
-
     initNostoStub()
 
     if (!loadScript) {
@@ -70,8 +31,9 @@ export function useLoadClientScript(props: NostoScriptProps) {
     async function initClientScript() {
       await init({
         merchantId: account,
+        shopifyInternational: shopifyMarkets,
         options: {
-          attributes: { "nosto-client-script": ""}
+          attributes: defaultAttributes
         },
         scriptLoader
       })
@@ -79,14 +41,9 @@ export function useLoadClientScript(props: NostoScriptProps) {
     }
 
     // Load Nosto client script if not already loaded externally
-    if (!isNostoLoaded() && !shopifyMarkets) {
+    if (!isNostoLoaded() || shopifyMarkets) {
       initClientScript()
     }
-
-    // Load Shopify Markets scripts
-    if (shopifyMarkets) {
-      prepareShopifyMarketsScript()
-    }
   }, [shopifyMarkets?.marketId, shopifyMarkets?.language])
 
   return { clientScriptLoaded }

package/src/hooks/useRenderCampaigns.tsx

@@ -19,14 +19,16 @@ function RecommendationComponentWrapper(props: {
   })
 }
 
+function injectPlacements(data: Record<string, unknown>) {
+  nostojs(api => api.placements.injectCampaigns(data as Parameters<API['placements']['injectCampaigns']>[0]))
+}
+
 function injectCampaigns(data: CampaignData) {
   // @ts-expect-error not defined
   if (!window.nostojs) {
     throw new Error("Nosto has not yet been initialized")
   }
-  nostojs(api => {
-    api.placements.injectCampaigns(data.recommendations as Parameters<API['placements']['injectCampaigns']>[0])
-  })
+  injectPlacements(data.recommendations)
 }
 
 export function useRenderCampaigns() {
@@ -38,6 +40,9 @@ export function useRenderCampaigns() {
   }
 
   function renderCampaigns(data: CampaignData) {
+    // inject Onsite content campaigns directly
+    injectPlacements(data.campaigns?.content ?? {})
+
     // render recommendation component into placements:
     const recommendations = data.campaigns?.recommendations ?? {}
     for (const key in recommendations) {