@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.286

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

@@ -0,0 +1,120 @@
+/**
+ * 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;
+  }
+
+  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

@@ -17,19 +17,23 @@ import type {
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
+  Node as ShadowNode,
   ViewConfig,
 } from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+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';
 
@@ -60,7 +64,7 @@ class ReactNativeElementMethods
 {
   // These need to be accessible from `ReactFabricPublicInstanceUtils`.
   __nativeTag: number;
-  __internalInstanceHandle: InternalInstanceHandle;
+  __internalInstanceHandle: InstanceHandle;
 
   __viewConfig: ViewConfig;
 
@@ -69,12 +73,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 +90,7 @@ class ReactNativeElementMethods
   }
 
   get offsetLeft(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const offset = NativeDOM.getOffset(node);
@@ -96,7 +101,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 +110,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 +123,7 @@ class ReactNativeElementMethods
   }
 
   get offsetTop(): number {
-    const node = getShadowNode(this);
+    const node = getNativeElementReference(this);
 
     if (node != null) {
       const offset = NativeDOM.getOffset(node);
@@ -149,16 +154,20 @@ class ReactNativeElementMethods
   }
 
   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,10 +214,15 @@ 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,
+      );
     }
   }
 }
@@ -215,11 +234,15 @@ function ReactNativeElement(
   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;
-  setInstanceHandle(this, internalInstanceHandle);
 }
 
 ReactNativeElement.prototype = Object.create(

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 '';

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);
@@ -180,10 +180,10 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get textContent(): string | null {
-    const shadowNode = getShadowNode(this);
+    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]);
   }