@drip-apex/sdk 0.1.0

package/src/js.test.ts

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { loadExternalJs, setJsPolicy } from "./js";
+
+describe("external JavaScript policy", () => {
+  afterEach(() => {
+    document.head.innerHTML = "";
+    setJsPolicy("hybrid");
+    vi.restoreAllMocks();
+  });
+
+  it("blocks external scripts under strict policy and allows them otherwise", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setJsPolicy("strict");
+    await loadExternalJs("https://example.com/strict.js", "strict");
+    expect(document.querySelector("script")).toBeNull();
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining("blocked by strict policy"));
+
+    setJsPolicy("hybrid");
+    const loading = loadExternalJs("https://example.com/legacy.js", "legacy");
+    const script = document.querySelector("script") as HTMLScriptElement;
+    expect(script.src).toBe("https://example.com/legacy.js");
+    script.onload?.(new Event("load"));
+    await loading;
+  });
+});

package/src/js.ts

@@ -0,0 +1,61 @@
+import type { CustomJsPolicy } from "./types";
+
+let activePolicy: CustomJsPolicy = "hybrid";
+const EXTERNAL_JS_CLASS = "drip-external-js";
+
+export function setJsPolicy(policy: CustomJsPolicy): void {
+  activePolicy = policy;
+}
+
+export function isStrictJsPolicy(): boolean {
+  return activePolicy === "strict";
+}
+
+export function execJs(code: string, sourceLabel?: string): void {
+  if (isStrictJsPolicy()) {
+    if (typeof console !== "undefined") {
+      console.warn("[drip] Custom JS blocked by strict policy for " + (sourceLabel || "unknown"));
+    }
+    return;
+  }
+
+  try {
+    const suffix = sourceLabel ? "\n//# sourceURL=drip-" + sourceLabel + ".js" : "";
+    new Function(code + suffix)();
+  } catch (e) {
+    if (typeof console !== "undefined") {
+      console.error("[drip] JS error in " + (sourceLabel || "unknown") + ":", e);
+    }
+  }
+}
+
+export function loadExternalJs(url: string, sourceLabel: string): Promise<void> {
+  if (activePolicy === "strict") {
+    if (typeof console !== "undefined") {
+      console.warn("[drip] External JS blocked by strict policy for " + sourceLabel);
+    }
+    return Promise.resolve();
+  }
+  return new Promise((resolve, reject) => {
+    const id = "drip-external-js-" + sourceLabel;
+    const previous = document.getElementById(id);
+    if (previous && previous.getAttribute("src") === url) {
+      resolve();
+      return;
+    }
+    if (previous) previous.remove();
+
+    const script = document.createElement("script");
+    script.id = id;
+    script.className = EXTERNAL_JS_CLASS;
+    script.src = url;
+    script.async = false;
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load JS artifact: " + url));
+    (document.head || document.documentElement).appendChild(script);
+  });
+}
+
+export function removeAllExternalJs(): void {
+  document.querySelectorAll("." + EXTERNAL_JS_CLASS).forEach((el) => el.remove());
+}

package/src/module.ts

@@ -0,0 +1,50 @@
+// Keep npm module exports separate from the browser IIFE entry. The IIFE is
+// embedded into the Worker and exposed through the Drip global, while npm
+// consumers need real ESM bindings from the package root.
+//
+// Deliberately NO star re-export of ./index: evaluating the full runtime
+// entry would bootstrap browser side effects for consumers who only want
+// the chooser APIs. And because the hosted drip.js runtime owns the live
+// gift state, these wrappers DELEGATE to window.drip when it is present —
+// an ESM chooser bundled separately must never operate on a second copy of
+// the module state.
+import {
+  getPendingGiftChoices as localGetPendingGiftChoices,
+  selectGiftOption as localSelectGiftOption,
+  type PendingGiftChoice,
+} from "./commerce-gift";
+
+type ChooserRuntime = {
+  getPendingGiftChoices?: (experimentId?: string) => PendingGiftChoice[];
+  selectGiftOption?: (
+    experimentId: string,
+    variantGid: string,
+  ) => Promise<void>;
+};
+
+function activeRuntime(): ChooserRuntime | undefined {
+  return typeof window === "undefined"
+    ? undefined
+    : (window as Window & { drip?: ChooserRuntime }).drip;
+}
+
+export function getPendingGiftChoices(
+  experimentId?: string,
+): PendingGiftChoice[] {
+  const runtime = activeRuntime();
+  return runtime?.getPendingGiftChoices
+    ? runtime.getPendingGiftChoices(experimentId)
+    : localGetPendingGiftChoices(experimentId);
+}
+
+export function selectGiftOption(
+  experimentId: string,
+  variantGid: string,
+): Promise<void> {
+  const runtime = activeRuntime();
+  return runtime?.selectGiftOption
+    ? runtime.selectGiftOption(experimentId, variantGid)
+    : localSelectGiftOption(experimentId, variantGid);
+}
+
+export type { PendingGiftChoice };

