@memlab/lens 1.0.0 → 1.0.1

package/src/core/dom-observer.ts

@@ -1,189 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @oncall memory_lab
- */
-import {isWeakAPINative} from '../utils/weak-ref-utils';
-import {isVisualizerElement} from '../visual/visual-utils';
-import {DOMElementStats, DOMObserveCallback, Optional} from './types';
-
-// if false, we only capture the top-most element of a removed subtree
-const CAPTURE_ALL_REMOVED_ELEMENTS = true;
-const IS_WEAK_REF_NATIVE = isWeakAPINative();
-const IS_MUTATION_OBSERVER_SUPPORTED = window.MutationObserver !== undefined;
-
-export class DOMObserver {
-  #elementCount: number;
-  #detachedElementCount: number;
-  #mutationObserver: Optional<MutationObserver>;
-  #trackedElements: Array<WeakRef<Element>>;
-  #trackedElementSet: WeakSet<Element>;
-  #consolidateInterval: Optional<number>;
-  #observeCallback: Array<DOMObserveCallback>;
-
-  constructor() {
-    this.#elementCount = 0;
-    this.#detachedElementCount = 0;
-    this.#trackedElements = [];
-    this.#trackedElementSet = new WeakSet();
-    this.#observeCallback = [];
-    this.startMonitoring();
-  }
-
-  register(callback: DOMObserveCallback): void {
-    this.#observeCallback.push(callback);
-  }
-
-  startMonitoring(): void {
-    if (!IS_WEAK_REF_NATIVE || !IS_MUTATION_OBSERVER_SUPPORTED) {
-      return;
-    }
-    if (this.#mutationObserver != null) {
-      return;
-    }
-    this.#mutationObserver = new MutationObserver(mutationsList => {
-      let newlyAdded: Array<WeakRef<Element>> = [];
-      const updateCallback = (node: Node) => {
-        if (node == null) {
-          return;
-        }
-        if (node.nodeType != Node.ELEMENT_NODE) {
-          return;
-        }
-        const element = node as Element;
-        if (isVisualizerElement(element)) {
-          return;
-        }
-        if (CAPTURE_ALL_REMOVED_ELEMENTS) {
-          const diff = this.#gatherAllElementsInRemovedSubtree(element);
-          newlyAdded = [...newlyAdded, ...diff];
-        } else if (!this.#trackedElementSet.has(element)) {
-          const ref = new WeakRef(element);
-          this.#trackedElements.push(ref);
-          this.#trackedElementSet.add(element);
-          newlyAdded.push(ref);
-        }
-      };
-
-      mutationsList.forEach(mutation => {
-        mutation.addedNodes.forEach(updateCallback);
-        mutation.removedNodes.forEach(updateCallback);
-      });
-
-      this.#observeCallback.forEach(cb => cb(newlyAdded));
-    });
-
-    const waitForBodyAndObserve = () => {
-      if (document.body) {
-        // observe changes in DOM tree
-        this.#mutationObserver?.observe(document.body, {
-          childList: true, // Detect direct additions/removals
-          subtree: true, // Observe all descendants
-        });
-      } else {
-        setTimeout(waitForBodyAndObserve, 0);
-      }
-    };
-
-    waitForBodyAndObserve();
-
-    // starts consolidating removedElements weak references;
-    this.#consolidateInterval = window.setInterval(() => {
-      this.#consolidateElementRefs();
-    }, 3000);
-  }
-
-  stopMonitoring(): void {
-    if (this.#mutationObserver != null) {
-      this.#mutationObserver.disconnect();
-      this.#mutationObserver = null;
-    }
-    if (this.#consolidateInterval != null) {
-      window.clearInterval(this.#consolidateInterval);
-      this.#consolidateInterval = null;
-    }
-    // TODO: clean up memory
-  }
-
-  #consolidateElementRefs(): void {
-    const consolidatedList = [];
-    const trackedElements = new Set<Element>();
-    for (const ref of this.#trackedElements) {
-      const element = ref.deref();
-      if (element != null && !trackedElements.has(element)) {
-        consolidatedList.push(ref);
-        trackedElements.add(element);
-      }
-    }
-    this.#trackedElements = consolidatedList;
-  }
-
-  #getTotalDOMElementCount(): number {
-    return (this.#elementCount =
-      document?.getElementsByTagName('*')?.length ?? 0);
-  }
-
-  #getDetachedElementCount(): number {
-    let count = 0;
-    for (const ref of this.#trackedElements) {
-      const element = ref.deref();
-      if (element && element.isConnected === false) {
-        ++count;
-      }
-    }
-    return (this.#detachedElementCount = count);
-  }
-
-  #gatherAllElementsInRemovedSubtree(node: Node): Array<WeakRef<Element>> {
-    const queue = [node];
-    const visited = new Set<Node>();
-    const newlyAdded: Array<WeakRef<Element>> = [];
-    while (queue.length > 0) {
-      const current = queue.pop();
-      if (current == null || visited.has(current)) {
-        continue;
-      }
-      if (current?.nodeType !== Node.ELEMENT_NODE) {
-        continue;
-      }
-      const element = current as Element;
-      if (isVisualizerElement(element)) {
-        continue;
-      }
-      visited.add(element);
-      if (!this.#trackedElementSet.has(element)) {
-        const ref = new WeakRef(element);
-        this.#trackedElements.push(ref);
-        this.#trackedElementSet.add(element);
-        newlyAdded.push(ref);
-      }
-      const list = element.childNodes;
-      for (let i = 0; i < list.length; ++i) {
-        queue.push(list[i]);
-      }
-    }
-    return newlyAdded;
-  }
-
-  getDOMElements(): Array<WeakRef<Element>> {
-    return [...this.#trackedElements];
-  }
-
-  getStats(): DOMElementStats {
-    try {
-      this.#elementCount = this.#getTotalDOMElementCount();
-      this.#detachedElementCount = this.#getDetachedElementCount();
-    } catch (ex) {
-      // do nothing
-    }
-
-    return {
-      elements: this.#elementCount,
-      detachedElements: this.#detachedElementCount,
-    };
-  }
-}

