Repository: facebook/react
File: compiler/packages/react-mcp-server/src/utils/runtimePerf.ts (TypeScript)

Code before:
  const browser = await puppeteer.launch();

  const page = await browser.newPage();
  await page.setViewport({width: 1280, height: 720});
  const html = buildHtml(transpiled);
  await page.setContent(html, {waitUntil: 'networkidle0'});

  await page.waitForFunction(
    'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)'
  );

  const result = await page.evaluate(() => {
    return (window as any).__RESULT__;
  });

  await browser.close();
  return result;
}

/**
 * Transform AST into browser-compatible JavaScript
 * @param {babel.types.File} ast - The AST to transform
 * @param {Object} opts - Transformation options
 * @returns {Promise<string>} - The transpiled code
 */
async function transformAsync(ast: babel.types.Node, options: any) {
  const result = await babel.transformFromAstAsync(ast, undefined, {
    ...options,
    filename: 'file.jsx',
    plugins: [
      () => ({
        visitor: {
          ImportDeclaration(path: any) {
            const value = path.node.source.value;
            if (value === 'react' || value === 'react-dom') {
              path.remove();
            }
          },
        },
      }),
    ],
  });

  return result?.code || '';
}

function buildHtml(transpiled: string) {
  const html = `
        <!DOCTYPE html>
        <html>
        <head>

Review comment (performance):
you can fix the `any` here by just removing this function and `parseAsync`. You can inline it directly into `measurePerformance` so everything is typed correctly.

Code after:
    filename: 'file.jsx',
    plugins: [
      () => ({
        visitor: {
          ImportDeclaration(
            path: babel.NodePath<babel.types.ImportDeclaration>,
          ) {
            const value = path.node.source.value;
            if (value === 'react' || value === 'react-dom') {
              path.remove();
            }
          },
        },
      }),
    ],
  });

  const transpiled = transformResult?.code || undefined;
  if (!transpiled) {
    throw new Error('Failed to transpile code');
  }

  const browser = await puppeteer.launch();

  const page = await browser.newPage();
  await page.setViewport({width: 1280, height: 720});
  const html = buildHtml(transpiled);
  await page.setContent(html, {waitUntil: 'networkidle0'});

  await page.waitForFunction(
    'window.__RESULT__ !== undefined && (window.__RESULT__.renderTime !== null || window.__RESULT__.error !== null)',
  );

  const result = await page.evaluate(() => {
    return (window as any).__RESULT__;
  });

  await browser.close();
  return result;
}

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>