@office-iss/react-native-win32 0.78.4 → 0.79.0-preview.2

package/src/private/webapis/dom/nodes/ReactNativeDocument.js

@@ -0,0 +1,121 @@
+/**
+ * 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
+ * @flow strict-local
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import type {RootTag} from '../../../../../Libraries/ReactNative/RootTag';
+import type {ViewConfig} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type HTMLCollection from '../oldstylecollections/HTMLCollection';
+import type {ReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
+import type ReadOnlyElement from './ReadOnlyElement';
+
+import {createHTMLCollection} from '../oldstylecollections/HTMLCollection';
+import {
+  createReactNativeDocumentElementInstanceHandle,
+  setNativeElementReferenceForReactNativeDocumentElementInstanceHandle,
+  setPublicInstanceForReactNativeDocumentElementInstanceHandle,
+} from './internals/ReactNativeDocumentElementInstanceHandle';
+import {createReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
+import ReactNativeElement from './ReactNativeElement';
+import ReadOnlyNode from './ReadOnlyNode';
+import NativeDOM from './specs/NativeDOM';
+
+export default class ReactNativeDocument extends ReadOnlyNode {
+  _documentElement: ReactNativeElement;
+
+  constructor(
+    rootTag: RootTag,
+    instanceHandle: ReactNativeDocumentInstanceHandle,
+  ) {
+    super(instanceHandle, null);
+    this._documentElement = createDocumentElement(rootTag, this);
+  }
+
+  get childElementCount(): number {
+    // just `documentElement`.
+    return 1;
+  }
+
+  get children(): HTMLCollection<ReadOnlyElement> {
+    return createHTMLCollection([this.documentElement]);
+  }
+
+  get documentElement(): ReactNativeElement {
+    return this._documentElement;
+  }
+
+  get firstElementChild(): ReadOnlyElement | null {
+    return this.documentElement;
+  }
+
+  get lastElementChild(): ReadOnlyElement | null {
+    return this.documentElement;
+  }
+
+  get nodeName(): string {
+    return '#document';
+  }
+
+  get nodeType(): number {
+    return ReadOnlyNode.DOCUMENT_NODE;
+  }
+
+  get nodeValue(): null {
+    return null;
+  }
+
+  // $FlowExpectedError[incompatible-extend] This is defined as returning string in Node, but it's actually null in Document.
+  get textContent(): null {
+    return null;
+  }
+}
+
+function createDocumentElement(
+  rootTag: RootTag,
+  ownerDocument: ReactNativeDocument,
+): ReactNativeElement {
+  // In the case of the document object, React does not create an instance
+  // handle for it, so we create a custom one.
+  const instanceHandle = createReactNativeDocumentElementInstanceHandle();
+
+  // $FlowExpectedError[incompatible-type]
+  const rootTagIsNumber: number = rootTag;
+  // $FlowExpectedError[incompatible-type]
+  const viewConfig: ViewConfig = null;
+
+  const documentElement = new ReactNativeElement(
+    rootTagIsNumber,
+    viewConfig,
+    instanceHandle,
+    ownerDocument,
+  );
+
+  // The root shadow node was created ahead of time without an instance
+  // handle, so we need to link them now.
+  const rootShadowNode = NativeDOM.linkRootNode(rootTag, instanceHandle);
+  setNativeElementReferenceForReactNativeDocumentElementInstanceHandle(
+    instanceHandle,
+    rootShadowNode,
+  );
+  setPublicInstanceForReactNativeDocumentElementInstanceHandle(
+    instanceHandle,
+    documentElement,
+  );
+
+  return documentElement;
+}
+
+export function createReactNativeDocument(
+  rootTag: RootTag,
+): ReactNativeDocument {
+  const instanceHandle = createReactNativeDocumentInstanceHandle(rootTag);
+  const document = new ReactNativeDocument(rootTag, instanceHandle);
+  return document;
+}

package/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -11,25 +11,31 @@
 // flowlint unsafe-getters-setters:off
 
 import type {
-  HostInstance,
-  INativeMethods,
   InternalInstanceHandle,
+  Node as ShadowNode,
+  ViewConfig,
+} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+import type {
+  HostInstance,
+  LegacyHostInstanceMethods,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
-  ViewConfig,
-} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+} from '../../../types/HostInstance';
+import type {InstanceHandle} from './internals/NodeInternals';
+import type ReactNativeDocument from './ReactNativeDocument';
 
 import TextInputState from '../../../../../Libraries/Components/TextInput/TextInputState';
 import {getFabricUIManager} from '../../../../../Libraries/ReactNative/FabricUIManager';
 import {create as createAttributePayload} from '../../../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload';
 import warnForStyleProps from '../../../../../Libraries/ReactNative/ReactFabricPublicInstance/warnForStyleProps';
-import ReadOnlyElement, {getBoundingClientRect} from './ReadOnlyElement';
-import ReadOnlyNode, {setInstanceHandle} from './ReadOnlyNode';
 import {
-  getPublicInstanceFromInternalInstanceHandle,
-  getShadowNode,
-} from './ReadOnlyNode';
+  getNativeElementReference,
+  getPublicInstanceFromInstanceHandle,
+  setInstanceHandle,
+  setOwnerDocument,
+} from './internals/NodeInternals';
+import ReadOnlyElement, {getBoundingClientRect} from './ReadOnlyElement';
 import NativeDOM from './specs/NativeDOM';
 import nullthrows from 'nullthrows';
 
@@ -54,13 +60,13 @@ const noop = () => {};
 // was slower than this method because the engine has to create an object than
 // we then discard to create a new one.
 
-class ReactNativeElementMethods
+class ReactNativeElement
   extends ReadOnlyElement
-  implements INativeMethods
+  implements LegacyHostInstanceMethods
 {
   // These need to be accessible from `ReactFabricPublicInstanceUtils`.
   __nativeTag: number;
-  __internalInstanceHandle: InternalInstanceHandle;
+  __internalInstanceHandle: InstanceHandle;
 
   __viewConfig: ViewConfig;
 
@@ -69,12 +75,13 @@ class ReactNativeElementMethods
   constructor(
     tag: number,
     viewConfig: ViewConfig,
-    internalInstanceHandle: InternalInstanceHandle,
+    instanceHandle: InstanceHandle,
+    ownerDocument: ReactNativeDocument,
   ) {
-    super(internalInstanceHandle);
+    super(instanceHandle, ownerDocument);
 
     this.__nativeTag = tag;
-    this.__internalInstanceHandle = internalInstanceHandle;
+    this.__internalInstanceHandle = instanceHandle;
     this.__viewConfig = viewConfig;
   }
 
@@ -85,7 +92,7 @@ class ReactNativeElementMethods
   }
 
   get offsetLeft(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const offset = NativeDOM.getOffset(node);
@@ -96,7 +103,7 @@ class ReactNativeElementMethods
   }
 
   get offsetParent(): ReadOnlyElement | null {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const offset = NativeDOM.getOffset(node);
@@ -105,7 +112,7 @@ class ReactNativeElementMethods
       // in JavaScript yet.
       if (offset[0] != null) {
         const offsetParentInstanceHandle = offset[0];
-        const offsetParent = getPublicInstanceFromInternalInstanceHandle(
+        const offsetParent = getPublicInstanceFromInstanceHandle(
           offsetParentInstanceHandle,
         );
         // $FlowExpectedError[incompatible-type] The value returned by `getOffset` is always an instance handle for `ReadOnlyElement`.
@@ -118,7 +125,7 @@ class ReactNativeElementMethods
   }
 
   get offsetTop(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const offset = NativeDOM.getOffset(node);
@@ -139,26 +146,28 @@ class ReactNativeElementMethods
    */
 
   blur(): void {
-    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
     TextInputState.blurTextInput(this);
   }
 
   focus() {
-    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
     TextInputState.focusTextInput(this);
   }
 
   measure(callback: MeasureOnSuccessCallback) {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
     if (node != null) {
-      nullthrows(getFabricUIManager()).measure(node, callback);
+      // $FlowExpectedError[incompatible-type] This is an element instance so the native node reference is always a shadow node.
+      const shadowNode: ShadowNode = node;
+      nullthrows(getFabricUIManager()).measure(shadowNode, callback);
     }
   }
 
   measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
     if (node != null) {
-      nullthrows(getFabricUIManager()).measureInWindow(node, callback);
+      // $FlowExpectedError[incompatible-type] This is an element instance so the native node reference is always a shadow node.
+      const shadowNode: ShadowNode = node;
+      nullthrows(getFabricUIManager()).measureInWindow(shadowNode, callback);
     }
   }
 
