react-native-windows 0.73.10 → 0.74.0-preview.1

package/src/private/webapis/performance/__tests__/NativePerformanceMock-test.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+const NativePerformanceMock = require('../__mocks__/NativePerformance').default;
+const PerformanceObserver = require('../PerformanceObserver').default;
+
+describe('NativePerformanceMock', () => {
+  jest.mock(
+    '../NativePerformanceObserver',
+    () => require('../__mocks__/NativePerformanceObserver').default,
+  );
+
+  it('marks get reported', async () => {
+    let entries = [];
+    const observer = new PerformanceObserver((list, _observer) => {
+      entries = [...entries, ...list.getEntries()];
+    });
+
+    observer.observe({type: 'mark'});
+
+    NativePerformanceMock.mark('mark1', 0, 10);
+    NativePerformanceMock.mark('mark2', 5, 10);
+    NativePerformanceMock.mark('mark3', 10, 20);
+
+    await jest.runAllTicks();
+    expect(entries).toHaveLength(3);
+    expect(entries.map(e => e.name)).toStrictEqual(['mark1', 'mark2', 'mark3']);
+    expect(entries.map(e => e.startTime)).toStrictEqual([0, 5, 10]);
+  });
+
+  it('measures get reported', async () => {
+    let entries = [];
+    const observer = new PerformanceObserver((list, _observer) => {
+      entries = [...entries, ...list.getEntries()];
+    });
+
+    observer.observe({entryTypes: ['measure']});
+
+    NativePerformanceMock.mark('mark0', 0.0, 1.0);
+    NativePerformanceMock.mark('mark1', 1.0, 3.0);
+    NativePerformanceMock.mark('mark2', 2.0, 4.0);
+
+    NativePerformanceMock.measure('measure0', 0, 2);
+    NativePerformanceMock.measure('measure1', 0, 2, 4);
+    NativePerformanceMock.measure(
+      'measure2',
+      0,
+      0,
+      undefined,
+      'mark1',
+      'mark2',
+    );
+    NativePerformanceMock.measure('measure3', 0, 0, 5, 'mark1');
+    NativePerformanceMock.measure(
+      'measure4',
+      1.5,
+      0,
+      undefined,
+      undefined,
+      'mark2',
+    );
+
+    await jest.runAllTicks();
+    expect(entries).toHaveLength(5);
+    expect(entries.map(e => e.name)).toStrictEqual([
+      'measure0',
+      'measure1',
+      'measure2',
+      'measure3',
+      'measure4',
+    ]);
+    expect(entries.map(e => e.startTime)).toStrictEqual([0, 0, 1, 1, 1.5]);
+    expect(entries.map(e => e.duration)).toStrictEqual([2, 4, 1, 5, 0.5]);
+  });
+});

package/src/private/webapis/performance/__tests__/NativePerformanceObserverMock-test.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import NativePerformanceObserverMock from '../__mocks__/NativePerformanceObserver';
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+describe('NativePerformanceObserver', () => {
+  it('correctly starts and stops listening to entries in a nominal scenario', async () => {
+    NativePerformanceObserverMock.startReporting(
+      RawPerformanceEntryTypeValues.MARK,
+    );
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 10,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'event1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 20,
+    });
+
+    const entriesResult = NativePerformanceObserverMock.popPendingEntries();
+    expect(entriesResult).not.toBe(undefined);
+    const entries = entriesResult.entries;
+
+    expect(entries.length).toBe(2);
+    expect(entries[0].name).toBe('mark1');
+    expect(entries[1].name).toBe('mark2');
+
+    const entriesResult1 = NativePerformanceObserverMock.popPendingEntries();
+    expect(entriesResult1).not.toBe(undefined);
+    const entries1 = entriesResult1.entries;
+    expect(entries1.length).toBe(0);
+
+    NativePerformanceObserverMock.stopReporting('mark');
+  });
+
+  it('correctly clears/gets entries', async () => {
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'event1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.clearEntries(
+      RawPerformanceEntryTypeValues.UNDEFINED,
+    );
+
+    expect(NativePerformanceObserverMock.getEntries()).toStrictEqual([]);
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.logRawEntry({
+      name: 'entry1',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+      startTime: 0,
+      duration: 0,
+    });
+
+    NativePerformanceObserverMock.clearEntries(
+      RawPerformanceEntryTypeValues.UNDEFINED,
+      'entry1',
+    );
+
+    expect(
+      NativePerformanceObserverMock.getEntries().map(e => e.name),
+    ).toStrictEqual(['entry2']);
+  });
+});

