@nosto/nosto-react 0.4.1 → 0.4.3

package/README.md

@@ -42,8 +42,8 @@ _\*\*Note: The search feature is available when implemented via our code editor.
 
 #### Required versions
 
-- npm: 8.5.5
-- node: v16.15.0
+- npm: 9.8.1
+- node: v18.18.0
 
 ### Installation
 
@@ -269,6 +269,9 @@ import {
 </div>;
 ```
 
+### Detailed technical documentation
+Find our latest technical specs and documentation hosted [here](https://nosto.github.io/nosto-react).
+
 ### Feedback
 
 If you've found a feature missing or you would like to report an issue, simply [open up an issue](https://github.com/nosto/nosto-react/issues/new) and let us know.

package/dist/{index.es.client.js → index.es.js}

@@ -6,7 +6,13 @@ const NostoContext = createContext({
   pageType: "",
   responseMode: "HTML",
   clientScriptLoaded: false,
-  useRenderCampaigns: () => void 0
+  useRenderCampaigns: () => {
+    return {
+      renderCampaigns: () => {
+      },
+      pageTypeUpdated: false
+    };
+  }
 });
 function useNostoContext() {
   const context = useContext(NostoContext);
@@ -15,6 +21,67 @@ function useNostoContext() {
   }
   return context;
 }
+const isObject = (v) => String(v) === "[object Object]";
+function isPlainObject(value) {
+  if (!isObject(value))
+    return false;
+  const constructor = value.constructor;
+  if (constructor === void 0)
+    return true;
+  const prototype = constructor.prototype;
+  if (!isObject(prototype))
+    return false;
+  if (!prototype.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  return true;
+}
+function deepCompare(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime();
+  }
+  if (a instanceof Array && b instanceof Array) {
+    if (a.length !== b.length) {
+      return false;
+    }
+    return a.every((v, i) => deepCompare(v, b[i]));
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const entriesA = Object.entries(a);
+    if (entriesA.length !== Object.keys(b).length) {
+      return false;
+    }
+    return entriesA.every(([k2, v]) => deepCompare(v, b[k2]));
+  }
+  return false;
+}
+function useDeepCompareEffect(callback, dependencies) {
+  return useEffect(callback, useDeepCompareMemoize(dependencies));
+}
+function useDeepCompareMemoize(value) {
+  const ref = useRef(value);
+  const signalRef = useRef(0);
+  if (!deepCompare(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+  return useMemo(() => ref.current, [signalRef.current]);
+}
+function useNostoApi(cb, deps, flags) {
+  const { clientScriptLoaded, currentVariation, responseMode } = useNostoContext();
+  const useEffectFn = (flags == null ? void 0 : flags.deep) ? useDeepCompareEffect : useEffect;
+  useEffectFn(() => {
+    if (clientScriptLoaded) {
+      window.nostojs((api) => {
+        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode);
+        cb(api);
+      });
+    }
+  }, [clientScriptLoaded, currentVariation, responseMode, ...deps != null ? deps : []]);
+}
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -50,9 +117,6 @@ const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 function Nosto404(props) {
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -60,15 +124,10 @@ function Nosto404(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("404");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewNotFound().setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewNotFound().setPlacements(props.placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -81,9 +140,6 @@ function Nosto404(props) {
 }
 function NostoOther(props) {
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -91,15 +147,10 @@ function NostoOther(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("other");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewOther().setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewOther().setPlacements(props.placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -112,9 +163,6 @@ function NostoOther(props) {
 }
 function NostoCheckout(props) {
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -122,15 +170,10 @@ function NostoCheckout(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("checkout");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCart().setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewCart().setPlacements(props.placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -141,64 +184,13 @@ function NostoCheckout(props) {
     })
   });
 }
-function isPlainObject(value) {
-  const isObject = (v) => String(v) === "[object Object]";
-  if (!isObject(value))
-    return false;
-  const constructor = value.constructor;
-  if (constructor === void 0)
-    return true;
-  const prototype = constructor.prototype;
-  if (!isObject(prototype))
-    return false;
-  if (!prototype.hasOwnProperty("isPrototypeOf")) {
-    return false;
-  }
-  return true;
-}
-function deepCompare(a, b) {
-  if (a === b) {
-    return true;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    return a.getTime() === b.getTime();
-  }
-  if (a instanceof Array && b instanceof Array) {
-    if (a.length !== b.length) {
-      return false;
-    }
-    return a.every((v, i) => deepCompare(v, b[i]));
-  }
-  if (isPlainObject(a) && isPlainObject(b)) {
-    const entriesA = Object.entries(a);
-    if (entriesA.length !== Object.keys(b).length) {
-      return false;
-    }
-    return entriesA.every(([k2, v]) => deepCompare(v, b[k2]));
-  }
-  return false;
-}
-function useDeepCompareEffect(callback, dependencies) {
-  return useEffect(callback, useDeepCompareMemoize(dependencies));
-}
-function useDeepCompareMemoize(value) {
-  const ref = useRef(value);
-  const signalRef = useRef(0);
-  if (!deepCompare(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
-  }
-  return useMemo(() => ref.current, [signalRef.current]);
-}
 function NostoProduct(props) {
   const {
     product,
-    tagging
+    tagging,
+    placements
   } = props;
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -206,15 +198,12 @@ function NostoProduct(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("product");
-  useDeepCompareEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setResponseMode(responseMode).viewProduct(product).setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, product, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewProduct(product).setPlacements(placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [product, recommendationComponent, pageTypeUpdated], {
+    deep: true
+  });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -335,12 +324,10 @@ function NostoProduct(props) {
 }
 function NostoCategory(props) {
   const {
-    category
+    category,
+    placements
   } = props;
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -348,15 +335,10 @@ function NostoCategory(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("home");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewCategory(category).setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, category, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewCategory(category).setPlacements(placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [category, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -375,12 +357,10 @@ function NostoCategory(props) {
 }
 function NostoSearch(props) {
   const {
-    query
+    query,
+    placements
   } = props;
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -388,15 +368,10 @@ function NostoSearch(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("search");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewSearch(query).setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, query, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewSearch(query).setPlacements(placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [query, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -424,7 +399,7 @@ function snakeize(obj) {
     return obj.map(snakeize);
   }
   return Object.keys(obj).reduce((acc, key) => {
-    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, (_, x) => {
+    const camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, (_, x) => {
       return "_" + x.toLowerCase();
     });
     acc[camel] = snakeize(obj[key]);
@@ -439,12 +414,10 @@ function isRegex(obj) {
 }
 function NostoOrder(props) {
   const {
-    order
+    order,
+    placements
   } = props;
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -452,15 +425,10 @@ function NostoOrder(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("order");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).addOrder(snakeize(order)).setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().addOrder(snakeize(order)).setPlacements(placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -479,9 +447,6 @@ function NostoOrder(props) {
 }
 function NostoHome(props) {
   const {
-    clientScriptLoaded,
-    currentVariation,
-    responseMode,
     recommendationComponent,
     useRenderCampaigns
   } = useNostoContext();
@@ -489,15 +454,10 @@ function NostoHome(props) {
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("home");
-  useEffect(() => {
-    if (clientScriptLoaded && pageTypeUpdated) {
-      window.nostojs((api) => {
-        api.defaultSession().setVariation(currentVariation).setResponseMode(responseMode).viewFrontPage().setPlacements(props.placements || api.placements.getPlacements()).load().then((data) => {
-          renderCampaigns(data, api);
-        });
-      });
-    }
-  }, [clientScriptLoaded, currentVariation, recommendationComponent, pageTypeUpdated]);
+  useNostoApi(async (api) => {
+    const data = await api.defaultSession().viewFrontPage().setPlacements(props.placements || api.placements.getPlacements()).load();
+    renderCampaigns(data, api);
+  }, [recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -519,9 +479,8 @@ function NostoPlacement(props) {
   }, id + (pageType || ""));
 }
 function NostoProvider(props) {
-  let {
+  const {
     account,
-    currentVariation = "",
     multiCurrency = false,
     host,
     children,
@@ -530,7 +489,7 @@ function NostoProvider(props) {
   } = props;
   const [clientScriptLoadedState, setClientScriptLoadedState] = React.useState(false);
   const clientScriptLoaded = React.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
-  currentVariation = multiCurrency ? currentVariation : "";
+  const currentVariation = multiCurrency ? props.currentVariation : "";
   const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML";
   function RecommendationComponentWrapper(props2) {
     return React.cloneElement(recommendationComponent, {
@@ -538,24 +497,24 @@ function NostoProvider(props) {
     });
   }
   const [pageType, setPageType] = useState("");
-  const useRenderCampaigns = function(type = "") {
+  function useRenderCampaigns(type = "") {
     const placementRefs = useRef({});
     useEffect(() => {
-      if (pageType != type) {
+      if (pageType !== type) {
         setPageType(type);
       }
     }, []);
-    const pageTypeUpdated = type == pageType;
+    const pageTypeUpdated = type === pageType;
     function renderCampaigns(data, api) {
       if (responseMode == "HTML") {
         api.placements.injectCampaigns(data.recommendations);
       } else {
         const recommendations = data.campaigns.recommendations;
         for (const key in recommendations) {
-          let recommendation = recommendations[key];
-          let placementSelector = "#" + key;
-          let placement = () => document.querySelector(placementSelector);
-          if (!!placement()) {
+          const recommendation = recommendations[key];
+          const placementSelector = "#" + key;
+          const placement = () => document.querySelector(placementSelector);
+          if (placement()) {
             if (!placementRefs.current[key])
               placementRefs.current[key] = createRoot(placement());
             const root = placementRefs.current[key];
@@ -570,7 +529,7 @@ function NostoProvider(props) {
       renderCampaigns,
       pageTypeUpdated
     };
-  };
+  }
   useEffect(() => {
     var _a, _b, _c;
     if (!window.nostojs) {
@@ -596,10 +555,10 @@ function NostoProvider(props) {
       };
       document.body.appendChild(script);
     }
-    if (!!shopifyMarkets) {
+    if (shopifyMarkets) {
       const existingScript = document.querySelector("[nosto-client-script]");
       const nostoSandbox = document.querySelector("#nosto-sandbox");
-      if (!existingScript || (existingScript == null ? void 0 : existingScript.getAttribute("nosto-language")) != (shopifyMarkets == null ? void 0 : shopifyMarkets.language) || (existingScript == null ? void 0 : existingScript.getAttribute("nosto-market-id")) != (shopifyMarkets == null ? void 0 : shopifyMarkets.marketId)) {
+      if (!existingScript || (existingScript == null ? void 0 : existingScript.getAttribute("nosto-language")) !== (shopifyMarkets == null ? void 0 : shopifyMarkets.language) || (existingScript == null ? void 0 : existingScript.getAttribute("nosto-market-id")) !== (shopifyMarkets == null ? void 0 : shopifyMarkets.marketId)) {
         if (clientScriptLoadedState) {
           setClientScriptLoadedState(false);
         }

package/dist/index.umd.js

@@ -0,0 +1,9 @@
+(function(m,p){typeof exports=="object"&&typeof module!="undefined"?p(exports,require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react","react-dom/client"],p):(m=typeof globalThis!="undefined"?globalThis:m||self,p(m["@nosto/nosto-react"]={},m.React,m.ReactDOM))})(this,function(m,p,H){"use strict";function M(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var T=M(p);const F=p.createContext({account:"",currentVariation:"",pageType:"",responseMode:"HTML",clientScriptLoaded:!1,useRenderCampaigns:()=>({renderCampaigns:()=>{},pageTypeUpdated:!1})});function f(){const t=p.useContext(F);if(!t)throw new Error("No nosto context found");return t}const I=t=>String(t)==="[object Object]";function q(t){if(!I(t))return!1;const n=t.constructor;if(n===void 0)return!0;const e=n.prototype;return!(!I(e)||!e.hasOwnProperty("isPrototypeOf"))}function U(t,n){if(t===n)return!0;if(t instanceof Date&&n instanceof Date)return t.getTime()===n.getTime();if(t instanceof Array&&n instanceof Array)return t.length!==n.length?!1:t.every((e,a)=>U(e,n[a]));if(q(t)&&q(n)){const e=Object.entries(t);return e.length!==Object.keys(n).length?!1:e.every(([a,i])=>U(i,n[a]))}return!1}function x(t,n){return p.useEffect(t,$(n))}function $(t){const n=p.useRef(t),e=p.useRef(0);return U(t,n.current)||(n.current=t,e.current+=1),p.useMemo(()=>n.current,[e.current])}function C(t,n,e){const{clientScriptLoaded:a,currentVariation:i,responseMode:c}=f();(e!=null&&e.deep?x:p.useEffect)(()=>{a&&window.nostojs(d=>{d.defaultSession().setVariation(i).setResponseMode(c),t(d)})},[a,i,c,...n!=null?n:[]])}var R={exports:{}},b={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var G=T.default,z=Symbol.for("react.element"),J=Symbol.for("react.fragment"),W=Object.prototype.hasOwnProperty,B=G.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Y={key:!0,ref:!0,__self:!0,__source:!0};function D(t,n,e){var a,i={},c=null,r=null;e!==void 0&&(c=""+e),n.key!==void 0&&(c=""+n.key),n.ref!==void 0&&(r=n.ref);for(a in n)W.call(n,a)&&!Y.hasOwnProperty(a)&&(i[a]=n[a]);if(t&&t.defaultProps)for(a in n=t.defaultProps,n)i[a]===void 0&&(i[a]=n[a]);return{$$typeof:z,type:t,key:c,ref:r,props:i,_owner:B.current}}b.Fragment=J,b.jsx=D,b.jsxs=D,R.exports=b;const s=R.exports.jsx,v=R.exports.jsxs,N=R.exports.Fragment;function Z(t){const{recommendationComponent:n,useRenderCampaigns:e}=f(),{renderCampaigns:a,pageTypeUpdated:i}=e("404");return C(async c=>{const r=await c.defaultSession().viewNotFound().setPlacements(t.placements||c.placements.getPlacements()).load();a(r,c)},[n,i]),s(N,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"notfound"})})}function K(t){const{recommendationComponent:n,useRenderCampaigns:e}=f(),{renderCampaigns:a,pageTypeUpdated:i}=e("other");return C(async c=>{const r=await c.defaultSession().viewOther().setPlacements(t.placements||c.placements.getPlacements()).load();a(r,c)},[n,i]),s(N,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"other"})})}function Q(t){const{recommendationComponent:n,useRenderCampaigns:e}=f(),{renderCampaigns:a,pageTypeUpdated:i}=e("checkout");return C(async c=>{const r=await c.defaultSession().viewCart().setPlacements(t.placements||c.placements.getPlacements()).load();a(r,c)},[n,i]),s(N,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"cart"})})}function X(t){const{product:n,tagging:e,placements:a}=t,{recommendationComponent:i,useRenderCampaigns:c}=f(),{renderCampaigns:r,pageTypeUpdated:d}=c("product");return C(async o=>{const u=await o.defaultSession().viewProduct(n).setPlacements(a||o.placements.getPlacements()).load();r(u,o)},[n,i,d],{deep:!0}),v(N,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"product"}),v("div",{className:"nosto_product",style:{display:"none"},children:[(e==null?void 0:e.variationId)&&s("span",{className:"variation_id",children:e.variationId}),n&&s("span",{className:"product_id",children:n}),(e==null?void 0:e.name)&&s("span",{className:"name",children:e.name}),(e==null?void 0:e.url)&&s("span",{className:"url",children:e.url.toString()}),(e==null?void 0:e.imageUrl)&&s("span",{className:"image_url",children:e.imageUrl.toString()}),(e==null?void 0:e.availability)&&s("span",{className:"availability",children:e.availability}),(e==null?void 0:e.price)&&s("span",{className:"price",children:e.price}),(e==null?void 0:e.listPrice)&&s("span",{className:"list_price",children:e.listPrice}),(e==null?void 0:e.priceCurrencyCode)&&s("span",{className:"price_currency_code",children:e.priceCurrencyCode}),(e==null?void 0:e.brand)&&s("span",{className:"brand",children:e.brand}),(e==null?void 0:e.description)&&s("span",{className:"description",children:e.description}),(e==null?void 0:e.googleCategory)&&s("span",{className:"description",children:e.googleCategory}),(e==null?void 0:e.condition)&&s("span",{className:"condition",children:e.condition}),(e==null?void 0:e.gender)&&s("span",{className:"gender",children:e.gender}),(e==null?void 0:e.ageGroup)&&s("span",{className:"age_group",children:e.ageGroup}),(e==null?void 0:e.gtin)&&s("span",{className:"gtin",children:e.gtin}),(e==null?void 0:e.category)&&(e==null?void 0:e.category.map((o,u)=>s("span",{className:"category",children:o},u))),(e==null?void 0:e.tags1)&&e.tags1.map((o,u)=>s("span",{className:"tag1",children:o},u)),(e==null?void 0:e.tags2)&&e.tags2.map((o,u)=>s("span",{className:"tag2",children:o},u)),(e==null?void 0:e.tags3)&&e.tags3.map((o,u)=>s("span",{className:"tag3",children:o},u)),(e==null?void 0:e.ratingValue)&&s("span",{className:"rating_value",children:e.ratingValue}),(e==null?void 0:e.reviewCount)&&s("span",{className:"review_count",children:e.reviewCount}),(e==null?void 0:e.alternateImageUrls)&&e.alternateImageUrls.map((o,u)=>s("span",{className:"alternate_image_url",children:o.toString()},u)),(e==null?void 0:e.customFields)&&Object.keys(e.customFields).map((o,u)=>e.customFields&&e.customFields[o]&&s("span",{className:o,children:e.customFields[o]},u)),(e==null?void 0:e.skus)&&e.skus.map((o,u)=>v("span",{className:"nosto_sku",children:[(o==null?void 0:o.id)&&s("span",{className:"product_id",children:o.id}),(o==null?void 0:o.name)&&s("span",{className:"name",children:o.name}),(o==null?void 0:o.price)&&s("span",{className:"price",children:o.price}),(o==null?void 0:o.listPrice)&&s("span",{className:"list_price",children:o.listPrice}),(o==null?void 0:o.url)&&s("span",{className:"url",children:o.url.toString()}),(o==null?void 0:o.imageUrl)&&s("span",{className:"image_url",children:o.imageUrl.toString()}),(o==null?void 0:o.gtin)&&s("span",{className:"gtin",children:o.gtin}),(o==null?void 0:o.availability)&&s("span",{className:"availability",children:o.availability}),(o==null?void 0:o.customFields)&&Object.keys(o.customFields).map((P,E)=>o.customFields&&o.customFields[P]&&s("span",{className:P,children:o.customFields[P]},E))]},u))]})]})}function g(t){const{category:n,placements:e}=t,{recommendationComponent:a,useRenderCampaigns:i}=f(),{renderCampaigns:c,pageTypeUpdated:r}=i("home");return C(async d=>{const o=await d.defaultSession().viewCategory(n).setPlacements(e||d.placements.getPlacements()).load();c(o,d)},[n,a,r]),v(N,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"category"}),s("div",{className:"nosto_category",style:{display:"none"},children:n})]})}function k(t){const{query:n,placements:e}=t,{recommendationComponent:a,useRenderCampaigns:i}=f(),{renderCampaigns:c,pageTypeUpdated:r}=i("search");return C(async d=>{const o=await d.defaultSession().viewSearch(n).setPlacements(e||d.placements.getPlacements()).load();c(o,d)},[n,a,r]),v(N,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"search"}),s("div",{className:"nosto_search",style:{display:"none"},children:n})]})}function S(t){return!t||typeof t!="object"||ee(t)||te(t)?t:Array.isArray(t)?t.map(S):Object.keys(t).reduce((n,e)=>{const a=e[0].toLowerCase()+e.slice(1).replace(/([A-Z]+)/g,(i,c)=>"_"+c.toLowerCase());return n[a]=S(t[e]),n},{})}function ee(t){return Object.prototype.toString.call(t)==="[object Date]"}function te(t){return Object.prototype.toString.call(t)==="[object RegExp]"}function ne(t){const{order:n,placements:e}=t,{recommendationComponent:a,useRenderCampaigns:i}=f(),{renderCampaigns:c,pageTypeUpdated:r}=i("order");return C(async d=>{const o=await d.defaultSession().addOrder(S(n)).setPlacements(e||d.placements.getPlacements()).load();c(o,d)},[a,r]),v(N,{children:[s("div",{className:"nosto_page_type",style:{display:"none"},children:"order"}),s("div",{className:"nosto_order",style:{display:"none"},children:n.purchase.number})]})}function oe(t){const{recommendationComponent:n,useRenderCampaigns:e}=f(),{renderCampaigns:a,pageTypeUpdated:i}=e("home");return C(async c=>{const r=await c.defaultSession().viewFrontPage().setPlacements(t.placements||c.placements.getPlacements()).load();a(r,c)},[n,i]),s(N,{children:s("div",{className:"nosto_page_type",style:{display:"none"},children:"front"})})}function se(t){const{id:n,pageType:e}=t;return s("div",{className:"nosto_element",id:n},n+(e||""))}function re(t){const{account:n,multiCurrency:e=!1,host:a,children:i,recommendationComponent:c,shopifyMarkets:r}=t,[d,o]=T.default.useState(!1),u=T.default.useMemo(()=>d,[d]),P=e?t.currentVariation:"",E=p.isValidElement(c)?"JSON_ORIGINAL":"HTML";function ce(_){return T.default.cloneElement(c,{nostoRecommendation:_.nostoRecommendation})}const[A,ie]=p.useState("");function le(_=""){const w=p.useRef({});p.useEffect(()=>{A!==_&&ie(_)},[]);const L=_===A;function l(y,h){if(E=="HTML")h.placements.injectCampaigns(y.recommendations);else{const O=y.campaigns.recommendations;for(const j in O){const de=O[j],me="#"+j,V=()=>document.querySelector(me);V()&&(w.current[j]||(w.current[j]=H.createRoot(V())),w.current[j].render(s(ce,{nostoRecommendation:de})))}}}return{renderCampaigns:l,pageTypeUpdated:L}}return p.useEffect(()=>{var _,w,L;if(window.nostojs||(window.nostojs=l=>{(window.nostojs.q=window.nostojs.q||[]).push(l)},window.nostojs(l=>l.setAutoLoad(!1))),!document.querySelectorAll("[nosto-client-script]").length&&!r){const l=document.createElement("script");l.type="text/javascript",l.src="//"+(a||"connect.nosto.com")+"/include/"+n,l.async=!0,l.setAttribute("nosto-client-script",""),l.onload=()=>{var y;typeof jest!="undefined"&&((y=window.nosto)==null||y.reload({site:"localhost"})),o(!0)},document.body.appendChild(l)}if(r){const l=document.querySelector("[nosto-client-script]"),y=document.querySelector("#nosto-sandbox");if(!l||(l==null?void 0:l.getAttribute("nosto-language"))!==(r==null?void 0:r.language)||(l==null?void 0:l.getAttribute("nosto-market-id"))!==(r==null?void 0:r.marketId)){d&&o(!1),(_=l==null?void 0:l.parentNode)==null||_.removeChild(l),(w=y==null?void 0:y.parentNode)==null||w.removeChild(y);const h=document.createElement("script");h.type="text/javascript",h.src="//"+(a||"connect.nosto.com")+`/script/shopify/market/nosto.js?merchant=${n}&market=${r.marketId||""}&locale=${((L=r==null?void 0:r.language)==null?void 0:L.toLowerCase())||""}`,h.async=!0,h.setAttribute("nosto-client-script",""),h.setAttribute("nosto-language",(r==null?void 0:r.language)||""),h.setAttribute("nosto-market-id",String(r==null?void 0:r.marketId)),h.onload=()=>{var O;typeof jest!="undefined"&&((O=window.nosto)==null||O.reload({site:"localhost"})),o(!0)},document.body.appendChild(h)}}},[d,r]),s(F.Provider,{value:{account:n,clientScriptLoaded:u,currentVariation:P,responseMode:E,recommendationComponent:c,useRenderCampaigns:le,pageType:A},children:i})}function ae(t){const{cart:n,customer:e}=t,{clientScriptLoaded:a}=f();return x(()=>{const i=n?S(n):void 0,c=e?S(e):void 0;a&&window.nostojs(r=>{r.defaultSession().setResponseMode("HTML").setCart(i).setCustomer(c).viewOther().load()})},[a,n,e]),s(N,{})}m.Nosto404=Z,m.NostoCategory=g,m.NostoCheckout=Q,m.NostoContext=F,m.NostoHome=oe,m.NostoOrder=ne,m.NostoOther=K,m.NostoPlacement=se,m.NostoProduct=X,m.NostoProvider=re,m.NostoSearch=k,m.NostoSession=ae,m.useNostoContext=f,Object.defineProperties(m,{__esModule:{value:!0},[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": "0.4.1",
+  "version": "0.4.3",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {
@@ -14,14 +14,14 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build && typedoc src/index.client.ts",
+    "build": "tsc && npm run lint && vite build && typedoc src/index.ts",
     "preview": "vite preview",
     "prepare": "vite build",
     "typecheck": "tsc",
-    "tslint": "tslint 'src/**/*.ts?(x)'",
+    "lint": "eslint 'src/**/*.{ts,tsx}' --cache",
     "clean": "rimraf dist",
-    "prettier": "prettier '{src,spec}/*/**' --list-different",
-    "prettier:fix": "prettier '{src,spec}/*/**' --write",
+    "prettier": "prettier '{src,spec}/**' --list-different",
+    "prettier:fix": "prettier '{src,spec}/**' --write",
     "test": "jest spec"
   },
   "files": [
@@ -36,7 +36,12 @@
     "@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": "^1.3.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-promise": "^6.1.1",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "^2.0.5",
@@ -48,15 +53,15 @@
     "typescript": "^4.6.3",
     "vite": "^2.9.9"
   },
-  "main": "./dist/index.umd.client.js",
-  "module": "./dist/index.es.client.js",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
   "types": "./src/types.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.es.client.js",
-      "require": "./dist/index.umd.client.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
     },
-    "./shopify-hydrogen": "./dist/index.es.client.js"
+    "./shopify-hydrogen": "./dist/index.es.js"
   },
   "bugs": {
     "url": "https://github.com/Nosto/nosto-react/issues"

package/src/components/Nosto404.tsx

@@ -0,0 +1,47 @@
+import { useNostoContext } from "./context"
+import { useNostoApi } from "../utils/hooks"
+
+/**
+ * You can personalise your cart and checkout pages by using the `Nosto404` component.
+ * The component does not require any props.
+ *
+ * By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-3`.
+ * You may omit these and use any identifier you need.
+ * The identifiers used here are simply provided to illustrate the example.
+ *
+ * @example
+ * ```
+ * <div className="notfound-page">
+ *   <NostoPlacement id="notfound-nosto-1" />
+ *   <NostoPlacement id="notfound-nosto-2" />
+ *   <NostoPlacement id="notfound-nosto-3" />
+ *   <Nosto404 />
+ * </div>
+ * ```
+ *
+ * @group Components
+ */
+export default function Nosto404(props: { placements?: string[] }) {
+  const { recommendationComponent, useRenderCampaigns } = useNostoContext()
+
+  const { renderCampaigns, pageTypeUpdated } = useRenderCampaigns("404")
+
+  useNostoApi(
+    async (api) => {
+      const data = await api.defaultSession()
+        .viewNotFound()
+        .setPlacements(props.placements || api.placements.getPlacements())
+        .load()
+      renderCampaigns(data, api)
+    },
+    [recommendationComponent, pageTypeUpdated]
+  )
+
+  return (
+    <>
+      <div className="nosto_page_type" style={{ display: "none" }}>
+        notfound
+      </div>
+    </>
+  )
+}