@tamsensedev/dataclient 0.1.10 → 0.2.3

package/dist/index.d.cts

@@ -94,6 +94,7 @@ interface Config {
     sessionIdKey: string;
     deviceIdKey: string;
     apiKey: string;
+    scoped: string;
 }
 interface Tracker {
     start: () => void;
@@ -123,11 +124,25 @@ declare class DataClient {
     private deviceId;
     private idleTimer;
     private userId;
+    private rootEl;
+    private scopeObserver;
+    private scopeCheckScheduled;
+    private activityHandler;
+    private activityTarget;
     constructor(options?: Partial<Config>);
     setUser(userId: string): void;
     excludeSession(reason?: string): void;
+    private normalizeScoped;
+    private startScopedMode;
+    private findRoot;
+    private resolveScope;
+    private scheduleScopeCheck;
+    private handleScopeChange;
+    private activateScope;
     private onActivity;
     private resetIdleTimer;
+    private attachActivityListeners;
+    private detachActivityListeners;
     private startSession;
     private stopSession;
 }

package/dist/index.d.ts

@@ -94,6 +94,7 @@ interface Config {
     sessionIdKey: string;
     deviceIdKey: string;
     apiKey: string;
+    scoped: string;
 }
 interface Tracker {
     start: () => void;
@@ -123,11 +124,25 @@ declare class DataClient {
     private deviceId;
     private idleTimer;
     private userId;
+    private rootEl;
+    private scopeObserver;
+    private scopeCheckScheduled;
+    private activityHandler;
+    private activityTarget;
     constructor(options?: Partial<Config>);
     setUser(userId: string): void;
     excludeSession(reason?: string): void;
+    private normalizeScoped;
+    private startScopedMode;
+    private findRoot;
+    private resolveScope;
+    private scheduleScopeCheck;
+    private handleScopeChange;
+    private activateScope;
     private onActivity;
     private resetIdleTimer;
+    private attachActivityListeners;
+    private detachActivityListeners;
     private startSession;
     private stopSession;
 }

package/dist/index.global.js

@@ -12646,14 +12646,19 @@ var dataclient = (() => {
 
   // src/trackers/rrweb.ts
   var RrwebTracker = class {
-    constructor(config, sender) {
+    constructor(config, sender, root2) {
       this.config = config;
       this.sender = sender;
+      this.root = root2;
     }
     config;
     sender;
+    root;
     stopFn = null;
     start() {
+      const scoped = this.config.scoped;
+      const rootIsScoped = !!scoped && this.root !== document.body && this.root.hasAttribute(scoped);
+      const blockSelector = rootIsScoped ? `:not([${scoped}]):not([${scoped}] *):not(:has([${scoped}]))` : void 0;
       this.stopFn = record({
         emit: (event) => {
           const rrwebEvent = {
@@ -12668,6 +12673,7 @@ var dataclient = (() => {
         maskTextSelector: MASK_SELECTOR,
         maskInputOptions: { password: true },
         maskTextFn: (text) => "*".repeat(text.length),
+        blockSelector,
         sampling: {
           mousemove: false,
           mouseInteraction: true,
@@ -12691,26 +12697,33 @@ var dataclient = (() => {
 
   // src/trackers/action.ts
   var ActionTracker = class {
-    constructor(config, sender) {
+    constructor(config, sender, root2) {
       this.config = config;
       this.sender = sender;
+      this.root = root2;
     }
     config;
     sender;
+    root;
     inputTimers = /* @__PURE__ */ new WeakMap();
     pendingInputs = /* @__PURE__ */ new Set();
     handleClick = (e) => this.onClick(e);
     handleInput = (e) => this.onInput(e);
     handleChange = (e) => this.onChange(e);
+    get listenerTarget() {
+      return this.config.scoped ? this.root : document;
+    }
     start() {
-      document.addEventListener("click", this.handleClick, true);
-      document.addEventListener("input", this.handleInput, true);
-      document.addEventListener("change", this.handleChange, true);
+      const target = this.listenerTarget;
+      target.addEventListener("click", this.handleClick, true);
+      target.addEventListener("input", this.handleInput, true);
+      target.addEventListener("change", this.handleChange, true);
     }
     stop() {
-      document.removeEventListener("click", this.handleClick, true);
-      document.removeEventListener("input", this.handleInput, true);
-      document.removeEventListener("change", this.handleChange, true);
+      const target = this.listenerTarget;
+      target.removeEventListener("click", this.handleClick, true);
+      target.removeEventListener("input", this.handleInput, true);
+      target.removeEventListener("change", this.handleChange, true);
     }
     beforeUnload() {
       for (const el of this.pendingInputs) {
@@ -12864,7 +12877,7 @@ var dataclient = (() => {
     }
     findMeaningfulElement(el) {
       let current = el;
-      while (current && current !== document.body) {
+      while (current && current !== this.root && current !== document.body) {
         if (INTERACTIVE_TAGS.has(current.tagName?.toLowerCase())) {
           return current;
         }
@@ -12880,13 +12893,15 @@ var dataclient = (() => {
 
   // src/trackers/mutation.ts
   var MutationTracker = class {
-    constructor(config, sender, onMutation) {
+    constructor(config, sender, root2, onMutation) {
       this.config = config;
       this.sender = sender;
+      this.root = root2;
       this.onMutation = onMutation;
     }
     config;
     sender;
+    root;
     onMutation;
     observer = null;
     debounceTimer = null;
@@ -12896,7 +12911,7 @@ var dataclient = (() => {
     pendingAttrChanges = [];
     start() {
       this.observer = new MutationObserver((mutations) => this.handleMutations(mutations));
-      this.observer.observe(document.body, {
+      this.observer.observe(this.root, {
         childList: true,
         subtree: true,
         characterData: true,
@@ -13001,12 +13016,14 @@ var dataclient = (() => {
 
   // src/trackers/snapshot.ts
   var SnapshotTracker = class {
-    constructor(config, sender) {
+    constructor(config, sender, root2) {
       this.config = config;
       this.sender = sender;
+      this.root = root2;
     }
     config;
     sender;
+    root;
     lastUrl = "";
     urlPollTimer = null;
     checkpointTimer = null;
@@ -13040,7 +13057,7 @@ var dataclient = (() => {
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         url: location.href,
         title: document.title,
-        tree: serializeTree(document.body),
+        tree: serializeTree(this.root),
         viewport: getViewport()
       };
       if (this.config.debug) {
@@ -13213,8 +13230,10 @@ var dataclient = (() => {
     inputDebounce: 1e3,
     sessionIdKey: "sc2_sid",
     deviceIdKey: "sc2_did",
-    apiKey: ""
+    apiKey: "",
+    scoped: ""
   };
+  var VALID_ATTR_NAME = /^[a-z][\w-]*$/i;
   var DataClient = class {
     sender = null;
     trackers = [];
@@ -13222,13 +13241,21 @@ var dataclient = (() => {
     deviceId;
     idleTimer = null;
     userId = null;
+    rootEl = null;
+    scopeObserver = null;
+    scopeCheckScheduled = false;
+    activityHandler = null;
+    activityTarget = null;
     constructor(options) {
       this.config = { ...defaults, ...options };
+      this.config.scoped = this.normalizeScoped(this.config.scoped);
       this.deviceId = getDeviceId(this.config.deviceIdKey);
-      this.startSession();
-      document.addEventListener("click", () => this.onActivity(), true);
-      document.addEventListener("input", () => this.onActivity(), true);
-      document.addEventListener("change", () => this.onActivity(), true);
+      if (this.config.scoped) {
+        this.startScopedMode();
+      } else {
+        this.startSession(document.body);
+        this.attachActivityListeners(document);
+      }
     }
     setUser(userId) {
       this.userId = userId;
@@ -13237,10 +13264,77 @@ var dataclient = (() => {
     excludeSession(reason = "") {
       this.sender?.add({ event: "exclude", timestamp: (/* @__PURE__ */ new Date()).toISOString(), reason });
       this.stopSession();
+      if (this.scopeObserver) {
+        this.scopeObserver.disconnect();
+        this.scopeObserver = null;
+      }
+      this.detachActivityListeners();
+    }
+    normalizeScoped(value) {
+      if (!value) {
+        return "";
+      }
+      if (!VALID_ATTR_NAME.test(value)) {
+        if (this.config.debug) {
+          console.warn(`[dataclient] invalid "scoped" attribute name: ${JSON.stringify(value)}. Falling back to non-scoped mode.`);
+        }
+        return "";
+      }
+      return value;
+    }
+    startScopedMode() {
+      const initial = this.resolveScope();
+      this.activateScope(initial);
+      this.scopeObserver = new MutationObserver(() => this.scheduleScopeCheck());
+      this.scopeObserver.observe(document.body, { childList: true, subtree: true });
+      if (this.config.debug) {
+        console.log(`[dataclient] scoped mode: looking for [${this.config.scoped}], fallback to body`);
+      }
+    }
+    findRoot() {
+      return document.querySelector(`[${this.config.scoped}]`);
+    }
+    resolveScope() {
+      return this.findRoot() ?? document.body;
+    }
+    scheduleScopeCheck() {
+      if (this.scopeCheckScheduled) {
+        return;
+      }
+      this.scopeCheckScheduled = true;
+      queueMicrotask(() => {
+        this.scopeCheckScheduled = false;
+        this.handleScopeChange();
+      });
+    }
+    handleScopeChange() {
+      const current = this.resolveScope();
+      if (current === this.rootEl) {
+        return;
+      }
+      this.detachActivityListeners();
+      this.stopSession();
+      this.activateScope(current);
+    }
+    activateScope(root2) {
+      this.rootEl = root2;
+      this.attachActivityListeners(root2);
+      this.startSession(root2);
+      if (this.config.debug) {
+        const kind = root2 === document.body ? "document.body (fallback)" : `[${this.config.scoped}]`;
+        console.log(`[dataclient] scope: ${kind}`);
+      }
     }
     onActivity() {
       if (!this.sender) {
-        this.startSession();
+        if (this.config.scoped) {
+          if (!this.rootEl) {
+            return;
+          }
+          this.startSession(this.rootEl);
+        } else {
+          this.startSession(document.body);
+        }
       }
       this.resetIdleTimer();
     }
@@ -13249,7 +13343,26 @@ var dataclient = (() => {
         clearTimeout(this.idleTimer);
       this.idleTimer = setTimeout(() => this.stopSession(), this.config.idleTimeout);
     }
-    startSession() {
+    attachActivityListeners(target) {
+      this.detachActivityListeners();
+      const handler = () => this.onActivity();
+      target.addEventListener("click", handler, true);
+      target.addEventListener("input", handler, true);
+      target.addEventListener("change", handler, true);
+      this.activityHandler = handler;
+      this.activityTarget = target;
+    }
+    detachActivityListeners() {
+      if (!this.activityHandler || !this.activityTarget) {
+        return;
+      }
+      this.activityTarget.removeEventListener("click", this.activityHandler, true);
+      this.activityTarget.removeEventListener("input", this.activityHandler, true);
+      this.activityTarget.removeEventListener("change", this.activityHandler, true);
+      this.activityHandler = null;
+      this.activityTarget = null;
+    }
+    startSession(root2) {
       const sessionId = generateId();
       this.sender = new Sender(
         this.config.endpoint,
@@ -13259,10 +13372,10 @@ var dataclient = (() => {
         this.deviceId,
         this.config.flushInterval
       );
-      const snapshotTracker = new SnapshotTracker(this.config, this.sender);
-      const mutationTracker = new MutationTracker(this.config, this.sender, () => snapshotTracker.markMutation());
-      const actionTracker = new ActionTracker(this.config, this.sender);
-      const rrwebTracker = new RrwebTracker(this.config, this.sender);
+      const snapshotTracker = new SnapshotTracker(this.config, this.sender, root2);
+      const mutationTracker = new MutationTracker(this.config, this.sender, root2, () => snapshotTracker.markMutation());
+      const actionTracker = new ActionTracker(this.config, this.sender, root2);
+      const rrwebTracker = new RrwebTracker(this.config, this.sender, root2);
       this.trackers = [snapshotTracker, mutationTracker, actionTracker, rrwebTracker];
       this.trackers.forEach((t) => t.start());
       if (this.userId) {
@@ -13287,6 +13400,7 @@ var dataclient = (() => {
         clearTimeout(this.idleTimer);
         this.idleTimer = null;
       }
+      this.trackers.forEach((t) => t.beforeUnload?.());
       this.trackers.forEach((t) => t.stop());
       this.trackers = [];
       if (this.sender) {
@@ -13294,7 +13408,7 @@ var dataclient = (() => {
         this.sender = null;
       }
       if (this.config.debug) {
-        console.log("[dataclient] Session stopped (idle timeout)");
+        console.log("[dataclient] Session stopped");
       }
     }
   };