package/src/private/webapis/performance/__tests__/Performance-test.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+const Performance = require('../Performance').default;
+
+jest.mock(
+  '../NativePerformance',
+  () => require('../__mocks__/NativePerformance').default,
+);
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
+describe('Performance', () => {
+  it('clearEntries removes correct entry types', async () => {
+    const performance = new Performance();
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    performance.measure('entry1', {start: 0, duration: 0});
+    performance.measure('measure2', {start: 0, duration: 0});
+
+    performance.clearMarks();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry1',
+      'measure2',
+    ]);
+
+    performance.mark('entry2', 0, 0);
+    performance.mark('mark3', 0, 0);
+
+    performance.clearMeasures();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry2',
+      'mark3',
+    ]);
+
+    performance.clearMarks();
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([]);
+  });
+
+  it('getEntries only works with allowed entry types', async () => {
+    const performance = new Performance();
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    performance.getEntriesByType('mark');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByType('measure');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1');
+    expect(console.warn).not.toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1', 'event');
+    expect(console.warn).toHaveBeenCalled();
+
+    performance.getEntriesByName('entry1', 'mark');
+    expect(console.warn).toHaveBeenCalled();
+
+    performance.getEntriesByType('event');
+    expect(console.warn).toHaveBeenCalled();
+  });
+
+  it('getEntries works with marks and measures', async () => {
+    const performance = new Performance();
+    performance.clearMarks();
+    performance.clearMeasures();
+
+    performance.mark('entry1', 0, 0);
+    performance.mark('mark2', 0, 0);
+
+    performance.measure('entry1', {start: 0, duration: 0});
+    performance.measure('measure2', {start: 0, duration: 0});
+
+    expect(performance.getEntries().map(e => e.name)).toStrictEqual([
+      'entry1',
+      'mark2',
+      'entry1',
+      'measure2',
+    ]);
+
+    expect(performance.getEntriesByType('mark').map(e => e.name)).toStrictEqual(
+      ['entry1', 'mark2'],
+    );
+
+    expect(
+      performance.getEntriesByType('measure').map(e => e.name),
+    ).toStrictEqual(['entry1', 'measure2']);
+
+    expect(
+      performance.getEntriesByName('entry1').map(e => e.entryType),
+    ).toStrictEqual(['mark', 'measure']);
+
+    expect(
+      performance.getEntriesByName('entry1', 'measure').map(e => e.entryType),
+    ).toStrictEqual(['measure']);
+  });
+});

package/src/private/webapis/performance/__tests__/PerformanceObserver-test.js

