@office-iss/react-native-win32 0.73.1 → 0.74.0-preview.1

package/src/private/webapis/dom/oldstylecollections/__tests__/DOMRectList-test.js

@@ -0,0 +1,85 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import DOMRectReadOnly from '../../geometry/DOMRectReadOnly';
+import {createDOMRectList} from '../DOMRectList';
+
+const domRectA = new DOMRectReadOnly();
+const domRectB = new DOMRectReadOnly();
+const domRectC = new DOMRectReadOnly();
+
+describe('DOMRectList', () => {
+  it('provides an array-like interface', () => {
+    const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+    expect(collection[0]).toBe(domRectA);
+    expect(collection[1]).toBe(domRectB);
+    expect(collection[2]).toBe(domRectC);
+    expect(collection[3]).toBe(undefined);
+    expect(collection.length).toBe(3);
+  });
+
+  it('is immutable (loose mode)', () => {
+    const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+    collection[0] = new DOMRectReadOnly();
+    expect(collection[0]).toBe(domRectA);
+
+    // $FlowExpectedError[cannot-write]
+    collection.length = 100;
+    expect(collection.length).toBe(3);
+  });
+
+  it('is immutable (strict mode)', () => {
+    'use strict';
+
+    const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+    expect(() => {
+      collection[0] = new DOMRectReadOnly();
+    }).toThrow(TypeError);
+    expect(collection[0]).toBe(domRectA);
+
+    expect(() => {
+      // $FlowExpectedError[cannot-write]
+      collection.length = 100;
+    }).toThrow(TypeError);
+    expect(collection.length).toBe(3);
+  });
+
+  it('can be converted to an array through common methods', () => {
+    const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+    expect(Array.from(collection)).toEqual([domRectA, domRectB, domRectC]);
+    expect([...collection]).toEqual([domRectA, domRectB, domRectC]);
+  });
+
+  it('can be traversed with for-of', () => {
+    const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+    let i = 0;
+    for (const value of collection) {
+      expect(value).toBe(collection[i]);
+      i++;
+    }
+  });
+
+  describe('item()', () => {
+    it('returns elements at the specified position, or null', () => {
+      const collection = createDOMRectList([domRectA, domRectB, domRectC]);
+
+      expect(collection.item(0)).toBe(domRectA);
+      expect(collection.item(1)).toBe(domRectB);
+      expect(collection.item(2)).toBe(domRectC);
+      expect(collection.item(3)).toBe(null);
+    });
+  });
+});

package/src/private/webapis/dom/oldstylecollections/__tests__/HTMLCollection-test.js

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import {createHTMLCollection} from '../HTMLCollection';
+
+describe('HTMLCollection', () => {
+  it('provides an array-like interface', () => {
+    const collection = createHTMLCollection(['a', 'b', 'c']);
+
+    expect(collection[0]).toBe('a');
+    expect(collection[1]).toBe('b');
+    expect(collection[2]).toBe('c');
+    expect(collection[3]).toBe(undefined);
+    expect(collection.length).toBe(3);
+  });
+
+  it('is immutable (loose mode)', () => {
+    const collection = createHTMLCollection(['a', 'b', 'c']);
+
+    collection[0] = 'replacement';
+    expect(collection[0]).toBe('a');
+
+    // $FlowExpectedError[cannot-write]
+    collection.length = 100;
+    expect(collection.length).toBe(3);
+  });
+
+  it('is immutable (strict mode)', () => {
+    'use strict';
+
+    const collection = createHTMLCollection(['a', 'b', 'c']);
+
+    expect(() => {
+      collection[0] = 'replacement';
+    }).toThrow(TypeError);
+    expect(collection[0]).toBe('a');
+
+    expect(() => {
+      // $FlowExpectedError[cannot-write]
+      collection.length = 100;
+    }).toThrow(TypeError);
+    expect(collection.length).toBe(3);
+  });
+
+  it('can be converted to an array through common methods', () => {
+    const collection = createHTMLCollection(['a', 'b', 'c']);
+
+    expect(Array.from(collection)).toEqual(['a', 'b', 'c']);
+    expect([...collection]).toEqual(['a', 'b', 'c']);
+  });
+
+  it('can be traversed with for-of', () => {
+    const collection = createHTMLCollection(['a', 'b', 'c']);
+
+    let i = 0;
+    for (const value of collection) {
+      expect(value).toBe(collection[i]);
+      i++;
+    }
+  });
+
+  describe('item()', () => {
+    it('returns elements at the specified position, or null', () => {
+      const collection = createHTMLCollection(['a', 'b', 'c']);
+
+      expect(collection.item(0)).toBe('a');
+      expect(collection.item(1)).toBe('b');
+      expect(collection.item(2)).toBe('c');
+      expect(collection.item(3)).toBe(null);
+    });
+  });
+});

