@useinsider/guido 3.1.1-beta.26ba2a7 → 3.1.1-beta.293df1c

package/dist/src/stores/config.d.ts

@@ -22,6 +22,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -120,6 +124,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -218,6 +226,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -316,6 +328,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -414,6 +430,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -512,6 +532,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -610,6 +634,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -708,6 +736,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -806,6 +838,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -904,6 +940,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1002,6 +1042,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1100,6 +1144,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1198,6 +1246,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1296,6 +1348,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1394,6 +1450,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1492,6 +1552,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1590,6 +1654,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;
@@ -1688,6 +1756,10 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guido-conf
                 productType: 60 | 49 | 97;
                 messageType: 1 | 2;
                 username: string;
+                fallbackFont?: {
+                    name: string;
+                    family: string;
+                } | undefined;
             };
             template: {
                 html: string;

package/dist/src/stores/preview.d.ts

@@ -7,6 +7,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     previewHtml(): string;
     hasAMP: (state: {
@@ -16,6 +17,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     hasAMPErrors: (state: {
         emailFormat: EmailFormat;
@@ -24,6 +26,7 @@ export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPrev
         templateHtml: string;
         isLoaded: boolean;
         isAMPErrorModalVisible: boolean;
+        emailSizeKB: number;
     } & import("pinia").PiniaCustomStateProperties<PreviewState>) => boolean;
     showAMPErrorButton(): boolean;
     isAMPResponsive(): boolean;

package/dist/src/utils/htmlCompiler.d.ts

@@ -1,8 +1,9 @@
+import type { FallbackFont } from '@@/Types/config';
 import type { CompilerRule, CompilationResult, HtmlCompiler } from '@@/Types/html-compiler';
 export declare class HtmlCompilerEngine implements HtmlCompiler {
     private rules;
     constructor(rules?: CompilerRule[]);
-    compile(html: string, rules?: CompilerRule[]): CompilationResult;
+    compile(html: string, rules?: CompilerRule[], fallbackFont?: FallbackFont): CompilationResult;
     private applyRule;
     private applyReplaceRule;
     private applyRegexRule;

package/dist/stores/preview.js

@@ -1,13 +1,14 @@
 import { defineStore as e } from "pinia";
-const s = () => ({
+const i = () => ({
   emailFormat: "html",
   ampHtml: "",
   ampErrors: [],
   templateHtml: "",
   isLoaded: !1,
-  isAMPErrorModalVisible: !1
+  isAMPErrorModalVisible: !1,
+  emailSizeKB: 0
 }), a = e("guidoPreview", {
-  state: () => s(),
+  state: () => i(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",
     previewHtml() {

package/dist/utils/htmlCompiler.js

@@ -1,70 +1,77 @@
-var y = Object.defineProperty;
-var g = (p, e, r) => e in p ? y(p, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : p[e] = r;
-var u = (p, e, r) => g(p, typeof e != "symbol" ? e + "" : e, r);
-import { useToaster as m } from "../composables/useToaster.js";
-class d {
+var h = Object.defineProperty;
+var f = (o, e, t) => e in o ? h(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var m = (o, e, t) => f(o, typeof e != "symbol" ? e + "" : e, t);
+import { useToaster as x } from "../composables/useToaster.js";
+const E = /font-family\s*:[^;}"']+/gi;
+class T {
   constructor(e = []) {
-    u(this, "rules");
+    m(this, "rules");
     this.rules = e;
   }
-  compile(e, r) {
-    const l = performance.now(), t = e, o = e.length;
+  compile(e, t, r) {
+    const n = performance.now(), l = e, c = e.length;
     let s = e;
-    const a = [];
-    (r || this.rules).sort((n, c) => n.priority - c.priority).forEach((n) => {
-      const c = s.length;
-      s = this.applyRule(s, n), s.length !== c && a.push(n.id);
+    const i = [];
+    (t || this.rules).sort((p, a) => p.priority - a.priority).forEach((p) => {
+      const a = s.length;
+      s = this.applyRule(s, p), s.length !== a && i.push(p.id);
     });
-    const i = s.length, R = o > 0 ? (o - i) / o * 100 : 0;
+    const u = s.length, R = c > 0 ? (c - u) / c * 100 : 0, d = new TextEncoder().encode(s).byteLength;
+    let y = 0;
+    if (r && r.name && r.family) {
+      const p = (s.match(E) || []).length, a = `, ${r.name}, ${r.family}`;
+      y = p * new TextEncoder().encode(a).byteLength;
+    }
+    const g = Math.round((d + y) / 1024);
     return {
-      originalHtml: t,
+      originalHtml: l,
       compiledHtml: s,
-      appliedRules: a,
-      // TODO: We can use stats for monitoring in the future
+      appliedRules: i,
+      estimatedSizeKB: g,
       stats: {
-        originalSize: o,
-        compiledSize: i,
+        originalSize: c,
+        compiledSize: u,
         reductionPercentage: R,
-        executionTime: performance.now() - l
+        executionTime: performance.now() - n
       }
     };
   }
-  applyRule(e, r) {
+  applyRule(e, t) {
     try {
-      switch (r.type) {
+      switch (t.type) {
         case "replace":
-          return this.applyReplaceRule(e, r);
+          return this.applyReplaceRule(e, t);
         case "regex":
-          return this.applyRegexRule(e, r);
+          return this.applyRegexRule(e, t);
         case "remove":
-          return this.applyRemoveRule(e, r);
+          return this.applyRemoveRule(e, t);
         case "custom":
-          return this.applyCustomRule(e, r);
+          return this.applyCustomRule(e, t);
         default:
           return e;
       }
-    } catch (l) {
-      const { handleError: t } = m();
-      return t(l, `Failed to apply rule ${r.id}:`), e;
+    } catch (r) {
+      const { handleError: n } = x();
+      return n(r, `Failed to apply rule ${t.id}:`), e;
     }
   }
-  applyReplaceRule(e, r) {
-    const { search: l, replacement: t, replaceAll: o = !0 } = r;
-    return o ? e.replaceAll(l, t) : e.replace(l, t);
+  applyReplaceRule(e, t) {
+    const { search: r, replacement: n, replaceAll: l = !0 } = t;
+    return l ? e.replaceAll(r, n) : e.replace(r, n);
   }
-  applyRegexRule(e, r) {
-    const { pattern: l, replacement: t, flags: o = "g" } = r, s = new RegExp(l, o);
-    return e.replace(s, t);
+  applyRegexRule(e, t) {
+    const { pattern: r, replacement: n, flags: l = "g" } = t, c = new RegExp(r, l);
+    return e.replace(c, n);
   }
-  applyRemoveRule(e, r) {
-    return r.targets.reduce((l, t) => t instanceof RegExp ? l.replace(t, "") : l.replaceAll(t, ""), e);
+  applyRemoveRule(e, t) {
+    return t.targets.reduce((r, n) => n instanceof RegExp ? r.replace(n, "") : r.replaceAll(n, ""), e);
   }
-  applyCustomRule(e, r) {
-    return r.processor(e);
+  applyCustomRule(e, t) {
+    return t.processor(e);
   }
 }
-const A = (p = []) => new d(p);
+const H = (o = []) => new T(o);
 export {
-  d as HtmlCompilerEngine,
-  A as createHtmlCompiler
+  T as HtmlCompilerEngine,
+  H as createHtmlCompiler
 };

package/dist/utils/templatePreparation.js

@@ -1,32 +1,32 @@
-import { useActionsApi as f } from "../composables/useActionsApi.js";
-import { useHtmlCompiler as C } from "../composables/useHtmlCompiler.js";
-import { useRecommendationExtensionStore as T } from "../extensions/Blocks/Recommendation/store/recommendation.js";
-import { useDynamicContentStore as x } from "../stores/dynamic-content.js";
-import { useUnsubscribeStore as y } from "../stores/unsubscribe.js";
-const w = () => {
-  const o = x(), e = y(), { getCompiledEmail: i, getTemplateData: s, editorSave: n } = f(), { compileHtml: a } = C();
+import { useActionsApi as S } from "../composables/useActionsApi.js";
+import { useHtmlCompiler as f } from "../composables/useHtmlCompiler.js";
+import { useRecommendationExtensionStore as C } from "../extensions/Blocks/Recommendation/store/recommendation.js";
+import { useDynamicContentStore as T } from "../stores/dynamic-content.js";
+import { useUnsubscribeStore as x } from "../stores/unsubscribe.js";
+const h = () => {
+  const o = T(), e = x(), { getCompiledEmail: i, getTemplateData: s } = S(), { compileHtml: n } = f();
   return {
     prepareTemplateDetails: async () => {
-      const { html: m, ampHtml: r = "", ampErrors: c = [] } = await i({
+      const { html: a, ampHtml: m = "", ampErrors: r = [] } = await i({
         minimize: !0,
         resetDataSavedFlag: !1
-      }), { html: l, css: p, syncModulesIds: u = [] } = await s();
+      }), { html: c, css: l, syncModulesIds: p = [] } = await s();
       e.selectedUnsubscribePages.length && await e.fetchTemplates();
-      const { compiledHtml: d, stats: t, appliedRules: g } = a(m), S = o.getSelectedDynamicContentList, b = T();
-      return n(), console.debug("HTML Compilation Stats:", {
+      const { compiledHtml: u, stats: t, appliedRules: d } = n(a), g = o.getSelectedDynamicContentList, b = C();
+      return console.debug("HTML Compilation Stats:", {
         originalSize: t.originalSize,
         compiledSize: t.compiledSize,
         reduction: `${t.reductionPercentage.toFixed(2)}%`,
-        appliedRules: g,
+        appliedRules: d,
         executionTime: `${t.executionTime.toFixed(2)}ms`
       }), {
-        dynamicContentList: S,
-        compiledHtml: d,
-        rawHtml: l,
-        css: p,
-        ampHtml: r,
-        ampErrors: c,
-        modules: u.map(Number),
+        dynamicContentList: g,
+        compiledHtml: u,
+        rawHtml: c,
+        css: l,
+        ampHtml: m,
+        ampErrors: r,
+        modules: p.map(Number),
         recommendation: {
           campaignUrls: b.recommendationCampaignUrls,
           configs: {}
@@ -40,5 +40,5 @@ const w = () => {
   };
 };
 export {
-  w as useTemplatePreparation
+  h as useTemplatePreparation
 };

package/dist/utils/tooltipUtils.js

@@ -1,11 +1,10 @@
-const e = (s, t = {}) => ({
-  id: s,
+const o = (i, t = {}) => ({
+  id: i,
   dynamicPosition: t.dynamicPosition ?? !1,
   staticPosition: t.staticPosition ?? "bottom center",
   iconStatus: t.iconStatus ?? !1,
-  offset: t.offset,
-  preventXss: t.preventXss
+  offset: t.offset
 });
 export {
-  e as getTooltipOptions
+  o as getTooltipOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.1.1-beta.26ba2a7",
+  "version": "3.1.1-beta.293df1c",
   "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",
@@ -33,7 +33,7 @@
   "license": "ISC",
   "dependencies": {
     "@stripoinc/ui-editor-extensions": "3.5.0",
-    "@useinsider/design-system-vue": "0.14.28",
+    "@useinsider/design-system-vue": "1.1.0-beta.73ec2fa",
     "@vueuse/core": "11.3.0",
     "lodash-es": "4.17.21",
     "pinia": "2.3.1",