@memlab/lens 1.0.0 → 1.0.2

package/src/visual/components/toggle-button.ts

@@ -1,57 +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 {createVisualizerElement} from '../visual-utils';
-
-export function createToggleButton(
-  overlayDiv: HTMLDivElement,
-  hideAllRef: {value: boolean},
-): HTMLDivElement {
-  const toggleWrapper = createVisualizerElement('div') as HTMLDivElement;
-  toggleWrapper.style.width = '40px';
-  toggleWrapper.style.height = '24px';
-  toggleWrapper.style.borderRadius = '9999px';
-  toggleWrapper.style.backgroundColor = '#34C759'; // ON by default
-  toggleWrapper.style.cursor = 'pointer';
-  toggleWrapper.style.position = 'relative';
-  toggleWrapper.style.transition = 'background-color 0.3s ease';
-
-  const knob = createVisualizerElement('div');
-  knob.style.width = '18px';
-  knob.style.height = '18px';
-  knob.style.backgroundColor = 'white';
-  knob.style.borderRadius = '50%';
-  knob.style.position = 'absolute';
-  knob.style.top = '3px';
-  knob.style.left = '3px'; // ON position
-  knob.style.transition = 'left 0.25s ease';
-  toggleWrapper.appendChild(knob);
-
-  toggleWrapper.addEventListener('click', () => {
-    hideAllRef.value = !hideAllRef.value;
-
-    if (hideAllRef.value) {
-      // OFF state
-      overlayDiv.style.display = 'none';
-      overlayDiv.style.pointerEvents = 'none';
-      overlayDiv.style.userSelect = 'none';
-      knob.style.left = '19px';
-      toggleWrapper.style.backgroundColor = '#FF3B30'; // Apple red
-    } else {
-      // ON state
-      overlayDiv.style.display = 'block';
-      overlayDiv.style.pointerEvents = 'auto';
-      overlayDiv.style.userSelect = 'auto';
-      knob.style.left = '3px';
-      toggleWrapper.style.backgroundColor = '#34C759'; // Apple green
-    }
-  });
-
-  return toggleWrapper;
-}

package/src/visual/components/visual-overlay.ts

@@ -1,19 +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 {createVisualizerElement} from '../visual-utils';
-
-export function createOverlayDiv(): HTMLDivElement {
-  const overlayDiv = createVisualizerElement('div') as HTMLDivElement;
-  overlayDiv.style.position = 'absolute';
-  overlayDiv.style.top = '0px';
-  overlayDiv.style.left = '0px';
-  overlayDiv.id = 'memory-visualization-overlay';
-  return overlayDiv;
-}

package/src/visual/dom-element-visualizer-interactive.ts

