@useinsider/guido 3.21.0-beta.ff98fc3 → 3.21.1-beta.18ab939

package/README.md

@@ -582,9 +582,9 @@ import '@useinsider/guido/style';
 
 ### Subpath entries
 
-Two surfaces also ship as their own entry points. Importing one pulls in only its
-own dependencies, so a consumer that needs the store or the tracking-id helpers
-never loads the editor:
+Three surfaces also ship as their own entry points. Importing one pulls in only its
+own dependencies, so a consumer that needs the store, the tracking-id helpers or the
+runtime prefetch never loads the editor:
 
 ```typescript
 // Live editor state, published by the editor into the host's shared Pinia instance.
@@ -595,11 +595,41 @@ import type { GuidoEmailEditorState } from '@useinsider/guido/editor-state';
 // Persistent link ids for the click heatmap.
 import { assignTrackingIds, TRACK_ID_ATTRIBUTE } from '@useinsider/guido/tracking-ids';
 import type { TrackingIdResult } from '@useinsider/guido/tracking-ids';
+
+// Start downloading the Stripo editor runtime before the editor opens.
+import { prefetchGuidoRuntime } from '@useinsider/guido/prefetch';
 ```
 
-Both are re-exported from the root barrel as well; the subpath is what keeps the
+All three are re-exported from the root barrel as well; the subpath is what keeps the
 editor out of the consumer's module graph.
 
