@nosto/nosto-react 2.6.0 → 2.7.0

package/README.md

@@ -1,5 +1,10 @@
 # Nosto React
 
+[![](https://img.shields.io/github/package-json/v/nosto/nosto-react)](https://github.com/Nosto/nosto-react/releases)
+[![](https://github.com/Nosto/nosto-react/actions/workflows/ci.yml/badge.svg)](https://github.com/Nosto/nosto-react/actions/workflows/ci.yml)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[![npm license](https://img.shields.io/npm/l/@nosto/nosto-react.svg)](https://github.com/Nosto/nosto-react/blob/master/LICENSE)
+
 Nosto React is a React component library to make it even easier to implement Nosto.
 
 The library provides you everything to get started with personalisation on your React site. It's dead simple, and beginner friendly.
@@ -64,14 +69,10 @@ There’s one very specific widget in Nosto React and it is the `NostoProvider`
 This widget is what we call the Nosto root widget, which is responsible for adding the actual Nosto script and the JS API stub. This widget wraps all other React Nosto widgets. Here’s how:
 
 ```jsx
-import { NostoProvider } from "@nosto/nosto-react";
-
-<NostoProvider
-  account="your-nosto-account-id"
-  recommendationComponent={<NostoSlot />}
->
+import { NostoProvider } from "@nosto/nosto-react"
+<NostoProvider account="your-nosto-account-id" recommendationComponent={<NostoSlot />}>
   <App />
-</NostoProvider>;
+</NostoProvider>
 ```
 
 **Note:** the component also accepts a prop to configure the host `host="connect.nosto.com"`. In advanced use-cases, the need to configure the host may surface.
@@ -97,8 +98,7 @@ The `NostoSession` component makes it very easy to keep the session up to date s
 The `cart` prop requires a value that adheres to the type `Cart`, while the `customer` prop requires a value that adheres to the type `Customer`.
 
 ```jsx
-import { NostoSession } from "@nosto/nosto-react";
-
+import { NostoSession } from "@nosto/nosto-react"
 <>
   <Meta />
   <header>
@@ -107,7 +107,7 @@ import { NostoSession } from "@nosto/nosto-react";
   </header>
   <Routes />
   <Footer />
-</>;
+</>
 ```
 
 ### Adding Personalisation
@@ -123,8 +123,7 @@ By default, your account, when created, has <u>four</u> front-page placements na
 The `<NostoHome \>` component needs to be added after the placements. Content and recommendations will be rendered through this component.
 
 ```jsx
-import { NostoHome, NostoPlacement } from "@nosto/nosto-react";
-
+import { NostoHome, NostoPlacement } from "@nosto/nosto-react"
 <div className="front-page">
   ... ... ...
   <NostoPlacement id="frontpage-nosto-1" />
@@ -132,7 +131,7 @@ import { NostoHome, NostoPlacement } from "@nosto/nosto-react";
   <NostoPlacement id="frontpage-nosto-3" />
   <NostoPlacement id="frontpage-nosto-4" />
   <NostoHome />
-</div>;
+</div>
 ```
 
 ##### Personalising your product pages
@@ -144,15 +143,14 @@ By default, your account, when created, has <u>three</u> product-page placements
 The `<NostoProduct \>` component needs to be added after the placements. Content and recommendations will be rendered through this component. Pass in the product ID via the `product` prop to pass this information back to Nosto.
 
 ```jsx
-import { NostoPlacement, NostoProduct } from "@nosto/nosto-react";
-
+import { NostoPlacement, NostoProduct } from "@nosto/nosto-react"
 <div className="product-page">
   ... ... ...
   <NostoPlacement id="productpage-nosto-1" />
   <NostoPlacement id="productpage-nosto-2" />
   <NostoPlacement id="productpage-nosto-3" />
   <NostoProduct product={product.id} />
-</div>;
+</div>
 ```
 
 ##### Personalising your search result pages
@@ -162,14 +160,13 @@ You can personalise your search pages by using the `NostoSearch` component. The
 By default, your account, when created, has <u>two</u> search-page placements named `searchpage-nosto-1` and `searchpage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
 ```jsx
-import { NostoPlacement, NostoSearch } from "@nosto/nosto-react";
-
+import { NostoPlacement, NostoSearch } from "@nosto/nosto-react"
 <div className="search-page">
   ... ... ...
   <NostoPlacement id="searchpage-nosto-1" />
   <NostoPlacement id="searchpage-nosto-2" />
   <NostoSearch query={search} />
-</div>;
+</div>
 ```
 
 **Note:** Do not encode the search term in any way. It should be provided an unencoded string. A query for "black shoes" must be provided as-is and not as "black+shoes". Doing so will lead to invalid results.
@@ -181,14 +178,13 @@ You can personalise your category and collection pages by using the `NostoCatego
 By default, your account, when created, has <u>two</u> category placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
 ```jsx
-import { NostoCategory, NostoPlacement } from "@nosto/nosto-react";
-
+import { NostoCategory, NostoPlacement } from "@nosto/nosto-react"
 <div className="category-page">
   ... ... ...
   <NostoPlacement id="categorypage-nosto-1" />
   <NostoPlacement id="categorypage-nosto-2" />
   <NostoCategory category={category.name} />
-</div>;
+</div>
 ```
 
 **Note:** Be sure to pass in the correct category representation. If the category being viewed is Mens >> Jackets, you must provide the name as `/Mens/Jackets` . You must ensure that the category path provided here matches that of the categories tagged in your products.
@@ -200,14 +196,13 @@ You can personalise your cart and checkout pages by using the `NostoCheckout` co
 By default, your account, when created, has <u>two</u> cart-page placements named `categorypage-nosto-1` and `categorypage-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
 ```jsx
-import { NostoCheckout, NostoPlacement } from "@nosto/nosto-react";
-
+import { NostoCheckout, NostoPlacement } from "@nosto/nosto-react"
 <div className="checkout-page">
   ... ... ...
   <NostoPlacement id="checkout-nosto-1" />
   <NostoPlacement id="checkout-nosto-2" />
   <NostoCheckout />
-</div>;
+</div>
 ```
 
 ##### Personalising your 404 error pages
@@ -217,15 +212,14 @@ You can personalise not found pages by using the `Nosto404` component. The compo
 By default, your account, when created, has three 404-page placements named `notfound-nosto-1`, `notfound-nosto-2` and `notfound-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
 ```jsx
-import { Nosto404, NostoPlacement } from "@nosto/nosto-react";
-
+import { Nosto404, NostoPlacement } from "@nosto/nosto-react"
 <div className="notfound-page">
   ... ... ...
   <NostoPlacement id="notfound-nosto-1" />
   <NostoPlacement id="notfound-nosto-2" />
   <NostoPlacement id="notfound-nosto-3" />
   <Nosto404 />
-</div>;
+</div>
 ```
 
 ##### Personalising your miscellaneous pages
@@ -235,14 +229,13 @@ You can personalise your miscellaneous pages by using the `NostoOther` component
 By default, your account, when created, has two other-page placements named `other-nosto-1` and `other-nosto-2`. You may omit these and use any identifier you need. The identifiers used here are simply provided to illustrate the example.
 
 ```jsx
-import { NostoOther, NostoPlacement } from "@nosto/nosto-react";
-
+import { NostoOther, NostoPlacement } from "@nosto/nosto-react"
 <div className="other-page">
   ... ... ...
   <NostoPlacement id="other-nosto-1" />
   <NostoPlacement id="other-nosto-2" />
   <NostoOther />
-</div>;
+</div>
 ```
 
 ##### Personalising your order confirmation page
@@ -252,16 +245,12 @@ You can personalise your order-confirmation/thank-you page by using the `NostoOr
 By default, your account, when created, has one other-page placement named `thankyou-nosto-1`. You may omit this and use any identifier you need. The identifier used here is simply provided to illustrate the example.
 
 ```jsx
-import {
-  NostoOrder,
-  NostoPlacement,
-} from "@nosto/nosto-react";
-
+import { NostoOrder, NostoPlacement } from "@nosto/nosto-react"
 <div className="thankyou-page">
   ... ... ...
   <NostoPlacement id="thankyou-nosto-1" />
-  <NostoOrder order={ order } />
-</div>;
+  <NostoOrder order={order} />
+</div>
 ```
 
 ### Hook alternatives
@@ -278,6 +267,7 @@ For all the page type specific components hooks are also provided with the same
 - useNostoHome
 
 ### Detailed technical documentation
+
 Find our latest technical specs and documentation hosted [here](https://nosto.github.io/nosto-react).
 
 ### Feedback
@@ -292,4 +282,4 @@ Please take a moment to review the guidelines for contributing.
 
 ### License
 
-MIT
+BSD 3-Clause License

package/dist/index.d.ts

@@ -223,7 +223,7 @@ export declare type NostoOtherProps = {
  *
  * @group Components
  */
-export declare function NostoPlacement({ id, pageType }: NostoPlacementProps): JSX.Element;
+export declare function NostoPlacement({ id, pageType, children }: NostoPlacementProps): JSX.Element;
 
 /**
  * @group Components
@@ -231,6 +231,7 @@ export declare function NostoPlacement({ id, pageType }: NostoPlacementProps): J
 export declare type NostoPlacementProps = {
     id: string;
     pageType?: string;
+    children?: React.ReactNode;
 };
 
 /**
@@ -295,7 +296,7 @@ export declare function NostoProvider(props: NostoProviderProps): JSX.Element;
 /**
  * @group Components
  */
-export declare interface NostoProviderProps {
+declare interface NostoProviderProps {
     /**
      * Indicates merchant id
      */
@@ -320,6 +321,10 @@ export declare interface NostoProviderProps {
      * Recommendation component which holds nostoRecommendation object
      */
     recommendationComponent?: RecommendationComponent;
+    /**
+     * Recommendation render mode. See {@link https://nosto.github.io/nosto-js/types/client.RenderMode.html}
+     */
+    renderMode?: RenderMode;
     /**
      * Enables Shopify markets with language and market id
      */

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { createContext as k, useContext as x, useEffect as S, useRef as h, useMemo as I, cloneElement as _, useState as T, isValidElement as D } from "react";
+import { 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 M } from "react-dom/client";
+import { createRoot as D } from "react-dom/client";
 const O = k({
   account: "",
   currentVariation: "",
@@ -10,13 +10,13 @@ const O = k({
 function P() {
   return x(O);
 }
-const N = (e) => String(e) === "[object Object]";
+const g = (e) => String(e) === "[object Object]";
 function L(e) {
-  if (!N(e)) return !1;
+  if (!g(e)) return !1;
   const t = e.constructor;
   if (t === void 0) return !0;
   const n = t.prototype;
-  return !(!N(n) || !n.hasOwnProperty("isPrototypeOf"));
+  return !(!g(n) || !n.hasOwnProperty("isPrototypeOf"));
 }
 function y(e, t) {
   if (e === t)
@@ -31,66 +31,69 @@ function y(e, t) {
   }
   return !1;
 }
-function g(e, t) {
+function j(e, t) {
   return S(e, V(t));
 }
 function V(e) {
   const t = h(e), n = h(0);
   return y(e, t.current) || (t.current = e, n.current += 1), I(() => t.current, [n.current]);
 }
-function j() {
+function N() {
   window.nostojs = window.nostojs ?? function(e) {
     (window.nostojs.q = window.nostojs.q ?? []).push(e);
   };
 }
-function H() {
+async function m(e) {
+  return window.nostojs(e);
+}
+typeof window < "u" && (N(), m((e) => {
+  e.internal.getSettings();
+}));
+function q() {
   return typeof window.nosto < "u";
 }
-const q = {
+const H = {
   production: "https://connect.nosto.com/",
   staging: "https://connect.staging.nosto.com/",
   local: "https://connect.nosto.com/"
 };
 function R(e) {
-  return q[e ?? "production"];
+  return H[e ?? "production"];
 }
 function F({ merchantId: e, env: t, options: n, shopifyInternational: o, scriptLoader: r }) {
-  var c, a;
-  const s = document.querySelector("script[nosto-language], script[nosto-market-id]"), i = String((o == null ? void 0 : o.marketId) || ""), l = (o == null ? void 0 : o.language) || "", C = (s == null ? void 0 : s.getAttribute("nosto-language")) !== l || (s == null ? void 0 : s.getAttribute("nosto-market-id")) !== i;
+  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 m = document.querySelector("#nosto-sandbox");
-    (c = s == null ? void 0 : s.parentNode) == null || c.removeChild(s), (a = m == null ? void 0 : m.parentNode) == null || a.removeChild(m);
+    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", i), p.searchParams.append("locale", l.toLowerCase());
-    const A = {
+    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": l,
-      "nosto-market-id": i
+      "nosto-language": u,
+      "nosto-market-id": a
     };
-    return (r ?? E)(p.toString(), { ...n, attributes: A });
+    return (r ?? E)(p.toString(), { ...n, attributes: b });
   }
   return Promise.resolve();
 }
 function z(e) {
   if (e.shopifyInternational)
     return F(e);
-  const { merchantId: t, env: n, options: o, scriptLoader: r } = e, c = r ?? E, a = new URL(`/include/${t}`, R(n));
-  return c(a.toString(), o);
+  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);
 }
 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);
+    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);
   });
 }
-async function f(e) {
-  return window.nostojs(e);
-}
-typeof window < "u" && j();
-function u(e, t, n) {
+typeof window < "u" && N();
+function d(e, t, n) {
   const { clientScriptLoaded: o } = P();
-  (n != null && n.deep ? g : S)(() => {
-    o && f(e);
+  (n != null && n.deep ? j : S)(() => {
+    o && m(e);
   }, [o, ...t ?? []]);
 }
 function U(e) {
@@ -99,30 +102,32 @@ function U(e) {
     nostoRecommendation: e.nostoRecommendation
   });
 }
-function b(e) {
-  f((t) => t.placements.injectCampaigns(e));
+function A(e) {
+  m((t) => t.placements.injectCampaigns(e));
 }
 function $(e) {
   if (!window.nostojs)
     throw new Error("Nosto has not yet been initialized");
-  b(e.recommendations);
+  A(e.recommendations);
 }
-function d() {
+function l() {
   const { responseMode: e, recommendationComponent: t } = P(), n = h({});
   if (e == "HTML")
     return { renderCampaigns: $ };
+  if (!t)
+    throw new Error("recommendationComponent is required for client-side rendering using hook");
   function o(r) {
-    var a, s;
-    b(((a = r.campaigns) == null ? void 0 : a.content) ?? {});
+    var i, s;
+    A(((i = r.campaigns) == null ? void 0 : i.content) ?? {});
     const c = ((s = r.campaigns) == null ? void 0 : s.recommendations) ?? {};
-    for (const i in c) {
-      const l = c[i], C = "#" + i, m = document.querySelector(C);
-      m && (n.current[i] || (n.current[i] = M(m)), n.current[i].render(
+    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,
           {
             recommendationComponent: t,
-            nostoRecommendation: l
+            nostoRecommendation: u
           }
         )
       ));
@@ -131,18 +136,18 @@ function d() {
   return { renderCampaigns: o };
 }
 function G(e) {
-  const { renderCampaigns: t } = d();
-  u(async (n) => {
+  const { renderCampaigns: t } = l();
+  d(async (n) => {
     const o = await n.defaultSession().viewNotFound().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
     t(o);
   });
 }
-function ie(e) {
+function ae(e) {
   return G(e), null;
 }
 function J({ category: e, placements: t }) {
-  const { renderCampaigns: n } = d();
-  u(
+  const { renderCampaigns: n } = l();
+  d(
     async (o) => {
       const r = await o.defaultSession().viewCategory(e).setPlacements(t || o.placements.getPlacements()).load();
       n(r);
@@ -154,8 +159,8 @@ function ue(e) {
   return J(e), null;
 }
 function W(e) {
-  const { renderCampaigns: t } = d();
-  u(async (n) => {
+  const { renderCampaigns: t } = l();
+  d(async (n) => {
     const o = await n.defaultSession().viewCart().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
     t(o);
   });
@@ -164,8 +169,8 @@ function de(e) {
   return W(e), null;
 }
 function Z(e) {
-  const { renderCampaigns: t } = d();
-  u(async (n) => {
+  const { renderCampaigns: t } = l();
+  d(async (n) => {
     const o = await n.defaultSession().viewFrontPage().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
     t(o);
   });
@@ -186,8 +191,8 @@ function K(e) {
   return Object.prototype.toString.call(e) === "[object RegExp]";
 }
 function Q({ order: e, placements: t }) {
-  const { renderCampaigns: n } = d();
-  u(
+  const { renderCampaigns: n } = l();
+  d(
     async (o) => {
       const r = await o.defaultSession().addOrder(w(e)).setPlacements(t || o.placements.getPlacements()).load();
       n(r);
@@ -200,8 +205,8 @@ function me(e) {
   return Q(e), null;
 }
 function X(e) {
-  const { renderCampaigns: t } = d();
-  u(async (n) => {
+  const { renderCampaigns: t } = l();
+  d(async (n) => {
     const o = await n.defaultSession().viewOther().setPlacements((e == null ? void 0 : e.placements) || n.placements.getPlacements()).load();
     t(o);
   });
@@ -209,20 +214,20 @@ function X(e) {
 function fe(e) {
   return X(e), null;
 }
-function pe({ id: e, pageType: t }) {
-  return /* @__PURE__ */ v("div", { className: "nosto_element", id: e }, e + (t || ""));
+function pe({ id: e, pageType: t, children: n }) {
+  return /* @__PURE__ */ v("div", { className: "nosto_element", id: e, children: n }, e + (t || ""));
 }
 function Y({ product: e, tagging: t, placements: n, reference: o }) {
-  const { renderCampaigns: r } = d();
+  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;
-  u(
-    async (a) => {
-      const s = a.defaultSession().viewProduct(t ?? e).setPlacements(n || a.placements.getPlacements());
+  d(
+    async (i) => {
+      const s = i.defaultSession().viewProduct(t ?? e).setPlacements(n || i.placements.getPlacements());
       o && s.setRef(c, o);
-      const i = await s.load();
-      r(i);
+      const a = await s.load();
+      r(a);
     },
     [c, t == null ? void 0 : t.selected_sku_id]
   );
@@ -233,7 +238,7 @@ function we(e) {
 function ee(e, t) {
   return new Promise((n, o) => {
     const r = document.createElement("script");
-    r.type = "text/javascript", r.src = e, r.async = !0, r.onload = () => n(), r.onerror = () => o(), Object.entries((t == null ? void 0 : t.attributes) ?? {}).forEach(([c, a]) => r.setAttribute(c, a)), (t == null ? void 0 : t.position) === "head" ? document.head.appendChild(r) : document.body.appendChild(r);
+    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);
   });
 }
 const te = { "nosto-client-script": "" };
@@ -243,16 +248,16 @@ function ne(e) {
     account: n,
     shopifyMarkets: o,
     loadScript: r = !0
-  } = e, [c, a] = T(!1);
+  } = e, [c, i] = M(!1);
   return S(() => {
     function s() {
-      a(!0);
+      i(!0);
     }
-    if (j(), f((l) => l.setAutoLoad(!1)), !r) {
-      f(s);
+    if (N(), m((u) => u.setAutoLoad(!1)), !r) {
+      m(s);
       return;
     }
-    async function i() {
+    async function a() {
       await z({
         merchantId: n,
         shopifyInternational: o,
@@ -262,26 +267,26 @@ function ne(e) {
         scriptLoader: t
       }), s();
     }
-    (!H() || o) && i();
+    (!q() || o) && a();
   }, [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 } = e, c = n ? e.currentVariation : "";
-  if (r && !D(r))
+  const { account: t, multiCurrency: n = !1, children: o, recommendationComponent: r, renderMode: c } = e, i = n ? e.currentVariation : "";
+  if (r && !T(r))
     throw new Error(
       "The recommendationComponent prop must be a valid React element. Please provide a valid React element."
     );
-  const a = r ? "JSON_ORIGINAL" : "HTML", { clientScriptLoaded: s } = ne(e);
-  return s && f((i) => {
-    i.defaultSession().setVariation(c).setResponseMode(a);
+  const s = c || (r ? "JSON_ORIGINAL" : "HTML"), { clientScriptLoaded: a } = ne(e);
+  return a && m((u) => {
+    u.defaultSession().setVariation(i).setResponseMode(s);
   }), /* @__PURE__ */ v(
     O.Provider,
     {
       value: {
         account: t,
-        clientScriptLoaded: s,
-        currentVariation: c,
-        responseMode: a,
+        clientScriptLoaded: a,
+        currentVariation: i,
+        responseMode: s,
         recommendationComponent: r
       },
       children: o
@@ -289,8 +294,8 @@ function Ce(e) {
   );
 }
 function oe({ query: e, placements: t }) {
-  const { renderCampaigns: n } = d();
-  u(
+  const { renderCampaigns: n } = l();
+  d(
     async (o) => {
       const r = await o.defaultSession().viewSearch(e).setPlacements(t || o.placements.getPlacements()).load();
       n(r);
@@ -303,9 +308,9 @@ function he(e) {
 }
 function re({ cart: e, customer: t } = {}) {
   const { clientScriptLoaded: n } = P();
-  g(() => {
+  j(() => {
     const o = e ? w(e) : void 0, r = t ? w(t) : void 0;
-    n && f((c) => {
+    n && m((c) => {
       c.defaultSession().setCart(o).setCustomer(r).viewOther().load({ skipPageViews: !0 });
     });
   }, [n, e, t]);
@@ -314,7 +319,7 @@ function ye(e) {
   return re(e), null;
 }
 export {
-  ie as Nosto404,
+  ae as Nosto404,
   ue as NostoCategory,
   de as NostoCheckout,
   O as NostoContext,

package/dist/index.umd.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nosto/nosto-react",
   "description": "Component library to simply implementing Nosto on React.",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": "Mridang Agarwalla, Dominik Gilg",
   "license": "ISC",
   "repository": {
@@ -44,6 +44,7 @@
     "@types/user-event": "^4.1.1",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.13.0",
+    "eslint-plugin-barrel-files": "^3.0.1",
     "eslint-plugin-promise": "^7.1.0",
     "eslint-plugin-react": "^7.33.2",
     "prettier": "^3.3.3",
@@ -58,7 +59,7 @@
     "typescript-eslint": "^8.13.0",
     "vite": "^6.0.3",
     "vite-plugin-dts": "^4.2.2",
-    "vitest": "^2.0.5"
+    "vitest": "^3.0.2"
   },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -73,5 +74,7 @@
   "bugs": {
     "url": "https://github.com/Nosto/nosto-react/issues"
   },
-  "homepage": "https://github.com/Nosto/nosto-react#readme"
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/components/NostoPlacement.tsx

@@ -1,7 +1,7 @@
 /**
  * @group Components
  */
-export type NostoPlacementProps = { id: string; pageType?: string }
+export type NostoPlacementProps = { id: string; pageType?: string; children?: React.ReactNode }
 
 /**
  * Nosto React has a special component called NostoPlacement.
@@ -16,6 +16,10 @@ export type NostoPlacementProps = { id: string; pageType?: string }
  *
  * @group Components
  */
-export function NostoPlacement({ id, pageType }: NostoPlacementProps) {
-  return <div className="nosto_element" id={id} key={id + (pageType || "")} />
+export function NostoPlacement({ id, pageType, children }: NostoPlacementProps) {
+  return (
+    <div className="nosto_element" id={id} key={id + (pageType || "")}>
+      {children}
+    </div>
+  )
 }

package/src/components/NostoProvider.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react"
 import { ScriptLoadOptions } from "../hooks/scriptLoader"
 import { useLoadClientScript } from "../hooks/useLoadClientScript"
 import { nostojs } from "@nosto/nosto-js"
+import { RenderMode } from "@nosto/nosto-js/client"
 
 /**
  * @group Components
@@ -33,6 +34,10 @@ export interface NostoProviderProps {
    * Recommendation component which holds nostoRecommendation object
    */
   recommendationComponent?: RecommendationComponent
+  /**
+   * Recommendation render mode. See {@link https://nosto.github.io/nosto-js/types/client.RenderMode.html}
+   */
+  renderMode?: RenderMode
   /**
    * Enables Shopify markets with language and market id
    */
@@ -72,7 +77,7 @@ export interface NostoProviderProps {
  * @group Components
  */
 export function NostoProvider(props: NostoProviderProps) {
-  const { account, multiCurrency = false, children, recommendationComponent } = props
+  const { account, multiCurrency = false, children, recommendationComponent, renderMode } = props
 
   // Pass currentVariation as empty string if multiCurrency is disabled
   const currentVariation = multiCurrency ? props.currentVariation : ""
@@ -84,7 +89,7 @@ export function NostoProvider(props: NostoProviderProps) {
   }
 
   // Set responseMode for loading campaigns:
-  const responseMode = recommendationComponent ? "JSON_ORIGINAL" : "HTML"
+  const responseMode = renderMode || (recommendationComponent ? "JSON_ORIGINAL" : "HTML")
 
   const { clientScriptLoaded } = useLoadClientScript(props)
 

package/src/hooks/useNostoHome.tsx

@@ -22,4 +22,4 @@ export function useNostoHome(props?: NostoHomeProps) {
       .load()
     renderCampaigns(data)
   })
-}
+}

package/src/hooks/useRenderCampaigns.tsx

@@ -20,7 +20,7 @@ function RecommendationComponentWrapper(props: {
 }
 
 function injectPlacements(data: Record<string, unknown>) {
-  nostojs(api => api.placements.injectCampaigns(data as Parameters<API['placements']['injectCampaigns']>[0]))
+  nostojs(api => api.placements.injectCampaigns(data as Parameters<API["placements"]["injectCampaigns"]>[0]))
 }
 
 function injectCampaigns(data: CampaignData) {
@@ -39,6 +39,10 @@ export function useRenderCampaigns() {
     return { renderCampaigns: injectCampaigns }
   }
 
+  if (!recommendationComponent) {
+    throw new Error("recommendationComponent is required for client-side rendering using hook")
+  }
+
   function renderCampaigns(data: CampaignData) {
     // inject Onsite content campaigns directly
     injectPlacements(data.campaigns?.content ?? {})

package/src/index.ts

@@ -1,25 +1,26 @@
+/* eslint-disable barrel-files/avoid-barrel-files */
 export type { Product, PushedCustomer as Customer, Cart, WebsiteOrder as Order } from "@nosto/nosto-js/client"
 export type { Recommendation } from "./types"
 export { type ScriptLoadOptions } from "./hooks/scriptLoader"
 export { NostoContext, type NostoContextType } from "./context"
 export { useNostoContext } from "./hooks/useNostoContext"
-export * from "./components/Nosto404"
-export * from "./components/NostoCategory"
-export * from "./components/NostoCheckout"
-export * from "./components/NostoHome"
-export * from "./components/NostoOrder"
-export * from "./components/NostoOther"
-export * from "./components/NostoPlacement"
-export * from "./components/NostoProduct"
-export * from "./components/NostoProvider"
-export * from "./components/NostoSearch"
-export * from "./components/NostoSession"
-export * from "./hooks/useNosto404"
-export * from "./hooks/useNostoCategory"
-export * from "./hooks/useNostoCheckout"
-export * from "./hooks/useNostoHome"
-export * from "./hooks/useNostoOrder"
-export * from "./hooks/useNostoOther"
-export * from "./hooks/useNostoProduct"
-export * from "./hooks/useNostoSearch"
-export * from "./hooks/useNostoSession"
+export { Nosto404 } from "./components/Nosto404"
+export { NostoCategory } from "./components/NostoCategory"
+export { NostoCheckout } from "./components/NostoCheckout"
+export { NostoHome } from "./components/NostoHome"
+export { NostoOrder } from "./components/NostoOrder"
+export { NostoOther } from "./components/NostoOther"
+export { NostoPlacement, type NostoPlacementProps } from "./components/NostoPlacement"
+export { NostoProduct } from "./components/NostoProduct"
+export { NostoProvider } from "./components/NostoProvider"
+export { NostoSearch } from "./components/NostoSearch"
+export { NostoSession } from "./components/NostoSession"
+export { useNosto404, type Nosto404Props } from "./hooks/useNosto404"
+export { useNostoCategory, type NostoCategoryProps } from "./hooks/useNostoCategory"
+export { useNostoCheckout, type NostoCheckoutProps } from "./hooks/useNostoCheckout"
+export { useNostoHome, type NostoHomeProps } from "./hooks/useNostoHome"
+export { useNostoOrder, type NostoOrderProps } from "./hooks/useNostoOrder"
+export { useNostoOther, type NostoOtherProps } from "./hooks/useNostoOther"
+export { useNostoProduct, type NostoProductProps } from "./hooks/useNostoProduct"
+export { useNostoSearch, type NostoSearchProps }from "./hooks/useNostoSearch"
+export { useNostoSession, type NostoSessionProps } from "./hooks/useNostoSession"