react-native-windows 0.82.1 → 0.83.0-preview.0

package/Scripts/perf/create-perf-test.js

@@ -0,0 +1,343 @@
+#!/usr/bin/env node
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Interactive CLI to scaffold a new component performance test.
+ *
+ * Usage:
+ *   node vnext/Scripts/perf/create-perf-test.js
+ *   yarn perf:create           (from e2e-test-app-fabric)
+ *
+ * Generates a `.perf-test.tsx` file with:
+ *   - Class extending ComponentPerfTestBase
+ *   - Standard mount / unmount / rerender tests
+ *   - Placeholder for custom scenarios
+ *   - Correct imports, test ID, and category
+ *
+ * @format
+ */
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+function ask(rl, question, defaultValue) {
+  const suffix = defaultValue ? ` (${defaultValue})` : '';
+  return new Promise(resolve => {
+    rl.question(`${question}${suffix}: `, answer => {
+      resolve(answer.trim() || defaultValue || '');
+    });
+  });
+}
+
+function choose(rl, question, options, defaultIndex = 0) {
+  return new Promise(resolve => {
+    console.log(`\n${question}`);
+    options.forEach((opt, i) => {
+      const marker = i === defaultIndex ? ' (default)' : '';
+      console.log(`  ${i + 1}. ${opt}${marker}`);
+    });
+    rl.question(`Choice [${defaultIndex + 1}]: `, answer => {
+      const idx = parseInt(answer, 10) - 1;
+      resolve(
+        idx >= 0 && idx < options.length ? options[idx] : options[defaultIndex],
+      );
+    });
+  });
+}
+
+function toPascalCase(str) {
+  return str
+    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''))
+    .replace(/^(.)/, (_, c) => c.toUpperCase());
+}
+
+function toKebabCase(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+}
+
+/**
+ * Split a props string into individual prop tokens,
+ * correctly handling nested braces like onPress={() => {}}.
+ */
+function splitProps(propsStr) {
+  const props = [];
+  let current = '';
+  let braceDepth = 0;
+  let inString = null; // '"' or "'"
+
+  for (let i = 0; i < propsStr.length; i++) {
+    const ch = propsStr[i];
+
+    // Track string boundaries
+    if ((ch === '"' || ch === "'") && !inString) {
+      inString = ch;
+    } else if (ch === inString) {
+      inString = null;
+    }
+
+    if (!inString) {
+      if (ch === '{') braceDepth++;
+      if (ch === '}') braceDepth--;
+    }
+
+    // Split on whitespace only when outside braces/strings
+    if (ch === ' ' && braceDepth === 0 && !inString) {
+      if (current.trim()) props.push(current.trim());
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  if (current.trim()) props.push(current.trim());
+  return props;
+}
+
+const CATEGORIES = ['core', 'extended', 'interactive', 'list', 'community'];
+
+const PERF_TEST_ROOT = path.resolve(
+  __dirname,
+  '../../..',
+  'packages/e2e-test-app-fabric/test/__perf__',
+);
+
+// Known required props for common RN components.
+// These are auto-applied so the generated test works out of the box.
+const KNOWN_REQUIRED_PROPS = {
+  Button: 'title="Perf Test" onPress={() => {}}',
+  Switch: 'value={false}',
+  Image: 'source={{uri: "https://example.com/img.png"}}',
+  FlatList: 'data={[]} renderItem={() => null}',
+  SectionList: 'sections={[]} renderItem={() => null}',
+  Modal: 'visible={true}',
+  TouchableHighlight: 'onPress={() => {}}',
+  TouchableOpacity: 'onPress={() => {}}',
+  Pressable: 'onPress={() => {}}',
+};
+
+function generateTestFile({
+  componentName,
+  pascalName,
+  kebabName,
+  importPath,
+  category,
+  hasChildren,
+  childrenText,
+  requiredProps,
+}) {
+  const testId = `perf-test-${kebabName}`;
+  const instanceName = `${pascalName.charAt(0).toLowerCase() + pascalName.slice(1)}PerfTest`;
+
+  const allProps = [`testID={this.testId}`];
+  if (requiredProps) {
+    // Parse individual JSX props, handling nested braces like {() => {}}
+    allProps.push(...splitProps(requiredProps));
+  }
+  allProps.push('style={styles.default}', '{...props}');
+
+  let createComponentBody;
+  if (hasChildren) {
+    const propLines = allProps.map(p => `        ${p}`).join('\n');
+    createComponentBody = `    return (\n      <${componentName}\n${propLines}>\n        ${childrenText}\n      </${componentName}>\n    );`;
+  } else if (allProps.length > 3) {
+    const propLines = allProps.map(p => `        ${p}`).join('\n');
+    createComponentBody = `    return (\n      <${componentName}\n${propLines}\n      />\n    );`;
+  } else {
+    createComponentBody = `    return <${componentName} ${allProps.join(' ')} />;`;
+  }
+
+  return `/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Performance tests for ${componentName} component.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import {${componentName}, StyleSheet} from '${importPath}';
+import {
+  ComponentPerfTestBase,
+  measurePerf,
+} from '@react-native-windows/perf-testing';
+import type {IScenario, PerfMetrics} from '@react-native-windows/perf-testing';
+
+class ${pascalName}PerfTest extends ComponentPerfTestBase {
+  readonly componentName = '${componentName}';
+  readonly category = '${category}' as const;
+  readonly testId = '${testId}';
+
+  createComponent(props?: Record<string, unknown>): React.ReactElement {
+${createComponentBody}
+  }
+
+  getCustomScenarios(): IScenario[] {
+    return [];
+  }
+}
+
+const ${instanceName} = new ${pascalName}PerfTest();
+
+describe('${componentName} Performance', () => {
+  test('mount time', async () => {
+    const perf = await ${instanceName}.measureMount();
+    expect(perf).toMatchPerfSnapshot();
+  });
+
+  test('unmount time', async () => {
+    const perf = await ${instanceName}.measureUnmount();
+    expect(perf).toMatchPerfSnapshot();
+  });
+
+  test('rerender time', async () => {
+    const perf = await ${instanceName}.measureRerender();
+    expect(perf).toMatchPerfSnapshot();
+  });
+});
+
+const styles = StyleSheet.create({
+  default: {
+});
+`;
+}
+
+async function main() {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  console.log('\n🧪  React Native Windows — Performance Test Generator\n');
+  console.log('This will create a new .perf-test.tsx file with mount,');
+  console.log('unmount, and rerender tests for your component.\n');
+  console.log('Examples:');
+  console.log(
+    '  Component: ScrollView   | Import: react-native | Category: core     | Children: yes',
+  );
+  console.log(
+    '  Component: Button       | Import: react-native | Category: core     | Children: no',
+  );
+  console.log(
+    '  Component: Image        | Import: react-native | Category: core     | Children: no',
+  );
+  console.log(
+    '  Component: Pressable    | Import: react-native | Category: interactive | Children: yes',
+  );
+  console.log(
+    '  Component: Slider       | Import: @react-native-community/slider | Category: community | Children: no',
+  );
+  console.log('');
+
+  const rawName = await ask(
+    rl,
+    'Component name (e.g. ScrollView, Image, Pressable)',
+  );
+  if (!rawName) {
+    console.error('❌  Component name is required.');
+    rl.close();
+    process.exit(1);
+  }
+
+  const pascalName = toPascalCase(rawName);
+  const kebabName = toKebabCase(rawName);
+
+  const importPath = await ask(
+    rl,
+    'Import path for the component',
+    'react-native',
+  );
+
+  const category = await choose(
+    rl,
+    'Select component category:',
+    CATEGORIES,
+    0,
+  );
+
+  const hasChildrenAnswer = await ask(
+    rl,
+    'Does this component render children? (y/N)',
+    'N',
+  );
+  const hasChildren = hasChildrenAnswer.toLowerCase() === 'y';
+  let childrenText = 'Sample Content';
+  if (hasChildren) {
+    const customChildren = await ask(
+      rl,
+      'Children text/content',
+      'Sample Content',
+    );
+    childrenText = customChildren;
+  }
+
+  let requiredProps = KNOWN_REQUIRED_PROPS[rawName] || '';
+  if (requiredProps) {
+    console.log(`\n  Auto-detected required props: ${requiredProps}`);
+    const override = await ask(
+      rl,
+      'Required props (Enter to accept, or type custom)',
+      requiredProps,
+    );
+    requiredProps = override;
+  } else {
+    const customProps = await ask(
+      rl,
+      'Required props (e.g. title="Test" onPress={() => {}}) – leave blank if none',
+      '',
+    );
+    requiredProps = customProps;
+  }
+
+  rl.close();
+
+  const categoryDir = path.join(PERF_TEST_ROOT, category);
+  if (!fs.existsSync(categoryDir)) {
+    fs.mkdirSync(categoryDir, {recursive: true});
+    console.log(
+      `\n📁  Created directory: ${path.relative(process.cwd(), categoryDir)}`,
+    );
+  }
+
+  const outputFile = path.join(categoryDir, `${pascalName}.perf-test.tsx`);
+  if (fs.existsSync(outputFile)) {
+    console.error(
+      `\n❌  File already exists: ${path.relative(process.cwd(), outputFile)}`,
+    );
+    console.error('    Delete it first or choose a different name.');
+    process.exit(1);
+  }
+
+  const content = generateTestFile({
+    componentName: rawName,
+    pascalName,
+    kebabName,
+    importPath,
+    category,
+    hasChildren,
+    childrenText,
+    requiredProps,
+  });
+
+  fs.writeFileSync(outputFile, content, 'utf8');
+
+  const relPath = path.relative(process.cwd(), outputFile);
+  console.log(`\n✅  Created: ${relPath}`);
+  console.log(`\nNext steps:`);
+  console.log(`  1. Review and customize the generated test file`);
+  console.log(`  2. Add any component-specific custom scenarios`);
+  console.log(`  3. Run:  yarn perf --testPathPattern=${pascalName}`);
+  console.log(
+    `  4. Generate baseline:  yarn perf:update --testPathPattern=${pascalName}`,
+  );
+  console.log('');
+}
+
+main().catch(err => {
+  console.error('Error:', err);
+  process.exit(1);
+});

package/Scripts/perf/post-pr-comment.js

@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Post perf test results as a GitHub PR comment.
+ *
+ * Uses the GitHub API to find/update an existing perf comment on the PR,
+ * or create a new one. Designed to be called from GitHub Actions.
+ *
+ * Usage:
+ *   node vnext/Scripts/perf/post-pr-comment.js [options]
+ *
+ * Options:
+ *   --report <path>     Path to markdown report (default: .perf-results/report.md)
+ *   --summary <path>    Path to JSON summary (default: .perf-results/report.json)
+ *   --pr <number>       PR number (default: from GITHUB_EVENT)
+ *   --dry-run           Print the comment but don't post it
+ *
+ * Environment:
+ *   GITHUB_TOKEN        Required for posting comments
+ *   GITHUB_REPOSITORY   e.g. microsoft/react-native-windows
+ *   GITHUB_EVENT_PATH   Path to event.json (auto-set in GH Actions)
+ *
+ * @format
+ */
+
+'use strict';
+
+const fs = require('fs');
+const https = require('https');
+const path = require('path');
+
+const COMMENT_MARKER = '<!-- rnw-perf-results -->';
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const opts = {
+    report: '.perf-results/report.md',
+    summary: '.perf-results/report.json',
+    pr: null,
+    dryRun: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--report':
+        opts.report = args[++i];
+        break;
+      case '--summary':
+        opts.summary = args[++i];
+        break;
+      case '--pr':
+        opts.pr = parseInt(args[++i], 10);
+        break;
+      case '--dry-run':
+        opts.dryRun = true;
+        break;
+    }
+  }
+
+  // Attempt to detect PR number from GH Actions event
+  if (!opts.pr && process.env.GITHUB_EVENT_PATH) {
+    try {
+      const event = JSON.parse(
+        fs.readFileSync(process.env.GITHUB_EVENT_PATH, 'utf-8'),
+      );
+      if (event.pull_request) {
+        opts.pr = event.pull_request.number;
+      } else if (event.number) {
+        opts.pr = event.number;
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  return opts;
+}
+
+function githubRequest(method, apiPath, body) {
+  const token = process.env.GITHUB_TOKEN;
+  if (!token) {
+    throw new Error('GITHUB_TOKEN environment variable is required');
+  }
+
+  const repo =
+    process.env.GITHUB_REPOSITORY || 'microsoft/react-native-windows';
+
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: 'api.github.com',
+      port: 443,
+      path: `/repos/${repo}${apiPath}`,
+      method,
+      headers: {
+        Authorization: `token ${token}`,
+        Accept: 'application/vnd.github.v3+json',
+        'User-Agent': 'rnw-perf-tests',
+        'Content-Type': 'application/json',
+      },
+    };
+
+    const req = https.request(options, res => {
+      let data = '';
+      res.on('data', chunk => (data += chunk));
+      res.on('end', () => {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(data ? JSON.parse(data) : null);
+        } else {
+          reject(
+            new Error(
+              `GitHub API ${method} ${apiPath} returned ${res.statusCode}: ${data}`,
+            ),
+          );
+        }
+      });
+    });
+
+    req.on('error', reject);
+
+    if (body) {
+      req.write(JSON.stringify(body));
+    }
+    req.end();
+  });
+}
+
+async function findExistingComment(prNumber) {
+  let page = 1;
+  while (true) {
+    const comments = await githubRequest(
+      'GET',
+      `/issues/${prNumber}/comments?per_page=100&page=${page}`,
+    );
+    if (!comments || comments.length === 0) break;
+
+    const existing = comments.find(
+      c => c.body && c.body.includes(COMMENT_MARKER),
+    );
+    if (existing) return existing;
+
+    if (comments.length < 100) break;
+    page++;
+  }
+  return null;
+}
+
+async function main() {
+  const opts = parseArgs();
+
+  // Load markdown report
+  if (!fs.existsSync(opts.report)) {
+    console.error(`❌ Report not found: ${opts.report}`);
+    console.error('Run compare-results.js first.');
+    process.exit(1);
+  }
+
+  const markdown = fs.readFileSync(opts.report, 'utf-8');
+
+  // Load summary for status message
+  let summary = {hasRegressions: false};
+  if (fs.existsSync(opts.summary)) {
+    summary = JSON.parse(fs.readFileSync(opts.summary, 'utf-8'));
+  }
+
+  // Build comment body with hidden marker for idempotent updates
+  const commentBody = `${COMMENT_MARKER}\n${markdown}`;
+
+  if (opts.dryRun) {
+    console.log('=== DRY RUN — would post the following comment ===\n');
+    console.log(commentBody);
+    console.log('\n=== End of comment ===');
+    process.exit(summary.hasRegressions ? 1 : 0);
+  }
+
+  if (!opts.pr) {
+    console.error('❌ Could not determine PR number.');
+    console.error('Use --pr <number> or ensure GITHUB_EVENT_PATH is set.');
+    process.exit(1);
+  }
+
+  console.log(`📤 Posting perf results to PR #${opts.pr}...`);
+
+  try {
+    // Try to update existing comment
+    const existing = await findExistingComment(opts.pr);
+    if (existing) {
+      await githubRequest('PATCH', `/issues/comments/${existing.id}`, {
+        body: commentBody,
+      });
+      console.log(`✅ Updated existing comment (id: ${existing.id})`);
+    } else {
+      await githubRequest('POST', `/issues/${opts.pr}/comments`, {
+        body: commentBody,
+      });
+      console.log('✅ Created new comment');
+    }
+  } catch (err) {
+    console.error(`❌ Failed to post comment: ${err.message}`);
+    // Don't fail the build if commenting fails — the results are in artifacts
+    console.log('Results are still available as workflow artifacts.');
+  }
+
+  process.exit(summary.hasRegressions ? 1 : 0);
+}
+
+main().catch(err => {
+  console.error(err);
+  process.exit(1);
+});