+### Runtime prefetch
+
+```typescript
+import { prefetchGuidoRuntime } from '@useinsider/guido/prefetch';
+
+prefetchGuidoRuntime(); // e.g. when the user lands on the page that opens the editor
+```
+
+Call it as early as the host knows an editor is likely to open. It appends one
+`<link rel="prefetch" data-guido-prefetch>` per file of the pinned Stripo runtime
+(`src/static/stripo-runtime-manifest.json`) from
+`https://email-static.useinsider.com/guido/<stripo version>/`, so the files are in the
+HTTP cache when `<Guido>` mounts. It only downloads: no Stripo code runs and the
+editor's startup order does not change.
+
+- Returns `void` and never throws.
+- Idempotent: later calls add nothing.
+- Adds nothing when the runtime is already loading or loaded (`#UiEditorScript` exists
+  or `window.UIEditor` is defined), when `navigator.connection.saveData` is on, or when
+  `navigator.connection.effectiveType` is `slow-2g` or `2g`.
+- The `guido_editor_open` metric reports it as `runtime_prefetch`: `none` (not called
+  before Guido's setup), `pending` (some files still downloading) or `done`.
+
+After bumping `guido.stripo.version`, regenerate the file list with
+`npm run stripo:manifest`; a unit test fails while the manifest's version differs from
+the pinned one.
+
 ---
 
 ## Constants

package/dist/composables/useEditorOpenMetrics.js

@@ -1,6 +1,7 @@
-import { SYNC_MODULE_CLASS as S } from "./useSyncModuleExtractor.js";
-import g from "../package.json.js";
-const s = "guido:open:", b = "total", P = [
+import { SYNC_MODULE_CLASS as w } from "./useSyncModuleExtractor.js";
+import { readRuntimePrefetchState as M } from "../utils/runtimePrefetch.js";
+import f from "../package.json.js";
+const s = "guido:open:", k = "total", A = [
   "setup",
   "host_ready",
   "migration_start",
@@ -28,7 +29,7 @@ const s = "guido:open:", b = "total", P = [
   ["editor_config", "blocks_config_ready", "init_editor"],
   ["stripo_load", "init_editor", "ready"],
   ["token", "token_start", "token_end"]
-], h = (e) => new RegExp(`(?:^|[\\s"'])(?:${e})(?=[\\s"'])`, "g"), A = /<img\b/gi, N = h(S), $ = /\srecommendation-id=/g, C = h("items-block-v2|esd-(?:cart|browsed|purchased)-items-block"), O = "esd-timer-id", f = {
+], b = (e) => new RegExp(`(?:^|[\\s"'])(?:${e})(?=[\\s"'])`, "g"), N = /<img\b/gi, $ = b(w), C = /\srecommendation-id=/g, O = b("items-block-v2|esd-(?:cart|browsed|purchased)-items-block"), I = "esd-timer-id", g = {
   html_bytes: null,
   css_bytes: null,
   image_count: null,
@@ -38,8 +39,8 @@ const s = "guido:open:", b = "total", P = [
   has_timers: null,
   force_recreate: null
 };
-let c = null;
-const d = (e) => {
+let d = null;
+const i = (e) => {
   try {
     e();
   } catch (t) {
@@ -48,27 +49,27 @@ const d = (e) => {
 }, E = () => window.DD_RUM, y = (e, t) => e === void 0 || t === void 0 ? null : Math.round(t - e), _ = (e, t) => {
   var r;
   return ((r = e.match(t)) == null ? void 0 : r.length) ?? 0;
-}, k = (e) => new TextEncoder().encode(e).length, I = (e) => {
+}, h = (e) => new TextEncoder().encode(e).length, L = (e) => {
   if (!e)
-    return f;
+    return g;
   try {
     const { html: t, css: r, forceRecreate: o } = e;
     return {
-      html_bytes: k(t),
-      css_bytes: k(r),
-      image_count: _(t, A),
-      synced_module_count: _(t, N),
-      recommendation_block_count: _(t, $),
-      items_block_count: _(t, C),
-      has_timers: t.includes(O),
+      html_bytes: h(t),
+      css_bytes: h(r),
+      image_count: _(t, N),
+      synced_module_count: _(t, $),
+      recommendation_block_count: _(t, C),
+      items_block_count: _(t, O),
+      has_timers: t.includes(I),
       force_recreate: o
     };
   } catch (t) {
-    return console.debug("guido:open: template weight failed", t), f;
+    return console.debug("guido:open: template weight failed", t), g;
   }
 }, T = () => {
-  d(() => {
-    P.forEach((e) => performance.clearMarks(`${s}${e}`)), [...p.map(([e]) => e), b].forEach((e) => performance.clearMeasures(`${s}${e}`));
+  i(() => {
+    A.forEach((e) => performance.clearMarks(`${s}${e}`)), [...p.map(([e]) => e), k].forEach((e) => performance.clearMeasures(`${s}${e}`));
   });
 }, v = (e) => {
   const t = {
@@ -76,6 +77,7 @@ const d = (e) => {
     context: null,
     template: null,
     scriptPreloaded: null,
+    runtimePrefetch: null,
     wasBackgrounded: document.visibilityState === "hidden",
     finished: e,
     onVisibilityChange: () => {
@@ -87,41 +89,42 @@ const d = (e) => {
   if (e.finished || e.marks[t] !== void 0)
     return;
   const r = performance.now();
-  e.marks[t] = r, e === c && d(() => performance.mark(`${s}${t}`, { startTime: r }));
+  e.marks[t] = r, e === d && i(() => performance.mark(`${s}${t}`, { startTime: r }));
 }, u = (e) => {
   e.finished = !0, document.removeEventListener("visibilitychange", e.onVisibilityChange);
-}, L = (e, t) => {
-  const { marks: r } = e, o = p.map(([n, a, i]) => [n, r[a], r[i]]);
-  o.push([b, r.setup, t]), o.forEach(([n, a, i]) => {
-    a !== void 0 && i !== void 0 && d(() => performance.measure(`${s}${n}`, { start: a, end: i }));
+}, B = (e, t) => {
+  const { marks: r } = e, o = p.map(([n, a, c]) => [n, r[a], r[c]]);
+  o.push([k, r.setup, t]), o.forEach(([n, a, c]) => {
+    a !== void 0 && c !== void 0 && i(() => performance.measure(`${s}${n}`, { start: a, end: c }));
   });
-}, B = (e, t, r) => {
+}, D = (e, t, r) => {
   const { marks: o, context: n } = e, a = Object.fromEntries(
-    p.map(([i, M, R]) => [`${i}_ms`, y(o[M], o[R])])
+    p.map(([c, R, S]) => [`${c}_ms`, y(o[R], o[S])])
   );
   return {
     outcome: t,
     open_ms: y(o.setup, r),
     ...a,
     script_preloaded: e.scriptPreloaded,
-    ...I(e.template),
+    runtime_prefetch: e.runtimePrefetch,
+    ...L(e.template),
     partner_name: (n == null ? void 0 : n.partnerName) ?? null,
     product_type: (n == null ? void 0 : n.productType) ?? null,
     template_id: (n == null ? void 0 : n.templateId) ?? null,
     variation_id: (n == null ? void 0 : n.variationId) ?? null,
-    guido_version: g.version,
-    stripo_version: g.guido.stripo.version,
+    guido_version: f.version,
+    stripo_version: f.guido.stripo.version,
     was_backgrounded: e.wasBackgrounded
   };
 }, m = (e, t) => {
-  d(() => {
-    const r = e.marks.ready ?? performance.now(), o = B(e, t, r);
-    e.template = null, e === c && L(e, r), console.debug("guido:open", o), d(() => {
+  i(() => {
+    const r = e.marks.ready ?? performance.now(), o = D(e, t, r);
+    e.template = null, e === d && B(e, r), console.debug("guido:open", o), i(() => {
       var n, a;
       return (a = (n = E()) == null ? void 0 : n.addAction) == null ? void 0 : a.call(n, "guido_editor_open", o);
     });
   });
-}, w = (e) => ({
+}, P = (e) => ({
   mark: (t) => l(e, t),
   timed: async (t, r) => {
     l(e, `${t}_start`);
@@ -138,7 +141,7 @@ const d = (e) => {
     e.scriptPreloaded = t;
   },
   markReady: () => {
-    e.finished || (l(e, "ready"), u(e), d(() => {
+    e.finished || (l(e, "ready"), u(e), i(() => {
       var t, r;
       return (r = (t = E()) == null ? void 0 : t.addTiming) == null ? void 0 : r.call(t, "guido_editor_ready");
     }), setTimeout(() => m(e, "ready"), 0));
@@ -147,13 +150,15 @@ const d = (e) => {
     e.finished || (u(e), m(e, "error"));
   },
   dispose: () => {
-    e.finished || (u(e), m(e, "abandoned")), e === c && (T(), c = null);
+    e.finished || (u(e), m(e, "abandoned")), e === d && (T(), d = null);
   }
-}), U = () => {
+}), F = () => {
   const e = v(!1);
-  return T(), c = e, document.addEventListener("visibilitychange", e.onVisibilityChange), l(e, "setup"), w(e);
-}, V = () => w(c ?? v(!0));
+  return T(), d = e, i(() => {
+    e.runtimePrefetch = M();
+  }), document.addEventListener("visibilitychange", e.onVisibilityChange), l(e, "setup"), P(e);
+}, G = () => P(d ?? v(!0));
 export {
-  U as startEditorOpenMetrics,
-  V as useEditorOpenMetrics
+  F as startEditorOpenMetrics,
+  G as useEditorOpenMetrics
 };

package/dist/composables/useStripo.js

@@ -5,44 +5,50 @@ import { useCustomInterfaceAppearance as _ } from "./useCustomInterfaceAppearanc
 import { useEditorOpenMetrics as z } from "./useEditorOpenMetrics.js";
 import { useFullStoryBridge as $ } from "./useFullStoryBridge.js";
 import { useModuleRepair as G } from "./useModuleRepair.js";
-import { useStripoEventHandler as J } from "./useStripoEventHandler.js";
-import { useStripoNotifications as X } from "./useStripoNotifications.js";
+import { useStripoEventHandler as X } from "./useStripoEventHandler.js";
+import { useStripoNotifications as J } from "./useStripoNotifications.js";
 import { useToaster as K } from "./useToaster.js";
 import { localePatch as Q } from "../config/i18n/index.js";
-import { en as M } from "../config/i18n/en/index.js";
+import { en as B } from "../config/i18n/en/index.js";
 import { ToasterTypeOptions as W } from "../enums/toaster.js";
 import { useStripoApi as Y } from "../services/stripoApi.js";
 import Z from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as T } from "../stores/editor.js";
+import { useEditorStore as M } from "../stores/editor.js";
 import { buildMergeTagEntries as ee, flattenDynamicContentList as te } from "../utils/genericUtil.js";
-import oe from "../package.json.js";
-let a = null, v = !1;
+import { getStripoRuntimeBaseUrl as oe } from "../utils/stripoRuntime.js";
+let d = null, v = !1;
 const be = () => {
-  const { features: u, template: m, isFeatureEnabled: p } = j(), { handleError: f, showToaster: B } = K(), { getToken: F, getCustomFonts: A, getSyncModulesStatus: V } = Y(), { handleEvent: P } = J(), { handleModuleAdd: R } = G(), { getStripoBlocksConfig: D } = N(), { getStripoNotifications: U } = X(), t = z(), g = () => a || (a = new Promise((i, d) => {
-    var s;
+  const { features: u, template: m, isFeatureEnabled: p } = j(), { handleError: f, showToaster: T } = K(), { getToken: F, getCustomFonts: A, getSyncModulesStatus: P } = Y(), { handleEvent: R } = X(), { handleModuleAdd: U } = G(), { getStripoBlocksConfig: V } = N(), { getStripoNotifications: D } = J(), e = z(), g = () => d || (d = new Promise((s, a) => {
     if (document.getElementById("UiEditorScript")) {
-      i();
+      s();
       return;
     }
-    const r = oe.guido, n = `https://email-static.useinsider.com/guido/${(s = r == null ? void 0 : r.stripo) == null ? void 0 : s.version}/UIEditor.js`, e = document.createElement("script");
-    e.id = "UiEditorScript", e.type = "module", e.src = n, e.onload = () => {
-      v = !0, i();
-    }, e.onerror = () => {
-      e.remove(), d(new Error(`Failed to load Stripo UIEditor script from S3: ${n}`));
-    }, document.body.appendChild(e);
-  }), a.catch(() => {
-    a = null;
-  }), a), I = async (i, d, r, l = [], n = !1) => {
-    var C, k, w, b;
-    const e = T(), { html: s, css: y } = i, { baseBlocks: S, extensions: L } = await D();
-    t.mark("blocks_config_ready");
-    const E = ((C = u.value) == null ? void 0 : C.displayConditions) ?? !0, O = ((k = u.value) == null ? void 0 : k.modulesDisabled) ?? !1, h = !!s || (((w = m.value) == null ? void 0 : w.forceRecreate) ?? !1), q = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
-    t.setTemplate({ html: s, css: y, forceRecreate: h }), _().importCss(), t.mark("init_editor"), await window.UIEditor.initEditor(
+    const i = oe();
+    if (!i) {
+      a(
+        new Error("guido.stripo.version is not set in package.json. Please configure the Stripo version.")
+      );
+      return;
+    }
+    const n = `${i}UIEditor.js`, t = document.createElement("script");
+    t.id = "UiEditorScript", t.type = "module", t.src = n, t.onload = () => {
+      v = !0, s();
+    }, t.onerror = () => {
+      t.remove(), a(new Error(`Failed to load Stripo UIEditor script from S3: ${n}`));
+    }, document.body.appendChild(t);
+  }), d.catch(() => {
+    d = null;
+  }), d), I = async (s, a, i, n = [], t = !1) => {
+    var C, w, k, b;
+    const o = M(), { html: c, css: S } = s, { baseBlocks: y, extensions: L } = await V();
+    e.mark("blocks_config_ready");
+    const E = ((C = u.value) == null ? void 0 : C.displayConditions) ?? !0, O = ((w = u.value) == null ? void 0 : w.modulesDisabled) ?? !1, h = !!c || (((k = m.value) == null ? void 0 : k.forceRecreate) ?? !1), q = "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com";
+    e.setTemplate({ html: c, css: S, forceRecreate: h }), _().importCss(), e.mark("init_editor"), await window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: d,
-        html: s,
-        css: y,
+        metadata: a,
+        html: c,
+        css: S,
         forceRecreate: h,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
@@ -58,7 +64,7 @@ const be = () => {
         customConditionsEnabled: E,
         enableXSSSecurity: !0,
         modulesDisabled: O,
-        syncModulesEnabled: n,
+        syncModulesEnabled: t,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
@@ -69,55 +75,55 @@ const be = () => {
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
         allowedScriptSourceDomains: q,
-        ...S ? { baseBlocks: S } : {},
+        ...y ? { baseBlocks: y } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
-          customFonts: l
+          customFonts: n
         },
         mergeTags: [
           {
             entries: ee(
-              r.preselectedDynamicContentList,
+              i.preselectedDynamicContentList,
               te((b = m.value) == null ? void 0 : b.dynamicContentList),
               p("liquidSyntax")
             )
           }
         ],
-        async onTokenRefreshRequest(o) {
+        async onTokenRefreshRequest(r) {
           try {
-            t.mark("token_start");
-            const c = await F();
-            t.mark("token_end"), o(c);
-          } catch (c) {
-            f(c, "Failed to refresh token");
+            e.mark("token_start");
+            const l = await F();
+            e.mark("token_end"), r(l);
+          } catch (l) {
+            f(l, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { activateCustomViewStyles: o, updateTimerInClonedTemplate: c } = H(), { injectFullStory: x } = $();
-            _().importCss(), o(), x(), c(), r.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
-              e.hasChanges = !1;
-            }, 1e3), t.markReady();
-          } catch (o) {
-            f(o, "Failed to load custom interface appearance");
+            const { activateCustomViewStyles: r, updateTimerInClonedTemplate: l } = H(), { injectFullStory: x } = $();
+            _().importCss(), r(), x(), l(), i.onReady(), o.isStripoInitialized = !0, o.loadingStatus = !1, setTimeout(() => {
+              o.hasChanges = !1;
+            }, 1e3), e.markReady();
+          } catch (r) {
+            f(r, "Failed to load custom interface appearance");
           }
         },
-        onCodeEditorVisibilityChanged(o) {
-          e.isCodeEditorOpen = o;
+        onCodeEditorVisibilityChanged(r) {
+          o.isCodeEditorOpen = r;
         },
-        onEditorVisualModeChanged(o) {
-          e.editorVisualMode = o.toLowerCase();
+        onEditorVisualModeChanged(r) {
+          o.editorVisualMode = r.toLowerCase();
         },
-        onVersionHistoryVisibilityChanged(o) {
-          e.isVersionHistoryOpen = o;
+        onVersionHistoryVisibilityChanged(r) {
+          o.isVersionHistoryOpen = r;
         },
         onDataChanged() {
-          e.hasChanges = !0, e.changeSeq += 1;
+          o.hasChanges = !0, o.changeSeq += 1;
         },
-        onEvent: P,
-        onModuleAdd: R,
-        notifications: U(),
+        onEvent: R,
+        onModuleAdd: U,
+        notifications: D(),
         // Stripo deselects the block on any click outside the canvas, so every surface
         // that belongs to the block's own flow has to be listed here (SD-153273).
         ignoreClickOutsideSelectors: [
@@ -132,24 +138,24 @@ const be = () => {
       }
     );
   };
-  return { initPlugin: async (i, d, r) => {
-    const l = T();
+  return { initPlugin: async (s, a, i) => {
+    const n = M();
     try {
-      t.mark("plugin_start"), t.setScriptPreloaded(v), await g(), t.mark("script_ready");
-      const [n, e] = await Promise.all([
+      e.mark("plugin_start"), e.setScriptPreloaded(v), await g(), e.mark("script_ready");
+      const [t, o] = await Promise.all([
         A(),
-        V()
+        P()
       ]);
-      t.mark("fonts_sync_ready"), l.syncModulesEnabled = e, await I(i, d, r, n, e);
+      e.mark("fonts_sync_ready"), n.syncModulesEnabled = o, await I(s, a, i, t, o);
     } catch {
-      l.loadingStatus = !1, B({
+      n.loadingStatus = !1, T({
         type: W.Error,
-        message: M["An error has occurred. Please report the error code to support."],
+        message: B["An error has occurred. Please report the error code to support."],
         actionButton: {
-          text: M["Reload page"],
+          text: B["Reload page"],
           onClick: () => window.location.reload()
         }
-      }), t.markFailed();
+      }), e.markFailed();
     }
   }, preloadRuntime: () => {
     g().catch(() => {

package/dist/config/compiler/htmlCompilerRules.js

@@ -88,7 +88,7 @@ const d = [
       /<!--\[if\s\(mso 16\)\]>\s*<style\s*\S*>\s*a\s*\{\s*text-decoration\s*:\s*none\s*;*\s*\}\s*<\/style>\s*<!\[endif\]-->/g,
       /<!--\[if\sgte mso 9\]>\s*<style\s*\S*>\s*sup\s*\{\s*font-size\s*:\s*100%\s*!important\s*;*\s*\}\s*<\/style>\s*<!\[endif\]-->/g,
       /<!--\[if\sgte mso 9\]>\s*<noscript>\s*<xml>\s*<o:OfficeDocumentSettings>\s*<o:AllowPNG>\s*<\/o:AllowPNG>\s*<o:PixelsPerInch>\d+<\/o:PixelsPerInch>\s*<\/o:OfficeDocumentSettings>\s*<\/xml>\s*<\/noscript>\s*<!\[endif\]-->/g,
-      /<!--\[if mso\]>\s*<xml>\s*<w:WordDocument\s+xmlns:w="urn:schemas-microsoft-com:office:word">\s*<w:DontUseAdvancedTypographyReadingMail><\/w:DontUseAdvancedTypographyReadingMail>\s*<\/w:WordDocument>\s*<\/xml>\s*<!\[endif\]-->/g,
+      /<!--\[if mso\]>\s*<xml>\s*<w:WordDocument\s+xmlns:w="urn:schemas-microsoft-com:office:word">\s*<w:DontUseAdvancedTypographyReadingMail\s*(?:\/>|><\/w:DontUseAdvancedTypographyReadingMail>)\s*<\/w:WordDocument>\s*<\/xml>\s*<!\[endif\]-->/g,
       /<\!--\[if \!mso\]><\!--\s*\d*\s*-->\s*<\!--\[if \!mso\]><\!--\s*\d*\s*-->\s*<\!--<!\[endif\]-->/g,
       /<!--\[if\s\!mso\]>\s*<!-- \d -->/g
     ],

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

@@ -1,23 +1,23 @@
-var d = Object.defineProperty;
-var h = (r, s, t) => s in r ? d(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
-var c = (r, s, t) => h(r, typeof s != "symbol" ? s + "" : s, t);
-import { UEAttr as l } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../../../common-control.js";
+var h = Object.defineProperty;
+var l = (r, s, t) => s in r ? h(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
+var d = (r, s, t) => l(r, typeof s != "symbol" ? s + "" : s, t);
+import { UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../../../common-control.js";
 import { RecommendationConfigService as n } from "../../services/configService.js";
-import { useRecommendationExtensionStore as m } from "../../store/recommendation.js";
-import { mapLegacyStrategy as u } from "../../utils/legacyStrategyMap.js";
-const p = "recommendation-algorithm-control", i = {
+import { useRecommendationExtensionStore as u } from "../../store/recommendation.js";
+import { mapLegacyStrategy as p } from "../../utils/legacyStrategyMap.js";
+const C = "recommendation-algorithm-control", i = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds"
 };
-class R extends g {
+class S extends m {
   constructor() {
     super(...arguments);
     // Store is used ONLY for API-fetched data (algorithms list), not for config
-    c(this, "store", m());
+    d(this, "store", u());
   }
   getId() {
-    return p;
+    return C;
   }
   getTemplate() {
     return `
@@ -46,10 +46,10 @@ class R extends g {
     super.onTemplateNodeUpdated(t), this._initializeSelectItems(), this._setFormValues();
   }
   _setFormValues() {
-    const t = n.getConfig(this.currentNode), e = u(t.strategy) ?? t.strategy;
+    const t = n.getConfig(this.currentNode), e = p(t.strategy) ?? t.strategy;
     this._setProductIdsVisibility(e);
-    const o = { [i.ALGORITHM]: e }, a = t.productIds.join(",");
-    this.api.getValues()[i.PRODUCT_IDS] !== a && (o[i.PRODUCT_IDS] = a), this.api.updateValues(o);
+    const o = { [i.ALGORITHM]: e }, a = t.productIds.join(","), c = this.api.getValues()[i.PRODUCT_IDS];
+    c !== a && c !== this.store.recommendationConfigs.productIds.join(",") && (o[i.PRODUCT_IDS] = a), this.api.updateValues(o);
   }
   _initializeSelectItems() {
     var e;
@@ -58,7 +58,7 @@ class R extends g {
       try {
         this.api.setUIEAttribute(
           i.ALGORITHM,
-          l.SELECTPICKER.items,
+          g.SELECTPICKER.items,
           t
         );
       } catch (o) {
@@ -93,12 +93,7 @@ class R extends g {
       return;
     }
     const o = t === "" ? [] : t.split(",");
-    n.updateConfig(
-      this.api,
-      this.currentNode,
-      { productIds: o },
-      "Updated product IDs"
-    ), this.store.patchCurrentBlockConfig({ productIds: o });
+    this.store.recommendationConfigs.productIds.join(",") !== t && this.store.patchCurrentBlockConfig({ productIds: o });
   }
   _listenToFormUpdates() {
     this.api.onValueChanged(i.ALGORITHM, (t) => {
@@ -109,6 +104,6 @@ class R extends g {
   }
 }
 export {
-  p as ALGORITHM_CONTROL_ID,
-  R as AlgorithmControl
+  C as ALGORITHM_CONTROL_ID,
+  S as AlgorithmControl
 };