react-native-windows 0.82.3 → 0.83.0-preview.1

package/Scripts/perf/compare-results.js

@@ -0,0 +1,357 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * Compare perf test results from the current (head) run against
+ * committed baselines from the base branch. Produces a markdown
+ * comparison report and exits with non-zero if regressions detected.
+ *
+ * Usage:
+ *   node vnext/Scripts/perf/compare-results.js [options]
+ *
+ * Options:
+ *   --results <path>    Path to CI results JSON (default: .perf-results/results.json)
+ *   --baselines <dir>   Path to base branch perf snapshots directory
+ *   --output <path>     Path to write markdown report (default: .perf-results/report.md)
+ *   --fail-on-regression  Exit 1 if regressions found (default: true in CI)
+ *
+ * @format
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const opts = {
+    results: '.perf-results/results.json',
+    baselines: null, // auto-detect from test file paths
+    output: '.perf-results/report.md',
+    failOnRegression: !!process.env.CI,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+      case '--results':
+        opts.results = args[++i];
+        break;
+      case '--baselines':
+        opts.baselines = args[++i];
+        break;
+      case '--output':
+        opts.output = args[++i];
+        break;
+      case '--fail-on-regression':
+        opts.failOnRegression = true;
+        break;
+      case '--no-fail-on-regression':
+        opts.failOnRegression = false;
+        break;
+    }
+  }
+  return opts;
+}
+
+function getSnapshotPath(testFilePath) {
+  const dir = path.dirname(testFilePath);
+  const basename = path.basename(testFilePath);
+  return path.join(dir, '__perf_snapshots__', `${basename}.perf-baseline.json`);
+}
+
+function loadSnapshot(filePath) {
+  if (fs.existsSync(filePath)) {
+    return JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+  }
+  return {};
+}
+
+const DEFAULT_THRESHOLD = {
+  maxDurationIncrease: 10,
+  maxDuration: Infinity,
+  minAbsoluteDelta: 3,
+  maxRenderCount: 5,
+  minRuns: 10,
+};
+
+function resolveThreshold(threshold) {
+  return {
+    ...DEFAULT_THRESHOLD,
+    ...threshold,
+    // JSON.stringify(Infinity) === 'null', so restore it
+    maxDuration:
+      threshold.maxDuration === null || threshold.maxDuration === undefined
+        ? Infinity
+        : threshold.maxDuration,
+  };
+}
+
+function compareEntry(head, base, threshold) {
+  // median for comparison
+  const percentChange =
+    base.medianDuration > 0
+      ? ((head.medianDuration - base.medianDuration) / base.medianDuration) *
+        100
+      : head.medianDuration > 0
+        ? Infinity
+        : 0;
+
+  const errors = [];
+
+  const absoluteDelta = head.medianDuration - base.medianDuration;
+  const minAbsoluteDelta =
+    threshold.minAbsoluteDelta ?? DEFAULT_THRESHOLD.minAbsoluteDelta;
+  if (
+    percentChange > threshold.maxDurationIncrease &&
+    absoluteDelta > minAbsoluteDelta
+  ) {
+    errors.push(
+      `Duration increased by ${percentChange.toFixed(1)}% / +${absoluteDelta.toFixed(2)}ms (threshold: ${threshold.maxDurationIncrease}% & ${minAbsoluteDelta}ms)`,
+    );
+  }
+  if (head.medianDuration > threshold.maxDuration) {
+    errors.push(
+      `Duration ${head.medianDuration.toFixed(2)}ms exceeds max ${threshold.maxDuration}ms`,
+    );
+  }
+  if (head.renderCount > threshold.maxRenderCount) {
+    errors.push(
+      `Render count ${head.renderCount} exceeds max ${threshold.maxRenderCount}`,
+    );
+  }
+
+  return {
+    name: head.name,
+    head,
+    base,
+    percentChange,
+    passed: errors.length === 0,
+    errors,
+  };
+}
+
+function compareSuite(suiteName, headSnaps, baseSnaps) {
+  const results = [];
+
+  for (const [key, headEntry] of Object.entries(headSnaps)) {
+    const baseEntry = baseSnaps[key];
+    const threshold = resolveThreshold({
+      ...DEFAULT_THRESHOLD,
+      ...(headEntry.threshold || {}),
+    });
+
+    if (!baseEntry) {
+      results.push({
+        name: headEntry.metrics.name,
+        head: headEntry.metrics,
+        base: null,
+        percentChange: null,
+        passed: true,
+        errors: [],
+        isNew: true,
+      });
+      continue;
+    }
+
+    results.push(compareEntry(headEntry.metrics, baseEntry.metrics, threshold));
+  }
+
+  // Detect removed scenarios
+  for (const key of Object.keys(baseSnaps)) {
+    if (!headSnaps[key]) {
+      results.push({
+        name: `[REMOVED] ${baseSnaps[key].metrics.name}`,
+        head: null,
+        base: baseSnaps[key].metrics,
+        percentChange: null,
+        passed: true,
+        errors: [],
+        isRemoved: true,
+      });
+    }
+  }
+
+  return {suiteName, results, hasRegressions: results.some(r => !r.passed)};
+}
+
+function generateMarkdown(suiteComparisons, ciResults) {
+  let md = '## Performance Test Results\n\n';
+
+  md += `**Branch:** \`${ciResults.branch}\`  \n`;
+  md += `**Commit:** \`${ciResults.commitSha.slice(0, 8)}\`  \n`;
+  md += `**Time:** ${ciResults.timestamp}  \n`;
+  md += `**Tests:** ${ciResults.summary.passed}/${ciResults.summary.totalTests} passed  \n\n`;
+
+  const allRegressions = suiteComparisons.filter(s => s.hasRegressions);
+  if (allRegressions.length > 0) {
+    md += '### ❌ Regressions Detected\n\n';
+    for (const suite of allRegressions) {
+      md += `#### ${suite.suiteName}\n\n`;
+      md += '| Scenario | Baseline | Current | Change | Status |\n';
+      md += '|----------|----------|---------|--------|--------|\n';
+      for (const r of suite.results.filter(x => !x.passed)) {
+        const baseline = r.base ? `${r.base.meanDuration.toFixed(2)}ms` : 'N/A';
+        const current = r.head ? `${r.head.meanDuration.toFixed(2)}ms` : 'N/A';
+        const change =
+          r.percentChange != null ? `+${r.percentChange.toFixed(1)}%` : 'N/A';
+        md += `| ${r.name} | ${baseline} | ${current} | ${change} | ❌ |\n`;
+      }
+      md += '\n';
+      for (const r of suite.results.filter(x => !x.passed)) {
+        if (r.errors.length > 0) {
+          md += `> **${r.name}:** ${r.errors.join('; ')}  \n`;
+        }
+      }
+      md += '\n';
+    }
+  }
+
+  // Passed suites
+  const passedSuites = suiteComparisons.filter(s => !s.hasRegressions);
+  if (passedSuites.length > 0) {
+    md += '### ✅ Passed\n\n';
+    md += '<details>\n<summary>';
+    const totalPassed = passedSuites.reduce(
+      (acc, s) => acc + s.results.length,
+      0,
+    );
+    md += `${totalPassed} scenario(s) across ${passedSuites.length} suite(s) — no regressions`;
+    md += '</summary>\n\n';
+
+    for (const suite of passedSuites) {
+      md += `#### ${suite.suiteName}\n\n`;
+      md += '| Scenario | Mean | Median | StdDev | Renders | vs Baseline |\n';
+      md += '|----------|------|--------|--------|---------|-------------|\n';
+      for (const r of suite.results) {
+        if (!r.head) continue;
+        const change =
+          r.percentChange != null
+            ? `${r.percentChange >= 0 ? '+' : ''}${r.percentChange.toFixed(1)}%`
+            : 'new';
+        md +=
+          `| ${r.name}` +
+          ` | ${r.head.meanDuration.toFixed(2)}ms` +
+          ` | ${r.head.medianDuration.toFixed(2)}ms` +
+          ` | ±${r.head.stdDev.toFixed(2)}ms` +
+          ` | ${r.head.renderCount}` +
+          ` | ${change} |\n`;
+      }
+      md += '\n';
+    }
+    md += '</details>\n';
+  }
+
+  // New scenarios
+  const allNew = suiteComparisons.flatMap(s => s.results.filter(r => r.isNew));
+  if (allNew.length > 0) {
+    md += '\n### 🆕 New Scenarios\n\n';
+    md += `${allNew.length} new scenario(s) added (no baseline comparison).  \n`;
+    md +=
+      'These will become baselines after merge. Run `yarn perf:update` to capture locally.\n';
+  }
+
+  return md;
+}
+
+function main() {
+  const opts = parseArgs();
+
+  // 1. Load CI results JSON
+  if (!fs.existsSync(opts.results)) {
+    console.error(`❌ Results file not found: ${opts.results}`);
+    console.error('Run perf tests with CI=true first: CI=true yarn perf:ci');
+    process.exit(1);
+  }
+
+  const ciResults = JSON.parse(fs.readFileSync(opts.results, 'utf-8'));
+  console.log(
+    `📊 Loaded ${ciResults.suites.length} suite(s) from ${opts.results}`,
+  );
+
+  // 2. Compare each suite against its committed baseline
+  const suiteComparisons = [];
+
+  for (const suite of ciResults.suites) {
+    // Head snapshots come from the CI run
+    const headSnaps = suite.snapshots || {};
+
+    // Base snapshots come from the committed .perf.snap files
+    // In CI, the base branch is checked out into a separate dir,
+    // or we read the committed snapshots from the test file path
+    let baseSnapPath;
+    if (opts.baselines) {
+      // Explicit baseline directory — look for matching snap file
+      const relPath = path.relative(process.cwd(), suite.testFilePath);
+      baseSnapPath = path.join(
+        opts.baselines,
+        path.dirname(relPath),
+        '__perf_snapshots__',
+        `${path.basename(suite.testFilePath)}.perf.snap`,
+      );
+    } else {
+      // Default: baselines live adjacent to test files (committed in repo)
+      baseSnapPath = getSnapshotPath(suite.testFilePath);
+    }
+
+    const baseSnaps = loadSnapshot(baseSnapPath);
+    console.log(
+      `  📋 ${suite.suiteName}: ${Object.keys(headSnaps).length} head / ${Object.keys(baseSnaps).length} base snapshots`,
+    );
+
+    suiteComparisons.push(compareSuite(suite.suiteName, headSnaps, baseSnaps));
+  }
+
+  // 3. Generate markdown report
+  const markdown = generateMarkdown(suiteComparisons, ciResults);
+
+  const outputDir = path.dirname(opts.output);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, {recursive: true});
+  }
+  fs.writeFileSync(opts.output, markdown, 'utf-8');
+  console.log(`\n📝 Report written to ${opts.output}`);
+
+  // 4. Also write a machine-readable summary
+  const summaryPath = opts.output.replace(/\.md$/, '.json');
+  const summaryData = {
+    hasRegressions: suiteComparisons.some(s => s.hasRegressions),
+    totalSuites: suiteComparisons.length,
+    totalScenarios: suiteComparisons.reduce(
+      (acc, s) => acc + s.results.length,
+      0,
+    ),
+    regressions: suiteComparisons.flatMap(s =>
+      s.results
+        .filter(r => !r.passed)
+        .map(r => ({
+          suite: s.suiteName,
+          scenario: r.name,
+          percentChange: r.percentChange,
+          errors: r.errors,
+        })),
+    ),
+  };
+  fs.writeFileSync(summaryPath, JSON.stringify(summaryData, null, 2) + '\n');
+
+  // 5. Print summary
+  const hasRegressions = suiteComparisons.some(s => s.hasRegressions);
+  if (hasRegressions) {
+    const count = summaryData.regressions.length;
+    console.error(`\n❌ ${count} regression(s) detected!`);
+    for (const reg of summaryData.regressions) {
+      console.error(
+        `  - ${reg.suite} / ${reg.scenario}: ${reg.errors.join('; ')}`,
+      );
+    }
+    if (opts.failOnRegression) {
+      process.exit(1);
+    }
+  } else {
+    console.log(
+      `\n✅ All ${summaryData.totalScenarios} scenarios passed — no regressions.`,
+    );
+  }
+}
+
+main();

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);
+});