@useinsider/guido 3.2.0-beta.f708a56 → 3.2.1-beta.d58ee72

package/dist/config/compiler/recommendationCompilerRules.js

@@ -1,16 +1,16 @@
-import { useRecommendation as N } from "../../composables/useRecommendation.js";
-import { DUMMY_IMAGE_MAPPINGS as C, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as R, CONDITIONS as $, HTML as h } from "../../enums/recommendation.js";
+import { useRecommendation as C } from "../../composables/useRecommendation.js";
+import { DUMMY_IMAGE_MAPPINGS as h, REGEX as T, VerticalOrientation as M, CSS as E, ATTRIBUTES as A, CONDITIONS as g, HTML as N } 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: (i) => {
-      let e = i;
-      return Object.entries(C).forEach(([, p]) => {
-        Object.entries(p).forEach(([c, n]) => {
-          e = e.replaceAll(n, `{{${c}}}`);
+    processor: (c) => {
+      let e = c;
+      return Object.entries(h).forEach(([, l]) => {
+        Object.entries(l).forEach(([n, s]) => {
+          e = e.replaceAll(s, `{{${n}}}`);
         });
       }), e;
     },
@@ -29,21 +29,21 @@ const w = [
     id: "add-recommendation-unresponsive-css",
     description: "Adding recommendation unresponsive css",
     type: "custom",
-    processor: (i) => {
-      const { calculateCardWidth: e, getRecommendationCampaignData: p } = N();
-      let c = i;
-      const n = c.match(T.ID);
-      if (n) {
+    processor: (c) => {
+      const { calculateCardWidth: e, getRecommendationCampaignData: l } = C();
+      let n = c;
+      const s = n.match(T.ID);
+      if (s) {
         const a = [];
-        if (n.forEach((s) => {
-          const d = /recommendation-id="(.*?)"/i.exec(s), _ = d ? d[1].trim() : "", A = p(_);
-          A.textTrimming && A.orientation === M && a.push(e(A));
+        if (s.forEach((i) => {
+          const d = /recommendation-id="(.*?)"/i.exec(i), _ = d ? d[1].trim() : "", R = l(_);
+          R.textTrimming && R.orientation === M && a.push(e(R));
         }), a.length) {
-          const s = `width:${Math.min(...a)}px!important;`;
-          c = c.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${s} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
+          const i = `width:${Math.min(...a)}px!important;`;
+          n = n.replace(E.REGULAR_NAME_HEIGHT, `${E.TRIMMED_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.REGULAR_NAME_CONTAINER_HEIGHT, E.TRIMMED_NAME_CONTAINER_CSS).replace(E.RESPONSIVE_NAME_SIZE, `${E.RESPONSIVE_NAME_HEIGHT} ${i} ${E.ELLIPSIS}`).replace(E.RESPONSIVE_NAME_CONTAINER_HEIGHT, E.TRIMMED_RESPONSIVE_NAME_CONTAINER_CSS);
         }
       }
-      return c;
+      return n;
     },
     priority: 52
   },
@@ -51,34 +51,34 @@ const w = [
     id: "prepare-recommendations",
     description: "Replacing product data with template variables in recommendation blocks",
     type: "custom",
-    processor: (i) => x(i),
+    processor: (c) => x(c),
     priority: 48
   },
   {
     id: "add-discount-conditions",
     description: "Adding discount conditions to the recommendation block",
     type: "custom",
-    processor: (i) => {
-      let e = i;
-      const p = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: c } = N();
-      return p !== null && p.forEach((n) => {
-        const a = n.match(T.CUSTOM_FIELD);
+    processor: (c) => {
+      let e = c;
+      const l = e.match(T.ATTRIBUTE_PARAGRAPH), { getRecommendationCampaignData: n } = C();
+      return l !== null && l.forEach((s) => {
+        const a = s.match(T.CUSTOM_FIELD);
         if (!a)
           return;
-        const [s] = a, d = s.match(T.CUSTOM_FIELD_INDEXES_PART), _ = s.match(T.CUSTOM_FIELD_NAME_PART), A = n.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
-        if (!d || !_ || !A)
+        const [i] = a, d = i.match(T.CUSTOM_FIELD_INDEXES_PART), _ = i.match(T.CUSTOM_FIELD_NAME_PART), R = s.match(T.ATTRIBUTE_PARAGRAPH_START_TAG);
+        if (!d || !_ || !R)
           return;
-        const [I] = d, [S] = _, [m] = A, o = S.substring(1, S.length - 2), r = m.match(T.COMPOSITION) !== null;
-        let t = s;
+        const [S] = d, [b] = _, [m] = R, o = b.substring(1, b.length - 2), r = m.match(T.COMPOSITION) !== null;
+        let t = i;
         if (r) {
-          const b = I.substring(2, I.length - 3), l = c(b);
-          o === R.OMNIBUS_PRICE && (l.priceBeforeTextValue && (t = `${l.priceBeforeTextValue}${t}`), l.priceAfterTextValue && (t = `${t}${l.priceAfterTextValue}`)), o === R.OMNIBUS_DISCOUNT && (l.discountBeforeTextValue && (t = `${l.discountBeforeTextValue}${t}`), l.discountAfterTextValue && (t = `${t}${l.discountAfterTextValue}`));
+          const I = S.substring(2, S.length - 3), p = n(I);
+          o === A.OMNIBUS_PRICE && (p.priceBeforeTextValue && (t = `${p.priceBeforeTextValue}${t}`), p.priceAfterTextValue && (t = `${t}${p.priceAfterTextValue}`)), o === A.OMNIBUS_DISCOUNT && (p.discountBeforeTextValue && (t = `${p.discountBeforeTextValue}${t}`), p.discountAfterTextValue && (t = `${t}${p.discountAfterTextValue}`));
         }
-        const u = I.substring(2);
+        const u = S.substring(2);
         let f = "";
-        o in $.IF && (f = $.IF[o].replaceAll(`{${R.DISCOUNT}}`, `${u}${R.DISCOUNT}`).replaceAll(`{${R.OMNIBUS_DISCOUNT}}`, `${u}${R.OMNIBUS_DISCOUNT}`).replaceAll(`{${R.OMNIBUS_PRICE}}`, `${u}${R.OMNIBUS_PRICE}`));
-        const g = `${m}${t}${h.PARAGRAPH_END_TAG}`, y = `${f}${r ? g : n}${$.ELSE}${m}${h.PARAGRAPH_END_TAG}${$.END_IF}`;
-        e = e.replace(n, y);
+        o in g.IF && (f = g.IF[o].replaceAll(`{${A.DISCOUNT}}`, `${u}${A.DISCOUNT}`).replaceAll(`{${A.OMNIBUS_DISCOUNT}}`, `${u}${A.OMNIBUS_DISCOUNT}`).replaceAll(`{${A.OMNIBUS_PRICE}}`, `${u}${A.OMNIBUS_PRICE}`));
+        const $ = `${m}${t}${N.PARAGRAPH_END_TAG}`, y = `${f}${r ? $ : s}${g.ELSE}${m}${N.PARAGRAPH_END_TAG}${g.END_IF}`;
+        e = e.replace(s, y);
       }), e;
     },
     priority: 53
@@ -95,19 +95,24 @@ const w = [
   {
     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",
+    type: "custom",
+    // Scoped to REC_START/REC_END markers so it cannot strip `product-attr`
+    // from Items block elements, which the items compiler rule depends on.
+    processor: (c) => {
+      const e = /\s+(?:esd-extension-block-id|data-attribute-type|data-visibility|data-text-before|data-text-after|product-attr|composition)="[^"]*"/g;
+      return c.replace(
+        /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
+        (l, n) => `<!--REC_START-->${n.replace(e, "")}<!--REC_END-->`
+      );
+    },
     priority: 55
   },
   {
     id: "strip-unused-recommendation-classes",
     description: "Remove CSS classes not referenced by any style rule from recommendation elements",
     type: "custom",
-    processor: (i) => {
-      let e = i.replace(
+    processor: (c) => {
+      let e = c.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,
         ""
       );
@@ -119,8 +124,8 @@ const w = [
     id: "remove-empty-mobile-layout-artifacts",
     description: "Remove empty mobile container rows and unused mobile layout CSS",
     type: "custom",
-    processor: (i) => {
-      let e = i;
+    processor: (c) => {
+      let e = c;
       return e = e.replace(
         /<tr[^>]*class="ins-recommendation-mobile-row"[^>]*><\/tr>/g,
         ""
@@ -129,9 +134,9 @@ const w = [
         ""
       ), e = e.replace(
         /@media[^{]*max-width\s*:\s*480px[^{]*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g,
-        (p, c) => {
-          const n = c.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
-          return n.every((d) => a.test(d)) ? "" : p;
+        (l, n) => {
+          const s = n.match(/[^{}]+\{[^{}]*\}/g) || [], a = /ins-recommendation|product-image-cell|button-cell|product-info-cell/;
+          return s.every((d) => a.test(d)) ? "" : l;
         }
       )), e;
     },
@@ -141,38 +146,38 @@ const w = [
     id: "deduplicate-inline-styles",
     description: "Replace repeated inline styles with CSS class references within recommendation blocks",
     type: "custom",
-    processor: (i) => {
-      const e = i.replace(
+    processor: (c) => {
+      const e = c.replace(
         /<a\b[^>]*\bes-button\b[^>]*>/g,
         (o) => o.replace(
           /([;"]color:)([^;"]+)/g,
           (r, t, u) => u.includes("!important") ? r : `${t}${u} !important`
         )
-      ), p = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, c = / style="([^"]*)"/g, n = /* @__PURE__ */ new Map();
-      let a = p.exec(e);
+      ), l = /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g, n = / style="([^"]*)"/g, s = /* @__PURE__ */ new Map();
+      let a = l.exec(e);
       for (; a !== null; ) {
-        let o = c.exec(a[1]);
+        let o = n.exec(a[1]);
         for (; o !== null; ) {
           const [, r] = o;
-          n.set(r, (n.get(r) || 0) + 1), o = c.exec(a[1]);
+          s.set(r, (s.get(r) || 0) + 1), o = n.exec(a[1]);
         }
-        c.lastIndex = 0, a = p.exec(e);
+        n.lastIndex = 0, a = l.exec(e);
       }
-      const s = /* @__PURE__ */ new Map(), d = [];
+      const i = /* @__PURE__ */ new Map(), d = [];
       let _ = 0;
-      if (n.forEach((o, r) => {
+      if (s.forEach((o, r) => {
         if (o >= 6) {
           const t = `rc${_++}`;
-          s.set(r, t), d.push(`.${t}{${r}}`);
+          i.set(r, t), d.push(`.${t}{${r}}`);
         }
-      }), s.size === 0) {
+      }), i.size === 0) {
         let o = e;
         return o = o.replaceAll("<!--REC_START-->", ""), o = o.replaceAll("<!--REC_END-->", ""), o;
       }
-      const A = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), I = (o, r) => `${o.slice(0, -1)} ${r}"`, S = /* @__PURE__ */ new Map();
-      s.forEach((o, r) => {
-        const t = A(r);
-        S.set(r, {
+      const R = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), S = (o, r) => `${o.slice(0, -1)} ${r}"`, b = /* @__PURE__ */ new Map();
+      i.forEach((o, r) => {
+        const t = R(r);
+        b.set(r, {
           caseA: new RegExp(`(class="[^"]*")((?:[^>]*?)) style="${t}"`, "g"),
           caseB: new RegExp(` style="${t}"((?:[^>]*?))(class="[^"]*")`, "g")
         });
@@ -182,14 +187,14 @@ const w = [
         /<!--REC_START-->([\s\S]*?)<!--REC_END-->/g,
         (o, r) => {
           let t = r;
-          return s.forEach((u, f) => {
-            const g = S.get(f);
+          return i.forEach((u, f) => {
+            const $ = b.get(f);
             t = t.replace(
-              g.caseA,
-              (y, b, l) => I(b, u) + l
+              $.caseA,
+              (y, I, p) => S(I, u) + p
             ), t = t.replace(
-              g.caseB,
-              (y, b, l) => b + I(l, u)
+              $.caseB,
+              (y, I, p) => I + S(p, u)
             ), t = t.replaceAll(` style="${f}"`, ` class="${u}"`);
           }), t;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.2.0-beta.f708a56",
+  "version": "3.2.1-beta.d58ee72",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",