@useinsider/guido 3.1.1-beta.f1817f3 → 3.1.1-beta.f9482a3

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,18 +1,18 @@
-import { useRecommendation as f } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as P, REGEX as m, VerticalOrientation as g, CSS as e, ATTRIBUTES as a, CONDITIONS as A, HTML as h } from "../../enums/recommendation.js";
-import { prepareRecommendationBlocks as D } from "./utils/recommendationCompilerUtils.js";
-const G = [
+import { useRecommendation as N } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as M, REGEX as _, VerticalOrientation as h, CSS as d, ATTRIBUTES as R, CONDITIONS as y, HTML as C } from "../../enums/recommendation.js";
+import { prepareRecommendationBlocks as x } from "./utils/recommendationCompilerUtils.js";
+const w = [
   {
     id: "replace-images-with-variable-names",
     description: "Replacing dummy images with variable names in recommendation module",
     type: "custom",
-    processor: (s) => {
-      let t = s;
-      return Object.entries(P).forEach(([, l]) => {
-        Object.entries(l).forEach(([n, o]) => {
-          t = t.replaceAll(o, `{{${n}}}`);
+    processor: (n) => {
+      let e = n;
+      return Object.entries(M).forEach(([, l]) => {
+        Object.entries(l).forEach(([s, r]) => {
+          e = e.replaceAll(r, `{{${s}}}`);
         });
-      }), t;
+      }), e;
     },
     priority: 50
   },
@@ -29,21 +29,21 @@ const G = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (s) => {
-      const { calculateCardWidth: t, getRecommendationCampaignData: l } = f();
-      let n = s;
-      const o = n.match(m.ID);
-      if (o) {
-        const d = [];
-        if (o.forEach((c) => {
-          const E = /recommendation-id="(.*?)"/i.exec(c), I = E ? E[1].trim() : "", p = l(I);
-          p.textTrimming && p.orientation === g && d.push(t(p));
-        }), d.length) {
-          const c = `width:${Math.min(...d)}px!important;`;
-          n = n.replace(e.REGULAR_NAME_HEIGHT, `${e.TRIMMED_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.REGULAR_NAME_CONTAINER_HEIGHT, e.TRIMMED_NAME_CONTAINER_CSS).replace(e.RESPONSIVE_NAME_SIZE, `${e.RESPONSIVE_NAME_HEIGHT} ${c} ${e.ELLIPSIS}`).replace(e.RESPONSIVE_NAME_CONTAINER_HEIGHT, e.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+    processor: (n) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: l } = N();
+      let s = n;
+      const r = s.match(_.ID);
+      if (r) {
+        const i = [];
+        if (r.forEach((p) => {
+          const u = /recommendation-id="(.*?)"/i.exec(p), I = u ? u[1].trim() : "", E = l(I);
+          E.textTrimming && E.orientation === h && i.push(e(E));
+        }), i.length) {
+          const p = `width:${Math.min(...i)}px!important;`;
+          s = s.replace(d.REGULAR_NAME_HEIGHT, `${d.TRIMMED_NAME_HEIGHT} ${p} ${d.ELLIPSIS}`).replace(d.REGULAR_NAME_CONTAINER_HEIGHT, d.TRIMMED_NAME_CONTAINER_CSS).replace(d.RESPONSIVE_NAME_SIZE, `${d.RESPONSIVE_NAME_HEIGHT} ${p} ${d.ELLIPSIS}`).replace(d.RESPONSIVE_NAME_CONTAINER_HEIGHT, d.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return n;
+      return s;
     },
     priority: 52
   },
@@ -51,39 +51,147 @@ const G = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (s) => D(s),
+    processor: (n) => x(n),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (s) => {
-      let t = s;
-      const l = t.match(m.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = f();
-      return l !== null && l.forEach((o) => {
-        const d = o.match(m.CUSTOM_FIELD);
-        if (!d)
+    processor: (n) => {
+      let e = n;
+      const l = e.match(_.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: s } = N();
+      return l !== null && l.forEach((r) => {
+        const i = r.match(_.CUSTOM_FIELD);
+        if (!i)
           return;
-        const [c] = d, E = c.match(m.CUSTOM_FIELD_INDEXES_PART), I = c.match(m.CUSTOM_FIELD_NAME_PART), p = o.match(m.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!E || !I || !p)
+        const [p] = i, u = p.match(_.CUSTOM_FIELD_INDEXES_PART), I = p.match(_.CUSTOM_FIELD_NAME_PART), E = r.match(_.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!u || !I || !E)
           return;
-        const [u] = E, [R] = I, [_] = p, T = R.substring(1, R.length - 2), S = _.match(m.COMPOSITION) !== null;
-        let i = c;
-        if (S) {
-          const $ = u.substring(2, u.length - 3), r = n($);
-          T === a.OMNIBUS_PRICE && (r.priceBeforeTextValue && (i = `${r.priceBeforeTextValue}${i}`), r.priceAfterTextValue && (i = `${i}${r.priceAfterTextValue}`)), T === a.OMNIBUS_DISCOUNT && (r.discountBeforeTextValue && (i = `${r.discountBeforeTextValue}${i}`), r.discountAfterTextValue && (i = `${i}${r.discountAfterTextValue}`));
+        const [S] = u, [m] = I, [t] = E, o = m.substring(1, m.length - 2), c = t.match(_.COMPOSITION) !== null;
+        let a = p;
+        if (c) {
+          const b = S.substring(2, S.length - 3), A = s(b);
+          o === R.OMNIBUS_PRICE && (A.priceBeforeTextValue && (a = `${A.priceBeforeTextValue}${a}`), A.priceAfterTextValue && (a = `${a}${A.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (A.discountBeforeTextValue && (a = `${A.discountBeforeTextValue}${a}`), A.discountAfterTextValue && (a = `${a}${A.discountAfterTextValue}`));
         }
-        const N = u.substring(2);
-        let M = "";
-        T in A.IF && (M = A.IF[T].replaceAll(`{${a.DISCOUNT}}`, `${N}${a.DISCOUNT}`).replaceAll(`{${a.OMNIBUS_DISCOUNT}}`, `${N}${a.OMNIBUS_DISCOUNT}`).replaceAll(`{${a.OMNIBUS_PRICE}}`, `${N}${a.OMNIBUS_PRICE}`));
-        const O = `${_}${i}${h.PARAGRAPH_END_TAG}`, C = `${M}${S ? O : o}${A.ELSE}${_}${h.PARAGRAPH_END_TAG}${A.END_IF}`;
-        t = t.replace(o, C);
-      }), t;
+        const f = S.substring(2);
+        let T = "";
+        o in y.IF && (T = y.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${f}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${f}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${f}${R.OMNIBUS_PRICE}`));
+        const $ = `${t}${a}${C.PARAGRAPH_END_TAG}`, g = `${T}${c ? $ : r}${y.ELSE}${t}${C.PARAGRAPH_END_TAG}${y.END_IF}`;
+        e = e.replace(r, g);
+      }), e;
     },
     priority: 53
+  },
+  {
+    id: "strip-empty-omnibus-spans",
+    description: "Remove empty omnibus text-before and text-after span elements",
+    type: "regex",
+    pattern: '<span class="omnibus-text-(?:before|after)">\\s*</span>',
+    replacement: "",
+    flags: "g",
+    priority: 54
+  },
+  {
+    id: "strip-recommendation-editor-attributes",
+    description: "Strip editor-only attributes from compiled recommendation output",
+    type: "regex",
+    // eslint-disable-next-line @stylistic/max-len
+    pattern: '\\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"',
+    replacement: "",
+    flags: "g",
+    priority: 55
+  },
+  {
+    id: "strip-unused-recommendation-classes",
+    description: "Remove CSS classes not referenced by any style rule from recommendation elements",
+    type: "custom",
+    processor: (n) => {
+      let e = n.replace(
+        / class="(?:product-card-segment|attribute-cell|recommendation-attribute-row|product-image|product-name|product-price|product-old-price|product-omnibus-price|product-omnibus-discount|product-button|recommendation-product-row|product-card-wrapper)"/g,
+        ""
+      );
+      return e = e.replaceAll("es-button buy-button", "es-button"), e = e.replaceAll("ins-recommendation-product-container ", ""), e;
+    },
+    priority: 56
+  },
+  {
+    id: "remove-empty-mobile-layout-artifacts",
+    description: "Remove empty mobile container rows and unused mobile layout CSS",
+    type: "custom",
+    processor: (n) => {
+      let e = n;
+      return e = e.replace(
+        /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
+        ""
+      ), /class="[^"]*ins-recommendation-mobile-container/.test(e) || (e = e.replace(
+        /\.ins-recommendation-mobile-container\s*\{\s*display\s*:\s*none\s*;?\s*\}/g,
+        ""
+      ), e = e.replace(
+        /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
+        (l, s) => {
+          const r = s.match(/[^{}]+\{[^{}]*\}/g) || [], i = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return r.every((u) => i.test(u)) ? "" : l;
+        }
+      )), e;
+    },
+    priority: 57
+  },
+  {
+    id: "deduplicate-inline-styles",
+    description: "Replace repeated inline styles with CSS class references within recommendation blocks",
+    type: "custom",
+    processor: (n) => {
+      const e = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, l = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
+      let r = e.exec(n);
+      for (; r !== null; ) {
+        let t = l.exec(r[1]);
+        for (; t !== null; ) {
+          const [, o] = t;
+          s.set(o, (s.get(o) || 0) + 1), t = l.exec(r[1]);
+        }
+        l.lastIndex = 0, r = e.exec(n);
+      }
+      const i = /* @__PURE__ */ new Map(), p = [];
+      let u = 0;
+      if (s.forEach((t, o) => {
+        if (t >= 6) {
+          const c = `rc${u++}`;
+          i.set(o, c), p.push(`.${c}{${o}}`);
+        }
+      }), i.size === 0) {
+        let t = n;
+        return t = t.replaceAll("<!--REC_START-->", ""), t = t.replaceAll("<!--REC_END-->", ""), t;
+      }
+      const I = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), E = (t, o) => `${t.slice(0, -1)} ${o}"`, S = /* @__PURE__ */ new Map();
+      i.forEach((t, o) => {
+        const c = I(o);
+        S.set(o, {
+          caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${c}"`, "g"),
+          caseB: new RegExp(` style="${c}"((?:[^>]*?))(class="[^"]*")`, "g")
+        });
+      });
+      let m = n.replace("</style>", `${p.join("")}</style>`);
+      return m = m.replace(
+        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
+        (t, o) => {
+          let c = o;
+          return i.forEach((a, f) => {
+            const T = S.get(f);
+            T.caseA.lastIndex = 0, c = c.replace(
+              T.caseA,
+              ($, g, b) => E(g, a) + b
+            ), T.caseB.lastIndex = 0, c = c.replace(
+              T.caseB,
+              ($, g, b) => g + E(b, a)
+            ), c = c.replaceAll(` style="${f}"`, ` class="${a}"`);
+          }), c;
+        }
+      ), m = m.replaceAll("<!--REC_START-->", ""), m = m.replaceAll("<!--REC_END-->", ""), m;
+    },
+    priority: 58
   }
 ];
 export {
-  G as recommendationCompilerRules
+  w as recommendationCompilerRules
 };

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -1,130 +1,131 @@
-import { useRecommendation as $ } from "../../../composables/useRecommendation.js";
-function b(e, u, r, o) {
-  const n = `{{${e}_${u}_${r}}}`, t = `{{${e}_${u}_currency}}`;
-  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
+import { useRecommendation as S } from "../../../composables/useRecommendation.js";
+function b(e, n, r, c) {
+  const u = `{{${e}_${n}_${r}}}`, t = `{{${e}_${n}_currency}}`;
+  return c === "before" ? `${t} ${u}` : `${u} ${t}`;
 }
-function p(e, u, r, o, n) {
-  switch (u) {
+function p(e, n, r, c, u) {
+  switch (n) {
     case "productImage": {
       const t = e.querySelector("img");
-      t && (t.setAttribute("src", `{{${r}_${o}_image_url}}`), t.setAttribute("alt", `{{${r}_${o}_name}}`));
-      const c = e.querySelector("a");
-      c && c.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && (t.setAttribute("src", `{{${r}_${c}_image_url}}`), t.setAttribute("alt", `{{${r}_${c}_name}}`));
+      const o = e.querySelector("a");
+      o && o.setAttribute("href", `{{${r}_${c}_url}}`);
       break;
     }
     case "productName": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = `{{${r}_${o}_name}}`;
+        const o = t.querySelector("strong") || t;
+        o.textContent = `{{${r}_${c}_name}}`;
       }
       break;
     }
     case "productPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(r, o, "price", n);
+        const o = t.querySelector("strong") || t;
+        o.textContent = b(r, c, "price", u);
       }
       break;
     }
     case "productOldPrice": {
       const t = e.querySelector("p");
       if (t) {
-        const c = t.querySelector("strong") || t;
-        c.textContent = b(
+        const o = t.querySelector("strong") || t;
+        o.textContent = b(
           r,
-          o,
+          c,
           "original_price",
-          n
+          u
         ), t.setAttribute("product-attr", "discount");
       }
       break;
     }
     case "productButton": {
       const t = e.querySelector("a");
-      t && t.setAttribute("href", `{{${r}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${r}_${c}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = e.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_price}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_price"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${r}_${c}_omnibus_price}}`;
+        const o = t.closest("p");
+        o && (o.setAttribute("product-attr", "omnibus_price"), o.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
       const t = e.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${r}_${o}_omnibus_discount}}`;
-        const c = t.closest("p");
-        c && (c.setAttribute("product-attr", "omnibus_discount"), c.setAttribute("composition", "true"));
+        t.textContent = `{{${r}_${c}_omnibus_discount}}`;
+        const o = t.closest("p");
+        o && (o.setAttribute("product-attr", "omnibus_discount"), o.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
       const t = e.getAttribute("product-attr") ? e : e.querySelector("[product-attr]");
       if (t) {
-        const c = t.getAttribute("product-attr"), s = t.querySelector("p");
+        const o = t.getAttribute("product-attr"), s = t.querySelector("p");
         if (s) {
           const i = s.querySelector("strong") || s;
-          i.textContent = `{{${r}_${o}_${c}}}`;
+          i.textContent = `{{${r}_${c}_${o}}}`;
         }
       }
       break;
     }
   }
 }
-function S(e, u, r) {
-  e.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
-    n.querySelectorAll("[data-attribute-type]").forEach((s) => {
-      const i = s.getAttribute("data-attribute-type") || "", l = s.querySelectorAll(".attribute-cell");
-      l.length > 0 ? l.forEach((a) => {
-        p(a, i, u, t, r);
-      }) : p(s, i, u, t, r);
+function _(e, n, r) {
+  e.querySelectorAll(".recommendation-product-row").forEach((u, t) => {
+    u.querySelectorAll("[data-attribute-type]").forEach((s) => {
+      const i = s.getAttribute("data-attribute-type") || "", a = s.querySelectorAll(".attribute-cell");
+      a.length > 0 ? a.forEach((l) => {
+        p(l, i, n, t, r);
+      }) : p(s, i, n, t, r);
     });
   });
 }
-function _(e, u, r) {
-  const o = e.querySelectorAll(".recommendation-product-row");
-  if (!o.length)
+function $(e, n, r) {
+  const c = e.querySelectorAll(".recommendation-product-row");
+  if (!c.length)
     return;
-  const [n] = o, t = n.querySelector("[data-attribute-type]"), c = t ? t.querySelectorAll(".attribute-cell").length : 1;
-  o.forEach((s, i) => {
-    s.querySelectorAll("[data-attribute-type]").forEach((a) => {
-      const f = a.getAttribute("data-attribute-type") || "";
-      a.querySelectorAll(".attribute-cell").forEach((y, A) => {
-        const m = i * c + A;
-        p(y, f, u, m, r);
+  const [u] = c, t = u.querySelector("[data-attribute-type]"), o = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  c.forEach((s, i) => {
+    s.querySelectorAll("[data-attribute-type]").forEach((l) => {
+      const f = l.getAttribute("data-attribute-type") || "";
+      l.querySelectorAll(".attribute-cell").forEach((y, m) => {
+        const A = i * o + m;
+        p(y, f, n, A, r);
       });
     });
   });
 }
-function q(e, u, r) {
-  e.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
-    _(n, u, r);
+function d(e, n, r) {
+  e.querySelectorAll(".ins-recommendation-product-container").forEach((u) => {
+    $(u, n, r);
   });
 }
-function d(e, u) {
-  const r = e.getAttribute("data-layout") || "grid", o = e.getAttribute("currency-alignment") || "after";
-  r === "list" ? S(e, u, o) : q(e, u, o);
+function q(e, n) {
+  const r = e.getAttribute("data-layout") || "grid", c = e.getAttribute("currency-alignment") || "after";
+  r === "list" ? _(e, n, c) : d(e, n, c);
 }
-function g(e, u) {
+function g(e, n) {
   const r = e.match(/<!DOCTYPE[^>]*>/i);
   return (r ? `${r[0]}
-` : "") + u.documentElement.outerHTML;
+` : "") + n.documentElement.outerHTML;
 }
 function E(e) {
-  const u = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(u, "text/html"), o = r.querySelectorAll(".recommendation-block-v2");
-  if (!o.length)
+  const n = e.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), r = new DOMParser().parseFromString(n, "text/html"), c = r.querySelectorAll(".recommendation-block-v2");
+  if (!c.length)
     return e;
-  const { buildCampaignUrl: n } = $();
-  return o.forEach((c) => {
-    const s = c.getAttribute("recommendation-id");
-    s && (n(s), d(c, s));
-  }), g(u, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+  const { buildCampaignUrl: u } = S();
+  return c.forEach((o) => {
+    var i, a;
+    const s = o.getAttribute("recommendation-id");
+    s && ((i = o.parentNode) == null || i.insertBefore(r.createComment("REC_START"), o), (a = o.parentNode) == null || a.insertBefore(r.createComment("REC_END"), o.nextSibling), u(s), q(o, s));
+  }), g(n, r).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   b as formatPriceVariable,

package/dist/extensions/Blocks/Recommendation/block.js

@@ -169,7 +169,7 @@ class q extends b {
       if (e && e.includes(a))
         return t;
     }
-    return "querySelector" in t ? t.querySelector(`.${a}`) ?? null : null;
+    return "querySelector" in t ? t.querySelector(`.${a}`) : null;
   }
   /**
    * Migrate configuration from legacy format

package/dist/extensions/Blocks/Recommendation/controls/main/utils.js

@@ -16,7 +16,7 @@ function M(t) {
     if (e && e.includes(h))
       return t;
   }
-  return "querySelector" in t ? t.querySelector(`.${h}`) ?? null : null;
+  return "querySelector" in t ? t.querySelector(`.${h}`) : null;
 }
 function g(t) {
   const e = M(t);