@nosto/nosto-react 0.3.0 → 0.4.0

package/dist/index.es.client.js

@@ -1,10 +1,12 @@
-import * as React from "react";
-import React__default, { createContext, useContext, useEffect, isValidElement, useState, useRef } from "react";
+import React, { createContext, useContext, useEffect, useRef, useMemo, isValidElement, useState } from "react";
 import { createRoot } from "react-dom/client";
 const NostoContext = createContext({
-  account: void 0,
+  account: "",
   currentVariation: "",
-  renderFunction: void 0
+  pageType: "",
+  responseMode: "HTML",
+  clientScriptLoaded: false,
+  useRenderCampaigns: () => void 0
 });
 function useNostoContext() {
   const context = useContext(NostoContext);
@@ -24,7 +26,7 @@ var reactJsxRuntime_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f = React__default, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
+var f = React, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
 function q(c, a, g) {
   var b, d = {}, e = null, h = null;
   void 0 !== g && (e = "" + g);
@@ -46,7 +48,7 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
-const NostoFohofo = () => {
+function Nosto404() {
   const {
     clientScriptLoaded,
     currentVariation,
@@ -76,8 +78,8 @@ const NostoFohofo = () => {
       children: "notfound"
     })
   });
-};
-const NostoOther = () => {
+}
+function NostoOther() {
   const {
     clientScriptLoaded,
     currentVariation,
@@ -107,8 +109,8 @@ const NostoOther = () => {
       children: "other"
     })
   });
-};
-const NostoCheckout = () => {
+}
+function NostoCheckout() {
   const {
     clientScriptLoaded,
     currentVariation,
@@ -138,11 +140,61 @@ const NostoCheckout = () => {
       children: "cart"
     })
   });
-};
-const NostoProduct = ({
-  product,
-  tagging
-}) => {
+}
+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
+  } = props;
   const {
     clientScriptLoaded,
     currentVariation,
@@ -154,15 +206,15 @@ const NostoProduct = ({
     renderCampaigns,
     pageTypeUpdated
   } = useRenderCampaigns("product");
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (clientScriptLoaded && pageTypeUpdated) {
       window.nostojs((api) => {
         api.defaultSession().setResponseMode(responseMode).viewProduct(product).setPlacements(api.placements.getPlacements()).load().then((data) => {
           renderCampaigns(data, api);
         });
-      }, [clientScriptLoaded, currentVariation, product, recommendationComponent, pageTypeUpdated]);
+      });
     }
-  });
+  }, [clientScriptLoaded, currentVariation, product, recommendationComponent, pageTypeUpdated]);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
       className: "nosto_page_type",
@@ -280,10 +332,11 @@ const NostoProduct = ({
       }, index))]
     })]
   });
-};
-const NostoCategory = ({
-  category
-}) => {
+}
+function NostoCategory(props) {
+  const {
+    category
+  } = props;
   const {
     clientScriptLoaded,
     currentVariation,
@@ -319,10 +372,11 @@ const NostoCategory = ({
       children: category
     })]
   });
-};
-const NostoSearch = ({
-  query
-}) => {
+}
+function NostoSearch(props) {
+  const {
+    query
+  } = props;
   const {
     clientScriptLoaded,
     currentVariation,
@@ -358,31 +412,35 @@ const NostoSearch = ({
       children: query
     })]
   });
-};
-var snakeize = function walk(obj) {
-  if (!obj || typeof obj !== "object")
+}
+function snakeize(obj) {
+  if (!obj || typeof obj !== "object") {
     return obj;
-  if (isDate(obj) || isRegex(obj))
+  }
+  if (isDate(obj) || isRegex(obj)) {
     return obj;
-  if (Array.isArray(obj))
-    return obj.map(walk);
-  return Object.keys(obj).reduce(function(acc, key) {
-    var camel = key[0].toLowerCase() + key.slice(1).replace(/([A-Z]+)/g, function(m2, x) {
+  }
+  if (Array.isArray(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) => {
       return "_" + x.toLowerCase();
     });
-    acc[camel] = walk(obj[key]);
+    acc[camel] = snakeize(obj[key]);
     return acc;
   }, {});
-};
-var isDate = function(obj) {
+}
+function isDate(obj) {
   return Object.prototype.toString.call(obj) === "[object Date]";
-};
-var isRegex = function(obj) {
+}
+function isRegex(obj) {
   return Object.prototype.toString.call(obj) === "[object RegExp]";
-};
-const NostoOrder = ({
-  order
-}) => {
+}
+function NostoOrder(props) {
+  const {
+    order
+  } = props;
   const {
     clientScriptLoaded,
     currentVariation,
@@ -418,8 +476,8 @@ const NostoOrder = ({
       children: order.purchase.number
     })]
   });
-};
-const NostoHome = () => {
+}
+function NostoHome() {
   const {
     clientScriptLoaded,
     currentVariation,
@@ -449,31 +507,34 @@ const NostoHome = () => {
       children: "front"
     })
   });