package/src/private/webapis/dom/oldstylecollections/__tests__/NodeList-test.js

@@ -0,0 +1,161 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import {createNodeList} from '../NodeList';
+
+describe('NodeList', () => {
+  it('provides an array-like interface', () => {
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    expect(collection[0]).toBe('a');
+    expect(collection[1]).toBe('b');
+    expect(collection[2]).toBe('c');
+    expect(collection[3]).toBe(undefined);
+    expect(collection.length).toBe(3);
+  });
+
+  it('provides indexed access through the item method', () => {
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    expect(collection.item(0)).toBe('a');
+    expect(collection.item(1)).toBe('b');
+    expect(collection.item(2)).toBe('c');
+    expect(collection.item(3)).toBe(null);
+  });
+
+  it('is immutable (loose mode)', () => {
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    collection[0] = 'replacement';
+    expect(collection[0]).toBe('a');
+
+    // $FlowExpectedError[cannot-write]
+    collection.length = 100;
+    expect(collection.length).toBe(3);
+  });
+
+  it('is immutable (strict mode)', () => {
+    'use strict';
+
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    expect(() => {
+      collection[0] = 'replacement';
+    }).toThrow(TypeError);
+    expect(collection[0]).toBe('a');
+
+    expect(() => {
+      // $FlowExpectedError[cannot-write]
+      collection.length = 100;
+    }).toThrow(TypeError);
+    expect(collection.length).toBe(3);
+  });
+
+  it('can be converted to an array through common methods', () => {
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    expect(Array.from(collection)).toEqual(['a', 'b', 'c']);
+    expect([...collection]).toEqual(['a', 'b', 'c']);
+  });
+
+  it('can be traversed with for-of', () => {
+    const collection = createNodeList(['a', 'b', 'c']);
+
+    let i = 0;
+    for (const value of collection) {
+      expect(value).toBe(collection[i]);
+      i++;
+    }
+  });
+
+  describe('keys()', () => {
+    it('returns an iterator for keys', () => {
+      const collection = createNodeList(['a', 'b', 'c']);
+
+      const keys = collection.keys();
+      expect(keys.next()).toEqual({value: 0, done: false});
+      expect(keys.next()).toEqual({value: 1, done: false});
+      expect(keys.next()).toEqual({value: 2, done: false});
+      expect(keys.next()).toEqual({done: true});
+
+      let i = 0;
+      for (const key of collection.keys()) {
+        expect(key).toBe(i);
+        i++;
+      }
+    });
+  });
+
+  describe('values()', () => {
+    it('returns an iterator for values', () => {
+      const collection = createNodeList(['a', 'b', 'c']);
+
+      const values = collection.values();
+      expect(values.next()).toEqual({value: 'a', done: false});
+      expect(values.next()).toEqual({value: 'b', done: false});
+      expect(values.next()).toEqual({value: 'c', done: false});
+      expect(values.next()).toEqual({done: true});
+
+      let i = 0;
+      for (const value of collection.values()) {
+        expect(value).toBe(collection[i]);
+        i++;
+      }
+    });
+  });
+
+  describe('entries()', () => {
+    it('returns an iterator for entries', () => {
+      const collection = createNodeList(['a', 'b', 'c']);
+
+      const entries = collection.entries();
+      expect(entries.next()).toEqual({value: [0, 'a'], done: false});
+      expect(entries.next()).toEqual({value: [1, 'b'], done: false});
+      expect(entries.next()).toEqual({value: [2, 'c'], done: false});
+      expect(entries.next()).toEqual({done: true});
+
+      let i = 0;
+      for (const entry of collection.entries()) {
+        expect(entry).toEqual([i, collection[i]]);
+        i++;
+      }
+    });
+  });
+
+  describe('forEach()', () => {
+    it('iterates over the elements like array.forEach (implicit `this`)', () => {
+      const collection = createNodeList(['a', 'b', 'c']);
+
+      let i = 0;
+      collection.forEach(function (this: mixed, value, index, list) {
+        expect(value).toBe(collection[i]);
+        expect(index).toBe(i);
+        expect(list).toBe(collection);
+        expect(this).toBe(window);
+        i++;
+      });
+    });
+
+    it('iterates over the elements like array.forEach (explicit `this`)', () => {
+      const collection = createNodeList(['a', 'b', 'c']);
+
+      let i = 0;
+      const explicitThis = {id: 'foo'};
+      collection.forEach(function (this: mixed, value, index, list) {
+        expect(value).toBe(collection[i]);
+        expect(index).toBe(i);
+        expect(list).toBe(collection);
+        expect(this).toBe(explicitThis);
+        i++;
+      }, explicitThis);
+    });
+  });
+});