package/src/money.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { formatCentsLike, parseDisplayedCents } from "./money";
+
+describe("money display parsing", () => {
+  it.each([
+    ["$1,299.00", 129900, "1,149.95"],
+    ["€1.299,00", 129900, "1.149,95"],
+    ["1 299,00 kr", 129900, "1 149,95"],
+    ["£12.50", 1250, "11.95"],
+    ["12,50€", 1250, "11,95"],
+    ["1299", 129900, "1149.95"],
+    ["€1.299", 129900, "1.149,95"],
+    ["$1,299", 129900, "1,149.95"],
+  ])("parses and preserves %s", (text, cents, formatted) => {
+    const parsed = parseDisplayedCents(text);
+    expect(parsed?.cents).toBe(cents);
+    expect(parsed && formatCentsLike(cents === 1250 ? 1195 : 114995, parsed.convention)).toBe(formatted);
+  });
+
+  it("supports zero-decimal currencies", () => {
+    const parsed = parseDisplayedCents("¥1299", 0);
+    expect(parsed?.cents).toBe(1299);
+    expect(parsed && formatCentsLike(1149, parsed.convention)).toBe("1149");
+  });
+
+  it("honors supplied three-decimal minor-unit precision", () => {
+    const parsed = parseDisplayedCents("KD 1.234", 3);
+    expect(parsed?.cents).toBe(1234);
+    expect(parsed && formatCentsLike(1123, parsed.convention)).toBe("1.123");
+  });
+
+  it.each(["10 and 20", "no digits"])("rejects ambiguous or absent amounts: %s", (text) => {
+    expect(parseDisplayedCents(text)).toBeNull();
+  });
+});

package/src/money.ts

@@ -0,0 +1,53 @@
+export type MoneyConvention = {
+  decimal: "." | ",";
+  group: string;
+  decimals: number;
+  minorUnits: number;
+};
+
+export type DisplayedMoney = {
+  cents: number;
+  convention: MoneyConvention;
+  start: number;
+  end: number;
+};
+
+export function parseDisplayedCents(text: string, minorUnits = 2): DisplayedMoney | null {
+  const pattern = /\d(?:[\d.,\u00a0 ]*\d)?/g;
+  const match = pattern.exec(text);
+  if (!match || pattern.exec(text)) return null;
+  const raw = match[0];
+  const compact = raw.replace(/[ \u00a0]/g, "");
+  const separator = Math.max(compact.lastIndexOf("."), compact.lastIndexOf(","));
+  const trailing = separator < 0 ? 0 : compact.length - separator - 1;
+  const decimals = trailing && trailing <= minorUnits ? trailing : 0;
+
+  const visibleDecimal = decimals ? compact[separator] as "." | "," : null;
+  const groupMatch = raw.slice(0, visibleDecimal ? raw.lastIndexOf(visibleDecimal) : raw.length).match(/[.,\u00a0 ]/);
+  const group = groupMatch?.[0] ?? "";
+  // When the display has grouping but no decimals (for example `1.299`),
+  // preserve the locale's opposite separator for a treatment that introduces
+  // a fractional amount. Reusing the group separator would produce `1.149.95`.
+  const decimal = visibleDecimal ?? (group === "." ? "," : ".");
+  const majorText = (decimals ? compact.slice(0, separator) : compact).replace(/[.,]/g, "");
+  const fraction = decimals ? compact.slice(separator + 1) : "";
+  const scale = 10 ** minorUnits;
+  const cents = Number(majorText) * scale + Number((fraction + "0".repeat(minorUnits)).slice(0, minorUnits) || 0);
+  return {
+    cents,
+    convention: { decimal, group, decimals, minorUnits },
+    start: match.index,
+    end: match.index + raw.length,
+  };
+}
+
+export function formatCentsLike(cents: number, convention: MoneyConvention): string {
+  const scale = 10 ** convention.minorUnits;
+  let major = String(Math.floor(cents / scale));
+  if (convention.group) major = major.replace(/\B(?=(\d{3})+(?!\d))/g, convention.group);
+  const remainder = cents % scale;
+  const decimals = convention.decimals || (remainder ? convention.minorUnits : 0);
+  return decimals
+    ? major + convention.decimal + String(remainder).padStart(convention.minorUnits, "0").slice(0, decimals)
+    : major;
+}

