@builder.io/sdk-react-nextjs 0.18.10 → 0.18.13

package/lib/browser/blocks/image/image.cjs

@@ -1,11 +1,11 @@
-"use client";"use strict";const t=require("react/jsx-runtime"),l=require("./image.helpers.cjs");function f(e){var s,r,u,d,o,g;function n(){var h;const i=e.image||e.src;if(!i||!(typeof i=="string"&&(i.match(/builder\.io/)||i.match(/cdn\.shopify\.com/))))return e.srcset;if(!e.noWebp){if(e.srcset&&((h=e.image)!=null&&h.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),l.getSrcSet(i)}else if(e.image&&!e.srcset)return l.getSrcSet(i);return l.getSrcSet(i)}}function a(){var c;return(c=n==null?void 0:n())!=null&&c.match(/builder\.io/)&&!e.noWebp?n().replace(/\?/g,"?format=webp&"):""}function m(){const c={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?c:void 0}return t.jsxs(t.Fragment,{children:[t.jsxs(t.Fragment,{children:[t.jsxs("picture",{children:[a()?t.jsx("source",{type:"image/webp",srcSet:a()}):null,t.jsx("img",{loading:e.highPriority?"eager":"lazy",fetchPriority:e.highPriority?"high":"auto",alt:e.altText,title:e.title,role:e.altText?void 0:"presentation",style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...m()},className:"builder-image"+(e.className?" "+e.className:"")+" img-0525a549",src:e.image,srcSet:n(),sizes:e.sizes})]}),e.aspectRatio&&!((r=(s=e.builderBlock)==null?void 0:s.children)!=null&&r.length&&e.fitContent)?t.jsx("div",{className:"builder-image-sizer div-0525a549",style:{paddingTop:e.aspectRatio*100+"%"}}):null,(d=(u=e.builderBlock)==null?void 0:u.children)!=null&&d.length&&e.fitContent?t.jsx(t.Fragment,{children:e.children}):null,!e.fitContent&&((g=(o=e.builderBlock)==null?void 0:o.children)!=null&&g.length)?t.jsx("div",{className:"div-0525a549-2",children:e.children}):null]}),t.jsx("style",{children:`.img-0525a549 {
+"use client";"use strict";const t=require("react/jsx-runtime"),f=require("react"),c=require("./image.helpers.cjs");function b(e){var s,r,u,o,d,g;function n(){var h;const i=e.image||e.src;if(!i||!(typeof i=="string"&&(i.match(/builder\.io/)||i.match(/cdn\.shopify\.com/))))return e.srcset;if(!e.noWebp){if(e.srcset&&((h=e.image)!=null&&h.includes("builder.io/api/v1/image"))){if(!e.srcset.includes(e.image.split("?")[0]))return console.debug("Removed given srcset"),c.getSrcSet(i)}else if(e.image&&!e.srcset)return c.getSrcSet(i);return c.getSrcSet(i)}}function l(){var a;return(a=n==null?void 0:n())!=null&&a.match(/builder\.io/)&&!e.noWebp?n().replace(/\?/g,"?format=webp&"):""}function m(){const a={position:"absolute",height:"100%",width:"100%",left:"0px",top:"0px"};return e.aspectRatio?a:void 0}return f.useEffect(()=>{},[]),t.jsxs(t.Fragment,{children:[t.jsxs(t.Fragment,{children:[t.jsxs("picture",{children:[l()?t.jsx("source",{type:"image/webp",srcSet:l()}):null,t.jsx("img",{loading:e.highPriority?"eager":"lazy",fetchPriority:e.highPriority?"high":"auto",alt:e.altText,title:e.title,role:e.altText?void 0:"presentation",style:{objectPosition:e.backgroundPosition||"center",objectFit:e.backgroundSize||"cover",...m()},className:"builder-image"+(e.className?" "+e.className:"")+" img-0aa95e74",src:e.image,srcSet:n(),sizes:e.sizes})]}),e.aspectRatio&&!((r=(s=e.builderBlock)==null?void 0:s.children)!=null&&r.length&&e.fitContent)?t.jsx("div",{className:"builder-image-sizer div-0aa95e74",style:{paddingTop:e.aspectRatio*100+"%"}}):null,(o=(u=e.builderBlock)==null?void 0:u.children)!=null&&o.length&&e.fitContent?t.jsx(t.Fragment,{children:e.children}):null,!e.fitContent&&((g=(d=e.builderBlock)==null?void 0:d.children)!=null&&g.length)?t.jsx("div",{className:"div-0aa95e74-2",children:e.children}):null]}),t.jsx("style",{children:`.img-0aa95e74 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-0525a549 {
+}.div-0aa95e74 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-0525a549-2 {
+}.div-0aa95e74-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -14,4 +14,4 @@
   left: 0;
   width: 100%;
   height: 100%;
-}`})]})}module.exports=f;
+}`})]})}module.exports=b;