@@ -1,358 +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 {DOMElementInfo, AnyValue, Optional, Nullable} from '../core/types';
-import DOMElementVisualizer from './dom-element-visualizer';
-import {createOverlayDiv} from './components/visual-overlay';
-import {createControlWidget} from './components/control-widget';
-import {createOverlayRectangle} from './components/overlay-rectangle';
-import {getDOMElementCount} from '../utils/utils';
-import {tryToAttachOverlay} from './visual-utils';
-
-type ElementVisualizer = {
-  elementInfo: DOMElementInfo;
-  visualizerElementRef: WeakRef<Element>;
-};
-
-export type VisualizerData = {
-  detachedDOMElementsCount: number;
-  totalDOMElementsCount: number;
-  selectedElementId: Nullable<number>;
-  pinnedElementId: Nullable<number>;
-  selectedReactComponentStack: Array<string>;
-  setPinnedElementId: (elementId: Nullable<number>) => void;
-};
-
-export type DateUpdateCallback = (data: VisualizerData) => void;
-export type RegisterDataUpdateCallback = (cb: DateUpdateCallback) => void;
-
-export default class DOMElementVisualizerInteractive extends DOMElementVisualizer {
-  #elementIdToRectangle: Map<number, ElementVisualizer>;
-  #visualizationOverlayDiv: HTMLDivElement;
-  #controlWidget: HTMLDivElement;
-  #blockedElementIds: Set<number>;
-  #currentVisualData: VisualizerData;
-  #hideAllRef: {value: boolean};
-  #updateDataCallbacks: Array<DateUpdateCallback> = [];
-
-  constructor() {
-    super();
-    this.#hideAllRef = {value: false};
-    this.#visualizationOverlayDiv = createOverlayDiv();
-    tryToAttachOverlay(this.#visualizationOverlayDiv);
-    this.#controlWidget = createControlWidget(
-      this.#visualizationOverlayDiv,
-      this.#hideAllRef,
-      cb => {
-        this.#updateDataCallbacks.push(cb);
-      },
-    );
-    tryToAttachOverlay(this.#controlWidget);
-    this.#elementIdToRectangle = new Map();
-    this.#currentVisualData = this.#initVisualizerData();
-    this.#blockedElementIds = new Set();
-    this.#listenToKeyboardEvent();
-  }
-
-  #listenToKeyboardEvent() {
-    document.addEventListener('keydown', event => {
-      if (event.key === 'd' || event.key === 'D') {
-        if (this.#currentVisualData.selectedElementId != null) {
-          this.#blockedElementIds.add(
-            this.#currentVisualData.selectedElementId,
-          );
-        }
-      }
-    });
-  }
-
-  #initVisualizerData(): VisualizerData {
-    const data: VisualizerData = {
-      detachedDOMElementsCount: 0,
-      totalDOMElementsCount: getDOMElementCount(),
-      selectedElementId: null,
-      selectedReactComponentStack: [],
-      pinnedElementId: null,
-      setPinnedElementId: (pinnedElementId: Nullable<number>) => {
-        if (data.pinnedElementId == pinnedElementId) {
-          return;
-        }
-        // unpin the original pinned element
-        const oldPin = this.#getOutlineElementByElementId(data.pinnedElementId);
-        (oldPin as AnyValue)?.__unpinned?.();
-        // pin the newly pinned element
-        const newPin = this.#getOutlineElementByElementId(pinnedElementId);
-        (newPin as AnyValue)?.__pinned?.();
-        data.pinnedElementId = pinnedElementId;
-      },
-    };
-    return data;
-  }
-
-  #getOutlineElementByElementId(
-    elementId: Nullable<number>,
-  ): Optional<Element> {
-    if (elementId == null) {
-      return null;
-    }
-    const info = this.#elementIdToRectangle.get(elementId);
-    if (info == null) {
-      return null;
-    }
-    return info.visualizerElementRef.deref();
-  }
-
-  #getElementIdSet(domElementInfoList: Array<DOMElementInfo>): Set<number> {
-    const elementIdSet = new Set<number>();
-    for (const info of domElementInfoList) {
-      const element = info.element.deref() as AnyValue;
-      if (element == null) {
-        continue;
-      }
-      const elementId = element.detachedElementId;
-      if (elementId == null) {
-        continue;
-      }
-      elementIdSet.add(elementId);
-    }
-    return elementIdSet;
-  }
-
-  #getComponentStackForElement(
-    elementId: Optional<number>,
-  ): ElementVisualizer[] {
-    const ret: ElementVisualizer[] = [];
-    if (elementId == null) {
-      return ret;
-    }
-    const visualizer = this.#elementIdToRectangle.get(elementId);
-    if (visualizer == null) {
-      return ret;
-    }
-    const element = visualizer.elementInfo.element.deref() as AnyValue;
-    if (element == null) {
-      return ret;
-    }
-    // traverse parent elements
-    let currentElement: Optional<Element> = element;
-    while (currentElement) {
-      if (currentElement.isConnected) {
-        break;
-      }
-      const elementId = (currentElement as AnyValue).detachedElementId;
-      const info = this.#elementIdToRectangle.get(elementId);
-      if (info == null) {
-        break;
-      }
-      ret.push(info);
-      currentElement = currentElement.parentElement;
-    }
-    return ret;
-  }
-
-  #traverseUpOutlineElements(
-    elementId: number,
-    callback: (element: HTMLElement) => void,
-  ): void {
-    const visualizer = this.#elementIdToRectangle.get(elementId);
-    if (visualizer == null) {
-      return;
-    }
-    const visitedElementIds = new Set<number>();
-    let currentElement: Optional<Element> =
-      visualizer.elementInfo.element.deref();
-    while (currentElement) {
-      if (currentElement.isConnected) {
-        break;
-      }
-      const elementIdStr = (currentElement as AnyValue).detachedElementId;
-      const elementId = parseInt(elementIdStr, 10);
-      if (visitedElementIds.has(elementId)) {
-        break;
-      }
-      visitedElementIds.add(elementId);
-      const visualizerInfo = this.#elementIdToRectangle.get(elementId);
-      if (visualizerInfo == null) {
-        break;
-      }
-      const visualizerElement = visualizerInfo.visualizerElementRef.deref();
-      if (visualizerElement == null) {
-        break;
-      }
-      callback(visualizerElement as HTMLElement);
-      currentElement = currentElement.parentElement;
-    }
-  }
-
-  #removeVisualizerElement(elementId: number) {
-    const visualizer = this.#elementIdToRectangle.get(elementId);
-    this.#elementIdToRectangle.delete(elementId);
-    if (visualizer == null) {
-      return;
-    }
-    const visualizerElement = visualizer.visualizerElementRef.deref();
-    if (visualizerElement == null) {
-      return;
-    }
-    // invoke the overlay specific code to clean
-    (visualizerElement as AnyValue)?.__cleanup?.();
-    visualizerElement.remove();
-  }
-
-  #cleanup(domElementInfoList: Array<DOMElementInfo>) {
-    // first pass remove all those painted visualizer for elements
-    // that either 1) is GCed or 2) is connected to the DOM tree
-    for (const [
-      elementId,
-      elementVistualizer,
-    ] of this.#elementIdToRectangle.entries()) {
-      if (elementId == null) {
-        continue;
-      }
-      const element = elementVistualizer.elementInfo.element.deref();
-      if (element == null) {
-        this.#removeVisualizerElement(elementId);
-      }
-    }
-
-    // second pass remove all those outlines that won't be painted later
-    const willPaintElementIdSet = this.#getElementIdSet(domElementInfoList);
-    for (const [elementId] of this.#elementIdToRectangle.entries()) {
-      if (elementId == null) {
-        continue;
-      }
-      if (
-        willPaintElementIdSet.has(elementId) &&
-        !this.#blockedElementIds.has(elementId)
-      ) {
-        continue;
-      }
-      this.#removeVisualizerElement(elementId);
-    }
-  }
-
-  #getZIndex(info: DOMElementInfo): number {
-    const zIndexBase = 9999;
-    const element = info.element.deref() as AnyValue;
-    if (element == null) {
-      return 0;
-    }
-    const elementId = element.detachedElementId;
-    if (elementId == null) {
-      return 0;
-    }
-    const rectangle = info.boundingRect ?? {width: 50, height: 50};
-    let ret = zIndexBase;
-    // element with a higher element id (created later) has a higher z-index
-    ret += parseInt(elementId, 10);
-    // element with bigger area will have a lower z-index
-    ret += Math.floor(10000000 / (rectangle.width * rectangle.height));
-    return ret;
-  }
-
-  #paint(domElementInfoList: Array<DOMElementInfo>) {
-    for (const info of domElementInfoList) {
-      const element = info.element.deref() as AnyValue;
-      if (element == null) {
-        continue;
-      }
-      const elementId = element.detachedElementId;
-      if (elementId == null) {
-        continue;
-      }
-      if (this.#blockedElementIds.has(elementId)) {
-        continue;
-      }
-      if (this.#elementIdToRectangle.has(elementId)) {
-        continue;
-      }
-      if (element == null) {
-        continue;
-      }
-      if (element.isConnected) {
-        continue;
-      }
-      const zIndex = this.#getZIndex(info);
-      const visualizerElementRef = createOverlayRectangle(
-        elementId,
-        info,
-        this.#visualizationOverlayDiv,
-        (selectedId: number | null) => {
-          this.#currentVisualData.selectedElementId = selectedId;
-          this.#updateVisualizerData();
-          if (selectedId == null) {
-            return;
-          }
-          this.#traverseUpOutlineElements(selectedId, element => {
-            (element as AnyValue)?.__selected?.();
-          });
-        },
-        (unselectedId: number | null) => {
-          if (this.#currentVisualData.selectedElementId === unselectedId) {
-            this.#currentVisualData.selectedElementId = null;
-            this.#updateVisualizerData();
-          }
-          if (unselectedId == null) {
-            return;
-          }
-          this.#traverseUpOutlineElements(unselectedId, element => {
-            (element as AnyValue)?.__unselected?.();
-          });
-        },
-        (clickedId: Nullable<number>) => {
-          if (this.#currentVisualData.pinnedElementId === clickedId) {
-            this.#currentVisualData.setPinnedElementId(null);
-          } else {
-            this.#currentVisualData.setPinnedElementId(clickedId);
-          }
-          this.#updateVisualizerData();
-        },
-        zIndex,
-      );
-      if (
-        visualizerElementRef == null ||
-        visualizerElementRef.deref() == null
-      ) {
-        return null;
-      }
-      const visualizer = {
-        elementInfo: info,
-        visualizerElementRef,
-      };
-      this.#elementIdToRectangle.set(elementId, visualizer);
-    }
-  }
-
-  #updateVisualizerData() {
-    const data = this.#currentVisualData;
-    if (data.pinnedElementId != null) {
-      data.selectedElementId = data.pinnedElementId;
-    }
-    data.detachedDOMElementsCount = this.#elementIdToRectangle.size;
-    data.totalDOMElementsCount = getDOMElementCount();
-    const selectedElementInfo = this.#elementIdToRectangle.get(
-      data.selectedElementId ?? -1,
-    )?.elementInfo;
-    data.selectedReactComponentStack =
-      selectedElementInfo?.componentStack ?? [];
-    for (const cb of this.#updateDataCallbacks) {
-      cb({...this.#currentVisualData});
-    }
-  }
-
-  repaint(domElementInfoList: Array<DOMElementInfo>) {
-    // this.#controlWidget.remove();
-    this.#visualizationOverlayDiv.remove();
-    this.#cleanup(domElementInfoList);
-    this.#paint(domElementInfoList);
-    this.#updateVisualizerData();
-    tryToAttachOverlay(this.#visualizationOverlayDiv);
-    // tryToAttachOverlay(this.#controlWidget);
-  }
-}

package/src/visual/dom-element-visualizer.ts

@@ -1,130 +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 {DOMElementInfo, Nullable, AnyValue} from '../core/types';
-import {createVisualizerElement} from './visual-utils';
-
-export default class DOMElementVisualizer {
-  #canvas: Nullable<HTMLCanvasElement>;
-  constructor() {
-    this.#canvas = null;
-  }
-
-  #paint(domElementInfoList: Array<DOMElementInfo>) {
-    if (!this.#canvas) {
-      const canvas = this.#createAndAppendCanvas();
-      this.#canvas = canvas;
-    }
-    this.#paintRectangles(domElementInfoList);
-  }
-
-  #cleanupExistingCanvas() {
-    // Clean up any existing canvas
-    if (this.#canvas) {
-      const ctx = this.#canvas.getContext('2d');
-      ctx?.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
-      this.#canvas.remove();
-      this.#canvas = null;
-    }
-  }
-
-  #tryToAttachCanvas(canvas: Element) {
-    if (document.body) {
-      document.body.appendChild(canvas);
-    }
-  }
-
-  #createAndAppendCanvas() {
-    // Create and insert the canvas element
-    const canvas = createVisualizerElement('canvas') as HTMLCanvasElement;
-    canvas.id = 'overlayCanvas';
-    this.#tryToAttachCanvas(canvas);
-
-    // Style the canvas to cover the entire page
-    canvas.style.position = 'absolute';
-    canvas.style.top = '0';
-    canvas.style.left = '0';
-    canvas.style.width = '100%';
-    canvas.style.height = '100%';
-    canvas.style.pointerEvents = 'none';
-    canvas.style.zIndex = '99999';
-
-    // Set canvas dimensions to match the window dimensions
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    return canvas;
-  }
-
-  #paintKey(info: DOMElementInfo): string {
-    const {boundingRect} = info;
-    return JSON.stringify({boundingRect});
-  }
-
-  #paintRectangles(domElementInfoList: Array<DOMElementInfo>) {
-    const canvas = this.#canvas;
-    if (!canvas) {
-      return;
-    }
-    // Get the 2D drawing context
-    const ctx = canvas.getContext('2d');
-    if (ctx == null) {
-      return;
-    }
-
-    // Set rectangle styles
-    ctx.strokeStyle = 'rgba(75, 192, 192, 0.8)';
-    ctx.lineWidth = 2;
-    ctx.fillStyle = 'rgba(75, 192, 192, 0.05)';
-    ctx.font = '11px Inter, system-ui, -apple-system, sans-serif';
-
-    const paintedInfo = new Set<string>();
-
-    // Draw the rectangles
-    domElementInfoList.forEach((info: DOMElementInfo) => {
-      const rect = info.boundingRect;
-      if (rect == null) {
-        return;
-      }
-      const key = this.#paintKey(info);
-      if (paintedInfo.has(key)) {
-        return;
-      }
-      paintedInfo.add(key);
-      ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
-      ctx.strokeRect(rect.left, rect.top, rect.width, rect.height);
-
-      const component = info.componentStack?.[0];
-      if (component) {
-        // attach detached element id key so that it is easy to search in heap snapshot
-        const element = info.element.deref() as AnyValue;
-        const elementId = element?.detachedElementId;
-        const elementIdText = elementId ? ` (${elementId})` : '';
-        const text = `${component}${elementIdText}`;
-        ctx.fillStyle = 'rgba(74, 131, 224, 1)';
-        ctx.fillText(text, rect.left + 5, rect.top + 15); // Draw the name
-        ctx.fillStyle = 'rgba(75, 192, 192, 0.05)';
-      }
-    });
-  }
-
-  #cleanup() {
-    const canvas = this.#canvas;
-    if (canvas) {
-      const ctx = canvas.getContext('2d');
-      ctx?.clearRect(0, 0, canvas.width, canvas.height);
-      canvas.parentNode?.removeChild(canvas);
-    }
-    this.#canvas = null;
-  }
-
-  repaint(domElementInfoList: Array<DOMElementInfo>) {
-    this.#cleanup();
-    this.#paint(domElementInfoList);
-  }
-}