package/src/mutate.test.ts

@@ -0,0 +1,304 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { applyTrackedMutation, createMutationApplicationContext, getMutationKey, isInsertAction, isInsertDuplicate, resetAppliedMutations, __test } from "./mutate";
+import { setJsPolicy } from "./js";
+
+const { normalizeCssPropertyName } = __test;
+
+describe("normalizeCssPropertyName", () => {
+  it("converts camelCase to kebab-case (backgroundColor)", () => {
+    expect(normalizeCssPropertyName("backgroundColor")).toBe(
+      "background-color",
+    );
+  });
+
+  it("passes through custom properties (--my-var)", () => {
+    expect(normalizeCssPropertyName("--my-var")).toBe("--my-var");
+  });
+
+  it("passes through already kebab-case (background-color)", () => {
+    expect(normalizeCssPropertyName("background-color")).toBe(
+      "background-color",
+    );
+  });
+
+  it("converts msTransform to -ms-transform", () => {
+    expect(normalizeCssPropertyName("msTransform")).toBe("-ms-transform");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(normalizeCssPropertyName("")).toBe("");
+  });
+
+  it("converts WebkitTransform to -webkit-transform", () => {
+    // "WebkitTransform" → replace A-Z → "-webkit-transform"
+    // Starts with "W" → "-w", so the output starts with "-w"
+    // Actually: W→"-w", T→"-t" → "-webkit-transform"
+    expect(normalizeCssPropertyName("WebkitTransform")).toBe(
+      "-webkit-transform",
+    );
+  });
+
+  it("converts fontSize to font-size", () => {
+    expect(normalizeCssPropertyName("fontSize")).toBe("font-size");
+  });
+
+  it("converts borderTopWidth to border-top-width", () => {
+    expect(normalizeCssPropertyName("borderTopWidth")).toBe(
+      "border-top-width",
+    );
+  });
+});
+
+describe("getMutationKey", () => {
+  it("is deterministic for the same inputs", () => {
+    const mutation = { selector: ".hero", action: "text" as const, text: "Hi" };
+    const key1 = getMutationKey(mutation, 0);
+    const key2 = getMutationKey(mutation, 0);
+    expect(key1).toBe(key2);
+  });
+
+  it("produces different keys for different actions", () => {
+    const m1 = { selector: ".hero", action: "text" as const, text: "Hi" };
+    const m2 = { selector: ".hero", action: "html" as const, text: "Hi" };
+    expect(getMutationKey(m1, 0)).not.toBe(getMutationKey(m2, 0));
+  });
+
+  it("produces different keys for different selectors", () => {
+    const m1 = { selector: ".hero", action: "text" as const, text: "Hi" };
+    const m2 = { selector: ".footer", action: "text" as const, text: "Hi" };
+    expect(getMutationKey(m1, 0)).not.toBe(getMutationKey(m2, 0));
+  });
+
+  it("produces different keys for different text content", () => {
+    const m1 = { selector: ".hero", action: "text" as const, text: "Hello" };
+    const m2 = { selector: ".hero", action: "text" as const, text: "World" };
+    expect(getMutationKey(m1, 0)).not.toBe(getMutationKey(m2, 0));
+  });
+
+  it("includes index in the key", () => {
+    const mutation = { selector: ".hero", action: "text" as const, text: "Hi" };
+    const key0 = getMutationKey(mutation, 0);
+    const key1 = getMutationKey(mutation, 1);
+    expect(key0).not.toBe(key1);
+    expect(key0).toContain(":0:");
+    expect(key1).toContain(":1:");
+  });
+});
+
+describe("isInsertAction", () => {
+  it("returns true for insertBefore", () => {
+    expect(isInsertAction("insertBefore")).toBe(true);
+  });
+
+  it("returns true for insertAfter", () => {
+    expect(isInsertAction("insertAfter")).toBe(true);
+  });
+
+  it("returns false for text", () => {
+    expect(isInsertAction("text")).toBe(false);
+  });
+
+  it("returns false for html", () => {
+    expect(isInsertAction("html")).toBe(false);
+  });
+
+  it("returns false for style", () => {
+    expect(isInsertAction("style")).toBe(false);
+  });
+
+  it("returns false for setStyle", () => {
+    expect(isInsertAction("setStyle")).toBe(false);
+  });
+
+  it("returns false for setText", () => {
+    expect(isInsertAction("setText")).toBe(false);
+  });
+
+  it("returns false for attribute", () => {
+    expect(isInsertAction("attribute")).toBe(false);
+  });
+
+  it("returns false for remove", () => {
+    expect(isInsertAction("remove")).toBe(false);
+  });
+});
+
+describe("isInsertDuplicate", () => {
+  it("matches inserted markers with quote-heavy keys without using an unsafe selector", () => {
+    const key = 'insertAfter:0:#anchor:<div data-suite-insert="applied">Copy</div>';
+    const element = {
+      parentElement: {
+        querySelectorAll: () => [
+          {
+            getAttribute: (name: string) => (name === "data-drip-inserted" ? key : null),
+          },
+        ],
+      },
+    } as unknown as Element;
+
+    expect(() => isInsertDuplicate(element, key)).not.toThrow();
+    expect(isInsertDuplicate(element, key)).toBe(true);
+  });
+});
+
+describe("mutation rollback", () => {
+  afterEach(() => {
+    resetAppliedMutations();
+    setJsPolicy("hybrid");
+  });
+
+  it("blocks dangerous attributes only under strict policy", () => {
+    const element = document.createElement("a");
+    setJsPolicy("strict");
+    applyTrackedMutation({ selector: "a", action: "attribute", attributes: {
+      onclick: "alert(1)", href: "javascript:alert(1)", title: "safe",
+    } }, element);
+    expect(element.getAttribute("onclick")).toBeNull();
+    expect(element.getAttribute("href")).toBeNull();
+    expect(element.getAttribute("title")).toBe("safe");
+
+    setJsPolicy("hybrid");
+    applyTrackedMutation({ selector: "a", action: "attribute", attributes: {
+      onclick: "alert(1)", href: "javascript:alert(1)",
+    } }, element);
+    expect(element.getAttribute("onclick")).toBe("alert(1)");
+    expect(element.getAttribute("href")).toBe("javascript:alert(1)");
+  });
+
+  it.each([
+    ["data:application/xhtml+xml,<script>alert(1)</script>", false],
+    ["data:text/html,<script>alert(1)</script>", false],
+    ["data:image/svg+xml,<svg onload='alert(1)'></svg>", false],
+    [" \tDATA: IMAGE/PNG ;BASE64,iVBORw0KGgo=", true],
+  ])("applies strict data URL allowlisting to %s", (url, allowed) => {
+    const element = document.createElement("iframe");
+    setJsPolicy("strict");
+
+    applyTrackedMutation({
+      selector: "iframe",
+      action: "attribute",
+      attributes: { src: url },
+    }, element);
+
+    expect(element.hasAttribute("src")).toBe(allowed);
+  });
+
+  it.each(["html", "insertBefore", "insertAfter"] as const)(
+    "strips executable attributes from %s mutations under strict policy",
+    (action) => {
+      document.body.innerHTML = '<div id="target"></div>';
+      const target = document.querySelector("#target")!;
+      setJsPolicy("strict");
+      applyTrackedMutation({
+        selector: "#target",
+        action,
+        html: '<iframe srcdoc="<script>alert(1)</script>"></iframe><a onclick="alert(1)" href="javascript:alert(1)">Safe copy</a>',
+      }, target);
+      const scope = action === "html" ? target : document.body;
+      expect(scope.querySelector("iframe")?.hasAttribute("srcdoc")).toBe(false);
+      expect(scope.querySelector("a")?.hasAttribute("onclick")).toBe(false);
+      expect(scope.querySelector("a")?.hasAttribute("href")).toBe(false);
+      expect(scope.querySelector("a")?.textContent).toBe("Safe copy");
+    },
+  );
+
+  it("restores text, attributes, and styles in reverse application order", () => {
+    const attributes = new Map<string, string>([["aria-label", "Original"]]);
+    const styleValues = new Map<string, string>([["background-color", "red"]]);
+    const priorities = new Map<string, string>();
+    const element = {
+      textContent: "Original copy",
+      getAttribute: (name: string) => attributes.get(name) ?? null,
+      setAttribute: (name: string, value: string) => { attributes.set(name, value); },
+      removeAttribute: (name: string) => { attributes.delete(name); },
+      style: {
+        getPropertyValue: (name: string) => styleValues.get(name) ?? "",
+        getPropertyPriority: (name: string) => priorities.get(name) ?? "",
+        setProperty: (name: string, value: string, priority?: string) => {
+          styleValues.set(name, value);
+          if (priority) priorities.set(name, priority);
+          else priorities.delete(name);
+        },
+        removeProperty: (name: string) => { styleValues.delete(name); },
+      },
+    } as unknown as Element;
+
+    applyTrackedMutation({ selector: ".hero", action: "text", text: "Variant copy" }, element);
+    applyTrackedMutation({
+      selector: ".hero",
+      action: "attribute",
+      attributes: { "aria-label": "Variant", "data-new": "1" },
+    }, element);
+    applyTrackedMutation({
+      selector: ".hero",
+      action: "style",
+      styles: { backgroundColor: "blue" },
+    }, element);
+
+    expect((element as unknown as { textContent: string }).textContent).toBe("Variant copy");
+    expect(attributes.get("aria-label")).toBe("Variant");
+    expect(attributes.get("data-new")).toBe("1");
+    expect(styleValues.get("background-color")).toBe("blue");
+
+    resetAppliedMutations();
+
+    expect((element as unknown as { textContent: string }).textContent).toBe("Original copy");
+    expect(attributes.get("aria-label")).toBe("Original");
+    expect(attributes.has("data-new")).toBe(false);
+    expect(styleValues.get("background-color")).toBe("red");
+  });
+
+  it("rolls back editor mutations without reverting shopper assignment state", () => {
+    const element = {
+      textContent: "Control copy",
+    } as unknown as Element;
+
+    applyTrackedMutation(
+      { selector: ".hero", action: "text", text: "Shopper assignment" },
+      element,
+    );
+    const editor = createMutationApplicationContext();
+    editor.apply(
+      [{ selector: ".hero", action: "text", text: "Editor draft" }],
+      { root: { querySelectorAll: () => [element] } as unknown as Document },
+    );
+
+    expect((element as unknown as { textContent: string }).textContent).toBe("Editor draft");
+    expect(editor.snapshotCount).toBe(1);
+    editor.rollback();
+    expect((element as unknown as { textContent: string }).textContent).toBe("Shopper assignment");
+
+    resetAppliedMutations();
+    expect((element as unknown as { textContent: string }).textContent).toBe("Control copy");
+  });
+
+  it("rolls back every node from a multi-root insertion", () => {
+    document.body.innerHTML = `<p id="before">Before</p><div id="anchor">Anchor</div><p id="after">After</p>`;
+    const context = createMutationApplicationContext();
+
+    context.apply([{
+      selector: "#anchor",
+      action: "insertBefore",
+      html: `lead text<span id="first">First</span><strong id="second">Second</strong>tail text`,
+    }]);
+
+    expect(document.body.textContent).toContain("lead textFirstSecondtail text");
+    expect(context.snapshotCount).toBe(1);
+    context.rollback();
+    expect(document.body.innerHTML).toBe(
+      `<p id="before">Before</p><div id="anchor">Anchor</div><p id="after">After</p>`,
+    );
+  });
+
+  it("does not snapshot or remove a pre-existing sibling for an empty insertion", () => {
+    document.body.innerHTML = `<div id="anchor">Anchor</div><p id="existing">Existing</p>`;
+    const context = createMutationApplicationContext();
+
+    context.apply([{ selector: "#anchor", action: "insertAfter", html: "" }]);
+
+    expect(context.snapshotCount).toBe(0);
+    context.rollback();
+    expect(document.getElementById("existing")?.textContent).toBe("Existing");
+  });
+});