@nosto/nosto-react 2.7.1 → 2.9.0

package/dist/index.es.js

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

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,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):(s=typeof globalThis<"u"?globalThis:s||self,u(s["@nosto/nosto-react"]={},s.React,s["react/jsx-runtime"],s.client))})(this,function(s,u,y,V){"use strict";const S=u.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function N(){return u.useContext(S)}const g=e=>String(e)==="[object Object]";function j(e){if(!g(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!g(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,r])=>P(r,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 v(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}async function p(e){return window.nostojs(e)}typeof window<"u"&&(v(),p(e=>{e.internal.getSettings()}));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:r}){var c,a;const i=document.querySelector("script[nosto-language], script[nosto-market-id]"),d=String((o==null?void 0:o.marketId)||""),l=(o==null?void 0:o.language)||"",O=(i==null?void 0:i.getAttribute("nosto-language"))!==l||(i==null?void 0:i.getAttribute("nosto-market-id"))!==d;if(!i||O){const h=document.querySelector("#nosto-sandbox");(c=i==null?void 0:i.parentNode)==null||c.removeChild(i),(a=h==null?void 0:h.parentNode)==null||a.removeChild(h);const w=new URL("/script/shopify/market/nosto.js",R(t));w.searchParams.append("merchant",e),w.searchParams.append("market",d),w.searchParams.append("locale",l.toLowerCase());const ue={...n==null?void 0:n.attributes,"nosto-language":l,"nosto-market-id":d};return(r??E)(w.toString(),{...n,attributes:ue})}return Promise.resolve()}function G(e){if(e.shopifyInternational)return $(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)})}typeof window<"u"&&v();function m(e,t,n){const{clientScriptLoaded:o}=N();(n!=null&&n.deep?L:u.useEffect)(()=>{o&&p(e)},[o,...t??[]])}function J(e){return u.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function k(e){p(t=>t.placements.injectCampaigns(e))}function W(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");k(e.recommendations)}function f(){const{responseMode:e,recommendationComponent:t}=N(),n=u.useRef({});if(e=="HTML")return{renderCampaigns:W};if(!t)throw new Error("recommendationComponent is required for client-side rendering using hook");function o(r){var a,i;k(((a=r.campaigns)==null?void 0:a.content)??{});const c=((i=r.campaigns)==null?void 0:i.recommendations)??{};for(const d in c){const l=c[d],O="#"+d,h=document.querySelector(O);h&&(n.current[d]||(n.current[d]=V.createRoot(h)),n.current[d].render(y.jsx(J,{recommendationComponent:t,nostoRecommendation:l})))}}return{renderCampaigns:o}}function A(e){const{renderCampaigns:t}=f();m(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 A(e),null}function b({category:e,placements:t}){const{renderCampaigns:n}=f();m(async o=>{const r=await o.defaultSession().viewCategory(e).setPlacements(t||o.placements.getPlacements()).load();n(r)},[e])}function B(e){return b(e),null}function I(e){const{renderCampaigns:t}=f();m(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}=f();m(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 C(e){return!e||typeof e!="object"||X(e)||Y(e)?e:Array.isArray(e)?e.map(C):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]=C(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}=f();m(async o=>{const r=await o.defaultSession().addOrder(C(e)).setPlacements(t||o.placements.getPlacements()).load();n(r)},[e],{deep:!0})}function x(e){return _(e),null}function q(e){const{renderCampaigns:t}=f();m(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,children:n}){return y.jsx("div",{className:"nosto_element",id:e,children:n},e+(t||""))}function M({product:e,tagging:t,placements:n,reference:o}){const{renderCampaigns:r}=f();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;m(async a=>{const i=a.defaultSession().viewProduct(t??e).setPlacements(n||a.placements.getPlacements());o&&i.setRef(c,o);const d=await i.load();r(d)},[c,t==null?void 0:t.selected_sku_id])}function ne(e){return M(e),null}function oe(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)})}const re={"nosto-client-script":""};function se(e){const{scriptLoader:t=oe,account:n,shopifyMarkets:o,loadScript:r=!0}=e,[c,a]=u.useState(!1);return u.useEffect(()=>{function i(){a(!0)}if(v(),p(l=>l.setAutoLoad(!1)),!r){p(i);return}async function d(){await G({merchantId:n,shopifyInternational:o,options:{attributes:re},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:r,renderMode:c}=e,a=n?e.currentVariation:"";if(r&&!u.isValidElement(r))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const i=c||(r?"JSON_ORIGINAL":"HTML"),{clientScriptLoaded:d}=se(e);return d&&p(l=>{l.defaultSession().setVariation(a).setResponseMode(i)}),y.jsx(S.Provider,{value:{account:t,clientScriptLoaded:d,currentVariation:a,responseMode:i,recommendationComponent:r},children:o})}function H({query:e,placements:t}){const{renderCampaigns:n}=f();m(async o=>{const r=await o.defaultSession().viewSearch(e).setPlacements(t||o.placements.getPlacements()).load();n(r)},[e])}function ie(e){return H(e),null}function D({cart:e,customer:t}={}){const{clientScriptLoaded:n}=N();L(()=>{const o=e?C(e):void 0,r=t?C(t):void 0;n&&p(c=>{c.defaultSession().setCart(o).setCustomer(r).viewOther().load({skipPageViews:!0})})},[n,e,t])}function ae(e){return D(e),null}s.Nosto404=Z,s.NostoCategory=B,s.NostoCheckout=K,s.NostoContext=S,s.NostoHome=Q,s.NostoOrder=x,s.NostoOther=ee,s.NostoPlacement=te,s.NostoProduct=ne,s.NostoProvider=ce,s.NostoSearch=ie,s.NostoSession=ae,s.useNosto404=A,s.useNostoCategory=b,s.useNostoCheckout=I,s.useNostoContext=N,s.useNostoHome=T,s.useNostoOrder=_,s.useNostoOther=q,s.useNostoProduct=M,s.useNostoSearch=H,s.useNostoSession=D,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(r,a){typeof exports=="object"&&typeof module<"u"?a(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"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r["@nosto/nosto-react"]={},r.React,r["react/jsx-runtime"],r.client))})(this,function(r,a,w,H){"use strict";const y=a.createContext({account:"",currentVariation:"",responseMode:"HTML",clientScriptLoaded:!1});function g(){return a.useContext(y)}const P=e=>String(e)==="[object Object]";function O(e){if(!P(e))return!1;const t=e.constructor;if(t===void 0)return!0;const n=t.prototype;return!(!P(n)||!n.hasOwnProperty("isPrototypeOf"))}function N(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)=>N(n,t[o]));if(O(e)&&O(t)){const n=Object.entries(e);return n.length!==Object.keys(t).length?!1:n.every(([o,s])=>N(s,t[o]))}return!1}function v(e,t){return a.useEffect(e,D(t))}function D(e){const t=a.useRef(e),n=a.useRef(0);return N(e,t.current)||(t.current=e,n.current+=1),a.useMemo(()=>t.current,[n.current])}function S(){window.nostojs=window.nostojs??function(e){(window.nostojs.q=window.nostojs.q??[]).push(e)}}async function p(e){return window.nostojs(e)}typeof window<"u"&&(S(),p(e=>{e.internal.getSettings()}));function V(){return typeof window.nosto<"u"}const F={production:"https://connect.nosto.com/",staging:"https://connect.staging.nosto.com/",local:"https://connect.nosto.com/"};function j(e){return F[e??"production"]}function z({merchantId:e,env:t,options:n,shopifyInternational:o,scriptLoader:s}){const c=document.querySelector("script[nosto-language], script[nosto-market-id]"),i=String(o?.marketId||""),u=o?.language||"",d=c?.getAttribute("nosto-language")!==u||c?.getAttribute("nosto-market-id")!==i;if(!c||d){const l=document.querySelector("#nosto-sandbox");c?.parentNode?.removeChild(c),l?.parentNode?.removeChild(l);const C=new URL("/script/shopify/market/nosto.js",j(t));C.searchParams.append("merchant",e),C.searchParams.append("market",i),C.searchParams.append("locale",u.toLowerCase());const ie={...n?.attributes,"nosto-language":u,"nosto-market-id":i};return(s??L)(C.toString(),{...n,attributes:ie})}return Promise.resolve()}function U(e){if(e.shopifyInternational)return z(e);const{merchantId:t,env:n,options:o,scriptLoader:s}=e,c=s??L,i=new URL(`/include/${t}`,j(n));return c(i.toString(),o)}function L(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?.attributes??{}).forEach(([c,i])=>s.setAttribute(c,i)),t?.position==="head"?document.head.appendChild(s):document.body.appendChild(s)})}typeof window<"u"&&S();function f(e,t,n){const{clientScriptLoaded:o}=g();(n?.deep?v:a.useEffect)(()=>{o&&p(e)},[o,...t??[]])}function $(e){return a.cloneElement(e.recommendationComponent,{nostoRecommendation:e.nostoRecommendation})}function R(e){p(t=>t.placements.injectCampaigns(e))}function G(e){if(!window.nostojs)throw new Error("Nosto has not yet been initialized");R(e.recommendations)}function m(){const{responseMode:e,recommendationComponent:t}=g(),n=a.useRef({});if(e=="HTML")return{renderCampaigns:G};if(!t)throw new Error("recommendationComponent is required for client-side rendering using hook");function o(s){R(s.campaigns?.content??{});const c=s.campaigns?.recommendations??{};for(const i in c){const u=c[i],d="#"+i,l=document.querySelector(d);l&&(n.current[i]||(n.current[i]=H.createRoot(l)),n.current[i].render(w.jsx($,{recommendationComponent:t,nostoRecommendation:u})))}}return{renderCampaigns:o}}function E(e){const{renderCampaigns:t}=m();f(async n=>{const o=await n.defaultSession().viewNotFound().setPlacements(e?.placements||n.placements.getPlacements()).load();t(o)})}function J(e){return E(e),null}function k({category:e,placements:t}){const{renderCampaigns:n}=m();f(async o=>{const s=await o.defaultSession().viewCategory(e).setPlacements(t||o.placements.getPlacements()).load();n(s)},[e])}function W(e){return k(e),null}function b(e){const{renderCampaigns:t}=m();f(async n=>{const o=await n.defaultSession().viewCart().setPlacements(e?.placements||n.placements.getPlacements()).load();t(o)})}function Z(e){return b(e),null}function A(e){const{renderCampaigns:t}=m();f(async n=>{const o=await n.defaultSession().viewFrontPage().setPlacements(e?.placements||n.placements.getPlacements()).load();t(o)})}function B(e){return A(e),null}function h(e){return!e||typeof e!="object"||K(e)||Q(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 K(e){return Object.prototype.toString.call(e)==="[object Date]"}function Q(e){return Object.prototype.toString.call(e)==="[object RegExp]"}function M({order:e,placements:t}){const{renderCampaigns:n}=m();f(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 M(e),null}function I(e){const{renderCampaigns:t}=m();f(async n=>{const o=await n.defaultSession().viewOther().setPlacements(e?.placements||n.placements.getPlacements()).load();t(o)})}function Y(e){return I(e),null}function x({id:e,pageType:t,children:n}){return w.jsx("div",{className:"nosto_element",id:e,children:n},e+(t||""))}function T({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?.product_id??e;f(async i=>{const u=i.defaultSession().viewProduct(t??e).setPlacements(n||i.placements.getPlacements());o&&u.setRef(c,o);const d=await u.load();s(d)},[c,t?.selected_sku_id])}function ee(e){return T(e),null}function te(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?.attributes??{}).forEach(([c,i])=>s.setAttribute(c,i)),t?.position==="head"?document.head.appendChild(s):document.body.appendChild(s)})}const ne={"nosto-client-script":""};function oe(e){const{scriptLoader:t=te,account:n,shopifyMarkets:o,loadScript:s=!0}=e,[c,i]=a.useState(!1);return a.useEffect(()=>{function u(){i(!0)}if(S(),p(l=>l.setAutoLoad(!1)),!s){p(u);return}async function d(){await U({merchantId:n,shopifyInternational:o,options:{attributes:ne},scriptLoader:t}),u()}(!V()||o)&&d()},[o?.marketId,o?.language]),{clientScriptLoaded:c}}function se(e){const{account:t,multiCurrency:n=!1,children:o,recommendationComponent:s,renderMode:c}=e,i=n?e.currentVariation:"";if(s&&!a.isValidElement(s))throw new Error("The recommendationComponent prop must be a valid React element. Please provide a valid React element.");const u=c||(s?"JSON_ORIGINAL":"HTML"),{clientScriptLoaded:d}=oe(e);return d&&p(l=>{l.defaultSession().setVariation(i).setResponseMode(u)}),w.jsx(y.Provider,{value:{account:t,clientScriptLoaded:d,currentVariation:i,responseMode:u,recommendationComponent:s},children:o})}function _({query:e,placements:t}){const{renderCampaigns:n}=m();f(async o=>{const s=await o.defaultSession().viewSearch(e).setPlacements(t||o.placements.getPlacements()).load();n(s)},[e])}function re(e){return _(e),null}function q({cart:e,customer:t}={}){const{clientScriptLoaded:n}=g();v(()=>{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 ce(e){return q(e),null}r.Nosto404=J,r.NostoCategory=W,r.NostoCheckout=Z,r.NostoContext=y,r.NostoHome=B,r.NostoOrder=X,r.NostoOther=Y,r.NostoPlacement=x,r.NostoProduct=ee,r.NostoProvider=se,r.NostoSearch=re,r.NostoSession=ce,r.useNosto404=E,r.useNostoCategory=k,r.useNostoCheckout=b,r.useNostoContext=g,r.useNostoHome=A,r.useNostoOrder=M,r.useNostoOther=I,r.useNostoProduct=T,r.useNostoSearch=_,r.useNostoSession=q,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.7.1",
+  "version": "2.9.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {
@@ -12,19 +12,23 @@
     "nosto",
     "personalisation"
   ],
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc && npm run lint && vite build && npm run typedoc",
     "preview": "vite preview",
-    "prepare": "vite build",
+    "prepare": "husky && vite build",
     "typecheck": "tsc",
     "lint": "eslint 'src/**/*.{ts,tsx}' --cache",
     "clean": "rimraf dist",
     "prettier": "prettier '{src,spec}/**' --list-different",
     "prettier:fix": "prettier '{src,spec}/**' --write",
-    "test": "vitest run --silent",
+    "test": "vitest run --silent --coverage",
     "test-loud": "vitest run",
-    "typedoc": "typedoc --treatWarningsAsErrors src/index.ts"
+    "typedoc": "typedoc --treatWarningsAsErrors src/index.ts",
+    "typedoc-json": "typedoc --treatWarningsAsErrors --json dist/typedoc.json src/index.ts"
   },
   "files": [
     "dist",
@@ -35,29 +39,33 @@
     "react-dom": "^18.3.1 || ^19.0.0"
   },
   "devDependencies": {
-    "@nosto/nosto-js": "^1.3.1",
+    "@nosto/nosto-js": "^2.0.0",
+    "@commitlint/cli": "^20.0.0",
+    "@commitlint/config-conventional": "^20.0.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.0",
     "@types/user-event": "^4.1.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/coverage-v8": "^3.0.9",
     "eslint": "^9.13.0",
     "eslint-plugin-barrel-files": "^3.0.1",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
+    "husky": "^9.1.7",
     "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.28.0",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.13.0",
-    "vite": "^6.0.3",
+    "rollup-plugin-visualizer": "^6.0.0",
+    "typedoc": "^0.28.9",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.0.2",
     "vite-plugin-dts": "^4.2.2",
     "vitest": "^3.0.2"
   },