@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+// NOTE: Jest mocks of transitive dependencies don't appear to work with
+// ES6 module imports, therefore forced to use commonjs style imports here.
+const NativePerformanceObserver = require('../NativePerformanceObserver');
+const PerformanceObserver = require('../PerformanceObserver').default;
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
+describe('PerformanceObserver', () => {
+  it('can be mocked by a reference NativePerformanceObserver implementation', async () => {
+    expect(NativePerformanceObserver).not.toBe(undefined);
+
+    let totalEntries = 0;
+    const observer = new PerformanceObserver((list, _observer) => {
+      expect(_observer).toBe(observer);
+      const entries = list.getEntries();
+      expect(entries).toHaveLength(1);
+      const entry = entries[0];
+      expect(entry.name).toBe('mark1');
+      expect(entry.entryType).toBe('mark');
+      totalEntries += entries.length;
+    });
+    expect(() => observer.observe({entryTypes: ['mark']})).not.toThrow();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 0,
+    });
+
+    await jest.runAllTicks();
+    expect(totalEntries).toBe(1);
+    observer.disconnect();
+  });
+
+  it('prevents durationThreshold to be used together with entryTypes', async () => {
+    const observer = new PerformanceObserver((list, _observer) => {});
+
+    expect(() =>
+      observer.observe({entryTypes: ['mark'], durationThreshold: 100}),
+    ).toThrow();
+  });
+
+  it('handles durationThreshold argument as expected', async () => {
+    let entries = [];
+    const observer = new PerformanceObserver((list, _observer) => {
+      entries = [...entries, ...list.getEntries()];
+    });
+
+    observer.observe({type: 'mark', durationThreshold: 100});
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark3',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 100,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark4',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 500,
+    });
+
+    await jest.runAllTicks();
+    expect(entries).toHaveLength(3);
+    expect(entries.map(e => e.name)).toStrictEqual(['mark1', 'mark3', 'mark4']);
+  });
+
+  it('correctly works with multiple PerformanceObservers with durationThreshold', async () => {
+    let entries1 = [];
+    const observer1 = new PerformanceObserver((list, _observer) => {
+      entries1 = [...entries1, ...list.getEntries()];
+    });
+
+    let entries2 = [];
+    const observer2 = new PerformanceObserver((list, _observer) => {
+      entries2 = [...entries2, ...list.getEntries()];
+    });
+
+    let entries3 = [];
+    const observer3 = new PerformanceObserver((list, _observer) => {
+      entries3 = [...entries3, ...list.getEntries()];
+    });
+
+    let entries4 = [];
+    const observer4 = new PerformanceObserver((list, _observer) => {
+      entries4 = [...entries4, ...list.getEntries()];
+    });
+
+    observer2.observe({type: 'mark', durationThreshold: 200});
+    observer1.observe({type: 'mark', durationThreshold: 100});
+    observer3.observe({type: 'mark', durationThreshold: 300});
+    observer3.observe({type: 'measure', durationThreshold: 500});
+    observer4.observe({entryTypes: ['mark', 'measure']});
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark1',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark2',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 20,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark3',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 100,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark4',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 500,
+    });
+
+    await jest.runAllTicks();
+    observer1.disconnect();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark5',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark6',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 300,
+    });
+
+    await jest.runAllTicks();
+    observer3.disconnect();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'mark7',
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime: 0,
+      duration: 200,
+    });
+
+    await jest.runAllTicks();
+    observer4.disconnect();
+
+    expect(entries1.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark3',
+      'mark4',
+    ]);
+    expect(entries2.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark4',
+      'mark5',
+      'mark6',
+      'mark7',
+    ]);
+    expect(entries3.map(e => e.name)).toStrictEqual(['mark4', 'mark6']);
+    expect(entries4.map(e => e.name)).toStrictEqual([
+      'mark1',
+      'mark2',
+      'mark3',
+      'mark4',
+      'mark5',
+      'mark6',
+      'mark7',
+    ]);
+  });
+});

package/template/cpp-app/src/App.cpp

@@ -22,17 +22,17 @@ App::App() noexcept
 {
 #if BUNDLE
     JavaScriptBundleFile(L"index.windows");
-    InstanceSettings().UseWebDebugger(false);
     InstanceSettings().UseFastRefresh(false);
 #else
     JavaScriptBundleFile(L"index");
-    InstanceSettings().UseWebDebugger(true);
     InstanceSettings().UseFastRefresh(true);
 #endif
 
 #if _DEBUG
+    InstanceSettings().UseDirectDebugger(true);
     InstanceSettings().UseDeveloperSupport(true);
 #else
+    InstanceSettings().UseDirectDebugger(false);
     InstanceSettings().UseDeveloperSupport(false);
 #endif
 

package/template/cs-app/src/App.xaml.cs

@@ -11,17 +11,17 @@ namespace {{ namespace }}
         {
 #if BUNDLE
             JavaScriptBundleFile = "index.windows";
-            InstanceSettings.UseWebDebugger = false;
             InstanceSettings.UseFastRefresh = false;
 #else
             JavaScriptBundleFile = "index";
-            InstanceSettings.UseWebDebugger = true;
             InstanceSettings.UseFastRefresh = true;
 #endif
 
 #if DEBUG
+            InstanceSettings.UseDirectDebugger = true;
             InstanceSettings.UseDeveloperSupport = true;
 #else
+            InstanceSettings.UseDirectDebugger = false;
             InstanceSettings.UseDeveloperSupport = false;
 #endif
 

package/templates/cpp-app/jest.config.windows.js

@@ -0,0 +1,3 @@
+const config = {};
+
+module.exports = require('@rnx-kit/jest-preset')('windows', config);

package/templates/cpp-app/metro.config.js

@@ -48,8 +48,6 @@ const config = {
         inlineRequires: true,
       },
     }),