package/Shared/Hermes/HermesRuntimeTargetDelegate.cpp

@@ -275,4 +275,12 @@ tracing::RuntimeSamplingProfile HermesRuntimeTargetDelegate::collectSamplingProf
       std::make_unique<HermesRawRuntimeProfile>(std::move(profile)));
 }
 
+std::optional<folly::dynamic> HermesRuntimeTargetDelegate::serializeStackTrace(
+    const facebook::react::jsinspector_modern::StackTrace &stackTrace) {
+  // #TODO :
+  // react native implementation:
+  // https://github.com/facebook/react-native/commit/b31a2fb4b8d3a5e1f12efc8ec3951a0e02004757
+  return std::nullopt;
+}
+
 } // namespace Microsoft::ReactNative

package/Shared/Hermes/HermesRuntimeTargetDelegate.h

@@ -69,6 +69,9 @@ class HermesRuntimeTargetDelegate : public facebook::react::jsinspector_modern::
    */
   facebook::react::jsinspector_modern::tracing::RuntimeSamplingProfile collectSamplingProfile() override;
 
+  std::optional<folly::dynamic> serializeStackTrace(
+      const facebook::react::jsinspector_modern::StackTrace &stackTrace) override;
+
  private:
   std::shared_ptr<HermesRuntimeHolder> hermesRuntimeHolder_;
   const HermesUniqueCdpDebugApi hermesCdpDebugApi_;