react-native-windows 0.73.11 → 0.74.0-preview.2

package/{Libraries/DOM/Nodes → src/private/webapis/dom/nodes}/ReadOnlyNode.js

@@ -13,13 +13,12 @@
 import type {
   InternalInstanceHandle,
   Node as ShadowNode,
-} from '../../Renderer/shims/ReactNativeTypes';
-import type NodeList from '../OldStyleCollections/NodeList';
+} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type NodeList from '../oldstylecollections/NodeList';
 import type ReadOnlyElement from './ReadOnlyElement';
 
-import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
-import ReactFabric from '../../Renderer/shims/ReactFabric';
-import {createNodeList} from '../OldStyleCollections/NodeList';
+import {getFabricUIManager} from '../../../../../Libraries/ReactNative/FabricUIManager';
+import {createNodeList} from '../oldstylecollections/NodeList';
 import nullthrows from 'nullthrows';
 
 // We initialize this lazily to avoid a require cycle
@@ -134,7 +133,9 @@ export default class ReadOnlyNode {
       return null;
     }
 
-    return getPublicInstanceFromInternalInstanceHandle(parentInstanceHandle);
+    return (
+      getPublicInstanceFromInternalInstanceHandle(parentInstanceHandle) ?? null
+    );
   }
 
   get previousSibling(): ReadOnlyNode | null {
@@ -307,6 +308,9 @@ function setInstanceHandle(
 }
 
 export function getShadowNode(node: ReadOnlyNode): ?ShadowNode {
+  // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
+  // With a static import we can't use these classes for Paper-only variants.
+  const ReactFabric = require('../../../../../Libraries/Renderer/shims/ReactFabric');
   return ReactFabric.getNodeFromInternalInstanceHandle(getInstanceHandle(node));
 }
 
@@ -322,9 +326,11 @@ export function getChildNodes(
   const childNodeInstanceHandles = nullthrows(
     getFabricUIManager(),
   ).getChildNodes(shadowNode);
-  return childNodeInstanceHandles.map(instanceHandle =>
-    getPublicInstanceFromInternalInstanceHandle(instanceHandle),
-  );
+  return childNodeInstanceHandles
+    .map(instanceHandle =>
+      getPublicInstanceFromInternalInstanceHandle(instanceHandle),
+    )
+    .filter(Boolean);
 }
 
 function getNodeSiblingsAndPosition(
@@ -348,7 +354,10 @@ function getNodeSiblingsAndPosition(
 
 export function getPublicInstanceFromInternalInstanceHandle(
   instanceHandle: InternalInstanceHandle,
-): ReadOnlyNode {
+): ?ReadOnlyNode {
+  // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
+  // With a static import we can't use these classes for Paper-only variants.
+  const ReactFabric = require('../../../../../Libraries/Renderer/shims/ReactFabric');
   const mixedPublicInstance =
     ReactFabric.getPublicInstanceFromInternalInstanceHandle(instanceHandle);
   // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.

package/{Libraries/DOM/OldStyleCollections → src/private/webapis/dom/oldstylecollections}/DOMRectList.js

@@ -10,7 +10,7 @@
 
 // flowlint unsafe-getters-setters:off
 
-import type DOMRectReadOnly from '../Geometry/DOMRectReadOnly';
+import type DOMRectReadOnly from '../geometry/DOMRectReadOnly';
 import type {ArrayLike} from './ArrayLikeUtils';
 
 import {createValueIterator} from './ArrayLikeUtils';

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