-};
-const NostoPlacement = ({
-  id,
-  pageType
-}) => {
+}
+function NostoPlacement(props) {
+  const {
+    id,
+    pageType
+  } = props;
   return /* @__PURE__ */ jsx("div", {
     className: "nosto_element",
     id
-  }, id + pageType);
-};
-const NostoProvider = ({
-  account,
-  currentVariation = "",
-  multiCurrency = false,
-  host,
-  children,
-  recommendationComponent
-}) => {
-  const [clientScriptLoadedState, setClientScriptLoadedState] = React__default.useState(false);
-  const clientScriptLoaded = React__default.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
+  }, id + (pageType || ""));
+}
+function NostoProvider(props) {
+  let {
+    account,
+    currentVariation = "",
+    multiCurrency = false,
+    host,
+    children,
+    recommendationComponent,
+    shopifyMarkets
+  } = props;
+  const [clientScriptLoadedState, setClientScriptLoadedState] = React.useState(false);
+  const clientScriptLoaded = React.useMemo(() => clientScriptLoadedState, [clientScriptLoadedState]);
   currentVariation = multiCurrency ? currentVariation : "";
   const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML";
-  function RecommendationComponentWrapper(props) {
-    return React__default.cloneElement(recommendationComponent, {
-      nostoRecommendation: props.nostoRecommendation
+  function RecommendationComponentWrapper(props2) {
+    return React.cloneElement(recommendationComponent, {
+      nostoRecommendation: props2.nostoRecommendation
     });
   }
   const [pageType, setPageType] = useState("");
@@ -511,21 +572,59 @@ const NostoProvider = ({
     };
   };
   useEffect(() => {
-    if (!document.querySelectorAll("[nosto-client-script]").length) {
+    var _a, _b, _c;
+    if (!window.nostojs) {
+      window.nostojs = (cb) => {
+        (window.nostojs.q = window.nostojs.q || []).push(cb);
+      };
+      window.nostojs((api) => api.setAutoLoad(false));
+    }
+    if (!document.querySelectorAll("[nosto-client-script]").length && !shopifyMarkets) {
       const script = document.createElement("script");
       script.type = "text/javascript";
       script.src = "//" + (host || "connect.nosto.com") + "/include/" + account;
       script.async = true;
       script.setAttribute("nosto-client-script", "");
       script.onload = () => {
-        console.log("Nosto client script loaded");
+        var _a2;
+        if (typeof jest !== "undefined") {
+          (_a2 = window.nosto) == null ? void 0 : _a2.reload({
+            site: "localhost"
+          });
+        }
         setClientScriptLoadedState(true);
       };
-      document.head.appendChild(script);
+      document.body.appendChild(script);
+    }
+    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 (clientScriptLoadedState) {
+          setClientScriptLoadedState(false);
+        }
+        (_a = existingScript == null ? void 0 : existingScript.parentNode) == null ? void 0 : _a.removeChild(existingScript);
+        (_b = nostoSandbox == null ? void 0 : nostoSandbox.parentNode) == null ? void 0 : _b.removeChild(nostoSandbox);
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "//" + (host || "connect.nosto.com") + `/script/shopify/market/nosto.js?merchant=${account}&market=${shopifyMarkets.marketId || ""}&locale=${((_c = shopifyMarkets == null ? void 0 : shopifyMarkets.language) == null ? void 0 : _c.toLowerCase()) || ""}`;
+        script.async = true;
+        script.setAttribute("nosto-client-script", "");
+        script.setAttribute("nosto-language", (shopifyMarkets == null ? void 0 : shopifyMarkets.language) || "");
+        script.setAttribute("nosto-market-id", String(shopifyMarkets == null ? void 0 : shopifyMarkets.marketId));
+        script.onload = () => {
+          var _a2;
+          if (typeof jest !== "undefined") {
+            (_a2 = window.nosto) == null ? void 0 : _a2.reload({
+              site: "localhost"
+            });
+          }
+          setClientScriptLoadedState(true);
+        };
+        document.body.appendChild(script);
+      }
     }
-    window.nostojs = (cb) => (window.nostojs.q = window.nostojs.q || []).push(cb);
-    window.nostojs((api) => api.setAutoLoad(false));
-  }, []);
+  }, [clientScriptLoadedState, shopifyMarkets]);
   return /* @__PURE__ */ jsx(NostoContext.Provider, {
     value: {
       account,
@@ -538,111 +637,12 @@ const NostoProvider = ({
     },
     children
   });
-};
-var has = Object.prototype.hasOwnProperty;
-function find(iter, tar, key) {
-  for (key of iter.keys()) {
-    if (dequal(key, tar))
-      return key;
-  }
-}
-function dequal(foo, bar) {
-  var ctor, len, tmp;
-  if (foo === bar)
-    return true;
-  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
-    if (ctor === Date)
-      return foo.getTime() === bar.getTime();
-    if (ctor === RegExp)
-      return foo.toString() === bar.toString();
-    if (ctor === Array) {
-      if ((len = foo.length) === bar.length) {
-        while (len-- && dequal(foo[len], bar[len]))
-          ;
-      }
-      return len === -1;
-    }
-    if (ctor === Set) {
-      if (foo.size !== bar.size) {
-        return false;
-      }
-      for (len of foo) {
-        tmp = len;
-        if (tmp && typeof tmp === "object") {
-          tmp = find(bar, tmp);
-          if (!tmp)
-            return false;
-        }
-        if (!bar.has(tmp))
-          return false;
-      }
-      return true;
-    }
-    if (ctor === Map) {
-      if (foo.size !== bar.size) {
-        return false;
-      }
-      for (len of foo) {
-        tmp = len[0];
-        if (tmp && typeof tmp === "object") {
-          tmp = find(bar, tmp);
-          if (!tmp)
-            return false;
-        }
-        if (!dequal(len[1], bar.get(tmp))) {
-          return false;
-        }
-      }
-      return true;
-    }
-    if (ctor === ArrayBuffer) {
-      foo = new Uint8Array(foo);
-      bar = new Uint8Array(bar);
-    } else if (ctor === DataView) {
-      if ((len = foo.byteLength) === bar.byteLength) {
-        while (len-- && foo.getInt8(len) === bar.getInt8(len))
-          ;
-      }
-      return len === -1;
-    }
-    if (ArrayBuffer.isView(foo)) {
-      if ((len = foo.byteLength) === bar.byteLength) {
-        while (len-- && foo[len] === bar[len])
-          ;
-      }
-      return len === -1;
-    }
-    if (!ctor || typeof foo === "object") {
-      len = 0;
-      for (ctor in foo) {
-        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor))
-          return false;
-        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor]))
-          return false;
-      }
-      return Object.keys(bar).length === len;
-    }
-  }
-  return foo !== foo && bar !== bar;
-}
-function useDeepCompareMemoize(value) {
-  var ref = React.useRef(value);
-  var signalRef = React.useRef(0);
-  if (!dequal(value, ref.current)) {
-    ref.current = value;
-    signalRef.current += 1;
-  }
-  return React.useMemo(function() {
-    return ref.current;
-  }, [signalRef.current]);
-}
-function useDeepCompareEffect(callback, dependencies) {
-  return React.useEffect(callback, useDeepCompareMemoize(dependencies));
 }
-const NostoSession = ({
-  cart,
-  customer
-}) => {
+function NostoSession(props) {
+  const {
+    cart,
+    customer
+  } = props;
   const {
     clientScriptLoaded
   } = useNostoContext();
@@ -654,7 +654,7 @@ const NostoSession = ({
         api.defaultSession().setResponseMode("HTML").setCart(currentCart).setCustomer(currentCustomer).viewOther().load();
       });
     }
-  }, [clientScriptLoaded, cart || [], customer || {}]);
+  }, [clientScriptLoaded, cart, customer]);
   return /* @__PURE__ */ jsx(Fragment, {});
-};
-export { NostoFohofo as Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };
+}
+export { Nosto404, NostoCategory, NostoCheckout, NostoContext, NostoHome, NostoOrder, NostoOther, NostoPlacement, NostoProduct, NostoProvider, NostoSearch, NostoSession, useNostoContext };

package/dist/index.umd.client.js

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