buildHtml() — react Function Reference

Architecture documentation for the buildHtml() function in runtimePerf.ts from the react codebase.

Function typescript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ buildHtml() — react Function Reference

Dependency Diagram

graph TD
  73c3c58d_8d75_3991_3043_5d1fae4a0c23["buildHtml()"]
  a990453a_7717_776a_17fd_03fd2fdb9e90["runtimePerf.ts"]
  73c3c58d_8d75_3991_3043_5d1fae4a0c23 -->|defined in| a990453a_7717_776a_17fd_03fd2fdb9e90
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49["measurePerformance()"]
  1c4e507e_4ef7_2552_475e_1d13bbcd9d49 -->|calls| 73c3c58d_8d75_3991_3043_5d1fae4a0c23
  style 73c3c58d_8d75_3991_3043_5d1fae4a0c23 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/react-mcp-server/src/tools/runtimePerf.ts lines 201–285

function buildHtml(transpiled: string) {
  const html = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>React Performance Test</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/web-vitals@3.0.0/dist/web-vitals.iife.js"></script>
  <style>
    body { margin: 0; }
    #root { padding: 20px; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script>
    window.__RESULT__ = {
      renderTime: null,
      webVitals: {},
      reactProfiler: {},
      error: null,
    };

    webVitals.onCLS(({value}) => { window.__RESULT__.webVitals.cls = value; });
    webVitals.onLCP(({value}) => { window.__RESULT__.webVitals.lcp = value; });
    webVitals.onINP(({value}) => { window.__RESULT__.webVitals.inp = value; });
    webVitals.onFID(({value}) => { window.__RESULT__.webVitals.fid = value; });
    webVitals.onTTFB(({value}) => { window.__RESULT__.webVitals.ttfb = value; });

    try {
      ${transpiled}

      window.App = App;

      // Render the component to the DOM with profiling
      const AppComponent = window.App || (() => React.createElement('div', null, 'No App component exported'));

      const root = ReactDOM.createRoot(document.getElementById('root'), {
        onUncaughtError: (error, errorInfo) => {
          window.__RESULT__.error = error;
        }
      });

      const renderStart = performance.now()

      root.render(
        React.createElement(React.Profiler, {
          id: 'App',
          onRender: (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
            window.__RESULT__.reactProfiler.id = id;
            window.__RESULT__.reactProfiler.phase = phase;
            window.__RESULT__.reactProfiler.actualDuration = actualDuration;
            window.__RESULT__.reactProfiler.baseDuration = baseDuration;
            window.__RESULT__.reactProfiler.startTime = startTime;
            window.__RESULT__.reactProfiler.commitTime = commitTime;
          }
        }, React.createElement(AppComponent))
      );

      const renderEnd = performance.now();

      window.__RESULT__.renderTime = renderEnd - renderStart;
    } catch (error) {
      console.error('Error rendering component:', error);
      window.__RESULT__.error = error;
    }
  </script>
  <script>
    window.onerror = function(message, url, lineNumber) {
      const formattedMessage = message + '@' + lineNumber;
      if (window.__RESULT__.error && window.__RESULT__.error.message != null) {
        window.__RESULT__.error = window.__RESULT__.error + '\n\n' + formattedMessage;
      } else {
        window.__RESULT__.error = message + formattedMessage;
      }
    };
  </script>
</body>
</html>