@matterfact/embed 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -224,6 +224,9 @@ function resolveRef(ref) {
   if (!entry || entry.id !== ref || entry.gen !== generation) return null;
   return el;
 }
+function clearRefs() {
+  registry.clear();
+}
 var counter, generation, entries, registry;
 var init_refs = __esm({
   "src/dom/refs.ts"() {
@@ -237,6 +240,7 @@ var init_refs = __esm({
 // src/dom/snapshot.ts
 var snapshot_exports = {};
 __export(snapshot_exports, {
+  clearRefs: () => clearRefs,
   resolveRef: () => resolveRef,
   snapshot: () => snapshot,
   snapshotRegion: () => snapshotRegion
@@ -486,7 +490,8 @@ __export(context_exports, {
   redact: () => redact,
   sendRegion: () => sendRegion,
   sendSnapshot: () => sendSnapshot,
-  start: () => start
+  start: () => start,
+  stop: () => stop
 });
 function redact(text) {
   let out = text;
@@ -656,8 +661,11 @@ function watchNavigation() {
     publishContext();
     publishArtifactGrants();
   };
+  navFire = fire;
   for (const name of ["pushState", "replaceState"]) {
     const orig = history[name];
+    if (name === "pushState") origPushState = orig;
+    else origReplaceState = orig;
     history[name] = function(...args) {
       const r = orig.apply(this, args);
       fire();
@@ -678,7 +686,7 @@ async function readFocus() {
   }
   const active = document.activeElement;
   if (active && active !== document.body && !isPrivate(active) && !active.closest("[data-mf-private]")) {
-    const { snapshot: snapshot2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+    const { snapshot: snapshot2 } = await loadSnapshotModule();
     focus.focused = {
       label: redact(describeControl(active)),
       role: active.getAttribute("role") || active.tagName.toLowerCase()
@@ -692,6 +700,11 @@ async function readFocus() {
 function describeControl(el) {
   return describe(el);
 }
+async function loadSnapshotModule() {
+  const m = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  snapshotModule = m;
+  return m;
+}
 function scheduleFocus() {
   if (focusTimer) return;
   focusTimer = setTimeout(async () => {
@@ -701,7 +714,8 @@ function scheduleFocus() {
   }, 250);
 }
 async function sendSnapshot(emit) {
-  const { snapshot: snapshot2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  if (!pageContextOn) return;
+  const { snapshot: snapshot2 } = await loadSnapshotModule();
   const { yaml, truncated, visibleRefs } = snapshot2();
   emit({
     type: "host.snapshot",
@@ -711,7 +725,8 @@ async function sendSnapshot(emit) {
   emit({ type: "host.focus", focus: lastFocus });
 }
 async function sendRegion(ref, emit) {
-  const { snapshotRegion: snapshotRegion2, resolveRef: resolveRef2 } = await Promise.resolve().then(() => (init_snapshot(), snapshot_exports));
+  if (!pageContextOn) return;
+  const { snapshotRegion: snapshotRegion2, resolveRef: resolveRef2 } = await loadSnapshotModule();
   const el = resolveRef2(ref);
   if (!el) {
     emit({
@@ -741,46 +756,86 @@ function beginAuth(config, emit) {
     "width=460,height=640"
   );
   if (!w) return;
+  if (pendingAuthListener) window.removeEventListener("message", pendingAuthListener);
   const onMsg = (event) => {
     if (event.origin !== config.origin) return;
     const d = event.data;
     if (d?.type !== "mf:embed:auth") return;
     window.removeEventListener("message", onMsg);
+    pendingAuthListener = null;
     emit({ type: "host.auth", token: d.token, expiresAt: d.expiresAt });
   };
+  pendingAuthListener = onMsg;
   window.addEventListener("message", onMsg);
 }
-function start(emit, origin) {
+function stop() {
+  document.removeEventListener("click", onClick, { capture: true });
+  document.removeEventListener("submit", onSubmit, { capture: true });
+  document.removeEventListener("change", onChange, { capture: true });
+  document.removeEventListener("selectionchange", scheduleFocus);
+  document.removeEventListener("focusin", scheduleFocus, { capture: true });
+  window.removeEventListener("scroll", scheduleFocus, { capture: true });
+  if (navFire) {
+    window.removeEventListener("popstate", navFire);
+    navFire = null;
+  }
+  if (origPushState) {
+    history.pushState = origPushState;
+    origPushState = null;
+  }
+  if (origReplaceState) {
+    history.replaceState = origReplaceState;
+    origReplaceState = null;
+  }
+  if (pendingAuthListener) {
+    window.removeEventListener("message", pendingAuthListener);
+    pendingAuthListener = null;
+  }
+  if (focusTimer) {
+    clearTimeout(focusTimer);
+    focusTimer = null;
+  }
+  send = null;
+  activity.length = 0;
+  lastFocus = {};
+  widgetOrigin = "";
+  snapshotModule?.clearRefs();
+}
+function start(emit, origin, pageContext = true) {
+  stop();
   send = emit;
   widgetOrigin = origin || "";
   lastUrl = location.pathname;
-  publishContext();
-  publishArtifactGrants();
-  watchNavigation();
-  document.addEventListener("click", onClick, { capture: true, passive: true });
-  document.addEventListener("submit", onSubmit, {
-    capture: true,
-    passive: true
-  });
-  document.addEventListener("change", onChange, {
-    capture: true,
-    passive: true
-  });
-  document.addEventListener("selectionchange", scheduleFocus, {
-    passive: true
-  });
-  document.addEventListener("focusin", scheduleFocus, {
-    capture: true,
-    passive: true
-  });
-  window.addEventListener("scroll", scheduleFocus, {
-    capture: true,
-    passive: true
-  });
+  pageContextOn = pageContext;
+  if (pageContextOn) {
+    publishContext();
+    publishArtifactGrants();
+    watchNavigation();
+    document.addEventListener("click", onClick, { capture: true, passive: true });
+    document.addEventListener("submit", onSubmit, {
+      capture: true,
+      passive: true
+    });
+    document.addEventListener("change", onChange, {
+      capture: true,
+      passive: true
+    });
+    document.addEventListener("selectionchange", scheduleFocus, {
+      passive: true
+    });
+    document.addEventListener("focusin", scheduleFocus, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", scheduleFocus, {
+      capture: true,
+      passive: true
+    });
+  }
   const theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   emit({ type: "host.theme", mode: theme });
 }
-var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
+var widgetOrigin, MAX_ACTIVITY, send, activitySeq, activity, lastUrl, pageContextOn, navFire, origPushState, origReplaceState, pendingAuthListener, snapshotModule, PII, FORM_CONTROLS, ACTIONABLE, lastFocus, focusTimer, snapshotSeq;
 var init_context = __esm({
   "src/context.ts"() {
     widgetOrigin = "";
@@ -789,6 +844,12 @@ var init_context = __esm({
     activitySeq = 0;
     activity = [];
     lastUrl = "";
+    pageContextOn = true;
+    navFire = null;
+    origPushState = null;
+    origReplaceState = null;
+    pendingAuthListener = null;
+    snapshotModule = null;
     PII = [
       /\b[\w.+-]+@[\w-]+\.[\w.]{2,}\b/g,
       // email
@@ -851,12 +912,16 @@ function readConfig() {
       `[matterfact] data-container="${sel}" matched nothing; falling back to the corner`
     );
   }
+  const pageContextAttr = el?.dataset.pageContext?.toLowerCase();
   return {
     publishableKey,
     origin: el?.dataset.origin || DEFAULT_ORIGIN,
     theme: el?.dataset.theme || "auto",
     surface: el?.dataset.surface || "",
-    container
+    container,
+    pageContext: pageContextAttr !== "off" && pageContextAttr !== "false" && pageContextAttr !== "0"
+    // No `data-dev` — see the `dev` field's doc comment: the URL trigger is the
+    // point for the script-tag path, so there is deliberately no script-tag knob here.
   };
 }
 var POS_KEY = "mf.embed.pos";
@@ -1022,7 +1087,9 @@ var EmbedHost = class {
     iframe.setAttribute("allow", "microphone");
     iframe.src = `${this.config.origin}/embed/chat?k=${encodeURIComponent(
       this.config.publishableKey
-    )}&o=${encodeURIComponent(location.origin)}` + (this.config.surface ? `&s=${encodeURIComponent(this.config.surface)}` : "") + (devRequested() ? "&dev=1" : "") + (this.inline ? "&inline=1" : "");
+    )}&o=${encodeURIComponent(location.origin)}` + (this.config.surface ? `&s=${encodeURIComponent(this.config.surface)}` : "") + // Either trigger works: the URL param (no redeploy needed) OR the config's
+    // programmatic `dev` (the React prop). See both doc comments above.
+    (devRequested() || this.config.dev ? "&dev=1" : "") + (this.inline ? "&inline=1" : "");
     this.iframe = iframe;
     this.shadow.appendChild(iframe);
     window.addEventListener("message", this.onMessage);
@@ -1112,7 +1179,7 @@ var EmbedHost = class {
   }
   loadContext() {
     this.context ?? (this.context = Promise.resolve().then(() => (init_context(), context_exports)).then((m) => {
-      m.start(this.send, this.config.origin);
+      m.start(this.send, this.config.origin, this.config.pageContext);
       if (this.config.theme !== "auto") {
         this.send({ type: "host.theme", mode: this.config.theme });
       }
@@ -1135,6 +1202,7 @@ var EmbedHost = class {
     this.iframe = null;
     this.shadow = null;
     this.ready = false;
+    void this.context?.then((m) => m.stop());
   }
 };
 function mount(config) {