@drip-apex/sdk 0.1.0 → 0.2.0

package/src/reassert-sentinel.test.ts

@@ -1,6 +1,12 @@
 // @vitest-environment jsdom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { applyToElement, applyTrackedMutation, resetAppliedMutations } from "./mutate";
+import {
+  applyToElement,
+  applyTrackedMutation,
+  replayArtifact,
+  resetAppliedMutations,
+  resetAppliedMutationsForOwner,
+} from "./mutate";
 import { runMuted } from "./observer-mute";
 import { resetReassertSentinel, trackAppliedMutation } from "./reassert-sentinel";
 import type { Mutation } from "./types";
@@ -61,6 +67,79 @@ describe("reassert sentinel", () => {
     expect(read(element)).toBe("Variant");
   });
 
+  it("does not reassert a torn-down owner's mutation while another owner remains live", async () => {
+    const tornDown = document.createElement("div");
+    const stillLive = document.createElement("div");
+    document.body.append(tornDown, stillLive);
+    const removedMutation = {
+      selector: ".removed-page",
+      action: "text",
+      text: "Removed treatment",
+    } as Mutation;
+    const liveMutation = {
+      selector: ".live-page",
+      action: "text",
+      text: "Live treatment",
+    } as Mutation;
+
+    runMuted(() => applyTrackedMutation(removedMutation, tornDown, undefined, ["page-a"]));
+    trackAppliedMutation(
+      tornDown,
+      removedMutation,
+      { ownerKeys: ["page-a"] },
+      (target, applied) => applyToElement(applied, target),
+    );
+    runMuted(() => applyTrackedMutation(liveMutation, stillLive, undefined, ["page-b"]));
+    trackAppliedMutation(
+      stillLive,
+      liveMutation,
+      { ownerKeys: ["page-b"] },
+      (target, applied) => applyToElement(applied, target),
+    );
+
+    resetAppliedMutationsForOwner("page-a");
+    tornDown.textContent = "Framework update";
+    stillLive.textContent = "Framework update";
+    await runNextFrame();
+
+    expect(tornDown.textContent).toBe("Framework update");
+    expect(stillLive.textContent).toBe("Live treatment");
+  });
+
+  it("retargets the journal sentinel when replay replaces the treated element", async () => {
+    const original = document.createElement("div");
+    original.id = "target";
+    document.body.appendChild(original);
+    const mutation = {
+      selector: "#target",
+      action: "text",
+      text: "Treatment",
+    } as Mutation;
+    let journalSeq: number | undefined;
+    runMuted(() => applyTrackedMutation(
+      mutation,
+      original,
+      undefined,
+      ["page-a"],
+      "artifact-a",
+      (entry) => { journalSeq = entry.seq; },
+    ));
+    trackAppliedMutation(
+      original,
+      mutation,
+      { journalSeq, artifactId: "artifact-a", ownerKeys: ["page-a"] },
+      (target, applied) => applyToElement(applied, target),
+    );
+
+    original.outerHTML = '<div id="target">Framework replacement</div>';
+    replayArtifact("artifact-a");
+    const replacement = document.getElementById("target")!;
+    replacement.textContent = "Later framework update";
+    await runNextFrame();
+
+    expect(replacement.textContent).toBe("Treatment");
+  });
+
   it("re-applies an in-place hydration revert to the original content", async () => {
     const element = document.createElement("div");
     element.id = "target";
@@ -96,6 +175,81 @@ describe("reassert sentinel", () => {
     expect(element.querySelector("img")!.className).toBe("variant");
   });
 
+  it("survives a React-style child-node replacement and fails without the sentinel", async () => {
+    const enabled = document.createElement("div");
+    const disabled = document.createElement("div");
+    enabled.innerHTML = "<span>Control</span>";
+    disabled.innerHTML = "<span>Control</span>";
+    document.body.append(enabled, disabled);
+    const mutation = { selector: ".react-owned", action: "html", html: "<strong>Variant</strong>" } as Mutation;
+    applyAndTrack(enabled, mutation);
+    runMuted(() => applyTrackedMutation(mutation, disabled));
+
+    // React can reconcile a subtree by replacing the treatment's child nodes.
+    enabled.replaceChildren(Object.assign(document.createElement("span"), { textContent: "Control" }));
+    disabled.replaceChildren(Object.assign(document.createElement("span"), { textContent: "Control" }));
+    await runNextFrame();
+
+    expect(enabled.innerHTML).toBe("<strong>Variant</strong>");
+    expect(disabled.innerHTML).toBe("<span>Control</span>");
+  });
+
+  it("survives a Svelte/Vue-style descendant patch and fails without the sentinel", async () => {
+    const enabled = document.createElement("div");
+    const disabled = document.createElement("div");
+    enabled.innerHTML = '<span data-state="control">Control</span>';
+    disabled.innerHTML = '<span data-state="control">Control</span>';
+    document.body.append(enabled, disabled);
+    const mutation = {
+      selector: ".svelte-vue-owned",
+      action: "html",
+      html: '<span data-state="variant">Variant</span>',
+    } as Mutation;
+    applyAndTrack(enabled, mutation);
+    runMuted(() => applyTrackedMutation(mutation, disabled));
+
+    for (const root of [enabled, disabled]) {
+      const descendant = root.querySelector("span")!;
+      descendant.setAttribute("data-state", "control");
+      descendant.textContent = "Control";
+    }
+    await runNextFrame();
+
+    expect(enabled.innerHTML).toBe('<span data-state="variant">Variant</span>');
+    expect(disabled.innerHTML).toBe('<span data-state="control">Control</span>');
+  });
+
+  it("coalesces a rapid framework burst so the twelve-entry cap preserves a late revert", async () => {
+    const enabled = document.createElement("div");
+    const disabled = document.createElement("div");
+    document.body.append(enabled, disabled);
+    const mutation = { selector: ".burst-owned", action: "text", text: "Variant" } as Mutation;
+    runMuted(() => applyTrackedMutation(mutation, enabled));
+    runMuted(() => applyTrackedMutation(mutation, disabled));
+    const reapply = vi.fn((target: Element, applied: Mutation) => applyToElement(applied, target));
+    trackAppliedMutation(enabled, mutation, {}, reapply);
+
+    // Twelve writes in one render turn must spend one times[] entry, not the
+    // full entry.times.length === 12 loop cap.
+    for (let index = 0; index < 12; index += 1) {
+      enabled.textContent = `Framework burst ${index}`;
+      disabled.textContent = `Framework burst ${index}`;
+    }
+    await runNextFrame();
+    expect(enabled.textContent).toBe("Variant");
+    expect(reapply).toHaveBeenCalledTimes(1);
+    expect((window as Window & { __dripPerf?: Record<string, unknown> }).__dripPerf).toMatchObject({ reapply_count: 1 });
+
+    enabled.textContent = "Legitimate late revert";
+    disabled.textContent = "Legitimate late revert";
+    await runNextFrame();
+
+    expect(enabled.textContent).toBe("Variant");
+    expect(disabled.textContent).toBe("Legitimate late revert");
+    expect(reapply).toHaveBeenCalledTimes(2);
+    expect((window as Window & { __dripPerf?: Record<string, unknown> }).__dripPerf).toMatchObject({ reapply_count: 2 });
+  });
+
   it("re-applies an added-only restore of removed original html", async () => {
     const element = document.createElement("div");
     element.id = "target";

package/src/reassert-sentinel.ts

@@ -1,16 +1,23 @@
 import type { Mutation } from "./types";
 import { matchesOriginalInnerHtmlSnapshot, normalizeCssPropertyName } from "./mutate";
 import { registerMutedObserver, runMuted, unregisterMutedObserver } from "./observer-mute";
+import { onShadowMutations, shadowRootFor } from "./shadow";
 
 type Entry = {
   el: Element;
   mutation: Mutation;
+  artifactId?: string;
+  journalSeq?: number;
+  ownerKeys: Set<string>;
+  requiresOwner: boolean;
   experimentId?: string;
   variationId?: string;
   appliedAt: number;
   apply: (element: Element, mutation: Mutation) => void;
   times: number[];
   stopped: boolean;
+  shadowRoot?: ShadowRoot;
+  shadowIndex?: number;
   appliedNodes?: ChildNode[];
   appliedStyles?: Array<[string, string]>;
 };
@@ -61,6 +68,7 @@ const pending = new Set<Entry>();
 const deepChecks = new Set<Entry>();
 const roots = new Map<Element, TreatedRoot>();
 let frame: number | null = null;
+let stopShadowListener: (() => void) | null = null;
 
 function perf(): Record<string, unknown> | null {
   if (typeof window === "undefined") return null;
@@ -100,7 +108,7 @@ function schedule(): void {
     frame = null;
     const now = Date.now();
     for (const entry of pending) {
-      if (entry.stopped) continue;
+      if (entry.stopped || (entry.requiresOwner && entry.ownerKeys.size === 0)) continue;
       entry.times = entry.times.filter((at) => now - at < 10_000);
       if (entry.times.length === 12) {
         entry.stopped = true;
@@ -134,12 +142,23 @@ function schedule(): void {
   });
 }
 
+function canResurrectViaShadow(treated: TreatedRoot): boolean {
+  return treated.entries.some(
+    (entry) => !entry.stopped && entry.shadowRoot !== undefined && entry.shadowRoot.host.isConnected,
+  );
+}
+
 function observe(element: Element): void {
   if (typeof MutationObserver === "undefined" || roots.has(element)) return;
-  for (const [treatedRoot, { observer }] of roots) {
+  for (const [treatedRoot, treated] of roots) {
     if (treatedRoot.isConnected) continue;
-    observer.disconnect();
-    unregisterMutedObserver(observer);
+    // A disconnected root whose entries live in a still-connected shadow root
+    // stays registered: the shadow listener re-locates those entries on a
+    // later widget re-render, and this sweep would otherwise drop a sibling
+    // entry whose replacement was not findable in the same mutation batch.
+    if (canResurrectViaShadow(treated)) continue;
+    treated.observer.disconnect();
+    unregisterMutedObserver(treated.observer);
     roots.delete(treatedRoot);
   }
   const entries: Entry[] = [];
@@ -157,27 +176,168 @@ function observe(element: Element): void {
   observer.observe(element, { attributes: true, characterData: true, childList: true, subtree: true });
 }
 
+function ensureShadowObserver(): void {
+  stopShadowListener ??= onShadowMutations((_records, root) => {
+    for (const [rootElement, treated] of Array.from(roots.entries())) {
+      for (const entry of Array.from(treated.entries)) {
+        if (entry.stopped || entry.shadowRoot !== root || entry.el.isConnected) continue;
+        try {
+          const candidates = Array.from(root.querySelectorAll(entry.mutation.selector));
+          const replacement = candidates[entry.shadowIndex ?? 0];
+          if (!replacement || replacement === entry.el) continue;
+          // Migrate the entry to the replacement's root (mirrors
+          // replayReassertSentinelEntry): an entry left keyed under the
+          // disconnected element is purged by the next observe() sweep.
+          const index = treated.entries.indexOf(entry);
+          if (index >= 0) removeEntry(treated.entries, index);
+          if (treated.entries.length === 0) {
+            treated.observer.disconnect();
+            unregisterMutedObserver(treated.observer);
+            roots.delete(rootElement);
+          }
+          observe(replacement);
+          entry.el = replacement;
+          entry.shadowIndex = candidates.indexOf(replacement);
+          roots.get(replacement)?.entries.push(entry);
+          markPending(entry);
+        } catch {}
+      }
+    }
+    if (pending.size) schedule();
+  });
+}
+
 export function trackAppliedMutation(
   element: Element,
   mutation: Mutation,
-  context: { experimentId?: string; variationId?: string },
+  context: {
+    experimentId?: string;
+    variationId?: string;
+    journalSeq?: number;
+    artifactId?: string;
+    ownerKeys?: readonly string[];
+  },
   apply: (element: Element, mutation: Mutation) => void,
 ): void {
   if (mutation.action === "remove" || mutation.action === "insertBefore" || mutation.action === "insertAfter") return;
   observe(element);
   const entries = roots.get(element)?.entries;
   if (!entries) return;
-  const existing = entries.find((entry) => entry.mutation === mutation);
+  const shadowRoot = shadowRootFor(element);
+  if (shadowRoot) ensureShadowObserver();
+  const existing = entries.find((entry) => context.journalSeq !== undefined
+    ? entry.journalSeq === context.journalSeq
+    : entry.mutation === mutation);
   if (existing) {
-    Object.assign(existing, context, { appliedAt: Date.now(), apply });
+    context.ownerKeys?.forEach((ownerKey) => existing.ownerKeys.add(ownerKey));
+    Object.assign(existing, {
+      experimentId: context.experimentId,
+      variationId: context.variationId,
+      journalSeq: context.journalSeq,
+      artifactId: context.artifactId,
+      appliedAt: Date.now(),
+      apply,
+    });
     captureAppliedNodes(existing);
   } else {
-    const entry: Entry = { el: element, mutation, ...context, appliedAt: Date.now(), apply, times: [], stopped: false };
+    const entry: Entry = {
+      el: element,
+      mutation,
+      experimentId: context.experimentId,
+      variationId: context.variationId,
+      journalSeq: context.journalSeq,
+      artifactId: context.artifactId,
+      ownerKeys: new Set(context.ownerKeys ?? []),
+      requiresOwner: context.ownerKeys !== undefined,
+      appliedAt: Date.now(),
+      apply,
+      times: [],
+      stopped: false,
+      shadowRoot: shadowRoot ?? undefined,
+      shadowIndex: shadowRoot
+        ? Array.from(shadowRoot.querySelectorAll(mutation.selector)).indexOf(element)
+        : undefined,
+    };
     captureAppliedNodes(entry);
     entries.push(entry);
   }
 }
 
+function removeEntry(entries: Entry[], index: number): void {
+  const [entry] = entries.splice(index, 1);
+  pending.delete(entry);
+  deepChecks.delete(entry);
+}
+
+export function addReassertSentinelOwners(
+  existingOwnerKeys: ReadonlySet<string>,
+  ownerKeys: readonly string[],
+  artifactId?: string,
+): void {
+  if (!existingOwnerKeys.size || !ownerKeys.length) return;
+  for (const { entries } of roots.values()) {
+    for (const entry of entries) {
+      if (artifactId !== undefined && entry.artifactId !== artifactId) continue;
+      if (!Array.from(existingOwnerKeys).some((ownerKey) => entry.ownerKeys.has(ownerKey))) continue;
+      ownerKeys.forEach((ownerKey) => entry.ownerKeys.add(ownerKey));
+    }
+  }
+}
+
+export function resetReassertSentinelForOwner(
+  ownerKey: string,
+  artifactId?: string,
+): void {
+  for (const [element, root] of Array.from(roots.entries())) {
+    for (let index = root.entries.length - 1; index >= 0; index -= 1) {
+      const entry = root.entries[index];
+      if (artifactId !== undefined && entry.artifactId !== artifactId) continue;
+      if (!entry.ownerKeys.delete(ownerKey)) continue;
+      if (entry.requiresOwner && entry.ownerKeys.size === 0) removeEntry(root.entries, index);
+    }
+    if (root.entries.length) continue;
+    root.observer.disconnect();
+    unregisterMutedObserver(root.observer);
+    roots.delete(element);
+  }
+  if (roots.size === 0 && frame !== null) {
+    cancelAnimationFrame(frame);
+    frame = null;
+    pending.clear();
+    deepChecks.clear();
+  }
+}
+
+export function replayReassertSentinelEntry(
+  journalSeq: number,
+  element: Element,
+): void {
+  for (const [currentElement, root] of Array.from(roots.entries())) {
+    const index = root.entries.findIndex((entry) => entry.journalSeq === journalSeq);
+    if (index < 0) continue;
+    const entry = root.entries[index];
+    if (entry.el === element) {
+      entry.appliedAt = Date.now();
+      captureAppliedNodes(entry);
+      return;
+    }
+    removeEntry(root.entries, index);
+    if (root.entries.length === 0) {
+      root.observer.disconnect();
+      unregisterMutedObserver(root.observer);
+      roots.delete(currentElement);
+    }
+    observe(element);
+    entry.el = element;
+    entry.appliedAt = Date.now();
+    entry.times = [];
+    entry.stopped = false;
+    captureAppliedNodes(entry);
+    roots.get(element)?.entries.push(entry);
+    return;
+  }
+}
+
 export function resetReassertSentinel(): void {
   if (frame !== null) cancelAnimationFrame(frame);
   frame = null;