package/lib/browser/blocks/image/image.mjs

@@ -1,8 +1,9 @@
 "use client";
-import { jsxs as a, Fragment as c, jsx as t } from "react/jsx-runtime";
+import { jsxs as l, Fragment as c, jsx as t } from "react/jsx-runtime";
+import { useEffect as v } from "react";
 import { getSrcSet as o } from "./image.helpers.mjs";
-function x(e) {
-  var d, u, s, g, h, m;
+function w(e) {
+  var d, u, s, g, m, h;
   function n() {
     var f;
     const i = e.image || e.src;
@@ -20,22 +21,23 @@ function x(e) {
     }
   }
   function r() {
-    var l;
-    return (l = n == null ? void 0 : n()) != null && l.match(/builder\.io/) && !e.noWebp ? n().replace(/\?/g, "?format=webp&") : "";
+    var a;
+    return (a = n == null ? void 0 : n()) != null && a.match(/builder\.io/) && !e.noWebp ? n().replace(/\?/g, "?format=webp&") : "";
   }
   function b() {
-    const l = {
+    const a = {
       position: "absolute",
       height: "100%",
       width: "100%",
       left: "0px",
       top: "0px"
     };
-    return e.aspectRatio ? l : void 0;
+    return e.aspectRatio ? a : void 0;
   }
-  return /* @__PURE__ */ a(c, { children: [
-    /* @__PURE__ */ a(c, { children: [
-      /* @__PURE__ */ a("picture", { children: [
+  return v(() => {
+  }, []), /* @__PURE__ */ l(c, { children: [
+    /* @__PURE__ */ l(c, { children: [
+      /* @__PURE__ */ l("picture", { children: [
         r() ? /* @__PURE__ */ t("source", { type: "image/webp", srcSet: r() }) : null,
         /* @__PURE__ */ t(
           "img",
@@ -50,7 +52,7 @@ function x(e) {
               objectFit: e.backgroundSize || "cover",
               ...b()
             },
-            className: "builder-image" + (e.className ? " " + e.className : "") + " img-0525a549",
+            className: "builder-image" + (e.className ? " " + e.className : "") + " img-0aa95e74",
             src: e.image,
             srcSet: n(),
             sizes: e.sizes
@@ -60,23 +62,23 @@ function x(e) {
       e.aspectRatio && !((u = (d = e.builderBlock) == null ? void 0 : d.children) != null && u.length && e.fitContent) ? /* @__PURE__ */ t(
         "div",
         {
-          className: "builder-image-sizer div-0525a549",
+          className: "builder-image-sizer div-0aa95e74",
           style: {
             paddingTop: e.aspectRatio * 100 + "%"
           }
         }
       ) : null,
       (g = (s = e.builderBlock) == null ? void 0 : s.children) != null && g.length && e.fitContent ? /* @__PURE__ */ t(c, { children: e.children }) : null,
-      !e.fitContent && ((m = (h = e.builderBlock) == null ? void 0 : h.children) != null && m.length) ? /* @__PURE__ */ t("div", { className: "div-0525a549-2", children: e.children }) : null
+      !e.fitContent && ((h = (m = e.builderBlock) == null ? void 0 : m.children) != null && h.length) ? /* @__PURE__ */ t("div", { className: "div-0aa95e74-2", children: e.children }) : null
     ] }),
-    /* @__PURE__ */ t("style", { children: `.img-0525a549 {
+    /* @__PURE__ */ t("style", { children: `.img-0aa95e74 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-0525a549 {
+}.div-0aa95e74 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-0525a549-2 {
+}.div-0aa95e74-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -89,5 +91,5 @@ function x(e) {
   ] });
 }
 export {
-  x as default
+  w as default
 };

package/lib/browser/blocks/personalization-container/component-info.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"PersonalizationContainer",shouldReceiveBuilderProps:{builderBlock:!0,builderContext:!0,builderComponents:!0},noWrap:!0,image:"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",canHaveChildren:!0,inputs:[{name:"variants",defaultValue:[],behavior:"personalizationVariantList",type:"list",subFields:[{name:"name",type:"text"},{name:"query",friendlyName:"Targeting rules",type:"BuilderQuery",defaultValue:[]},{name:"startDate",type:"date"},{name:"endDate",type:"date"},{name:"blocks",type:"uiBlocks",hideFromUI:!0,defaultValue:[]}]}]};exports.componentInfo=e;

package/lib/browser/blocks/personalization-container/component-info.mjs

@@ -0,0 +1,40 @@
+const e = {
+  name: "PersonalizationContainer",
+  shouldReceiveBuilderProps: {
+    builderBlock: !0,
+    builderContext: !0,
+    builderComponents: !0
+  },
+  noWrap: !0,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a",
+  canHaveChildren: !0,
+  inputs: [{
+    name: "variants",
+    defaultValue: [],
+    behavior: "personalizationVariantList",
+    type: "list",
+    subFields: [{
+      name: "name",
+      type: "text"
+    }, {
+      name: "query",
+      friendlyName: "Targeting rules",
+      type: "BuilderQuery",
+      defaultValue: []
+    }, {
+      name: "startDate",
+      type: "date"
+    }, {
+      name: "endDate",
+      type: "date"
+    }, {
+      name: "blocks",
+      type: "uiBlocks",
+      hideFromUI: !0,
+      defaultValue: []
+    }]
+  }]
+};
+export {
+  e as componentInfo
+};

package/lib/browser/blocks/personalization-container/helpers/inlined-fns.cjs

@@ -0,0 +1,162 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(l,f,y,g){function o(r){return typeof r=="string"}function a(r){return typeof r=="number"}function c(r,n){return(()=>{const s=n.property,u=n.operator;let e=n.value;if(n&&n.property==="urlPath"&&n.value&&typeof n.value=="string"&&n.value!=="/"&&n.value.endsWith("/")&&(e=n.value.slice(0,-1)),!(s&&u))return!0;if(Array.isArray(e))return u==="isNot"?e.every(v=>c(r,{property:s,operator:u,value:v})):!!e.find(v=>c(r,{property:s,operator:u,value:v}));const t=r[s];if(Array.isArray(t))return t.includes(e);switch(u){case"is":return t===e;case"isNot":return t!==e;case"contains":return(o(t)||Array.isArray(t))&&t.includes(String(e));case"startsWith":return o(t)&&t.startsWith(String(e));case"endsWith":return o(t)&&t.endsWith(String(e));case"greaterThan":return a(t)&&a(e)&&t>e;case"lessThan":return a(t)&&a(e)&&t<e;case"greaterThanOrEqualTo":return a(t)&&a(e)&&t>=e;case"lessThanOrEqualTo":return a(t)&&a(e)&&t<=e;default:return!1}})()}const i={query:f,startDate:y,endDate:g},d=l.date&&new Date(l.date)||new Date;return i.startDate&&new Date(i.startDate)>d||i.endDate&&new Date(i.endDate)<d?!1:!i.query||!i.query.length?!0:i.query.every(r=>c(l,r))}const S=`function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+  if (locale) {
+    attributes.locale = locale;
+  }
+  const winningVariantIndex = variants?.findIndex(function (variant) {
+    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+  });
+  const parentDiv = document.currentScript?.parentElement;
+  const variantId = parentDiv?.getAttribute('data-variant-id');
+  const isDefaultVariant = variantId === \`\${blockId}-default\`;
+  const isWinningVariant = winningVariantIndex !== -1 && variantId === \`\${blockId}-\${winningVariantIndex}\` || winningVariantIndex === -1 && isDefaultVariant;
+  if (isWinningVariant && !isDefaultVariant) {
+    parentDiv?.removeAttribute('hidden');
+    parentDiv?.removeAttribute('aria-hidden');
+  } else if (!isWinningVariant && isDefaultVariant) {
+    parentDiv?.setAttribute('hidden', 'true');
+    parentDiv?.setAttribute('aria-hidden', 'true');
+  }
+  if (isHydrationTarget) {
+    if (!isWinningVariant) {
+      const itsStyleEl = parentDiv?.previousElementSibling;
+      if (itsStyleEl) {
+        itsStyleEl.remove();
+      }
+      parentDiv?.remove();
+    }
+    const thisScript = document.currentScript;
+    if (thisScript) {
+      thisScript.remove();
+    }
+  }
+}`,m=`function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+  function isString(val) {
+    return typeof val === 'string';
+  }
+  function isNumber(val) {
+    return typeof val === 'number';
+  }
+  function objectMatchesQuery(userattr, query) {
+    const result = (() => {
+      const property = query.property;
+      const operator = query.operator;
+      let testValue = query.value;
+      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {
+        testValue = query.value.slice(0, -1);
+      }
+      if (!(property && operator)) {
+        return true;
+      }
+      if (Array.isArray(testValue)) {
+        if (operator === 'isNot') {
+          return testValue.every(val => objectMatchesQuery(userattr, {
+            property,
+            operator,
+            value: val
+          }));
+        }
+        return !!testValue.find(val => objectMatchesQuery(userattr, {
+          property,
+          operator,
+          value: val
+        }));
+      }
+      const value = userattr[property];
+      if (Array.isArray(value)) {
+        return value.includes(testValue);
+      }
+      switch (operator) {
+        case 'is':
+          return value === testValue;
+        case 'isNot':
+          return value !== testValue;
+        case 'contains':
+          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+        case 'startsWith':
+          return isString(value) && value.startsWith(String(testValue));
+        case 'endsWith':
+          return isString(value) && value.endsWith(String(testValue));
+        case 'greaterThan':
+          return isNumber(value) && isNumber(testValue) && value > testValue;
+        case 'lessThan':
+          return isNumber(value) && isNumber(testValue) && value < testValue;
+        case 'greaterThanOrEqualTo':
+          return isNumber(value) && isNumber(testValue) && value >= testValue;
+        case 'lessThanOrEqualTo':
+          return isNumber(value) && isNumber(testValue) && value <= testValue;
+        default:
+          return false;
+      }
+    })();
+    return result;
+  }
+  const item = {
+    query,
+    startDate,
+    endDate
+  };
+  const now = userAttributes.date && new Date(userAttributes.date) || new Date();
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+  return item.query.every(filter => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}`,b=`function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const visibilityStylesEl = document.currentScript?.previousElementSibling;
+  if (!visibilityStylesEl) {
+    return;
+  }
+  if (isHydrationTarget) {
+    visibilityStylesEl.remove();
+    const currentScript = document.currentScript;
+    if (currentScript) {
+      currentScript.remove();
+    }
+  } else {
+    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+    if (locale) {
+      attributes.locale = locale;
+    }
+    const winningVariantIndex = variants?.findIndex(function (variant) {
+      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+    });
+    if (winningVariantIndex !== -1) {
+      let newStyleStr = variants?.map((_, index) => {
+        if (index === winningVariantIndex) return '';
+        return \`div[data-variant-id="\${blockId}-\${index}"] { display: none !important; } \`;
+      }).join('') || '';
+      newStyleStr += \`div[data-variant-id="\${blockId}-default"] { display: none !important; } \`;
+      visibilityStylesEl.innerHTML = newStyleStr;
+    }
+  }
+}`;exports.FILTER_WITH_CUSTOM_TARGETING_SCRIPT=m;exports.PERSONALIZATION_SCRIPT=S;exports.UPDATE_VISIBILITY_STYLES_SCRIPT=b;exports.filterWithCustomTargeting=p;

package/lib/browser/blocks/personalization-container/helpers/inlined-fns.mjs

@@ -0,0 +1,225 @@
+function m(l, f, y, p) {
+  function o(r) {
+    return typeof r == "string";
+  }
+  function a(r) {
+    return typeof r == "number";
+  }
+  function c(r, n) {
+    return (() => {
+      const u = n.property, s = n.operator;
+      let e = n.value;
+      if (n && n.property === "urlPath" && n.value && typeof n.value == "string" && n.value !== "/" && n.value.endsWith("/") && (e = n.value.slice(0, -1)), !(u && s))
+        return !0;
+      if (Array.isArray(e))
+        return s === "isNot" ? e.every((v) => c(r, {
+          property: u,
+          operator: s,
+          value: v
+        })) : !!e.find((v) => c(r, {
+          property: u,
+          operator: s,
+          value: v
+        }));
+      const t = r[u];
+      if (Array.isArray(t))
+        return t.includes(e);
+      switch (s) {
+        case "is":
+          return t === e;
+        case "isNot":
+          return t !== e;
+        case "contains":
+          return (o(t) || Array.isArray(t)) && t.includes(String(e));
+        case "startsWith":
+          return o(t) && t.startsWith(String(e));
+        case "endsWith":
+          return o(t) && t.endsWith(String(e));
+        case "greaterThan":
+          return a(t) && a(e) && t > e;
+        case "lessThan":
+          return a(t) && a(e) && t < e;
+        case "greaterThanOrEqualTo":
+          return a(t) && a(e) && t >= e;
+        case "lessThanOrEqualTo":
+          return a(t) && a(e) && t <= e;
+        default:
+          return !1;
+      }
+    })();
+  }
+  const i = {
+    query: f,
+    startDate: y,
+    endDate: p
+  }, d = l.date && new Date(l.date) || /* @__PURE__ */ new Date();
+  return i.startDate && new Date(i.startDate) > d || i.endDate && new Date(i.endDate) < d ? !1 : !i.query || !i.query.length ? !0 : i.query.every((r) => c(l, r));
+}
+const b = `function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {
+  if (!navigator.cookieEnabled) {
+    return;
+  }
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+  if (locale) {
+    attributes.locale = locale;
+  }
+  const winningVariantIndex = variants?.findIndex(function (variant) {
+    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+  });
+  const parentDiv = document.currentScript?.parentElement;
+  const variantId = parentDiv?.getAttribute('data-variant-id');
+  const isDefaultVariant = variantId === \`\${blockId}-default\`;
+  const isWinningVariant = winningVariantIndex !== -1 && variantId === \`\${blockId}-\${winningVariantIndex}\` || winningVariantIndex === -1 && isDefaultVariant;
+  if (isWinningVariant && !isDefaultVariant) {
+    parentDiv?.removeAttribute('hidden');
+    parentDiv?.removeAttribute('aria-hidden');
+  } else if (!isWinningVariant && isDefaultVariant) {
+    parentDiv?.setAttribute('hidden', 'true');
+    parentDiv?.setAttribute('aria-hidden', 'true');
+  }
+  if (isHydrationTarget) {
+    if (!isWinningVariant) {
+      const itsStyleEl = parentDiv?.previousElementSibling;
+      if (itsStyleEl) {
+        itsStyleEl.remove();
+      }
+      parentDiv?.remove();
+    }
+    const thisScript = document.currentScript;
+    if (thisScript) {
+      thisScript.remove();
+    }
+  }
+}`, h = `function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {
+  function isString(val) {
+    return typeof val === 'string';
+  }
+  function isNumber(val) {
+    return typeof val === 'number';
+  }
+  function objectMatchesQuery(userattr, query) {
+    const result = (() => {
+      const property = query.property;
+      const operator = query.operator;
+      let testValue = query.value;
+      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {
+        testValue = query.value.slice(0, -1);
+      }
+      if (!(property && operator)) {
+        return true;
+      }
+      if (Array.isArray(testValue)) {
+        if (operator === 'isNot') {
+          return testValue.every(val => objectMatchesQuery(userattr, {
+            property,
+            operator,
+            value: val
+          }));
+        }
+        return !!testValue.find(val => objectMatchesQuery(userattr, {
+          property,
+          operator,
+          value: val
+        }));
+      }
+      const value = userattr[property];
+      if (Array.isArray(value)) {
+        return value.includes(testValue);
+      }
+      switch (operator) {
+        case 'is':
+          return value === testValue;
+        case 'isNot':
+          return value !== testValue;
+        case 'contains':
+          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));
+        case 'startsWith':
+          return isString(value) && value.startsWith(String(testValue));
+        case 'endsWith':
+          return isString(value) && value.endsWith(String(testValue));
+        case 'greaterThan':
+          return isNumber(value) && isNumber(testValue) && value > testValue;
+        case 'lessThan':
+          return isNumber(value) && isNumber(testValue) && value < testValue;
+        case 'greaterThanOrEqualTo':
+          return isNumber(value) && isNumber(testValue) && value >= testValue;
+        case 'lessThanOrEqualTo':
+          return isNumber(value) && isNumber(testValue) && value <= testValue;
+        default:
+          return false;
+      }
+    })();
+    return result;
+  }
+  const item = {
+    query,
+    startDate,
+    endDate
+  };
+  const now = userAttributes.date && new Date(userAttributes.date) || new Date();
+  if (item.startDate && new Date(item.startDate) > now) {
+    return false;
+  } else if (item.endDate && new Date(item.endDate) < now) {
+    return false;
+  }
+  if (!item.query || !item.query.length) {
+    return true;
+  }
+  return item.query.every(filter => {
+    return objectMatchesQuery(userAttributes, filter);
+  });
+}`, S = `function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {
+  function getCookie(name) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const visibilityStylesEl = document.currentScript?.previousElementSibling;
+  if (!visibilityStylesEl) {
+    return;
+  }
+  if (isHydrationTarget) {
+    visibilityStylesEl.remove();
+    const currentScript = document.currentScript;
+    if (currentScript) {
+      currentScript.remove();
+    }
+  } else {
+    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+    if (locale) {
+      attributes.locale = locale;
+    }
+    const winningVariantIndex = variants?.findIndex(function (variant) {
+      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+    });
+    if (winningVariantIndex !== -1) {
+      let newStyleStr = variants?.map((_, index) => {
+        if (index === winningVariantIndex) return '';
+        return \`div[data-variant-id="\${blockId}-\${index}"] { display: none !important; } \`;
+      }).join('') || '';
+      newStyleStr += \`div[data-variant-id="\${blockId}-default"] { display: none !important; } \`;
+      visibilityStylesEl.innerHTML = newStyleStr;
+    }
+  }
+}`;
+export {
+  h as FILTER_WITH_CUSTOM_TARGETING_SCRIPT,
+  b as PERSONALIZATION_SCRIPT,
+  S as UPDATE_VISIBILITY_STYLES_SCRIPT,
+  m as filterWithCustomTargeting
+};

package/lib/browser/blocks/personalization-container/helpers.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../constants/target.cjs"),_=require("../../functions/is-browser.cjs"),N=require("../../functions/is-editing.cjs"),r=require("./helpers/inlined-fns.cjs"),u="default",g="filterWithCustomTargeting",R="builderIoPersonalization",E="updateVisibilityStylesScript",l=["react","vue","svelte"],P=["vue","svelte"];function d(t,i){return!(t&&t.length>0)||!i?!1:P.includes(c.TARGET)?!0:!_.isBrowser()}function $({variants:t,previewingIndex:i,isHydrated:n,filteredVariants:o,fallbackBlocks:s}){var I;const T={blocks:s!=null?s:[],path:"this.children",index:u};if(n&&N.isEditing()){if(typeof i=="number"&&i<((I=t==null?void 0:t.length)!=null?I:0)){const e=t==null?void 0:t[i];if(e)return{blocks:e.blocks,path:`variants.${i}.blocks`,index:i}}return T}if(_.isBrowser()){const e=o==null?void 0:o[0];if(e&&t){const S=t.indexOf(e);if(S!==-1)return{blocks:e.blocks,path:`variants.${S}.blocks`,index:S}}}return T}const O=()=>`
+  window.${g} = ${r.FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${R} = ${r.PERSONALIZATION_SCRIPT}
+  window.${E} = ${r.UPDATE_VISIBILITY_STYLES_SCRIPT}
+  `,A=c.TARGET==="react",f=(t,i,n)=>`window.${R}(${JSON.stringify(t)}, "${i}", ${A}${n?`, "${n}"`:""})`,h=(t,i,n)=>`window.${E}(${JSON.stringify(t)}, "${i}", ${A}${n?`, "${n}"`:""})`;exports.filterWithCustomTargeting=r.filterWithCustomTargeting;exports.DEFAULT_INDEX=u;exports.SDKS_REQUIRING_RESET_APPROACH=P;exports.SDKS_SUPPORTING_PERSONALIZATION=l;exports.checkShouldRenderVariants=d;exports.getBlocksToRender=$;exports.getInitPersonalizationVariantsFnsScriptString=O;exports.getPersonalizationScript=f;exports.getUpdateVisibilityStylesScript=h;

package/lib/browser/blocks/personalization-container/helpers.mjs

@@ -0,0 +1,64 @@
+import { TARGET as S } from "../../constants/target.mjs";
+import { isBrowser as _ } from "../../functions/is-browser.mjs";
+import { isEditing as E } from "../../functions/is-editing.mjs";
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT as f, PERSONALIZATION_SCRIPT as N, UPDATE_VISIBILITY_STYLES_SCRIPT as $ } from "./helpers/inlined-fns.mjs";
+import { filterWithCustomTargeting as D } from "./helpers/inlined-fns.mjs";
+const A = "default", P = "filterWithCustomTargeting", c = "builderIoPersonalization", u = "updateVisibilityStylesScript", p = ["react", "vue", "svelte"], O = ["vue", "svelte"];
+function l(t, n) {
+  return !(t && t.length > 0) || !n ? !1 : O.includes(S) ? !0 : !_();
+}
+function C({
+  variants: t,
+  previewingIndex: n,
+  isHydrated: o,
+  filteredVariants: r,
+  fallbackBlocks: e
+}) {
+  var I;
+  const T = {
+    blocks: e != null ? e : [],
+    path: "this.children",
+    index: A
+  };
+  if (o && E()) {
+    if (typeof n == "number" && n < ((I = t == null ? void 0 : t.length) != null ? I : 0)) {
+      const i = t == null ? void 0 : t[n];
+      if (i)
+        return {
+          blocks: i.blocks,
+          path: `variants.${n}.blocks`,
+          index: n
+        };
+    }
+    return T;
+  }
+  if (_()) {
+    const i = r == null ? void 0 : r[0];
+    if (i && t) {
+      const s = t.indexOf(i);
+      if (s !== -1)
+        return {
+          blocks: i.blocks,
+          path: `variants.${s}.blocks`,
+          index: s
+        };
+    }
+  }
+  return T;
+}
+const L = () => `
+  window.${P} = ${f}
+  window.${c} = ${N}
+  window.${u} = ${$}
+  `, R = S === "react", U = (t, n, o) => `window.${c}(${JSON.stringify(t)}, "${n}", ${R}${o ? `, "${o}"` : ""})`, b = (t, n, o) => `window.${u}(${JSON.stringify(t)}, "${n}", ${R}${o ? `, "${o}"` : ""})`;
+export {
+  A as DEFAULT_INDEX,
+  O as SDKS_REQUIRING_RESET_APPROACH,
+  p as SDKS_SUPPORTING_PERSONALIZATION,
+  l as checkShouldRenderVariants,
+  D as filterWithCustomTargeting,
+  C as getBlocksToRender,
+  L as getInitPersonalizationVariantsFnsScriptString,
+  U as getPersonalizationScript,
+  b as getUpdateVisibilityStylesScript
+};

package/lib/browser/blocks/personalization-container/personalization-container.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const r=require("react/jsx-runtime"),a=require("react"),k=require("../../components/blocks/blocks.cjs"),v=require("../../components/inlined-script.cjs"),H=require("../../components/inlined-styles.cjs"),C=require("../../constants/target.cjs"),U=require("../../functions/get-class-prop-name.cjs"),L=require("../../functions/is-editing.cjs"),z=require("../../functions/is-previewing.cjs"),K=require("../../helpers/canTrack.cjs"),V=require("../../helpers/user-attributes.cjs"),s=require("./helpers.cjs"),Q=require("./helpers/inlined-fns.cjs");function X(e){var g,f,B,m,A,P,$,T,y,q,D,I,_;const c=a.useRef(null),[N,w]=a.useState(()=>V.userAttributesService.getUserAttributes()),[x,J]=a.useState(()=>{var t,n,i;return s.getPersonalizationScript(e.variants,((t=e.builderBlock)==null?void 0:t.id)||"none",(i=(n=e.builderContext)==null?void 0:n.rootState)==null?void 0:i.locale)}),[W,M]=a.useState(()=>{var t,n,i;return s.getUpdateVisibilityStylesScript(e.variants,((t=e.builderBlock)==null?void 0:t.id)||"none",(i=(n=e.builderContext)==null?void 0:n.rootState)==null?void 0:i.locale)}),[h,Y]=a.useState(()=>[]),[E,Z]=a.useState(()=>{var t;return s.checkShouldRenderVariants(e.variants,K.getDefaultCanTrack((t=e.builderContext)==null?void 0:t.canTrack))}),[S,F]=a.useState(()=>!1);function G(){return{...e.attributes,[U.getClassPropName()]:`builder-personalization-container ${e.attributes[U.getClassPropName()]||""}`}}function R(){return(e.variants||[]).filter(t=>{var n,i,o,l;return Q.filterWithCustomTargeting({...(i=(n=e.builderContext)==null?void 0:n.rootState)!=null&&i.locale?{locale:(l=(o=e.builderContext)==null?void 0:o.rootState)==null?void 0:l.locale}:{},...N},t.query,t.startDate,t.endDate)})}function u(){var t;return s.getBlocksToRender({variants:e.variants,fallbackBlocks:(t=e.builderBlock)==null?void 0:t.children,isHydrated:S,filteredVariants:R(),previewingIndex:e.previewingIndex})}function O(){return(e.variants||[]).map((t,n)=>{var i;return`div[data-variant-id="${(i=e.builderBlock)==null?void 0:i.id}-${n}"] { display: none !important; } `}).join("")}return a.useEffect(()=>{var n;F(!0);const t=V.userAttributesService.subscribeOnUserAttributesChange(i=>{w(i)});if(!(L.isEditing()||z.isPreviewing())){const i=R()[0];c.current&&(c.current.dispatchEvent(new CustomEvent("builder.variantLoaded",{detail:{variant:i||s.DEFAULT_INDEX,content:(n=e.builderContext)==null?void 0:n.content},bubbles:!0})),new IntersectionObserver(l=>{l.forEach(b=>{var d;b.isIntersecting&&c.current&&c.current.dispatchEvent(new CustomEvent("builder.variantDisplayed",{detail:{variant:i||s.DEFAULT_INDEX,content:(d=e.builderContext)==null?void 0:d.content},bubbles:!0}))})}).observe(c.current))}h.push(t)},[]),a.useEffect(()=>()=>{h.forEach(t=>t())},[]),r.jsxs("div",{ref:c,...G(),children:[S&&s.SDKS_REQUIRING_RESET_APPROACH.includes(C.TARGET)?r.jsx(k,{blocks:u().blocks,parent:(g=e.builderBlock)==null?void 0:g.id,path:u().path,context:e.builderContext,registeredComponents:e.builderComponents,BlocksWrapperProps:{...(f=e.builderContext)==null?void 0:f.BlocksWrapperProps,"data-variant-id":`${(B=e.builderBlock)==null?void 0:B.id}-${u().index}`}}):null,!S&&s.SDKS_REQUIRING_RESET_APPROACH.includes(C.TARGET)||!s.SDKS_REQUIRING_RESET_APPROACH.includes(C.TARGET)?r.jsxs(r.Fragment,{children:[E?r.jsxs(r.Fragment,{children:[r.jsx(H,{nonce:((m=e.builderContext)==null?void 0:m.nonce)||"",styles:O(),id:`variants-styles-${(A=e.builderBlock)==null?void 0:A.id}`}),r.jsx(v,{nonce:((P=e.builderContext)==null?void 0:P.nonce)||"",scriptStr:W,id:`variants-visibility-script-${($=e.builderBlock)==null?void 0:$.id}`}),(T=e.variants)==null?void 0:T.map((t,n)=>{var i,o,l,b,d,j;return r.jsx(k,{BlocksWrapperProps:{...(i=e.builderContext)==null?void 0:i.BlocksWrapperProps,"aria-hidden":!0,hidden:!0,"data-variant-id":`${(o=e.builderBlock)==null?void 0:o.id}-${n}`},blocks:t.blocks,parent:(l=e.builderBlock)==null?void 0:l.id,path:`component.options.variants.${n}.blocks`,context:e.builderContext,registeredComponents:e.builderComponents,children:r.jsx(v,{nonce:((b=e.builderContext)==null?void 0:b.nonce)||"",scriptStr:x,id:`variants-script-${(d=e.builderBlock)==null?void 0:d.id}-${n}`})},`${(j=e.builderBlock)==null?void 0:j.id}-${n}`)})]}):null,r.jsx(k,{blocks:u().blocks,parent:(y=e.builderBlock)==null?void 0:y.id,path:u().path,context:e.builderContext,registeredComponents:e.builderComponents,BlocksWrapperProps:{...(q=e.builderContext)==null?void 0:q.BlocksWrapperProps,"data-variant-id":`${(D=e.builderBlock)==null?void 0:D.id}-${u().index}`},children:E?r.jsx(v,{nonce:((I=e.builderContext)==null?void 0:I.nonce)||"",scriptStr:x,id:`variants-script-${(_=e.builderBlock)==null?void 0:_.id}-${s.DEFAULT_INDEX}`}):null})]}):null]})}module.exports=X;