-    // This fixes the 'missing-asset-registry-path` error (see https://github.com/microsoft/react-native-windows/issues/11437)
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
   },
 };
 

package/templates/cpp-app/template.config.js

@@ -15,15 +15,12 @@ const util = require('util');
 
 const glob = util.promisify(require('glob'));
 
+const templateUtils = require('../templateUtils');
+
 async function preInstall(config = {}, options = {}) {}
 
 async function getFileMappings(config = {}, options = {}) {
-  const rnwPath = path.dirname(
-    require.resolve('react-native-windows', [config.root]),
-  );
-  const rnwVersion = require(path.join(rnwPath, 'package.json')).version;
-
-  const devMode = existsSync(path.join(rnwPath, 'src'));
+  const {rnwVersion, devMode} = templateUtils.getRnwInfo(config, options);
 
   const projectName =
     config?.project?.windows?.project?.projectName ?? options?.name ?? 'MyApp';
@@ -36,6 +33,10 @@ async function getFileMappings(config = {}, options = {}) {
   const packageGuid = uuid.v4();
   const currentUser = username.sync(); // Gets the current username depending on the platform.
 
+  const appJsonPath = path.join(config?.root ?? process.cwd(), 'app.json');
+  const mainComponentName =
+    (existsSync(appJsonPath) ? require(appJsonPath).name : null) ?? projectName;
+
   const cppNugetPackages = [];
 
   const replacements = {
@@ -48,7 +49,7 @@ async function getFileMappings(config = {}, options = {}) {
 
     rnwVersion: rnwVersion,
 
-    mainComponentName: projectName, // TODO: replace with app.json name
+    mainComponentName,
 
     // Visual Studio is very picky about the casing of the guids for projects, project references and the solution
     // https://www.bing.com/search?q=visual+studio+project+guid+casing&cvid=311a5ad7f9fc41089507b24600d23ee7&FORM=ANAB01&PC=U531
@@ -59,7 +60,7 @@ async function getFileMappings(config = {}, options = {}) {
     // packaging and signing variables:
     packageGuidLower: `{${packageGuid.toLowerCase()}}`,
     packageGuidUpper: `{${packageGuid.toUpperCase()}}`,
-    currentUser: currentUser,
+    currentUser,
 
     devMode,
 
@@ -104,7 +105,21 @@ async function getFileMappings(config = {}, options = {}) {
   return fileMappings;
 }
 
-function postInstall(config = {}, options = {}) {
+async function postInstall(config = {}, options = {}) {
+  // Update package.json with new scripts and dependencies
+  await templateUtils.updateProjectPackageJson(config, options, {
+    scripts: {
+      windows: 'react-native run-windows',
+      'test:windows': 'jest --config jest.config.windows.js',
+    },
+    devDependencies: {
+      '@rnx-kit/jest-preset': '^0.1.16',
+    },
+  });
+
+  // Install recently added dependencies
+  await templateUtils.runNpmInstall(config, options);
+
   console.log(chalk.white.bold('To run your new windows app:'));
   console.log(chalk.white('   npx react-native run-windows'));
 }

package/templates/cpp-app/windows/ExperimentalFeatures.props

@@ -3,7 +3,7 @@
 
   <PropertyGroup Label="Microsoft.ReactNative Experimental Features">
     <UseFabric>true</UseFabric>
-    <UseWinUI3>false</UseWinUI3>
+    <UseWinUI3>true</UseWinUI3>
 
     <ReactExperimentalFeaturesSet>true</ReactExperimentalFeaturesSet>
   </PropertyGroup>

package/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.cpp

@@ -0,0 +1,13 @@
+// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows"
+// clang-format off
+#include "pch.h"
+#include "AutolinkedNativeModules.g.h"{{ &autolinkCppIncludes }}
+
+namespace winrt::Microsoft::ReactNative
+{
+
+void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders)
+{ {{ &autolinkCppPackageProviders }}
+}
+
+}

package/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.h

@@ -0,0 +1,10 @@
+// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows"
+// clang-format off
+#pragma once
+
+namespace winrt::Microsoft::ReactNative
+{
+
+void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const& packageProviders);
+
+}