setupHighlighter() — react Function Reference

Architecture documentation for the setupHighlighter() function in index.js from the react codebase.

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ setupHighlighter() — react Function Reference

Dependency Diagram

graph TD
  257ae4e1_d9ef_2cd8_8e8f_05070ef27bd0["setupHighlighter()"]
  5f7af8e4_c9b4_4304_fda4_1cd7083e24d7["index.js"]
  257ae4e1_d9ef_2cd8_8e8f_05070ef27bd0 -->|defined in| 5f7af8e4_c9b4_4304_fda4_1cd7083e24d7
  588a0ccc_6953_a79c_0da7_498ef35e4d47["hideOverlay()"]
  257ae4e1_d9ef_2cd8_8e8f_05070ef27bd0 -->|calls| 588a0ccc_6953_a79c_0da7_498ef35e4d47
  f1332dfb_38f6_9072_35cf_d53315e4c35c["showOverlay()"]
  257ae4e1_d9ef_2cd8_8e8f_05070ef27bd0 -->|calls| f1332dfb_38f6_9072_35cf_d53315e4c35c
  style 257ae4e1_d9ef_2cd8_8e8f_05070ef27bd0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/backend/views/Highlighter/index.js lines 26–501

export default function setupHighlighter(
  bridge: BackendBridge,
  agent: Agent,
): void {
  bridge.addListener('clearHostInstanceHighlight', clearHostInstanceHighlight);
  bridge.addListener('highlightHostInstance', highlightHostInstance);
  bridge.addListener('highlightHostInstances', highlightHostInstances);
  bridge.addListener('scrollToHostInstance', scrollToHostInstance);
  bridge.addListener('shutdown', stopInspectingHost);
  bridge.addListener('startInspectingHost', startInspectingHost);
  bridge.addListener('stopInspectingHost', stopInspectingHost);
  bridge.addListener('scrollTo', scrollDocumentTo);
  bridge.addListener('requestScrollPosition', sendScroll);

  let applyingScroll = false;

  function scrollDocumentTo({
    left,
    top,
    right,
    bottom,
  }: {
    left: number,
    top: number,
    right: number,
    bottom: number,
  }) {
    if (isReactNativeEnvironment()) {
      // Not implemented.
      return;
    }

    if (
      left === Math.round(window.scrollX) &&
      top === Math.round(window.scrollY)
    ) {
      return;
    }
    applyingScroll = true;
    window.scrollTo({
      top: top,
      left: left,
      behavior: 'smooth',
    });
  }

  let scrollTimer = null;
  function sendScroll() {
    if (isReactNativeEnvironment()) {
      // Not implemented.
      return;
    }

    if (scrollTimer) {
      clearTimeout(scrollTimer);
      scrollTimer = null;
    }
    if (applyingScroll) {
      return;
    }
    const left = window.scrollX;
    const top = window.scrollY;
    const right = left + window.innerWidth;
    const bottom = top + window.innerHeight;
    bridge.send('scrollTo', {left, top, right, bottom});
  }

  function scrollEnd() {
    // Upon scrollend send it immediately.
    sendScroll();
    applyingScroll = false;
  }

  if (
    typeof document === 'object' &&
    // $FlowFixMe[method-unbinding]
    typeof document.addEventListener === 'function'
  ) {
    document.addEventListener('scroll', () => {
      if (!scrollTimer) {
        // Periodically synchronize the scroll while scrolling.