@@ -167,7 +176,7 @@ class ReactNativeElementMethods
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
   ) {
-    if (!(relativeToNativeNode instanceof ReadOnlyNode)) {
+    if (!(relativeToNativeNode instanceof ReactNativeElement)) {
       if (__DEV__) {
         console.error(
           'Warning: ref.measureLayout must be called with a ref to a native component.',
@@ -177,13 +186,18 @@ class ReactNativeElementMethods
       return;
     }
 
-    const toStateNode = getShadowNode(this);
-    const fromStateNode = getShadowNode(relativeToNativeNode);
+    const toStateNode = getNativeElementReference(this);
+    const fromStateNode = getNativeElementReference(relativeToNativeNode);
 
     if (toStateNode != null && fromStateNode != null) {
+      // $FlowExpectedError[incompatible-type] This is an element instance so the native node reference is always a shadow node.
+      const toStateShadowNode: ShadowNode = toStateNode;
+      // $FlowExpectedError[incompatible-type] This is an element instance so the native node reference is always a shadow node.
+      const fromStateShadowNode: ShadowNode = fromStateNode;
+
       nullthrows(getFabricUIManager()).measureLayout(
-        toStateNode,
-        fromStateNode,
+        toStateShadowNode,
+        fromStateShadowNode,
         onFail != null ? onFail : noop,
         onSuccess != null ? onSuccess : noop,
       );
@@ -200,32 +214,49 @@ class ReactNativeElementMethods
       this.__viewConfig.validAttributes,
     );
 
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null && updatePayload != null) {
-      nullthrows(getFabricUIManager()).setNativeProps(node, updatePayload);
+      // $FlowExpectedError[incompatible-type] This is an element instance so the native node reference is always a shadow node.
+      const shadowNode: ShadowNode = node;
+      nullthrows(getFabricUIManager()).setNativeProps(
+        shadowNode,
+        updatePayload,
+      );
     }
   }
 }
 
-// Alternative constructor just implemented to provide a better performance than
-// calling super() in the original class.
-function ReactNativeElement(
-  this: ReactNativeElementMethods,
-  tag: number,
-  viewConfig: ViewConfig,
-  internalInstanceHandle: InternalInstanceHandle,
-) {
-  this.__nativeTag = tag;
-  this.__internalInstanceHandle = internalInstanceHandle;
-  this.__viewConfig = viewConfig;
-  setInstanceHandle(this, internalInstanceHandle);
-}
+type ReactNativeElementT = ReactNativeElement;
 
-ReactNativeElement.prototype = Object.create(
-  ReactNativeElementMethods.prototype,
-);
+function replaceConstructorWithoutSuper(
+  ReactNativeElementClass: Class<ReactNativeElementT>,
+): Class<ReactNativeElementT> {
+  // Alternative constructor just implemented to provide a better performance than
+  // calling super() in the original class.
+  // eslint-disable-next-line no-shadow
+  function ReactNativeElement(
+    this: ReactNativeElementT,
+    tag: number,
+    viewConfig: ViewConfig,
+    internalInstanceHandle: InternalInstanceHandle,
+    ownerDocument: ReactNativeDocument,
+  ) {
+    // Inlined from `ReadOnlyNode`
+    setOwnerDocument(this, ownerDocument);
+    setInstanceHandle(this, internalInstanceHandle);
+
+    this.__nativeTag = tag;
+    this.__internalInstanceHandle = internalInstanceHandle;
+    this.__viewConfig = viewConfig;
+  }
+
+  ReactNativeElement.prototype = ReactNativeElementClass.prototype;
+
+  // $FlowExpectedError[incompatible-return]
+  return ReactNativeElement;
+}
 
-// $FlowExpectedError[prop-missing]
-// $FlowFixMe[incompatible-cast]
-export default ReactNativeElement as typeof ReactNativeElementMethods;
+export default replaceConstructorWithoutSuper(
+  ReactNativeElement,
+) as typeof ReactNativeElement;

package/src/private/webapis/dom/nodes/ReadOnlyCharacterData.js

@@ -12,9 +12,10 @@
 
 import type ReadOnlyElement from './ReadOnlyElement';
 
-import ReadOnlyNode, {getShadowNode} from './ReadOnlyNode';
+import {getNativeTextReference} from './internals/NodeInternals';
+import {getElementSibling} from './internals/Traversal';
+import ReadOnlyNode from './ReadOnlyNode';
 import NativeDOM from './specs/NativeDOM';
-import {getElementSibling} from './utilities/Traversal';
 
 export default class ReadOnlyCharacterData extends ReadOnlyNode {
   get nextElementSibling(): ReadOnlyElement | null {
@@ -26,10 +27,10 @@ export default class ReadOnlyCharacterData extends ReadOnlyNode {
   }
 
   get data(): string {
-    const shadowNode = getShadowNode(this);
+    const node = getNativeTextReference(this);
 
-    if (shadowNode != null) {
-      return NativeDOM.getTextContent(shadowNode);
+    if (node != null) {
+      return NativeDOM.getTextContent(node);
     }
 
     return '';
@@ -42,7 +43,7 @@ export default class ReadOnlyCharacterData extends ReadOnlyNode {
   /**
    * @override
    */
-  get textContent(): string | null {
+  get textContent(): string {
     return this.data;
   }
 

package/src/private/webapis/dom/nodes/ReadOnlyElement.js

@@ -12,15 +12,15 @@
 
 import type HTMLCollection from '../oldstylecollections/HTMLCollection';
 
-import DOMRect from '../geometry/DOMRect';
+import DOMRect from '../../geometry/DOMRect';
 import {createHTMLCollection} from '../oldstylecollections/HTMLCollection';
-import ReadOnlyNode, {
-  getChildNodes,
+import {
   getInstanceHandle,
-  getShadowNode,
-} from './ReadOnlyNode';
+  getNativeElementReference,
+} from './internals/NodeInternals';
+import {getElementSibling} from './internals/Traversal';
+import ReadOnlyNode, {getChildNodes} from './ReadOnlyNode';
 import NativeDOM from './specs/NativeDOM';
-import {getElementSibling} from './utilities/Traversal';
 
 export default class ReadOnlyElement extends ReadOnlyNode {
   get childElementCount(): number {
@@ -32,7 +32,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get clientHeight(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const innerSize = NativeDOM.getInnerSize(node);
@@ -43,7 +43,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get clientLeft(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const borderSize = NativeDOM.getBorderWidth(node);
@@ -54,7 +54,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get clientTop(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const borderSize = NativeDOM.getBorderWidth(node);
@@ -65,7 +65,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get clientWidth(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const innerSize = NativeDOM.getInnerSize(node);
@@ -126,7 +126,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get scrollHeight(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const scrollSize = NativeDOM.getScrollSize(node);
@@ -137,7 +137,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get scrollLeft(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const scrollPosition = NativeDOM.getScrollPosition(node);
@@ -148,7 +148,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get scrollTop(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const scrollPosition = NativeDOM.getScrollPosition(node);
@@ -159,7 +159,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get scrollWidth(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const scrollSize = NativeDOM.getScrollSize(node);
@@ -170,7 +170,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get tagName(): string {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       return NativeDOM.getTagName(node);
@@ -179,11 +179,11 @@ export default class ReadOnlyElement extends ReadOnlyNode {
     return '';
   }
 
-  get textContent(): string | null {
-    const shadowNode = getShadowNode(this);
+  get textContent(): string {
+    const node = getNativeElementReference(this);
 
-    if (shadowNode != null) {
-      return NativeDOM.getTextContent(shadowNode);
+    if (node != null) {
+      return NativeDOM.getTextContent(node);
     }
 
     return '';
@@ -197,7 +197,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
    * Pointer Capture APIs
    */
   hasPointerCapture(pointerId: number): boolean {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
     if (node != null) {
       return NativeDOM.hasPointerCapture(node, pointerId);
     }
@@ -205,14 +205,14 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   setPointerCapture(pointerId: number): void {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
     if (node != null) {
       NativeDOM.setPointerCapture(node, pointerId);
     }
   }
 
   releasePointerCapture(pointerId: number): void {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
     if (node != null) {
       NativeDOM.releasePointerCapture(node, pointerId);
     }
@@ -232,13 +232,13 @@ function getChildElements(node: ReadOnlyNode): $ReadOnlyArray<ReadOnlyElement> {
  * implement methods like `offsetWidth` and `offsetHeight`.
  */
 export function getBoundingClientRect(
-  node: ReadOnlyElement,
+  element: ReadOnlyElement,
   {includeTransform}: {includeTransform: boolean},
 ): DOMRect {
-  const shadowNode = getShadowNode(node);
+  const node = getNativeElementReference(element);
 
-  if (shadowNode != null) {
-    const rect = NativeDOM.getBoundingClientRect(shadowNode, includeTransform);
+  if (node != null) {
+    const rect = NativeDOM.getBoundingClientRect(node, includeTransform);
     return new DOMRect(rect[0], rect[1], rect[2], rect[3]);
   }