parseReactComponentTree() — react Function Reference

Architecture documentation for the parseReactComponentTree() function in componentTree.ts from the react codebase.

Function typescript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ parseReactComponentTree() — react Function Reference

Dependency Diagram

graph TD
  57865954_7b03_c1a5_a66e_86c37585fd74["parseReactComponentTree()"]
  c41109aa_ed41_cf13_fa67_3bdff2ead249["componentTree.ts"]
  57865954_7b03_c1a5_a66e_86c37585fd74 -->|defined in| c41109aa_ed41_cf13_fa67_3bdff2ead249
  style 57865954_7b03_c1a5_a66e_86c37585fd74 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/react-mcp-server/src/tools/componentTree.ts lines 3–38

export async function parseReactComponentTree(url: string): Promise<string> {
  try {
    const browser = await puppeteer.connect({
      browserURL: 'http://127.0.0.1:9222',
      defaultViewport: null,
    });

    const pages = await browser.pages();

    let localhostPage = null;
    for (const page of pages) {
      const pageUrl = await page.url();

      if (pageUrl.startsWith(url)) {
        localhostPage = page;
        break;
      }
    }

    if (localhostPage) {
      const componentTree = await localhostPage.evaluate(() => {
        return (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.rendererInterfaces
          .get(1)
          .__internal_only_getComponentTree();
      });

      return componentTree;
    } else {
      throw new Error(
        `Could not open the page at ${url}. Is your server running?`,
      );
    }
  } catch (error) {
    throw new Error('Failed extract component tree' + error);
  }
}