@memlab/lens 1.0.0 → 1.0.1

package/src/utils/weak-ref-utils.ts

@@ -1,308 +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 {
-  AnyValue,
-  Entry,
-  FallbackMode,
-  Nullable,
-  WeakMapPlusOptions,
-} from '../core/types';
-
-const globalScope: typeof globalThis =
-  typeof window !== 'undefined' ? window : self;
-
-const _weakMap: typeof WeakMap<AnyValue, AnyValue> | null =
-  globalScope.WeakMap ?? null;
-const _weakMapIsNative: boolean = isWeakMapNative();
-const _weakSet: typeof WeakSet<AnyValue> | null = globalScope.WeakSet ?? null;
-const _weakSetIsNative: boolean = isWeakSetNative();
-const _weakRef: typeof WeakRef<AnyValue> | null = globalScope.WeakRef ?? null;
-const _weakRefIsNative: boolean = isWeakRefNative();
-const _weakAPIsAreNative: boolean =
-  _weakMapIsNative && _weakSetIsNative && _weakRefIsNative;
-
-export class WeakRefNoOp<T extends object | ReadonlyArray<unknown>> {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(_targetObject: T) {
-    // to be overridden
-  }
-  deref(): T | undefined {
-    return undefined;
-  }
-}
-
-export class WeakSetNoOp<T extends object | ReadonlyArray<unknown>> {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(_iterable?: Iterable<T> | null) {
-    // to be overridden
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  add(_value: T): this {
-    return this;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  delete(_value: T): boolean {
-    return false;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  has(_value: T): boolean {
-    return false;
-  }
-}
-
-export class WeakMapNoOp<K extends object | ReadonlyArray<unknown>, V> {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  constructor(_iterable?: Iterable<[K, V]> | null) {
-    // to be overridden
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  delete(_key: K): boolean {
-    return false;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  get(_key: K): V | undefined {
-    return undefined;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  has(_key: K): boolean {
-    return false;
-  }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  set(_key: K, _value: V): this {
-    return this;
-  }
-}
-
-export type WeakMapOrNoOp<TK extends object, TV> =
-  | WeakMap<TK, TV>
-  | WeakMapNoOp<TK, TV>;
-export type WeakSetOrNoOp<T extends object> = WeakSet<T> | WeakSetNoOp<T>;
-export type WeakRefOrNoOp<T extends object> = WeakRef<T> | WeakRefNoOp<T>;
-
-export type WeakMapOrFallback = typeof WeakMap | typeof WeakMapNoOp;
-export type WeakSetOrFallback = typeof WeakSet | typeof WeakSetNoOp;
-export type WeakRefOrFallback = typeof WeakRef | typeof WeakRefNoOp;
-
-export function getNativeWeakMap(): typeof WeakMap | null {
-  return _weakMapIsNative ? _weakMap : null;
-}
-
-export function getNativeWeakMapOrFallback(): WeakMapOrFallback {
-  return _weakMapIsNative && _weakMap ? _weakMap : WeakMapNoOp;
-}
-
-export function getNativeWeakSet(): typeof WeakSet | null {
-  return _weakSetIsNative ? _weakSet : null;
-}
-
-export function getNativeWeakSetOrFallback(): WeakSetOrFallback {
-  return _weakSetIsNative && _weakSet ? _weakSet : WeakSetNoOp;
-}
-
-export function getNativeWeakRef(): typeof WeakRef | null {
-  return _weakRefIsNative ? _weakRef : null;
-}
-
-export function getNativeWeakRefOrFallback(): WeakRefOrFallback {
-  return _weakRefIsNative && _weakRef ? _weakRef : WeakRefNoOp;
-}
-
-function normalize(input: string): string | null {
-  return typeof input.replace === 'function'
-    ? input.replace(/\n/g, ' ').replace(/\s+/g, ' ')
-    : null;
-}
-
-export function isWeakMapNative(): boolean {
-  return (
-    _weakMap !== null &&
-    typeof _weakMap.toString === 'function' &&
-    normalize(_weakMap.toString()) === 'function WeakMap() { [native code] }'
-  );
-}
-
-export function isWeakSetNative(): boolean {
-  return (
-    _weakSet !== null &&
-    typeof _weakSet.toString === 'function' &&
-    normalize(_weakSet.toString()) === 'function WeakSet() { [native code] }'
-  );
-}
-
-export function isWeakRefNative(): boolean {
-  return (
-    _weakRef !== null &&
-    typeof _weakRef.toString === 'function' &&
-    normalize(_weakRef.toString()) === 'function WeakRef() { [native code] }'
-  );
-}
-
-export function isWeakAPINative(): boolean {
-  return _weakAPIsAreNative;
-}
-
-export class WeakMapPlus<K extends object, V> {
-  private isWeak: boolean;
-  private fallbackMode: FallbackMode;
-  private strongMap: Nullable<Map<K, V>> = null;
-  private noopMap = false;
-
-  private entriesMap: Map<symbol, Entry<K, V>> = new Map();
-  private keyToId: WeakMap<K, symbol> = new WeakMap();
-  private cleanupInterval: number;
-
-  constructor(options: WeakMapPlusOptions = {}) {
-    const {fallback = 'strong', cleanupMs = 1000} = options;
-    this.isWeak = _weakAPIsAreNative;
-    this.fallbackMode = fallback;
-
-    if (!this.isWeak) {
-      if (fallback === 'strong') {
-        this.strongMap = new Map<K, V>();
-      } else if (fallback === 'noop') {
-        this.noopMap = true;
-      }
-      this.cleanupInterval = -1;
-    } else {
-      this.cleanupInterval = setInterval(
-        () => this.cleanup(),
-        cleanupMs,
-      ) as unknown as number;
-    }
-  }
-
-  private getOrCreateId(key: K): symbol {
-    let id = this.keyToId.get(key);
-    if (!id) {
-      id = Symbol();
-      this.keyToId.set(key, id);
-    }
-    return id;
-  }
-
-  set(key: K, value: V): this {
-    if (!this.isWeak) {
-      if (this.noopMap) return this;
-      this.strongMap?.set(key, value);
-      return this;
-    }
-
-    const id = this.getOrCreateId(key);
-    this.entriesMap.set(id, {ref: new WeakRef(key), value});
-    return this;
-  }
-
-  get(key: K): V | undefined {
-    if (!this.isWeak) {
-      if (this.noopMap) return undefined;
-      return this.strongMap?.get(key);
-    }
-
-    const id = this.keyToId.get(key);
-    if (!id) return undefined;
-
-    const entry = this.entriesMap.get(id);
-    const derefKey = entry?.ref?.deref();
-    return derefKey ? entry?.value : undefined;
-  }
-
-  has(key: K): boolean {
-    if (!this.isWeak) {
-      if (this.noopMap) return false;
-      return this.strongMap?.has(key) ?? false;
-    }
-
-    const id = this.keyToId.get(key);
-    if (!id) return false;
-
-    const entry = this.entriesMap.get(id);
-    return !!(entry && entry.ref.deref());
-  }
-
-  delete(key: K): boolean {
-    if (!this.isWeak) {
-      if (this.noopMap) return false;
-      return this.strongMap?.delete(key) ?? false;
-    }
-
-    const id = this.keyToId.get(key);
-    if (!id) return false;
-
-    this.keyToId.delete(key);
-    return this.entriesMap.delete(id);
-  }
-
-  private *liveEntries(): IterableIterator<[K, V]> {
-    for (const [, entry] of this.entriesMap) {
-      const key = entry.ref.deref();
-      if (key) {
-        yield [key, entry.value];
-      }
-    }
-  }
-
-  entries(): IterableIterator<[K, V]> {
-    if (!this.isWeak) {
-      if (this.noopMap) return [][Symbol.iterator]();
-      return this.strongMap?.entries() ?? [][Symbol.iterator]();
-    }
-    return this.liveEntries();
-  }
-
-  keys(): IterableIterator<K> {
-    return (function* (self: WeakMapPlus<K, V>) {
-      for (const [key] of self.entries()) yield key;
-    })(this);
-  }
-
-  values(): IterableIterator<V> {
-    return (function* (self: WeakMapPlus<K, V>) {
-      for (const [, value] of self.entries()) yield value;
-    })(this);
-  }
-
-  [Symbol.iterator](): IterableIterator<[K, V]> {
-    return this.entries();
-  }
-
-  get size(): number {
-    if (!this.isWeak) {
-      if (this.noopMap) return 0;
-      return this.strongMap?.size ?? 0;
-    }
-    let count = 0;
-    // eslint-disable-next-line
-    for (const _ of this.liveEntries()) {
-      count++;
-    }
-    return count;
-  }
-
-  getFallbackMode(): FallbackMode {
-    return this.fallbackMode;
-  }
-
-  cleanup(): void {
-    if (!this.isWeak) return;
-
-    for (const [id, entry] of this.entriesMap) {
-      if (!entry.ref.deref()) {
-        this.entriesMap.delete(id);
-      }
-    }
-  }
-
-  destroy(): void {
-    if (this.isWeak) {
-      clearInterval(this.cleanupInterval);
-    }
-  }
-}

package/src/visual/components/component-stack-panel.ts

@@ -1,85 +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 {
-  RegisterDataUpdateCallback,
-  VisualizerData,
-} from '../dom-element-visualizer-interactive';
-import {createVisualizerElement, debounce} from '../visual-utils';
-
-export function createComponentStackPanel(
-  registerDataUpdateCallback: RegisterDataUpdateCallback,
-): HTMLDivElement {
-  const panel = createVisualizerElement('div') as HTMLDivElement;
-  panel.style.width = '100%';
-  // Ensure max height is at most 80% of viewport height
-  panel.style.maxHeight = '80vh';
-  panel.style.background = 'rgba(0, 0, 0, 0.5)';
-  panel.style.borderTop = '1px solid rgba(255, 255, 255, 0.1)';
-  panel.style.display = 'none';
-  panel.style.flexDirection = 'column';
-  panel.style.padding = '8px';
-  panel.style.boxSizing = 'border-box';
-  panel.style.borderRadius = '8px';
-  panel.style.overflowY = 'scroll';
-  panel.style.overflowX = 'hidden';
-  panel.style.textShadow = 'none';
-  panel.style.font = '9px Inter, system-ui, -apple-system, sans-serif';
-  panel.style.color = 'white';
-  panel.id = 'memory-visualization-component-stack-panel';
-
-  let pinned = false;
-
-  panel.addEventListener('mouseenter', () => {
-    pinned = true;
-  });
-
-  panel.addEventListener('mouseleave', () => {
-    pinned = false;
-  });
-
-  // Register data update callback to update component stack panel
-  registerDataUpdateCallback(
-    debounce((data: VisualizerData) => {
-      if (pinned) {
-        return;
-      }
-      panel.style.display = data.selectedElementId != null ? 'flex' : 'none';
-      panel.innerHTML = '';
-
-      if (
-        data.selectedElementId == null ||
-        !data.selectedReactComponentStack?.length
-      ) {
-        return;
-      }
-
-      const title = createVisualizerElement('div');
-      title.textContent = 'Component Stack:';
-      title.style.fontWeight = 'bold';
-      title.style.marginBottom = '8px';
-      panel.appendChild(title);
-
-      let actualComponentStackLength = 0;
-      data.selectedReactComponentStack.forEach((component: string) => {
-        const componentDiv = createVisualizerElement('div');
-        componentDiv.style.marginBottom = '4px';
-        componentDiv.textContent = component;
-        panel.appendChild(componentDiv);
-        ++actualComponentStackLength;
-      });
-
-      if (actualComponentStackLength === 0) {
-        title.remove();
-      }
-    }, 1),
-  );
-
-  return panel;
-}

package/src/visual/components/control-widget.ts

@@ -1,96 +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 {RegisterDataUpdateCallback} from '../dom-element-visualizer-interactive';
-import {createVisualizerElement} from '../visual-utils';
-import {createStatusText} from './status-text';
-import {createToggleButton} from './toggle-button';
-import {createComponentStackPanel} from './component-stack-panel';
-
-export function createControlWidget(
-  overlayDiv: HTMLDivElement,
-  hideAllRef: {value: boolean},
-  registerDataUpdateCallback: RegisterDataUpdateCallback,
-): HTMLDivElement {
-  const controlWidget = createVisualizerElement('div') as HTMLDivElement;
-  controlWidget.style.position = 'fixed';
-  controlWidget.style.top = '50px';
-  controlWidget.style.right = '50px';
-  controlWidget.style.width = '400px';
-  controlWidget.style.background = 'rgba(0, 0, 0, 0.7)';
-  controlWidget.style.border = 'none';
-  controlWidget.style.borderRadius = '8px';
-  controlWidget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)';
-  controlWidget.style.zIndex = '999999999';
-  controlWidget.style.display = 'flex';
-  controlWidget.style.flexDirection = 'column';
-  controlWidget.style.textShadow = 'none';
-  controlWidget.style.boxSizing = 'border-box';
-  controlWidget.style.font = '9px Inter, system-ui, -apple-system, sans-serif';
-  controlWidget.id = 'memory-visualization-control-widget';
-
-  // Create header section
-  const header = createVisualizerElement('div') as HTMLDivElement;
-  header.style.display = 'flex';
-  header.style.alignItems = 'center';
-  header.style.justifyContent = 'flex-start';
-  header.style.padding = '0 8px';
-  header.style.height = '36px';
-  controlWidget.appendChild(header);
-
-  // Create component stack panel
-  const componentStackPanel = createComponentStackPanel(
-    registerDataUpdateCallback,
-  );
-  controlWidget.appendChild(componentStackPanel);
-
-  supportDragging(controlWidget);
-
-  const toggleButton = createToggleButton(overlayDiv, hideAllRef);
-  header.appendChild(toggleButton);
-
-  const statusText = createStatusText(registerDataUpdateCallback);
-  header.appendChild(statusText);
-
-  return controlWidget;
-}
-
-function supportDragging(controlWidget: HTMLDivElement) {
-  let isDragging = false;
-  let offsetX = 0;
-  let offsetY = 0;
-
-  controlWidget.addEventListener('mousedown', e => {
-    // Only allow dragging from the header
-    if (
-      !(e.target as HTMLElement).closest(
-        '#memory-visualization-control-widget > div:first-child',
-      )
-    ) {
-      return;
-    }
-    isDragging = true;
-    offsetX = e.clientX - controlWidget.offsetLeft;
-    offsetY = e.clientY - controlWidget.offsetTop;
-    controlWidget.style.cursor = 'move';
-  });
-
-  document.addEventListener('mousemove', e => {
-    if (isDragging) {
-      controlWidget.style.left = `${e.clientX - offsetX}px`;
-      controlWidget.style.top = `${e.clientY - offsetY}px`;
-      controlWidget.style.right = '';
-    }
-  });
-
-  document.addEventListener('mouseup', () => {
-    isDragging = false;
-    controlWidget.style.cursor = 'default';
-  });
-}

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

@@ -1,167 +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, DOMElementInfo} from '../../core/types';
-import {IntersectionObserverManager} from '../../utils/intersection-observer';
-import {
-  createVisualizerElement,
-  addTrackedListener,
-  removeAllListeners,
-} from '../visual-utils';
-
-type OutlineState = {pinned: boolean; selected: boolean};
-
-const MAX_Z_INDEX = `${Math.pow(2, 30) - 1}`;
-
-// Set up intersection observer
-const observerManager = IntersectionObserverManager.getInstance();
-
-function createLabelDiv(): HTMLElement {
-  const labelDiv = createVisualizerElement('div');
-
-  labelDiv.style.color = 'white';
-  labelDiv.style.background = 'rgba(75, 192, 192, 0.8)';
-  labelDiv.style.textShadow = 'none';
-  labelDiv.style.font = '9px Inter, system-ui, -apple-system, sans-serif';
-  labelDiv.style.padding = '2px 6px';
-  labelDiv.style.borderRadius = '2px';
-  labelDiv.style.whiteSpace = 'nowrap'; // Force single-line text
-  labelDiv.style.position = 'absolute'; // Allows positioning above parent
-  labelDiv.style.bottom = '100%'; // Places it just above the parent
-  labelDiv.style.left = '0'; // Align left with parent
-  labelDiv.style.marginBottom = '2px'; // Small space between label and parent
-  labelDiv.style.display = 'none';
-  labelDiv.style.zIndex = MAX_Z_INDEX;
-
-  return labelDiv;
-}
-
-const labelDiv = createLabelDiv();
-
-export function createOverlayRectangle(
-  elementId: number,
-  info: DOMElementInfo,
-  container: HTMLDivElement,
-  setSelectedId: (id: number | null) => void,
-  setUnSelectedId: (id: number | null) => void,
-  setClickedId: (id: number | null) => void,
-  zIndex: number,
-): WeakRef<Element> | null {
-  const rect = info.boundingRect;
-  if (!rect) return null;
-
-  const div = createVisualizerElement('div') as HTMLDivElement;
-  div.style.position = 'absolute';
-  div.style.width = `${rect.width}px`;
-  div.style.height = `${rect.height}px`;
-  div.style.top = `${rect.top + rect.scrollTop}px`;
-  div.style.left = `${rect.left + rect.scrollLeft}px`;
-  div.style.border = '1px dotted rgba(75, 192, 192, 0.8)';
-  div.style.borderRadius = '1px';
-  div.style.zIndex = zIndex.toString();
-
-  const componentStack = info.componentStack ?? [];
-  const componentName = componentStack[0] ?? '';
-
-  let pinned = false;
-  let selected = false;
-
-  const divRef = new WeakRef(div);
-
-  addTrackedListener(divRef, 'mouseover', () => {
-    // note that elementIdStr should not be genearated in the
-    // inside the function scope of createOverlayRectangle
-    // to avoid unnecessary retainer path in the heap snapshot
-    const elementIdStr = `memory-id-${elementId}@`;
-    labelDiv.remove();
-    divRef.deref()?.appendChild(labelDiv);
-    labelDiv.textContent = `${componentName} (${elementIdStr})`;
-    labelDiv.style.display = 'inline-block';
-    setSelectedId(elementId);
-  });
-
-  addTrackedListener(divRef, 'mouseout', () => {
-    labelDiv.style.display = 'none';
-    labelDiv.remove();
-    setUnSelectedId(elementId);
-  });
-
-  addTrackedListener(divRef, 'click', () => {
-    setClickedId(elementId);
-  });
-
-  (div as AnyValue).__selected = () => {
-    selected = true;
-    styleOnInteraction(divRef, {selected, pinned});
-  };
-
-  (div as AnyValue).__unselected = () => {
-    selected = false;
-    styleOnInteraction(divRef, {selected, pinned});
-  };
-
-  (div as AnyValue).__pinned = () => {
-    pinned = true;
-    styleOnInteraction(divRef, {selected, pinned});
-  };
-
-  (div as AnyValue).__unpinned = () => {
-    pinned = false;
-    styleOnInteraction(divRef, {selected, pinned});
-  };
-
-  observerManager.observe(divRef, (entry: IntersectionObserverEntry) => {
-    if (!entry.isIntersecting) {
-      div.style.visibility = 'hidden';
-    } else {
-      div.style.visibility = 'visible';
-    }
-  });
-
-  (div as AnyValue).__cleanup = () => {
-    const div = divRef.deref();
-    if (div == null) {
-      return;
-    }
-    removeAllListeners(divRef);
-    observerManager.unobserve(divRef);
-    (div as AnyValue).__cleanup = null;
-    (div as AnyValue).__selected = null;
-    (div as AnyValue).__unselected = null;
-    (div as AnyValue).__pinned = null;
-    (div as AnyValue).__unpinned = null;
-  };
-
-  container.appendChild(div);
-  return divRef;
-}
-
-function styleOnInteraction(
-  divRef: WeakRef<HTMLDivElement>,
-  state: OutlineState,
-): void {
-  const div = divRef.deref();
-  if (div == null) {
-    return;
-  }
-  const {pinned, selected} = state;
-  if (!pinned) {
-    if (selected) {
-      div.style.border = '1px solid rgba(75, 192, 192, 0.8)';
-      div.style.background = 'rgba(75, 192, 192, 0.02)';
-    } else {
-      div.style.border = '1px dotted rgba(75, 192, 192, 0.8)';
-      div.style.background = '';
-    }
-  } else {
-    // pinned
-    div.style.border = '1px solid rgba(255, 215, 0, 0.9)';
-    div.style.background = 'rgba(255, 215, 0, 0.08)';
-  }
-}

package/src/visual/components/status-text.ts

@@ -1,53 +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 {AnyValue} from '../../core/types';
-import {
-  RegisterDataUpdateCallback,
-  VisualizerData,
-} from '../dom-element-visualizer-interactive';
-import {createVisualizerElement} from '../visual-utils';
-
-function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
-export function createStatusText(
-  registerDataUpdateCallback: RegisterDataUpdateCallback,
-): HTMLDivElement {
-  const statusWidget = createVisualizerElement('div') as HTMLDivElement;
-  statusWidget.style.marginLeft = '10px';
-  statusWidget.style.color = 'white';
-  statusWidget.style.fontSize = '10px';
-  statusWidget.style.fontFamily = 'Inter, system-ui, sans-serif';
-  statusWidget.style.overflow = 'hidden';
-  statusWidget.style.whiteSpace = 'nowrap';
-  statusWidget.style.textOverflow = 'ellipsis';
-  statusWidget.textContent = '';
-
-  registerDataUpdateCallback((data: VisualizerData) => {
-    const performance = (window as AnyValue).performance;
-    const memory = performance?.memory;
-
-    const usedHeap = memory?.usedJSHeapSize ?? 0;
-    const totalHeap = memory?.totalJSHeapSize ?? 0;
-    const totalElements = data.totalDOMElementsCount ?? 0;
-    const detachedElements = data.detachedDOMElementsCount ?? 0;
-
-    statusWidget.textContent =
-      `DOM: ${totalElements} total, ${detachedElements} detached | ` +
-      `Heap: ${formatBytes(usedHeap)} / ${formatBytes(totalHeap)}`;
-  });
-
-  return statusWidget;
-}