@useinsider/guido 3.22.0 → 3.23.0

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,42 @@ 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 the browser does not support `rel="prefetch"`
+  (Safari by default), 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/components/Guido.vue.js

@@ -12,7 +12,7 @@ var t = function() {
   s,
   !1,
   null,
-  "c5146fc5"
+  "f2154cb6"
 );
 const v = n.exports;
 export {

package/dist/components/Guido.vue2.js

@@ -1,179 +1,189 @@
-import { defineComponent as ie, defineAsyncComponent as m, ref as W, computed as p, watch as G, onMounted as ce, onUnmounted as de } from "vue";
-import { useCortexBlueprintBridge as me } from "../composables/useCortexBlueprintBridge.js";
-import { useEditorLock as le } from "../composables/useEditorLock.js";
-import { provideGuidoActions as ue } from "../composables/useGuidoActions.js";
-import { useGuidoStateBridge as pe } from "../composables/useGuidoStateBridge.js";
-import { usePartner as fe } from "../composables/usePartner.js";
-import { useSaveValidationRollout as ye } from "../composables/useSaveValidationRollout.js";
-import { useStripo as ge } from "../composables/useStripo.js";
-import { useTimerClone as Se } from "../composables/useTimerClone.js";
-import { migrate as V } from "../config/migrator/index.js";
-import { ModuleFolderDefaults as $ } from "../enums/defaults.js";
-import { RIBBON_SELECTOR as ve } from "../enums/onboarding.js";
-import { useRecommendationExtensionStore as z, disposeStrategyPageReturnListeners as be } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { disposeUnsubscribeListeners as he } from "../extensions/Blocks/Unsubscribe/block.js";
-import Ee from "./organisms/AutoSaveController.vue.js";
-import we from "./organisms/base/AuthErrorModal.vue.js";
-import De from "./organisms/base/Toaster.vue.js";
-import Ce from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import ke from "./organisms/header/HeaderWrapper.vue.js";
-import Re from "./organisms/LoadingWrapper.vue.js";
-import Fe from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import Le from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import Me from "./organisms/validation/ValidationErrorDrawer.vue.js";
-import { useStripoApi as Te } from "../services/stripoApi.js";
-import { useConfigStore as Ie } from "../stores/config.js";
-import { useDynamicContentStore as Ue } from "../stores/dynamic-content.js";
-import { useEditorStore as E } from "../stores/editor.js";
-import { usePreviewStore as Ae } from "../stores/preview.js";
-import { useSaveValidationStore as Be } from "../stores/save-validation.js";
-import { useTemplateStore as Ne } from "../stores/template.js";
-import { useUnsubscribeStore as Pe } from "../stores/unsubscribe.js";
-import { readTrackFloor as H } from "../utils/linkTrackingIds.js";
-const yt = /* @__PURE__ */ ie({
+import { defineComponent as de, defineAsyncComponent as l, ref as W, computed as f, watch as G, onMounted as me, onUnmounted as le } from "vue";
+import { useCortexBlueprintBridge as ue } from "../composables/useCortexBlueprintBridge.js";
+import { useEditorLock as pe } from "../composables/useEditorLock.js";
+import { startEditorOpenMetrics as fe } from "../composables/useEditorOpenMetrics.js";
+import { provideGuidoActions as ye } from "../composables/useGuidoActions.js";
+import { useGuidoStateBridge as ge } from "../composables/useGuidoStateBridge.js";
+import { usePartner as ve } from "../composables/usePartner.js";
+import { useSaveValidationRollout as Se } from "../composables/useSaveValidationRollout.js";
+import { useStripo as be } from "../composables/useStripo.js";
+import { useTimerClone as he } from "../composables/useTimerClone.js";
+import { migrate as Ee } from "../config/migrator/index.js";
+import { ModuleFolderDefaults as H } from "../enums/defaults.js";
+import { RIBBON_SELECTOR as we } from "../enums/onboarding.js";
+import { useRecommendationExtensionStore as V, disposeStrategyPageReturnListeners as ke } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { disposeUnsubscribeListeners as Ce } from "../extensions/Blocks/Unsubscribe/block.js";
+import De from "./organisms/AutoSaveController.vue.js";
+import Ie from "./organisms/base/AuthErrorModal.vue.js";
+import Fe from "./organisms/base/Toaster.vue.js";
+import Me from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import Re from "./organisms/header/HeaderWrapper.vue.js";
+import Te from "./organisms/LoadingWrapper.vue.js";
+import Le from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import Ue from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import Ne from "./organisms/validation/ValidationErrorDrawer.vue.js";
+import { useStripoApi as _e } from "../services/stripoApi.js";
+import { useConfigStore as Ae } from "../stores/config.js";
+import { useDynamicContentStore as Be } from "../stores/dynamic-content.js";
+import { useEditorStore as w } from "../stores/editor.js";
+import { usePreviewStore as Oe } from "../stores/preview.js";
+import { useSaveValidationStore as Pe } from "../stores/save-validation.js";
+import { useTemplateStore as xe } from "../stores/template.js";
+import { useUnsubscribeStore as We } from "../stores/unsubscribe.js";
+import { readTrackFloor as $ } from "../utils/linkTrackingIds.js";
+const ht = /* @__PURE__ */ de({
   __name: "Guido",
   props: {
     config: null,
     ready: { type: Boolean, default: !0 }
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
-  setup(q, { expose: K, emit: r }) {
-    const s = q, j = m(
+  setup(z, { expose: q, emit: a }) {
+    const s = z, n = fe(), K = l(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), J = m(
+    ), j = l(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), Q = m(
+    ), J = l(
       () => import("./organisms/extensions/recommendation/AssignStrategyDrawer.vue.js")
-    ), X = m(
+    ), Q = l(
       () => import("./organisms/extensions/recommendation/RemoveStrategyModal.vue.js")
-    ), Y = m(
+    ), X = l(
       () => import("./organisms/extensions/recommendation/LegacyStrategyUpdatedModal.vue.js")
-    ), w = W(), f = W(), y = Ue(), D = Pe(), o = Ie();
+    ), k = W(), y = W(), g = Be(), C = We(), o = Ae();
     s.ready && o.init(s.config);
-    const c = E(), Z = Ae(), l = p(() => c.hasChanges), { isTestPartner: ee } = fe(), { isEnabled: te, loadRollout: C } = ye(), k = () => {
+    const d = w(), Y = Oe(), u = f(() => d.hasChanges), { isTestPartner: Z } = ve(), { isEnabled: ee, loadRollout: D } = Se(), I = () => {
       var t;
-      return (t = w.value) == null ? void 0 : t.handleSave(!0);
-    }, R = (t) => {
-      c.loadingStatus = t;
+      return (t = k.value) == null ? void 0 : t.handleSave(!0);
+    }, F = (t) => {
+      d.loadingStatus = t;
     };
-    me(), pe();
-    const g = () => {
+    ue(), ge();
+    const v = () => {
       var t, e;
       return {
         emailId: o.templateId,
         userId: o.userId,
         username: o.username,
         partnerName: o.partnerName,
-        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || $.SAVED_MODULES,
-        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || $.DEFAULT_MODULES
+        savedModulesFolderName: ((t = o.editor) == null ? void 0 : t.savedModulesFolderName) || H.SAVED_MODULES,
+        defaultModulesFolderName: ((e = o.editor) == null ? void 0 : e.defaultModulesFolderName) || H.DEFAULT_MODULES
       };
-    }, { initPlugin: F, preloadRuntime: L } = ge(), { runExclusive: M, beginMount: T, isCurrentMount: S } = le();
-    let u = 0;
-    const { getDefaultTemplate: I } = Te(), { cloneTimersOnSave: U, hasTimerBlocks: A } = Se(), oe = p(() => {
+    }, { initPlugin: M, preloadRuntime: R } = be(n), { runExclusive: T, beginMount: L, isCurrentMount: S } = pe();
+    let p = 0;
+    const { getDefaultTemplate: U } = _e(), { cloneTimersOnSave: N, hasTimerBlocks: _ } = he(), te = f(() => {
       var t;
       return !((t = o.ui) != null && t.showHeader);
-    }), ne = p(() => o.isFeatureEnabled("reusableRecommendationStrategy")), re = p(
-      () => !!z().recommendationConfigs.strategyId
+    }), oe = f(() => o.isFeatureEnabled("reusableRecommendationStrategy")), re = f(
+      () => !!V().recommendationConfigs.strategyId
     );
-    ue({
+    ye({
       onBack: () => {
-        console.debug("guido:back"), r("back");
+        console.debug("guido:back"), a("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), r("save:start");
+        console.debug("guido:save:start"), a("save:start");
       },
       onSaveComplete: (t) => {
-        const e = { ...t, metadata: g() };
-        console.debug("guido:save:complete", e), r("save:complete", e);
+        const e = { ...t, metadata: v() };
+        console.debug("guido:save:complete", e), a("save:complete", e);
       },
       onTestEmailClick: () => {
-        console.debug("guido:test-email:click"), r("test-email:click");
+        console.debug("guido:test-email:click"), a("test-email:click");
       }
     });
-    const B = (t) => {
-      console.debug("dynamic-content:close", t), y.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
-    }, N = () => {
+    const A = (t) => {
+      console.debug("dynamic-content:close", t), g.setSelectedDynamicContent(t), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: t }));
+    }, B = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    G(() => l.value, () => {
-      r("on-change", l.value);
+    G(() => u.value, () => {
+      a("on-change", u.value);
     });
-    const v = (t) => {
-      const e = t, { attribute: a, position: d } = e.detail;
-      console.debug("dynamic-content:open", e.detail), r("dynamic-content:open", a, d);
+    const b = (t) => {
+      const e = t, { attribute: i, position: m } = e.detail;
+      console.debug("dynamic-content:open", e.detail), a("dynamic-content:open", i, m);
     };
-    let i = null;
-    const b = () => {
+    let c = null;
+    const h = () => {
       var e;
-      const t = document.querySelector(ve);
-      (e = f.value) == null || e.style.setProperty("--ribbon-offset", `${(t == null ? void 0 : t.offsetHeight) ?? 0}px`);
-    }, h = async () => {
+      const t = document.querySelector(we);
+      (e = y.value) == null || e.style.setProperty("--ribbon-offset", `${(t == null ? void 0 : t.offsetHeight) ?? 0}px`);
+    }, E = async () => {
       var t;
+      n.mark("host_ready");
       try {
-        o.initialized || o.init(s.config), c.templateId = o.templateId;
-        const e = o.template, a = (e == null ? void 0 : e.html) || "", d = (e == null ? void 0 : e.css) || "", P = (e == null ? void 0 : e.preselectedDynamicContent) || [];
-        D.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
-        const _ = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {}, O = o.isFeatureEnabled("linkTrackingIds"), x = {
+        o.initialized || o.init(s.config), d.templateId = o.templateId, n.setContext({
+          partnerName: o.partnerName,
+          productType: o.productType,
+          templateId: o.templateId,
+          variationId: o.variationId
+        });
+        const e = o.template, i = (e == null ? void 0 : e.html) || "", m = (e == null ? void 0 : e.css) || "", O = (e == null ? void 0 : e.preselectedDynamicContent) || [];
+        C.selectedUnsubscribePages = (e == null ? void 0 : e.selectedUnsubscribePages) || [];
+        const ne = ((t = e == null ? void 0 : e.migration) == null ? void 0 : t.recommendationConfigs) ?? {}, P = o.isFeatureEnabled("linkTrackingIds"), ae = {
           partnerName: o.partnerName,
           campaignUrls: e == null ? void 0 : e.recommendationCampaignUrls,
           rrsEnabled: o.isFeatureEnabled("reusableRecommendationStrategy")
+        }, x = (ce) => n.timed(
+          "migration",
+          () => Ee(ce, ne, ae)
+        );
+        let r = {
+          html: i && await x(i),
+          css: m
         };
-        let n = {
-          html: a && await V(a, _, x),
-          css: d
-        };
-        n.html || (n = await I(), n.html = await V(n.html, _, x));
-        const ae = O ? H(n.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
-        A(n.html) && (n.html = await U(n.html)), O && (c.trackIdSessionFloor = Math.max(ae, H(n.html)));
+        r.html || (r = await n.timed("default_template", () => U()), r.html = await x(r.html));
+        const ie = P ? $(r.html, (e == null ? void 0 : e.trackIdCounter) || 0) : 0;
+        _(r.html) && (r.html = await n.timed("timer_clone", () => N(r.html))), P && (d.trackIdSessionFloor = Math.max(ie, $(r.html)));
         const se = {
-          preselectedDynamicContentList: P,
+          preselectedDynamicContentList: O,
           onReady: () => {
-            console.debug("guido:ready"), r("ready");
+            console.debug("guido:ready"), a("ready");
           }
         };
-        u = T(), await F(n, g(), se), y.selectedDynamicContentList = P;
+        p = L(), await M(r, v(), se), g.selectedDynamicContentList = O;
       } catch (e) {
-        console.error("Failed to initialize Stripo editor:", e);
+        console.error("Failed to initialize Stripo editor:", e), n.markFailed();
       }
     };
-    return ce(async () => {
+    return me(async () => {
       var e;
-      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), z().$reset(), E().$reset(), Ne().$reset(), Be().$reset(), C(), b();
-      const t = (e = f.value) == null ? void 0 : e.parentElement;
-      if (t && (i = new ResizeObserver(b), i.observe(t)), L(), s.ready)
-        await h();
+      console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow"), V().$reset(), w().$reset(), xe().$reset(), Pe().$reset(), D(), h();
+      const t = (e = y.value) == null ? void 0 : e.parentElement;
+      if (t && (c = new ResizeObserver(h), c.observe(t)), R(), s.ready)
+        await E();
       else {
-        const a = G(() => s.ready, (d) => {
-          d && (a(), h());
+        const i = G(() => s.ready, (m) => {
+          m && (i(), E());
         });
       }
-      document.addEventListener("dynamic-content:open", v);
-    }), de(() => {
-      if (he(), be(), i == null || i.disconnect(), document.removeEventListener("dynamic-content:open", v), S(u))
+      document.addEventListener("dynamic-content:open", b);
+    }), le(() => {
+      if (Ce(), ke(), n.dispose(), c == null || c.disconnect(), document.removeEventListener("dynamic-content:open", b), S(p))
         try {
-          E().isStripoInitialized = !1;
+          w().isStripoInitialized = !1;
         } catch (t) {
           console.debug("Failed to close the editor readiness gate on unmount", t);
         }
-      M(async () => {
-        if (S(u))
+      T(async () => {
+        if (S(p))
           try {
             window.UIEditor.removeEditor();
           } catch {
             console.debug("Failed to remove Stripo editor: No editor found");
           }
       }), o.reset();
-    }), K({
+    }), q({
       dynamicContent: {
-        insert: B,
-        close: N
+        insert: A,
+        close: B
       },
-      hasChanges: l,
-      saveSilent: k,
-      setLoading: R
-    }), { __sfc: !0, PreviewContainer: j, OnboardingWrapper: J, AssignStrategyDrawer: Q, RemoveStrategyModal: X, LegacyStrategyUpdatedModal: Y, headerWrapperRef: w, wrapperRef: f, dynamicContentStore: y, unsubscribeStore: D, props: s, configStore: o, editorStore: c, previewStore: Z, hasChanges: l, isTestPartner: ee, isSaveValidationEnabled: te, loadRollout: C, saveSilent: k, setLoading: R, emit: r, buildMetadata: g, initPlugin: F, preloadRuntime: L, runExclusive: M, beginMount: T, isCurrentMount: S, mountGeneration: u, getDefaultTemplate: I, cloneTimersOnSave: U, hasTimerBlocks: A, noHeader: oe, isRrsEnabled: ne, hasAssignedStrategy: re, insertDynamicContent: B, closeDynamicContent: N, handleDynamicContentOpen: v, ribbonObserver: i, updateRibbonOffset: b, startEditor: h, AutoSaveController: Ee, AuthErrorModal: we, Toaster: De, FilterSelectionDrawer: Ce, HeaderWrapper: ke, LoadingWrapper: Re, SaveAsTemplateDrawer: Fe, UnsubscribeWrapper: Le, ValidationErrorDrawer: Me };
+      hasChanges: u,
+      saveSilent: I,
+      setLoading: F
+    }), { __sfc: !0, openMetrics: n, PreviewContainer: K, OnboardingWrapper: j, AssignStrategyDrawer: J, RemoveStrategyModal: Q, LegacyStrategyUpdatedModal: X, headerWrapperRef: k, wrapperRef: y, dynamicContentStore: g, unsubscribeStore: C, props: s, configStore: o, editorStore: d, previewStore: Y, hasChanges: u, isTestPartner: Z, isSaveValidationEnabled: ee, loadRollout: D, saveSilent: I, setLoading: F, emit: a, buildMetadata: v, initPlugin: M, preloadRuntime: R, runExclusive: T, beginMount: L, isCurrentMount: S, mountGeneration: p, getDefaultTemplate: U, cloneTimersOnSave: N, hasTimerBlocks: _, noHeader: te, isRrsEnabled: oe, hasAssignedStrategy: re, insertDynamicContent: A, closeDynamicContent: B, handleDynamicContentOpen: b, ribbonObserver: c, updateRibbonOffset: h, startEditor: E, AutoSaveController: De, AuthErrorModal: Ie, Toaster: Fe, FilterSelectionDrawer: Me, HeaderWrapper: Re, LoadingWrapper: Te, SaveAsTemplateDrawer: Le, UnsubscribeWrapper: Ue, ValidationErrorDrawer: Ne };
   }
 });
 export {
-  yt as default
+  ht as default
 };

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue.js

@@ -1,22 +1,22 @@
 import a from "./UnsubscribePageSelection.vue2.js";
 /* empty css                              */
 import n from "../../../_virtual/_plugin-vue2_normalizer.js";
-var o = function() {
-  var r = this, e = r._self._c, t = r._self._setupProxy;
-  return e(t.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", size: "large", "footer-button-group-options": t.footerButtonGroupOptions, status: t.unsubscribeStore.pageSelectionDrawerStatus, "title-text": t.trans("newsletter.select-a-template") }, on: { cancelOrBackButtonEvent: t.handleBack, onCloseEvent: t.handleClose, primaryButtonEvent: t.handleSave }, scopedSlots: r._u([{ key: "headerBottomSlot", fn: function() {
-    return [e(t.UnsubscribeBreadcrumb, { staticClass: "px-5 py-3" })];
-  }, proxy: !0 }]) }, [e("div", { staticClass: "d-g templates-wrapper" }, r._l(t.unsubscribeStore.getTemplatesByActiveType, function(s) {
-    return e("div", { key: s.id, staticClass: "template-wrapper", on: { click: function(u) {
-      return t.selectTemplate(s.id);
-    } } }, [e(t.InContainer, { staticClass: "template-container o-h", class: { selected: t.unsubscribeStore.getSelectedTemplateByActiveType === s.id }, attrs: { border: t.getBorderClass(s.id) } }, [e("div", { staticClass: "w-1 h-1 d-f j-c-c a-i-c" }, [e("img", { staticClass: "w-1 h-1 thumbnail o-h", attrs: { alt: s.name, src: s.thumbnail } })])]), e("div", { staticClass: "mt-1 f-s-1" }, [r._v(" " + r._s(s.name) + " ")])], 1);
+var i = function() {
+  var r = this, t = r._self._c, e = r._self._setupProxy;
+  return t(e.WpDrawer, { attrs: { id: "unsubscribe-modal", "description-status": "", size: "large", "footer-button-group-options": e.footerButtonGroupOptions, status: e.unsubscribeStore.pageSelectionDrawerStatus, "title-text": e.trans("newsletter.select-a-template") }, on: { cancelOrBackButtonEvent: e.handleBack, onCloseEvent: e.handleClose, primaryButtonEvent: e.handleSave }, scopedSlots: r._u([{ key: "headerBottomSlot", fn: function() {
+    return [t(e.UnsubscribeBreadcrumb, { staticClass: "px-5 py-3" })];
+  }, proxy: !0 }]) }, [t("div", { staticClass: "d-g templates-wrapper" }, r._l(e.unsubscribeStore.getTemplatesByActiveType, function(s) {
+    return t("div", { key: s.id, staticClass: "template-wrapper", on: { click: function(u) {
+      return e.selectTemplate(s.id);
+    } } }, [t(e.InContainer, { staticClass: "template-container o-h p-r", class: { selected: e.unsubscribeStore.getSelectedTemplateByActiveType === s.id }, attrs: { border: e.getBorderClass(s.id) } }, [t("div", { staticClass: "w-1 h-1 d-f j-c-c a-i-c" }, [t("img", { staticClass: "w-1 h-1 thumbnail o-h", attrs: { alt: s.name, src: s.thumbnail } })]), s.isDefault ? t(e.InChips, { staticClass: "p-a t-3 r-3", attrs: { id: "guido__unsubscribe-default-chip", type: "neutral", value: "default", "close-button": !1, interactive: !1, text: e.trans("unsubscription-preference.default") } }) : r._e()], 1), t("div", { staticClass: "mt-1 f-s-1" }, [r._v(" " + r._s(s.name) + " ")])], 1);
   }), 0)]);
-}, i = [], c = /* @__PURE__ */ n(
+}, o = [], c = /* @__PURE__ */ n(
   a,
-  o,
   i,
+  o,
   !1,
   null,
-  "91a26acd"
+  "eaf8e461"
 );
 const _ = c.exports;
 export {

package/dist/components/organisms/unsubscribe/UnsubscribePageSelection.vue2.js

@@ -1,16 +1,16 @@
 import { defineComponent as y, ref as T, computed as a, watch as v } from "vue";
 import w from "../../wrappers/WpDrawer.vue.js";
-import { useToaster as B } from "../../../composables/useToaster.js";
-import { useTranslations as C } from "../../../composables/useTranslations.js";
+import { useToaster as C } from "../../../composables/useToaster.js";
+import { useTranslations as B } from "../../../composables/useTranslations.js";
 import { ToasterTypeOptions as h } from "../../../enums/toaster.js";
 import { useEditorStore as P } from "../../../stores/editor.js";
 import { useUnsubscribeStore as U } from "../../../stores/unsubscribe.js";
-import { InContainer as _ } from "@useinsider/design-system-vue";
-import I from "./UnsubscribeBreadcrumb.vue.js";
-const N = /* @__PURE__ */ y({
+import { InContainer as I, InChips as _ } from "@useinsider/design-system-vue";
+import x from "./UnsubscribeBreadcrumb.vue.js";
+const W = /* @__PURE__ */ y({
   __name: "UnsubscribePageSelection",
-  setup(x) {
-    const s = C(), e = U(), r = P(), { showToaster: c } = B(), o = T(!1), i = a(() => e.isActiveTypeLastInCollection ? o.value ? s("unsubscription-preference.applying-changes") : s("statistics.apply") : s("products.select-and-continue")), l = a(() => e.pageSelectionUpdateStatus && e.isActiveTypeFirstInCollection ? s("products.cancel") : s("newsletter.back")), p = a(() => ({
+  setup(A) {
+    const s = B(), e = U(), r = P(), { showToaster: c } = C(), o = T(!1), i = a(() => e.isActiveTypeLastInCollection ? o.value ? s("unsubscription-preference.applying-changes") : s("statistics.apply") : s("products.select-and-continue")), l = a(() => e.pageSelectionUpdateStatus && e.isActiveTypeFirstInCollection ? s("products.cancel") : s("newsletter.back")), p = a(() => ({
       primaryButton: {
         styling: "solid",
         type: "primary",
@@ -63,9 +63,9 @@ const N = /* @__PURE__ */ y({
     };
     return v(() => e.pageSelectionDrawerStatus, (t) => {
       t && e.pageSelectionUpdateStatus && e.fetchTemplates();
-    }), { __sfc: !0, trans: s, unsubscribeStore: e, editorStore: r, showToaster: c, isApplying: o, getPrimaryButtonText: i, getCancelOrBackButtonText: l, footerButtonGroupOptions: p, getBorderClass: d, closeModal: n, handleClose: m, handleBack: b, handleSave: f, selectTemplate: g, WpDrawer: w, InContainer: _, UnsubscribeBreadcrumb: I };
+    }), { __sfc: !0, trans: s, unsubscribeStore: e, editorStore: r, showToaster: c, isApplying: o, getPrimaryButtonText: i, getCancelOrBackButtonText: l, footerButtonGroupOptions: p, getBorderClass: d, closeModal: n, handleClose: m, handleBack: b, handleSave: f, selectTemplate: g, WpDrawer: w, InChips: _, InContainer: I, UnsubscribeBreadcrumb: x };
   }
 });
 export {
-  N as default
+  W as default
 };

package/dist/composables/useEditorOpenMetrics.js

@@ -0,0 +1,167 @@
+import { SYNC_MODULE_CLASS as w } from "./useSyncModuleExtractor.js";
+import { readRuntimePrefetchState as S } from "../utils/runtimePrefetch.js";
+import { getStripoVersion as R } from "../utils/stripoRuntime.js";
+import M from "../package.json.js";
+const A = [
+  "setup",
+  "host_ready",
+  "migration_start",
+  "migration_end",
+  "default_template_start",
+  "default_template_end",
+  "timer_clone_start",
+  "timer_clone_end",
+  "plugin_start",
+  "script_ready",
+  "fonts_sync_ready",
+  "blocks_config_ready",
+  "init_editor",
+  "token_start",
+  "token_end",
+  "ready"
+], m = "guido:open:", h = "total", p = [
+  ["host_wait", "setup", "host_ready"],
+  ["migration", "migration_start", "migration_end"],
+  ["default_template", "default_template_start", "default_template_end"],
+  ["timer_clone", "timer_clone_start", "timer_clone_end"],
+  ["script", "plugin_start", "script_ready"],
+  ["fonts_sync", "script_ready", "fonts_sync_ready"],
+  ["blocks_config", "fonts_sync_ready", "blocks_config_ready"],
+  ["editor_config", "blocks_config_ready", "init_editor"],
+  ["stripo_load", "init_editor", "ready"],
+  ["token", "token_start", "token_end"]
+], b = (e) => new RegExp(`(?:^|[\\s"'])(?:${e})(?=[\\s"'])`, "g"), N = /<img\b/gi, $ = b(w), L = /\srecommendation-id=/g, C = b("items-block-v2|esd-(?:cart|browsed|purchased)-items-block"), I = "esd-timer-id", f = {
+  html_bytes: null,
+  css_bytes: null,
+  image_count: null,
+  synced_module_count: null,
+  recommendation_block_count: null,
+  items_block_count: null,
+  has_timers: null,
+  force_recreate: null
+};
+let l = null;
+const i = (e) => {
+  try {
+    e();
+  } catch (t) {
+    console.debug("guido:open: metrics step failed", t);
+  }
+}, k = () => window.DD_RUM, g = (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;
+}, y = (e) => new TextEncoder().encode(e).length, O = (e) => {
+  if (!e)
+    return f;
+  try {
+    const { html: t, css: r, forceRecreate: o } = e;
+    return {
+      html_bytes: y(t),
+      css_bytes: y(r),
+      image_count: _(t, N),
+      synced_module_count: _(t, $),
+      recommendation_block_count: _(t, L),
+      items_block_count: _(t, C),
+      has_timers: t.includes(I),
+      force_recreate: o
+    };
+  } catch (t) {
+    return console.debug("guido:open: template weight failed", t), f;
+  }
+}, E = () => {
+  i(() => {
+    A.forEach((e) => performance.clearMarks(`${m}${e}`)), [...p.map(([e]) => e), h].forEach((e) => performance.clearMeasures(`${m}${e}`));
+  });
+}, c = (e, t) => {
+  if (e.finished || e.marks[t] !== void 0)
+    return;
+  const r = performance.now();
+  e.marks[t] = r, e === l && i(() => performance.mark(`${m}${t}`, { startTime: r }));
+}, s = (e) => {
+  e.finished = !0, document.removeEventListener("visibilitychange", e.onVisibilityChange), window.removeEventListener("pagehide", e.onPageHide);
+}, B = (e, t) => {
+  const { marks: r } = e, o = p.map(([n, a, d]) => [n, r[a], r[d]]);
+  o.push([h, r.setup, t]), o.forEach(([n, a, d]) => {
+    a !== void 0 && d !== void 0 && i(() => performance.measure(`${m}${n}`, { start: a, end: d }));
+  });
+}, D = (e, t, r) => {
+  const { marks: o, context: n } = e, a = Object.fromEntries(
+    p.map(([d, v, P]) => [`${d}_ms`, g(o[v], o[P])])
+  );
+  return {
+    outcome: t,
+    open_ms: g(o.setup, r),
+    ...a,
+    script_preloaded: e.scriptPreloaded,
+    runtime_prefetch: e.runtimePrefetch,
+    ...O(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: M.version,
+    stripo_version: R(),
+    was_backgrounded: e.wasBackgrounded
+  };
+}, u = (e, t) => {
+  i(() => {
+    const r = e.marks.ready ?? performance.now(), o = D(e, t, r);
+    e.template = null, e === l && B(e, r), console.debug("guido:open", o), i(() => {
+      var n, a;
+      return (a = (n = k()) == null ? void 0 : n.addAction) == null ? void 0 : a.call(n, "guido_editor_open", o);
+    });
+  });
+}, T = (e) => {
+  e.finished || (s(e), u(e, "abandoned"));
+}, H = () => {
+  const e = {
+    marks: {},
+    context: null,
+    template: null,
+    scriptPreloaded: null,
+    runtimePrefetch: null,
+    wasBackgrounded: document.visibilityState === "hidden",
+    finished: !1,
+    onVisibilityChange: () => {
+      document.visibilityState === "hidden" && (e.wasBackgrounded = !0);
+    },
+    onPageHide: () => T(e)
+  };
+  return e;
+}, Y = (e) => ({
+  mark: (t) => c(e, t),
+  timed: async (t, r) => {
+    c(e, `${t}_start`);
+    const o = await r();
+    return c(e, `${t}_end`), o;
+  },
+  setContext: (t) => {
+    e.context = t;
+  },
+  setTemplate: (t) => {
+    e.template = t;
+  },
+  setScriptPreloaded: (t) => {
+    e.scriptPreloaded = t;
+  },
+  markReady: () => {
+    e.finished || (c(e, "ready"), s(e), i(() => {
+      var t, r;
+      return (r = (t = k()) == null ? void 0 : t.addTiming) == null ? void 0 : r.call(t, "guido_editor_ready");
+    }), setTimeout(() => u(e, "ready"), 0));
+  },
+  markFailed: () => {
+    e.finished || (s(e), u(e, "error"));
+  },
+  dispose: () => {
+    T(e), e === l && (E(), l = null);
+  }
+}), K = () => {
+  const e = H();
+  return E(), l = e, i(() => {
+    e.runtimePrefetch = S();
+  }), document.addEventListener("visibilitychange", e.onVisibilityChange), window.addEventListener("pagehide", e.onPageHide), c(e, "setup"), Y(e);
+};
+export {
+  K as startEditorOpenMetrics
+};