package/src/core/event-listener-tracker.ts

@@ -1,171 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @oncall memory_lab
- */
-import type {Fiber} from 'react-reconciler';
-import {getFiberNodeFromElement} from '../utils/react-fiber-utils';
-import {WeakMapPlus} from '../utils/weak-ref-utils';
-
-type EventListenerEntry = {
-  type: string;
-  cb: WeakRef<EventListenerOrEventListenerObject>;
-  options?: boolean | AddEventListenerOptions;
-  fiber?: WeakRef<Fiber>;
-};
-
-type DetachedListenerGroup = {
-  type: string;
-  count: number;
-  entries: WeakRef<EventListenerEntry>[];
-};
-
-export class EventListenerTracker {
-  private static instance: EventListenerTracker | null = null;
-  #listenerMap: WeakMapPlus<EventTarget, EventListenerEntry[]>;
-  #detachedListeners: Map<string, DetachedListenerGroup[]>;
-  #originalAddEventListener: typeof EventTarget.prototype.addEventListener;
-  #originalRemoveEventListener: typeof EventTarget.prototype.removeEventListener;
-
-  private constructor() {
-    this.#listenerMap = new WeakMapPlus({fallback: 'noop', cleanupMs: 100});
-    this.#detachedListeners = new Map();
-    this.#originalAddEventListener = EventTarget.prototype.addEventListener;
-    this.#originalRemoveEventListener =
-      EventTarget.prototype.removeEventListener;
-    this.#patchEventListeners();
-  }
-
-  static getInstance(): EventListenerTracker {
-    if (!EventListenerTracker.instance) {
-      EventListenerTracker.instance = new EventListenerTracker();
-    }
-    return EventListenerTracker.instance;
-  }
-
-  #patchEventListeners(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    EventTarget.prototype.addEventListener = function (
-      type: string,
-      listener: EventListenerOrEventListenerObject,
-      options?: boolean | AddEventListenerOptions,
-    ) {
-      self.#originalAddEventListener.call(this, type, listener, options);
-      if (this instanceof Element) {
-        const fiber = getFiberNodeFromElement(this);
-        const entry: EventListenerEntry = {
-          type,
-          cb: new WeakRef(listener),
-          options,
-          fiber: fiber ? new WeakRef(fiber) : undefined,
-        };
-        const listeners = self.#listenerMap.get(this) ?? [];
-        listeners.push(entry);
-        self.#listenerMap.set(this, listeners);
-      }
-    };
-
-    EventTarget.prototype.removeEventListener = function (
-      type: string,
-      listener: EventListenerOrEventListenerObject,
-      options?: boolean | EventListenerOptions,
-    ) {
-      self.#originalRemoveEventListener.call(this, type, listener, options);
-      if (this instanceof Element) {
-        const listeners = self.#listenerMap.get(this);
-        if (listeners) {
-          const index = listeners.findIndex(
-            entry =>
-              entry.type === type &&
-              entry.cb.deref() === listener &&
-              entry.options === options,
-          );
-          if (index !== -1) {
-            listeners.splice(index, 1);
-          }
-          if (listeners.length === 0) {
-            self.#listenerMap.delete(this);
-          } else {
-            self.#listenerMap.set(this, listeners);
-          }
-        }
-      }
-    };
-  }
-
-  #unpatchEventListeners(): void {
-    EventTarget.prototype.addEventListener = this.#originalAddEventListener;
-    EventTarget.prototype.removeEventListener =
-      this.#originalRemoveEventListener;
-  }
-
-  addListener(
-    el: EventTarget,
-    type: string,
-    cb: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions,
-  ): void {
-    el.addEventListener(type, cb, options);
-  }
-
-  removeListener(
-    el: EventTarget,
-    type: string,
-    cb: EventListenerOrEventListenerObject,
-    options?: boolean | AddEventListenerOptions,
-  ): void {
-    el.removeEventListener(type, cb, options);
-  }
-
-  scan(
-    getComponentName: (elRef: WeakRef<Element>) => string,
-  ): Map<string, DetachedListenerGroup[]> {
-    const detachedListeners = new Map<string, DetachedListenerGroup[]>();
-
-    for (const [el, listeners] of this.#listenerMap.entries()) {
-      if (el instanceof Element && !el.isConnected) {
-        for (const listener of listeners) {
-          // Skip if the callback has been garbage collected
-          if (!listener.cb.deref()) continue;
-
-          const componentName = getComponentName(new WeakRef(el));
-          if (!detachedListeners.has(componentName)) {
-            detachedListeners.set(componentName, []);
-          }
-
-          const groups = detachedListeners.get(componentName);
-          let group = groups?.find(g => g.type === listener.type);
-          if (!group) {
-            group = {
-              type: listener.type,
-              count: 0,
-              entries: [],
-            };
-            groups?.push(group);
-          }
-          group.count++;
-          group.entries.push(new WeakRef(listener));
-        }
-      }
-    }
-
-    this.#detachedListeners = detachedListeners;
-    return detachedListeners;
-  }
-
-  getDetachedListeners(): Map<string, DetachedListenerGroup[]> {
-    return this.#detachedListeners;
-  }
-
-  destroy(): void {
-    this.#unpatchEventListeners();
-    this.#listenerMap.destroy();
-    this.#detachedListeners.clear();
-    EventListenerTracker.instance = null;
-  }
-}