package/src/visual/visual-utils.ts

@@ -1,89 +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 {AnyValue} from '../core/types';
-
-const VISUALIZER_DATA_ATTR = 'data-visualizer';
-
-function setVisualizerElement(element: Element) {
-  element.setAttribute(VISUALIZER_DATA_ATTR, 'true');
-  element.setAttribute('data-visualcompletion', 'ignore');
-}
-
-export function isVisualizerElement(element: Element): boolean {
-  return element.getAttribute(VISUALIZER_DATA_ATTR) === 'true';
-}
-
-export function createVisualizerElement(tag: string): HTMLElement {
-  const element = document.createElement(tag);
-  setVisualizerElement(element);
-  return element;
-}
-
-export function tryToAttachOverlay(overlayDiv: HTMLDivElement) {
-  if (document.body) {
-    document.body.appendChild(overlayDiv);
-  }
-}
-
-type EventListenerEntry = {
-  type: string;
-  cb: EventListenerOrEventListenerObject;
-  options?: boolean | AddEventListenerOptions;
-};
-
-const listenerMap = new WeakMap<EventTarget, EventListenerEntry[]>();
-
-export function addTrackedListener(
-  elRef: WeakRef<EventTarget>,
-  type: string,
-  cb: EventListenerOrEventListenerObject,
-  options?: boolean | AddEventListenerOptions,
-): void {
-  const el = elRef.deref();
-  if (!el) return;
-
-  el.addEventListener(type, cb, options);
-
-  if (!listenerMap.has(el)) {
-    listenerMap.set(el, []);
-  }
-
-  listenerMap.get(el)?.push({type, cb, options});
-}
-
-export function removeAllListeners(elRef: WeakRef<EventTarget>): void {
-  const el = elRef.deref();
-  if (!el) return;
-
-  const listeners = listenerMap.get(el);
-  if (!listeners) return;
-
-  for (const {type, cb, options} of listeners) {
-    el.removeEventListener(type, cb, options);
-  }
-
-  listenerMap.delete(el);
-}
-
-export function debounce<T extends (...args: AnyValue[]) => AnyValue>(
-  callback: T,
-  delay: number,
-): (...args: Parameters<T>) => void {
-  let timer: ReturnType<typeof setTimeout> | null = null;
-
-  return (...args: Parameters<T>) => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    timer = setTimeout(() => {
-      callback(...args);
-    }, delay);
-  };
-}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6", // Choose ES5 or ES6 for broad browser support
-    "module": "NodeNext", // Use ESNext for modern module systems; CommonJS for Node.js
-    "moduleResolution": "nodenext",
-    "lib": ["DOM", "ES2021"], // Include DOM for browser types
-    "outDir": "./dist", // Output directory for compiled files
-    "rootDir": "./src", // Source directory for TypeScript files
-    "strict": true, // Enable all strict type-checking options
-    "esModuleInterop": true, // Enable interoperability between CommonJS and ES Modules
-    "skipLibCheck": true, // Skip type-checking of declaration files for performance
-    "forceConsistentCasingInFileNames": true, // Ensure consistent casing in imports
-    "declaration": true, // generate .d.ts files
-    "composite": true
-  },
-  "include": ["src/**/*"], // Include all files in the src directory
-  "exclude": ["node_modules", "dist", "src/lib-index.js.flow"] // Exclude unnecessary directories
-}