package/{Libraries/WebPerformance → src/private/webapis/performance}/NativePerformance.js

@@ -8,9 +8,9 @@
  * @format
  */
 
-import type {TurboModule} from '../TurboModule/RCTExport';
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
-import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
 export type NativeMemoryInfo = {[key: string]: ?number};
 

package/{Libraries/WebPerformance → src/private/webapis/performance}/NativePerformanceObserver.js

@@ -8,9 +8,9 @@
  * @format
  */
 
-import type {TurboModule} from '../TurboModule/RCTExport';
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
-import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
 export type RawPerformanceEntryType = number;
 
@@ -53,6 +53,7 @@ export interface Spec extends TurboModule {
     entryType?: RawPerformanceEntryType,
     entryName?: string,
   ) => $ReadOnlyArray<RawPerformanceEntry>;
+  +getSupportedPerformanceEntryTypes: () => $ReadOnlyArray<RawPerformanceEntryType>;
 }
 
 export default (TurboModuleRegistry.get<Spec>(

package/{Libraries/WebPerformance → src/private/webapis/performance}/Performance.js

@@ -13,7 +13,7 @@
 import type {HighResTimeStamp, PerformanceEntryType} from './PerformanceEntry';
 import type {PerformanceEntryList} from './PerformanceObserver';
 
-import warnOnce from '../Utilities/warnOnce';
+import warnOnce from '../../../../Libraries/Utilities/warnOnce';
 import EventCounts from './EventCounts';
 import MemoryInfo from './MemoryInfo';
 import NativePerformance from './NativePerformance';
@@ -141,7 +141,7 @@ export default class Performance {
   }
 
   // Startup metrics is not used in web, but only in React Native.
-  get reactNativeStartupTiming(): ReactNativeStartupTiming {
+  get rnStartupTiming(): ReactNativeStartupTiming {
     if (NativePerformance?.getReactNativeStartupTiming) {
       const {
         startTime,

package/{Libraries/WebPerformance → src/private/webapis/performance}/PerformanceEventTiming.js

@@ -20,7 +20,7 @@ export type PerformanceEventTimingJSON = {
   ...
 };
 
-export class PerformanceEventTiming extends PerformanceEntry {
+export default class PerformanceEventTiming extends PerformanceEntry {
   processingStart: HighResTimeStamp;
   processingEnd: HighResTimeStamp;
   interactionId: number;

package/{Libraries/WebPerformance → src/private/webapis/performance}/PerformanceObserver.js

@@ -10,12 +10,14 @@
 
 import type {HighResTimeStamp, PerformanceEntryType} from './PerformanceEntry';
 
-import warnOnce from '../Utilities/warnOnce';
+import warnOnce from '../../../../Libraries/Utilities/warnOnce';
 import NativePerformanceObserver from './NativePerformanceObserver';
 import {PerformanceEntry} from './PerformanceEntry';
+import PerformanceEventTiming from './PerformanceEventTiming';
 import {
   performanceEntryTypeToRaw,
   rawToPerformanceEntry,
+  rawToPerformanceEntryType,
 } from './RawPerformanceEntry';
 
 export type PerformanceEntryList = $ReadOnlyArray<PerformanceEntry>;
@@ -129,6 +131,21 @@ function applyDurationThresholds() {
   }
 }
 
+function getSupportedPerformanceEntryTypes(): $ReadOnlyArray<PerformanceEntryType> {
+  if (!NativePerformanceObserver) {
+    return Object.freeze([]);
+  }
+  if (!NativePerformanceObserver.getSupportedPerformanceEntryTypes) {
+    // fallback if getSupportedPerformanceEntryTypes is not defined on native side
+    return Object.freeze(['mark', 'measure', 'event']);
+  }
+  return Object.freeze(
+    NativePerformanceObserver.getSupportedPerformanceEntryTypes().map(
+      rawToPerformanceEntryType,
+    ),
+  );
+}
+
 /**
  * Implementation of the PerformanceObserver interface for RN,
  * corresponding to the standard in https://www.w3.org/TR/performance-timeline/
@@ -294,7 +311,7 @@ export default class PerformanceObserver {
   }
 
   static supportedEntryTypes: $ReadOnlyArray<PerformanceEntryType> =
-    Object.freeze(['mark', 'measure', 'event']);
+    getSupportedPerformanceEntryTypes();
 }
 
 // As a Set union, except if value exists in both, we take minimum
@@ -316,3 +333,5 @@ function union<T>(
 function difference<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {
   return new Set([...a].filter(x => !b.has(x)));
 }
+
+export {PerformanceEventTiming};

package/{Libraries/WebPerformance → src/private/webapis/performance}/RawPerformanceEntry.js

@@ -15,7 +15,7 @@ import type {
 import type {PerformanceEntryType} from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
-import {PerformanceEventTiming} from './PerformanceEventTiming';
+import PerformanceEventTiming from './PerformanceEventTiming';
 
 export const RawPerformanceEntryTypeValues = {
   UNDEFINED: 0,

package/{Libraries/WebPerformance → src/private/webapis/performance}/__mocks__/NativePerformanceObserver.js

@@ -114,6 +114,15 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
         (entryName == null || e.name === entryName),
     );
   },
+
+  getSupportedPerformanceEntryTypes:
+    (): $ReadOnlyArray<RawPerformanceEntryType> => {
+      return [
+        RawPerformanceEntryTypeValues.MARK,
+        RawPerformanceEntryTypeValues.MEASURE,
+        RawPerformanceEntryTypeValues.EVENT,
+      ];
+    },
 };
 
 export default NativePerformanceObserverMock;

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

@@ -0,0 +1,116 @@
+/**
+ * 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 Performance = require('../Performance').default;
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
+describe('EventCounts', () => {
+  it('defines EventCounts for Performance', () => {
+    const eventCounts = new Performance().eventCounts;
+    expect(eventCounts).not.toBeUndefined();
+  });
+
+  it('consistently implements the API for EventCounts', async () => {
+    NativePerformanceObserver.logRawEntry({
+      name: 'click',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'input',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'input',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    const eventCounts = new Performance().eventCounts;
+    expect(eventCounts.size).toBe(3);
+    expect(Array.from(eventCounts.entries())).toStrictEqual([
+      ['click', 1],
+      ['input', 2],
+      ['keyup', 3],
+    ]);
+
+    expect(eventCounts.get('click')).toEqual(1);
+    expect(eventCounts.get('input')).toEqual(2);
+    expect(eventCounts.get('keyup')).toEqual(3);
+
+    expect(eventCounts.has('click')).toEqual(true);
+    expect(eventCounts.has('input')).toEqual(true);
+    expect(eventCounts.has('keyup')).toEqual(true);
+
+    expect(Array.from(eventCounts.keys())).toStrictEqual([
+      'click',
+      'input',
+      'keyup',
+    ]);
+    expect(Array.from(eventCounts.values())).toStrictEqual([1, 2, 3]);
+
+    await jest.runAllTicks();
+    NativePerformanceObserver.logRawEntry({
+      name: 'input',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+    expect(Array.from(eventCounts.values())).toStrictEqual([1, 3, 5]);
+
+    await jest.runAllTicks();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'click',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    await jest.runAllTicks();
+
+    NativePerformanceObserver.logRawEntry({
+      name: 'keyup',
+      entryType: RawPerformanceEntryTypeValues.EVENT,
+    });
+
+    expect(Array.from(eventCounts.values())).toStrictEqual([2, 3, 6]);
+  });
+});

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