package/src/core/react-fiber-analysis.ts

@@ -1,123 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @oncall memory_lab
- */
-import * as utils from '../utils/utils';
-import type {Fiber} from 'react-reconciler';
-import {
-  traverseFiber,
-  getDisplayNameOfFiberNode,
-  getFiberNodeFromElement,
-  getTopMostFiberWithChild,
-} from '../utils/react-fiber-utils';
-import {ScanResult, AnyValue} from './types';
-import {isValidComponentName} from './valid-component-name';
-
-export default class ReactFiberAnalyzer {
-  scan(
-    elementWeakRefList: Array<WeakRef<Element>>,
-    elementToComponentStack: WeakMap<Element, string[]>,
-  ): ScanResult {
-    const visitedRootFibers = new Set<Fiber>();
-    const components = new Set<string>();
-    const componentToFiberNodeCount = new Map();
-    const detachedComponentToFiberNodeCount = new Map();
-    const topDownVisited = new Set();
-    const analyzedFibers = new Set();
-    const fiberNodes: Array<WeakRef<Fiber>> = [];
-    let totalElements = 0;
-    let totalDetachedElements = 0;
-
-    function analyzeFiber(fiberNode: Fiber): void {
-      traverseFiber(
-        fiberNode,
-        (fiberNode: Fiber) => {
-          // skip if the fiber node has already been analyzed
-          if (analyzedFibers.has(fiberNode)) {
-            return true;
-          }
-          analyzedFibers.add(fiberNode);
-
-          // traverse the fiber tree up to find the component name
-          const displayName = getDisplayNameOfFiberNode(fiberNode);
-          if (displayName != null && isValidComponentName(displayName)) {
-            components.add(displayName);
-            utils.addCountbyKey(componentToFiberNodeCount, displayName, 1);
-            return true;
-          }
-        },
-        true,
-      );
-    }
-
-    for (const weakRef of elementWeakRefList) {
-      const elem = weakRef.deref();
-      if (elem == null) {
-        continue;
-      }
-      // elements stats
-      ++totalElements;
-      // TODO: simplify this logic
-      if (!elem.isConnected) {
-        if (elementToComponentStack.has(elem)) {
-          const componentStack = elementToComponentStack.get(elem) ?? [];
-          // set component name
-          const component = componentStack[0];
-          (elem as AnyValue).__component_name = component;
-          utils.addCountbyKey(detachedComponentToFiberNodeCount, component, 1);
-        }
-        ++totalDetachedElements;
-      }
-
-      // analyze fiber nodes
-      const fiberNode = getFiberNodeFromElement(elem);
-      if (fiberNode == null) {
-        continue;
-      }
-      analyzeFiber(fiberNode);
-
-      // try to traverse each fiber node in the entire fiber tree
-      const rootFiber = getTopMostFiberWithChild(fiberNode);
-      if (rootFiber == null) {
-        continue;
-      }
-      if (visitedRootFibers.has(rootFiber)) {
-        continue;
-      }
-      visitedRootFibers.add(rootFiber);
-
-      // start traversing fiber tree from the know root host
-      traverseFiber(
-        rootFiber,
-        (node: Fiber) => {
-          if (topDownVisited.has(node)) {
-            return true;
-          }
-          topDownVisited.add(node);
-          fiberNodes.push(new WeakRef(node));
-          analyzeFiber(node);
-        },
-        false,
-      );
-    }
-
-    topDownVisited.clear();
-    analyzedFibers.clear();
-    visitedRootFibers.clear();
-
-    return {
-      components,
-      componentToFiberNodeCount,
-      totalElements,
-      totalDetachedElements,
-      detachedComponentToFiberNodeCount,
-      fiberNodes,
-      leakedFibers: [],
-    };
-  }
-}