@antelopejs/dms-marketing 0.3.2 → 0.4.0

package/frontend-vue/tests/routes.test.ts

@@ -1,23 +1,83 @@
 import { describe, expect, it } from 'vitest'
 import {
-  campaignsLink,
+  acquisitionLink,
+  funnelBuilderLink,
+  funnelLink,
   funnelsLink,
+  installLink,
+  overviewLink,
   pagesLink,
+  withWebsite,
 } from '../app/composables/useMarketingRoutes'
 
 describe('module links', () => {
   it('stay bare when nothing is selected', () => {
     expect(pagesLink()).toBe('/modules/marketing/pages')
-    expect(campaignsLink()).toBe('/modules/marketing/campaigns')
+    expect(acquisitionLink()).toBe('/modules/marketing/acquisition')
     expect(funnelsLink()).toBe('/modules/marketing/funnels')
+    expect(funnelBuilderLink()).toBe('/modules/marketing/funnel-builder')
+    expect(installLink()).toBe('/modules/marketing/install')
   })
 
-  it('serializes the exact button route and encodes selected values', () => {
-    expect(funnelsLink({ website: 'test-site-1' })).toBe(
-      '/modules/marketing/funnels?website=test-site-1',
+  it('encode the values they carry', () => {
+    expect(pagesLink('/pricing?x=1')).toBe(
+      '/modules/marketing/pages?path=%2Fpricing%3Fx%3D1',
     )
-    expect(pagesLink({ website: 'w 1', path: '/pricing?x=1', period: '7d' })).toBe(
-      '/modules/marketing/pages?website=w+1&path=%2Fpricing%3Fx%3D1&period=7d',
+    expect(funnelLink('f 1')).toBe('/modules/marketing/funnel?id=f+1')
+    expect(installLink('site-1')).toBe(
+      '/modules/marketing/install?website=site-1',
+    )
+  })
+
+  it('carry a template and the split switch to the builder', () => {
+    const link = funnelBuilderLink(null, {
+      split: true,
+      steps: [{ kind: 'custom', value: 'signup' }],
+    })
+    const query = new URL(link, 'http://x').searchParams
+    expect(query.get('split')).toBe('1')
+    expect(JSON.parse(query.get('steps')!)).toEqual([
+      { kind: 'custom', value: 'signup' },
+    ])
+  })
+
+  it('opens the builder on a copy of a funnel (Duplicate)', () => {
+    expect(funnelBuilderLink(null, { copy: 'f1' })).toBe(
+      '/modules/marketing/funnel-builder?copy=f1',
+    )
+  })
+
+  it('open the overview on a website', () => {
+    expect(overviewLink()).toBe('/modules/marketing/overview')
+    expect(overviewLink('site-1')).toBe(
+      '/modules/marketing/overview?website=site-1',
+    )
+  })
+
+  it('carry the website of the page they are followed from', () => {
+    const query = {
+      website: 'site-1',
+      'marketing.period': 'last-7-days',
+      path: '/ignored',
+    }
+    expect(withWebsite(pagesLink('/pricing'), query)).toBe(
+      '/modules/marketing/pages?path=%2Fpricing&website=site-1',
+    )
+    expect(withWebsite(acquisitionLink(), query)).toBe(
+      '/modules/marketing/acquisition?website=site-1',
+    )
+  })
+
+  it('keep the website a link names, and stay bare without one', () => {
+    const query = { website: 'site-1' }
+    expect(withWebsite(overviewLink('site-2'), query)).toBe(
+      '/modules/marketing/overview?website=site-2',
+    )
+    expect(withWebsite(acquisitionLink(), {})).toBe(
+      '/modules/marketing/acquisition',
+    )
+    expect(withWebsite(acquisitionLink(), { website: ['site-1'] })).toBe(
+      '/modules/marketing/acquisition',
     )
   })
 })

package/frontend-vue/tests/server-parity.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+// The server's own rules, read from its sources: the builder and the website
+// forms check a draft before saving it, and must refuse what the API refuses.
+import * as server from '../../src/types/constants'
+import { normalizeStepPath } from '../../src/services/funnels/step-path'
+import * as draft from '../app/utils/funnel-draft'
+import { normalizeFunnelStepPath } from '../app/utils/step-path'
+import {
+  MAX_WEBSITE_DOMAIN_LENGTH,
+  MAX_WEBSITE_NAME_LENGTH,
+} from '../app/constants'
+
+describe('front rules mirror the server', () => {
+  it('caps a funnel draft as the server does', () => {
+    expect(draft.MAX_NAME_LENGTH).toBe(server.MAX_NAME_LENGTH)
+    expect(draft.MAX_STEPS).toBe(server.MAX_FUNNEL_STEPS)
+    expect(draft.MAX_STEP_VALUE_LENGTH).toBe(
+      server.MAX_FUNNEL_STEP_VALUE_LENGTH,
+    )
+    expect(draft.MAX_WINDOW_HOURS).toBe(server.MAX_CONVERSION_WINDOW_HOURS)
+    expect(draft.MIN_VARIATIONS).toBe(server.MIN_EXPERIMENT_VARIATIONS)
+    expect(draft.MAX_VARIATIONS).toBe(server.MAX_EXPERIMENT_VARIATIONS)
+    expect(draft.MAX_EXPERIMENT_KEY_LENGTH).toBe(
+      server.MAX_EXPERIMENT_KEY_LENGTH,
+    )
+  })
+
+  it('accepts the experiment keys the server accepts', () => {
+    const keys = [
+      'hero-cta',
+      'v2_bold',
+      '0day',
+      '-lead',
+      '_lead',
+      'Hero',
+      'with space',
+      'é',
+      'a'.repeat(server.MAX_EXPERIMENT_KEY_LENGTH),
+      'a'.repeat(server.MAX_EXPERIMENT_KEY_LENGTH + 1),
+    ]
+    for (const key of keys) {
+      expect(draft.isExperimentKey(key), key).toBe(
+        server.EXPERIMENT_KEY_PATTERN.test(key) &&
+          key.length <= server.MAX_EXPERIMENT_KEY_LENGTH,
+      )
+    }
+  })
+
+  it('normalizes a page step as the server does', () => {
+    const typed = [
+      '/pricing',
+      'pricing',
+      '/Sale/Chairs/',
+      '/',
+      '',
+      '  /cart?step=2#top ',
+      'https://shop.acme.test/Sale/Chairs/?utm=x',
+      'shop.acme.test/checkout/',
+      'HTTP://Shop.Acme.Test/a',
+      '/blog/*',
+      'shop.acme.test/blog/*',
+      '*',
+      '/a b',
+      'http://[bad',
+    ]
+    for (const value of typed) {
+      expect(normalizeFunnelStepPath(value), value).toBe(
+        normalizeStepPath(value),
+      )
+    }
+  })
+
+  it('caps a website name and domain as the server does', () => {
+    expect(MAX_WEBSITE_NAME_LENGTH).toBe(server.MAX_NAME_LENGTH)
+    expect(MAX_WEBSITE_DOMAIN_LENGTH).toBe(server.MAX_DOMAIN_LENGTH)
+  })
+})

package/frontend-vue/tests/stubs/frontend-module.ts

@@ -26,6 +26,7 @@ export interface DmsFrontendSdk {
 }
 
 export interface DmsFrontendModule {
+  componentPrefix?: string
   setup(sdk: DmsFrontendSdk): void | Promise<void>
 }
 
@@ -33,15 +34,22 @@ export function defineDmsPlugin(setup: DmsPluginSetup): DmsPluginSetup {
   return setup
 }
 
-export function useI18n(): { t: (key: string) => string, te: () => boolean, locale: { value: string } } {
+export function useI18n(): {
+  t: (key: string) => string
+  te: () => boolean
+  locale: { value: string }
+} {
   return { t: (key: string) => key, te: () => false, locale: { value: 'en' } }
 }
 
-export function useDmsRoute(): { query: Record<string, string>, path: string } {
+export function useDmsRoute(): { query: Record<string, string>; path: string } {
   return { query: {}, path: '/' }
 }
 
-export function useDmsRouter(): { replace: () => Promise<void>, push: () => Promise<void> } {
+export function useDmsRouter(): {
+  replace: () => Promise<void>
+  push: () => Promise<void>
+} {
   return { replace: async () => {}, push: async () => {} }
 }
 
@@ -52,3 +60,10 @@ export function useDmsRuntimeConfig(): { public: Record<string, unknown> } {
 export function resolveDmsComponent(): Component | undefined {
   return undefined
 }
+
+export function useDmsCookie<T>(
+  _name: string,
+  options: { default: () => T },
+): { value: T } {
+  return { value: options.default() }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-marketing",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -31,23 +31,25 @@
     "@antelopejs/interface-api": ">=0.0.13 <1.0.0",
     "@antelopejs/interface-api-util": ">=0.1.2 <1.0.0",
     "@antelopejs/interface-core": ">=0.1.1 <1.0.0",
-    "@antelopejs/interface-data-api": ">=0.1.9 <1.0.0",
+    "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
-    "@antelopejs/interface-database-decorators": ">=0.1.6 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.2.0 <1.0.0",
-    "@antelopejs/interface-dms-marketing": ">=0.3.1 <0.4.0",
+    "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
+    "@antelopejs/interface-dms": ">=0.5.11 <1.0.0",
+    "@antelopejs/interface-dms-marketing": ">=0.4.0 <0.5.0",
     "defu": "^6.1.4",
     "maxmind": "^5.0.7",
     "node-cron": "^4.2.1",
+    "sanitize-html": "^2.18.0",
     "ua-parser-js": "^2.0.9",
     "zod": "~3.24.4"
   },
   "devDependencies": {
-    "@antelopejs/core": ">=1.9.1 <2",
+    "@antelopejs/core": ">=1.13.5 <2",
     "@antelopejs/interface-mongodb": ">=0.0.5 <1.0.0",
-    "@antelopejs/mongodb": "1.3.1",
+    "@antelopejs/mongodb": "1.4.2",
     "@antelopejs/tooling-configs": ">=0.0.7 <1.0.0",
     "@types/node": "^22.19.15",
+    "@types/sanitize-html": "^2.16.2",
     "knip": "^6.34.0",
     "mongodb": "^6.21.0",
     "mongodb-memory-server-core": "^10.4.3",

package/static/snapshot.js

@@ -11,9 +11,12 @@
  * Privacy, unconditionally: no form value, hidden input, script, event
  * handler or framed document leaves the page. `contenteditable` text is
  * masked, as is everything under `data-dms-marketing-mask` (or the
- * `dms-marketing-mask` class); `data-dms-marketing-block` (or the
- * `dms-marketing-block` class) replaces an element with an empty box of its
- * size. `maskText` masks every text node.
+ * `dms-marketing-mask` class) — text, the attributes that carry text
+ * (title, alt, labels, placeholders, data-*) and the path of its links;
+ * `data-dms-marketing-block` (or the `dms-marketing-block` class) replaces
+ * an element with an empty box of its size. `maskText` masks every text
+ * node and text attribute of the page; data-* and link paths stay, since
+ * styles select on them.
  */
 (() => {
   const CONFIG_GLOBAL = "__dmsMarketingSnapshotConfig";
@@ -81,6 +84,17 @@
     "background",
   ]);
   const LINK_TAGS = new Set(["a", "area"]);
+  /** Attributes that carry text a visitor could read, masked with it. */
+  const TEXT_ATTRIBUTES = new Set([
+    "title",
+    "alt",
+    "label",
+    "placeholder",
+    "aria-label",
+    "aria-description",
+    "aria-placeholder",
+    "aria-valuetext",
+  ]);
   const OPAQUE_URL_PATTERN = /^(#|data:|blob:|about:)/i;
   const SCRIPT_URL_PATTERN = /^javascript:/i;
   const CSS_URL_PATTERN = /url\(\s*(['"]?)([^'")]*)\1\s*\)/g;
@@ -93,10 +107,12 @@
   }
 
   const config = readGlobal(CONFIG_GLOBAL);
+  const maskAllText = config?.maskText === true;
   const context = readGlobal(CONTEXT_GLOBAL);
   if (
     !config ||
     !context ||
+    typeof config.token !== "string" ||
     typeof context.endpoint !== "string" ||
     window.top !== window
   ) {
@@ -144,10 +160,14 @@
   }
 
   /** Links keep their target, never a query or fragment: tokens and
-   * addresses ride there, and nothing in the backdrop is clickable. */
-  function withoutQuery(url) {
+   * addresses ride there, and nothing in the backdrop is clickable. A masked
+   * link keeps its origin alone — a profile path names its person. */
+  function withoutQuery(url, masked) {
     try {
       const parsed = new URL(url);
+      if (masked) {
+        return `${parsed.origin}/`;
+      }
       parsed.search = "";
       parsed.hash = "";
       return parsed.href;
@@ -269,7 +289,7 @@
     return element.dataset.src || current || value;
   }
 
-  function serializeAttributes(element) {
+  function serializeAttributes(element, masked) {
     const tag = element.localName;
     let out = "";
     for (const attribute of element.attributes) {
@@ -278,6 +298,14 @@
       if (name.startsWith("on") || DROPPED_ATTRIBUTES.has(name)) {
         continue;
       }
+      if (
+        ((masked || maskAllText) && TEXT_ATTRIBUTES.has(name)) ||
+        (masked &&
+          name.startsWith("data-") &&
+          !name.startsWith(`data-${MASK_MARKER}`))
+      ) {
+        value = maskText(value);
+      }
       if (name === "value" && (tag === "input" || tag === "textarea")) {
         continue;
       }
@@ -309,7 +337,7 @@
         if (absolute === null) {
           continue;
         }
-        value = LINK_TAGS.has(tag) ? withoutQuery(absolute) : absolute;
+        value = LINK_TAGS.has(tag) ? withoutQuery(absolute, masked) : absolute;
       }
       out += ` ${name}="${escapeAttribute(value)}"`;
     }
@@ -334,7 +362,7 @@
     return `<${tag}${attributes} style="${size};overflow:hidden"></${tag}>`;
   }
 
-  function serializeCanvas(element) {
+  function serializeCanvas(element, masked) {
     let dataUrl = "";
     try {
       dataUrl = element.toDataURL();
@@ -342,9 +370,9 @@
       // Tainted by cross-origin drawing: the box stays, the pixels do not.
     }
     if (dataUrl && dataUrl.length <= MAX_CANVAS_DATA_URL_LENGTH) {
-      return `<img${serializeAttributes(element)} src="${dataUrl}">`;
+      return `<img${serializeAttributes(element, masked)} src="${dataUrl}">`;
     }
-    return `<canvas${serializeAttributes(element)}></canvas>`;
+    return `<canvas${serializeAttributes(element, masked)}></canvas>`;
   }
 
   function serializeChildren(node, masked) {
@@ -353,7 +381,8 @@
       if (child.nodeType === Node.ELEMENT_NODE) {
         out += serializeElement(child, masked);
       } else if (child.nodeType === Node.TEXT_NODE) {
-        const text = masked ? maskText(child.data) : child.data;
+        const text =
+          masked || maskAllText ? maskText(child.data) : child.data;
         out += escapeText(text);
       }
     }
@@ -377,12 +406,12 @@
     if (isMarked(element, BLOCK_MARKER)) {
       return serializeBlocked(element);
     }
-    if (tag === "canvas") {
-      return serializeCanvas(element);
-    }
     const mask =
       masked || isMarked(element, MASK_MARKER) || element.isContentEditable;
-    let out = `<${tag}${serializeAttributes(element)}>`;
+    if (tag === "canvas") {
+      return serializeCanvas(element, mask);
+    }
+    let out = `<${tag}${serializeAttributes(element, mask)}>`;
     if (VOID_TAGS.has(tag)) {
       return out;
     }
@@ -403,7 +432,7 @@
   }
 
   function serializeDocument() {
-    return `<!DOCTYPE html>${serializeElement(document.documentElement, config.maskText === true)}`;
+    return `<!DOCTYPE html>${serializeElement(document.documentElement, false)}`;
   }
 
   // --- Timing ---------------------------------------------------------------
@@ -466,6 +495,7 @@
     const root = document.documentElement;
     const page = {
       website: context.website,
+      token: config.token,
       url: (location.origin + location.pathname + location.search).slice(
         0,
         MAX_URL_LENGTH,