@useinsider/guido 1.0.0-beta.6ebce36 → 1.0.0-beta.6f8286c

package/README.md

@@ -43,8 +43,6 @@ export default {
       userId: '12345',
       guidoConfig: {
         translationsPath: 'window.trans.en'
-        htmlCompilerRules: [],
-        ignoreDefaultHtmlCompilerRules: false,
       }
     };
   }
@@ -70,16 +68,12 @@ export default {
 ```typescript
 interface GuidoConfig {
   translationsPath: string;
-  htmlCompilerRules: CompilerRule[];
-  ignoreDefaultHtmlCompilerRules: boolean;
 }
 ```
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
 | `translationsPath` | `string` | `'window.trans.en'` | JavaScript path to the translations object |
-| `htmlCompilerRules` | `CompilerRule[]` | `[]` | Additional compiler rules to apply to HTML content. See [HTML Compiler Rules](#-html-compiler-rules) section below |
-| `ignoreDefaultHtmlCompilerRules` | `boolean` | `false` | Skip default compiler rules and only use custom rules. Default rules: `src/config/compiler/htmlCompilerRules.ts` |
 
 ### TypeScript Types
 
@@ -107,185 +101,6 @@ type StripoEventType =
   | 'export:ready';
 ```
 
-## 🔨 HTML Compiler Rules
-
-Guido includes a powerful HTML compiler system that allows you to transform HTML content with custom rules. You can define additional rules and optionally ignore the default rules.
-
-### Rule Types
-
-There are 4 types of compiler rules:
-
-#### 1. Replace Rule
-Replace specific strings in HTML content.
-
-```typescript
-{
-  id: 'fix-encoding',
-  description: 'Fix URL encoding issues',
-  type: 'replace',
-  search: '{%22',           // String to find
-  replacement: '%7B%22',    // String to replace with
-  replaceAll: true,         // Replace all occurrences (default: true)
-  priority: 10              // Execution priority (lower = earlier)
-}
-```
-
-#### 2. Regex Rule
-Use regular expressions for complex pattern matching and replacement.
-
-```typescript
-{
-  id: 'remove-comments',
-  description: 'Remove HTML comments',
-  type: 'regex',
-  pattern: '<!--.*?-->',    // Regex pattern
-  replacement: '',          // Replacement string
-  flags: 'g',              // Regex flags (default: 'g')
-  priority: 20
-}
-```
-
-#### 3. Remove Rule
-Remove specific strings or patterns from HTML content.
-
-```typescript
-{
-  id: 'cleanup-scripts',
-  description: 'Remove unwanted script tags',
-  type: 'remove',
-  targets: [                              // Array of strings or RegExp objects
-    '<script src="unwanted.js"></script>',
-    /onclick="[^"]*"/g
-  ],
-  priority: 30
-}
-```
-
-#### 4. Custom Rule
-Define complex transformation logic with a custom processor function.
-
-```typescript
-{
-  id: 'add-meta-tags',
-  description: 'Add custom meta tags to head',
-  type: 'custom',
-  processor: (html: string): string => {
-    // Custom transformation logic
-    const metaTags = '<meta name="custom" content="value">';
-    return html.replace('</head>', `${metaTags}</head>`);
-  },
-  priority: 40
-}
-```
-
-### Using HTML Compiler Rules
-
-#### Basic Usage with Custom Rules
-
-```typescript
-const guidoConfig = {
-  translationsPath: 'window.trans.en',
-  htmlCompilerRules: [
-    {
-      id: 'replace-domain',
-      description: 'Replace old domain with new one',
-      type: 'replace',
-      search: 'old-domain.com',
-      replacement: 'new-domain.com',
-      replaceAll: true,
-      priority: 10
-    },
-    {
-      id: 'remove-tracking',
-      description: 'Remove tracking pixels',
-      type: 'regex',
-      pattern: '<img[^>]*tracking[^>]*>',
-      replacement: '',
-      flags: 'gi',
-      priority: 20
-    }
-  ]
-};
-```
-
-#### Ignoring Default Rules
-
-```typescript
-const guidoConfig = {
-  translationsPath: 'window.trans.en',
-  ignoreDefaultHtmlCompilerRules: true, // Skip all default rules
-  htmlCompilerRules: [
-    // Only your custom rules will be applied
-    {
-      id: 'custom-transformation',
-      type: 'replace',
-      search: 'old-text',
-      replacement: 'new-text',
-      priority: 1
-    }
-  ]
-};
-```
-
-### Rule Execution Order
-
-Rules are executed in priority order (lower numbers first). Rules with the same priority are executed in array order.
-
-- **Priority 1-99**: Reserved for critical transformations
-- **Priority 100-999**: Standard transformations  
-- **Priority 1000+**: Additional custom rules (automatically assigned)
-
-### Default Rules
-
-Guido includes several default rules for common email HTML optimizations:
-
-- **URL encoding fixes**: Fixes malformed URL encoding in dynamic content
-- **Template tag restoration**: Restores `{{}}` template tags that got URL encoded
-- **HTML entity decoding**: Converts `&lt;` and `&gt;` back to `<` and `>`
-- **Cleanup rules**: Removes unwanted iframe and style elements
-- **MSO conditions**: Manages Outlook-specific conditional comments
-- **Domain replacement**: Updates old image domains to current ones
-
-You can view all default rules in: `src/config/compiler/htmlCompilerRules.ts`
-
-### CompilerRule Interface
-
-```typescript
-type CompilerRuleType = 'replace' | 'regex' | 'remove' | 'custom';
-
-interface BaseCompilerRule {
-  id: string;
-  description?: string;
-  priority: number;
-}
-
-interface ReplaceRule extends BaseCompilerRule {
-  type: 'replace';
-  search: string;
-  replacement: string;
-  replaceAll?: boolean; // Default: true
-}
-
-interface RegexRule extends BaseCompilerRule {
-  type: 'regex';
-  pattern: string;
-  replacement: string;
-  flags?: string; // Default: 'g'
-}
-
-interface RemoveRule extends BaseCompilerRule {
-  type: 'remove';
-  targets: (string | RegExp)[]; // Array of strings or RegExp objects
-}
-
-interface CustomRule extends BaseCompilerRule {
-  type: 'custom';
-  processor: (html: string) => string;
-}
-
-type CompilerRule = ReplaceRule | RegexRule | RemoveRule | CustomRule;
-```
-
 ---
 
 ## 🔧 Development

package/dist/@types/generic.d.ts

@@ -1,6 +1,3 @@
-import type { CompilerRule } from './html-compiler';
 export type GuidoConfig = {
     translationsPath: string;
-    htmlCompilerRules?: CompilerRule[];
-    ignoreDefaultHtmlCompilerRules?: boolean;
 };

package/dist/components/organisms/header/MiddleSlot.vue.js

@@ -2,7 +2,7 @@ import s from "./MiddleSlot.vue2.js";
 import i from "../../../_virtual/_plugin-vue2_normalizer.js";
 var n = function() {
   var e = this, o = e._self._c, t = e._self._setupProxy;
-  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
+  return t.editorStore.isVersionHistoryOpen ? o("div", { staticClass: "d-f" }, [o(t.VersionHistory), o(t.VersionHistoryViewOptions)], 1) : o("div", { staticClass: "d-f" }, [o(t.InButtonV2, { attrs: { id: "guido__undo-button", "left-icon": "line-undo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__redo-button", "left-icon": "line-redo", styling: "ghost", type: "secondary", "label-text-status": !1 } }), o(t.InButtonV2, { attrs: { id: "guido__code-button", "data-testid": "Code Editor", "left-icon": "line-code", styling: "ghost", "tooltip-text": "Code Editor", type: "secondary", "label-text-status": !1, "selected-status": t.editorStore.isCodeEditorOpen, "tooltip-options": t.getTooltipOptions("guido__code-button") } }), o(t.InButtonV2, { attrs: { id: "guido__preview-button", "left-icon": "line-show-on", styling: "ghost", type: "secondary", "label-text-status": !1, "tooltip-options": t.getTooltipOptions("guido__preview-button"), "tooltip-text": t.trans("newsletter.email-preview") } }), o(t.ViewOptions, { staticClass: "ml-3" })], 1);
 }, l = [], r = /* @__PURE__ */ i(
   s,
   n,

package/dist/composables/useExport.d.ts

@@ -1,3 +1,3 @@
 export declare const useExport: () => {
-    exportHtml: (compile?: boolean) => Promise<void>;
+    exportHtml: () => Promise<void>;
 };

package/dist/composables/useExport.js

@@ -1,45 +1,30 @@
 import { useActionsApi as l } from "./useActionsApi.js";
-import { useHtmlCompiler as m } from "./useHtmlCompiler.js";
-import { useToaster as d } from "./useToaster.js";
-const h = () => {
-  const a = (s, o, r) => {
-    const i = new Blob([s], { type: r }), t = URL.createObjectURL(i), e = document.createElement("a");
-    e.href = t, e.download = o, document.body.appendChild(e), e.click(), document.body.removeChild(e), URL.revokeObjectURL(t);
-  }, c = (s) => {
-    const o = /* @__PURE__ */ new Date(), r = String(o.getDate()).padStart(2, "0"), i = String(o.getMonth() + 1).padStart(2, "0"), t = o.getFullYear(), e = String(o.getHours()).padStart(2, "0"), n = String(o.getMinutes()).padStart(2, "0");
-    return `${s}_${r}-${i}-${t}_${e}-${n}.html`;
+import { useToaster as m } from "./useToaster.js";
+const u = () => {
+  const a = (r, t, e) => {
+    const n = new Blob([r], { type: e }), s = URL.createObjectURL(n), o = document.createElement("a");
+    o.href = s, o.download = t, document.body.appendChild(o), o.click(), document.body.removeChild(o), URL.revokeObjectURL(s);
+  }, c = (r) => {
+    const t = /* @__PURE__ */ new Date(), e = String(t.getDate()).padStart(2, "0"), n = String(t.getMonth() + 1).padStart(2, "0"), s = t.getFullYear(), o = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
+    return `${r}_${e}-${n}-${s}_${o}-${i}.html`;
   };
-  return { exportHtml: async (s = !0) => {
-    const { getCompiledEmail: o } = l(), { showToaster: r } = d(), { compileHtml: i } = m();
+  return { exportHtml: async () => {
+    const { getCompiledEmail: r } = l(), { showToaster: t } = m();
     try {
-      const { html: t } = await o();
-      if (t) {
-        let e = t;
-        if (s) {
-          const n = i(t);
-          e = n.compiledHtml, console.debug("HTML Compilation Stats:", {
-            originalSize: n.stats.originalSize,
-            compiledSize: n.stats.compiledSize,
-            reduction: `${n.stats.reductionPercentage.toFixed(2)}%`,
-            appliedRules: n.appliedRules,
-            executionTime: `${n.stats.executionTime.toFixed(2)}ms`
-          });
-        }
-        a(e, c("HTML"), "text/html");
-      } else
-        r({
-          type: "error",
-          message: "No HTML content to download"
-        });
-    } catch (t) {
-      const e = t instanceof Error ? t.message : String(t);
-      r({
+      const { html: e } = await r();
+      e ? a(e, c("HTML"), "text/html") : t({
         type: "error",
-        message: `Error compiling email: ${e}`
+        message: "No HTML content to download"
+      });
+    } catch (e) {
+      const n = e instanceof Error ? e.message : String(e);
+      t({
+        type: "error",
+        message: `Error compiling email: ${n}`
       });
     }
   } };
 };
 export {
-  h as useExport
+  u as useExport
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.6ebce36",
+  "version": "1.0.0-beta.6f8286c",
   "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",
@@ -10,9 +10,9 @@
   ],
   "exports": {
     ".": {
-        "import": "./dist/library.js",
-        "types": "./dist/components/Guido.vue.d.ts",
-        "require": "./dist/components/Guido.vue.js"
+      "import": "./dist/library.js",
+      "types": "./dist/components/Guido.vue.d.ts",
+      "require": "./dist/components/Guido.vue.js"
     },
     "./style": "./dist/guido.css"
   },
@@ -21,7 +21,6 @@
     "start": "vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.app.json",
     "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "NODE_OPTIONS=--max-old-space-size=2048 eslint ./ && bun run type-check",
     "lint:fix": "NODE_OPTIONS=--max-old-space-size=2048 eslint --fix ./",
     "type-check": "vue-tsc --noEmit --project tsconfig.config.json && vue-tsc --noEmit --project tsconfig.app.json"
@@ -42,6 +41,7 @@
     "@cspell/eslint-plugin": "8.17.5",
     "@eslint/eslintrc": "3.3.0",
     "@eslint/js": "8.57.1",
+    "@playwright/test": "^1.54.2",
     "@stylistic/eslint-plugin": "3.1.0",
     "@stylistic/eslint-plugin-migrate": "3.1.0",
     "@types/eslint": "8.56.12",

package/dist/composables/useHtmlCompiler.d.ts

@@ -1,4 +0,0 @@
-import type { CompilationResult } from '@@/Types/html-compiler';
-export declare const useHtmlCompiler: () => {
-    compileHtml: (html: string) => CompilationResult;
-};

package/dist/composables/useHtmlCompiler.js

@@ -1,16 +0,0 @@
-import { defaultHtmlCompilerRules as r } from "../config/compiler/htmlCompilerRules.js";
-import { createHtmlCompiler as p } from "../utils/htmlCompiler.js";
-const a = () => {
-  const e = typeof window < "u" ? window.GuidoConfig : void 0, l = (e == null ? void 0 : e.htmlCompilerRules) || [], t = [
-    ...!!(e != null && e.ignoreDefaultHtmlCompilerRules) ? [] : r,
-    ...l.map((o, m) => ({
-      ...o,
-      priority: o.priority + 1e3 + m
-      // Ensure additional rules run after default rules
-    }))
-  ], i = p(t);
-  return { compileHtml: (o) => i.compile(o) };
-};
-export {
-  a as useHtmlCompiler
-};

package/dist/config/compiler/htmlCompilerRules.d.ts

@@ -1,2 +0,0 @@
-import type { CompilerRule } from '@@/Types/html-compiler';
-export declare const defaultHtmlCompilerRules: CompilerRule[];

package/dist/config/compiler/htmlCompilerRules.js

@@ -1,145 +0,0 @@
-const a = [
-  {
-    id: "fix-url-encoding-start",
-    description: "Replace {%22 with %7B%22 to fix URL encoding",
-    type: "replace",
-    search: "{%22",
-    replacement: "%7B%22",
-    replaceAll: !0,
-    priority: 10
-  },
-  {
-    id: "fix-url-encoding-end",
-    description: "Replace %22} with %22%7D to fix URL encoding",
-    type: "replace",
-    search: "%22}",
-    replacement: "%22%7D",
-    replaceAll: !0,
-    priority: 10
-  },
-  {
-    id: "fix-tags-start",
-    description: "Replace %7B%7B with {{ to fix URL encoding",
-    type: "replace",
-    search: "%7B%7B",
-    replacement: "{{",
-    replaceAll: !0,
-    priority: 11
-  },
-  {
-    id: "fix-tags-end",
-    description: "Replace %7D%7D with }} to fix URL encoding",
-    type: "replace",
-    search: "%7D%7D",
-    replacement: "}}",
-    replaceAll: !0,
-    priority: 12
-  },
-  {
-    id: "unescape-inequality-operators-start",
-    description: "Replace &lt; with < to fix URL encoding",
-    type: "replace",
-    search: "&lt;",
-    replacement: "<",
-    replaceAll: !0,
-    priority: 13
-  },
-  {
-    id: "unescape-inequality-operators-end",
-    description: "Replace &gt; with > to fix URL encoding",
-    type: "replace",
-    search: "&gt;",
-    replacement: ">",
-    replaceAll: !0,
-    priority: 14
-  },
-  {
-    id: "remove-apty-iframe",
-    description: "Cleanup Apty Iframe Code",
-    type: "remove",
-    targets: [
-      '<iframe src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>',
-      'src="about:blank" id="letznav-iframe-script" allowtransparency="true" style="width:1px;height:1px"></iframe>'
-    ],
-    priority: 20
-  },
-  {
-    id: "remove-apty-styles",
-    description: "Removing Apty Styles",
-    type: "regex",
-    pattern: '<styles*data-styles="apty_styles"s* type="text/css"s*>((s|.)*?)</style>',
-    replacement: "",
-    flags: "g",
-    priority: 21
-  },
-  {
-    id: "remove-mso-conditions",
-    description: "Removing MSO Conditions",
-    type: "remove",
-    targets: [
-      "/<!--[ifs(mso 16)]>s*<styles*S*>s*as*{s*text-decorations*:s*nones*;*s*}s*</style>s*<![endif]-->/g",
-      "/<!--[ifsgte mso 9]>s*<styles*S*>s*sups*{s*font-sizes*:s*100%s*!importants*;*s*}s*</style>s*<![endif]-->/g",
-      "/<!--[ifsgte 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:WordDocuments+xmlns:w="urn:schemas-microsoft-com:office:word">s*<w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>s*</w:WordDocument>s*</xml>s*<![endif]-->/g',
-      "/<!--[if !mso]><!--s*d*s*-->s*<!--[if !mso]><!--s*d*s*-->s*<!--<![endif]-->/g",
-      "/<!--[ifs!mso]>s*<!-- d -->/g"
-    ],
-    priority: 22
-  },
-  {
-    id: "add-mso-conditions",
-    description: "Adding MSO Conditions",
-    type: "custom",
-    processor: (e) => {
-      const t = [
-        `<!--[if gte mso 9]>
-<style>sup {
-    font-size: 100% !important;
-}</style><![endif]-->`,
-        `<!--[if gte mso 9]>
-<noscript>
-    <xml>
-        <o:OfficeDocumentSettings>
-            <o:AllowPNG></o:AllowPNG>
-            <o:PixelsPerInch>96</o:PixelsPerInch>
-        </o:OfficeDocumentSettings>
-    </xml>
-</noscript><![endif]-->`,
-        `<!--[if mso]>
-<xml>
-    <w:WordDocument xmlns:w="urn:schemas-microsoft-com:office:word">
-        <w:DontUseAdvancedTypographyReadingMail></w:DontUseAdvancedTypographyReadingMail>
-    </w:WordDocument>
-</xml><![endif]-->`
-      ], s = /<head>([\S\s]*)<\/head>/, o = new RegExp(s);
-      if (!e.match(o))
-        return e;
-      let i = e;
-      return t.forEach((r) => {
-        i = i.replace("</head>", `${r}</head>`);
-      }), i;
-    },
-    priority: 30
-  },
-  {
-    id: "replace-old-image-domain",
-    description: "Replacing old image domains",
-    type: "replace",
-    search: "stripo-editor-image.s3-eu-west-1.amazonaws.com",
-    replacement: "email-static.useinsider.com",
-    replaceAll: !0,
-    priority: 40
-  },
-  {
-    id: "replace-old-v2-image-domain",
-    description: "Replacing old image domains",
-    type: "replace",
-    search: "email.static.useinsider.com",
-    replacement: "email-static.useinsider.com",
-    replaceAll: !0,
-    priority: 41
-  }
-];
-export {
-  a as defaultHtmlCompilerRules
-};

package/dist/utils/htmlCompiler.d.ts

@@ -1,12 +0,0 @@
-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;
-    private applyRule;
-    private applyReplaceRule;
-    private applyRegexRule;
-    private applyRemoveRule;
-    private applyCustomRule;
-}
-export declare const createHtmlCompiler: (rules?: CompilerRule[]) => HtmlCompiler;

package/dist/utils/htmlCompiler.js

@@ -1,70 +0,0 @@
-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 {
-  constructor(e = []) {
-    u(this, "rules");
-    this.rules = e;
-  }
-  compile(e, r) {
-    const l = performance.now(), t = e, o = 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 = s.length, R = o > 0 ? (o - i) / o * 100 : 0;
-    return {
-      originalHtml: t,
-      compiledHtml: s,
-      appliedRules: a,
-      // TODO: We can use stats for monitoring in the future
-      stats: {
-        originalSize: o,
-        compiledSize: i,
-        reductionPercentage: R,
-        executionTime: performance.now() - l
-      }
-    };
-  }
-  applyRule(e, r) {
-    try {
-      switch (r.type) {
-        case "replace":
-          return this.applyReplaceRule(e, r);
-        case "regex":
-          return this.applyRegexRule(e, r);
-        case "remove":
-          return this.applyRemoveRule(e, r);
-        case "custom":
-          return this.applyCustomRule(e, r);
-        default:
-          return e;
-      }
-    } catch (l) {
-      const { handleError: t } = m();
-      return t(l, `Failed to apply rule ${r.id}:`), e;
-    }
-  }
-  applyReplaceRule(e, r) {
-    const { search: l, replacement: t, replaceAll: o = !0 } = r;
-    return o ? e.replaceAll(l, t) : e.replace(l, t);
-  }
-  applyRegexRule(e, r) {
-    const { pattern: l, replacement: t, flags: o = "g" } = r, s = new RegExp(l, o);
-    return e.replace(s, t);
-  }
-  applyRemoveRule(e, r) {
-    return r.targets.reduce((l, t) => t instanceof RegExp ? l.replace(t, "") : l.replaceAll(t, ""), e);
-  }
-  applyCustomRule(e, r) {
-    return r.processor(e);
-  }
-}
-const A = (p = []) => new d(p);
-export {
-  d as HtmlCompilerEngine,
-  A as createHtmlCompiler
-};