Implement ReactNativeDocument.prototype.getElementById (#53270)

Summary:
Pull Request resolved: #53270

Changelog: [internal]

(Marked as internal because the DOM APIs haven't been released yet).

This implements `getElementById` in the DOM document API.

Reviewed By: rshest

Differential Revision: D69307133

fbshipit-source-id: 0c1454ae42fad92cddc705877b26052e887185bd

Author: rubennorte

packages/react-native/ReactCommon/react/nativemodule/dom/NativeDOM.cpp

@@ -172,6 +172,23 @@ std::vector<jsi::Value> NativeDOM::getChildNodes(
   return getArrayOfInstanceHandlesFromShadowNodes(childNodes, rt);
 }
 
+jsi::Value NativeDOM::getElementById(
+    jsi::Runtime& rt,
+    SurfaceId surfaceId,
+    const std::string& id) {
+  auto currentRevision = getCurrentShadowTreeRevision(rt, surfaceId);
+  if (currentRevision == nullptr) {
+    return jsi::Value::undefined();
+  }
+
+  auto elementById = dom::getElementById(currentRevision, id);
+  if (elementById == nullptr) {
+    return jsi::Value::undefined();
+  }
+
+  return elementById->getInstanceHandle(rt);
+}
+
 jsi::Value NativeDOM::getParentNode(
     jsi::Runtime& rt,
     jsi::Value nativeNodeReference) {

packages/react-native/ReactCommon/react/nativemodule/dom/NativeDOM.h

@@ -45,6 +45,9 @@ class NativeDOM : public NativeDOMCxxSpec<NativeDOM> {
       jsi::Runtime& rt,
       jsi::Value nativeNodeReference);
 
+  jsi::Value
+  getElementById(jsi::Runtime& rt, SurfaceId surfaceId, const std::string& id);
+
   jsi::Value getParentNode(jsi::Runtime& rt, jsi::Value nativeNodeReference);
 
   bool isConnected(jsi::Runtime& rt, jsi::Value nativeNodeReference);

packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp

@@ -156,6 +156,23 @@ Rect getScrollableContentBounds(
 
 } // namespace
 
+std::shared_ptr<const ShadowNode> getElementById(
+    const std::shared_ptr<const ShadowNode>& shadowNode,
+    const std::string& id) {
+  if (shadowNode->getProps()->nativeId == id) {
+    return shadowNode;
+  }
+
+  for (const auto& childNode : shadowNode->getChildren()) {
+    auto result = getElementById(childNode, id);
+    if (result != nullptr) {
+      return result;
+    }
+  }
+
+  return nullptr;
+}
+
 std::shared_ptr<const ShadowNode> getParentNode(
     const RootShadowNode::Shared& currentRevision,
     const ShadowNode& shadowNode) {

packages/react-native/ReactCommon/react/renderer/dom/DOM.h

@@ -64,6 +64,10 @@ std::shared_ptr<const ShadowNode> getParentNode(
     const RootShadowNode::Shared& currentRevision,
     const ShadowNode& shadowNode);
 
+std::shared_ptr<const ShadowNode> getElementById(
+    const std::shared_ptr<const ShadowNode>& currentRevision,
+    const std::string& id);
+
 std::vector<std::shared_ptr<const ShadowNode>> getChildNodes(
     const RootShadowNode::Shared& currentRevision,
     const ShadowNode& shadowNode);

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<41ecf4d1ea640f43ef6f21ae5670d30f>>
+ * @generated SignedSource<<8ba6e82a1f08006665d4552574a773d4>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -3979,6 +3979,7 @@ declare class ReactNativeDocument_default extends ReadOnlyNode_default {
   )
   get documentElement(): ReactNativeElement_default
   get firstElementChild(): null | ReadOnlyElement_default
+  getElementById(id: string): null | ReadOnlyElement_default
   get lastElementChild(): null | ReadOnlyElement_default
   get nodeName(): string
   get nodeType(): number

packages/react-native/src/private/webapis/dom/nodes/ReactNativeDocument.js

@@ -14,27 +14,30 @@ 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 {getPublicInstanceFromInstanceHandle} from './internals/NodeInternals';
 import {
   createReactNativeDocumentElementInstanceHandle,
   setNativeElementReferenceForReactNativeDocumentElementInstanceHandle,
   setPublicInstanceForReactNativeDocumentElementInstanceHandle,
 } from './internals/ReactNativeDocumentElementInstanceHandle';
 import {createReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
 import ReactNativeElement from './ReactNativeElement';
+import ReadOnlyElement from './ReadOnlyElement';
 import ReadOnlyNode from './ReadOnlyNode';
 import NativeDOM from './specs/NativeDOM';
 
 export default class ReactNativeDocument extends ReadOnlyNode {
+  _rootTag: RootTag;
   _documentElement: ReactNativeElement;
 
   constructor(
     rootTag: RootTag,
     instanceHandle: ReactNativeDocumentInstanceHandle,
   ) {
     super(instanceHandle, null);
+    this._rootTag = rootTag;
     this._documentElement = createDocumentElement(rootTag, this);
   }
 
@@ -75,6 +78,23 @@ export default class ReactNativeDocument extends ReadOnlyNode {
   get textContent(): null {
     return null;
   }
+
+  getElementById(id: string): ReadOnlyElement | null {
+    const elementByIdInstanceHandle = NativeDOM.getElementById(
+      this._rootTag,
+      id,
+    );
+
+    if (elementByIdInstanceHandle == null) {
+      return null;
+    }
+
+    const elementById = getPublicInstanceFromInstanceHandle(
+      elementByIdInstanceHandle,
+    );
+
+    return elementById instanceof ReadOnlyElement ? elementById : null;
+  }
 }
 
 function createDocumentElement(

packages/react-native/src/private/webapis/dom/nodes/__tests__/ReactNativeDocument-itest.js

@@ -216,4 +216,96 @@ describe('ReactNativeDocument', () => {
     expect(isUnreachable(weakDocument)).toBe(true);
     expect(isUnreachable(weakNode)).toBe(true);
   });
+
+  describe('getElementById', () => {
+    it('returns the first element with the given ID, doing a depth-first search', () => {
+      let lastNode;
+      let fooNode;
+      let barFirstNode;
+      let barLastNode;
+      let bazNode;
+
+      const root = Fantom.createRoot();
+      Fantom.runTask(() => {
+        root.render(
+          <View
+            ref={node => {
+              lastNode = node;
+            }}>
+            <View
+              id="foo"
+              key="foo"
+              ref={node => {
+                fooNode = node;
+              }}
+            />
+            <View
+              id="bar"
+              key="bar"
+              ref={node => {
+                barFirstNode = node;
+              }}
+            />
+            <View key="parent">
+              <View id="bar" />
+              <View
+                id="baz"
+                ref={node => {
+                  bazNode = node;
+                }}
+              />
+            </View>
+          </View>,
+        );
+      });
+
+      const element = ensureInstance(lastNode, ReactNativeElement);
+      const document = ensureInstance(
+        element.ownerDocument,
+        ReactNativeDocument,
+      );
+
+      expect(document.getElementById('foo')).toBe(fooNode);
+      expect(document.getElementById('bar')).toBe(barFirstNode);
+      expect(document.getElementById('baz')).toBe(bazNode);
+      expect(document.getElementById('foobar')).toBe(null);
+
+      // Remove foo and first bar.
+      Fantom.runTask(() => {
+        root.render(
+          <View
+            ref={node => {
+              lastNode = node;
+            }}>
+            <View key="parent">
+              <View
+                id="bar"
+                ref={node => {
+                  barLastNode = node;
+                }}
+              />
+              <View
+                id="baz"
+                ref={node => {
+                  bazNode = node;
+                }}
+              />
+            </View>
+          </View>,
+        );
+      });
+
+      expect(document.getElementById('foo')).toBe(null);
+      expect(document.getElementById('bar')).toBe(barLastNode);
+      expect(document.getElementById('baz')).toBe(bazNode);
+
+      Fantom.runTask(() => {
+        root.destroy();
+      });
+
+      expect(document.getElementById('foo')).toBe(null);
+      expect(document.getElementById('bar')).toBe(null);
+      expect(document.getElementById('baz')).toBe(null);
+    });
+  });
 });

packages/react-native/src/private/webapis/dom/nodes/specs/NativeDOM.js

@@ -62,6 +62,11 @@ export interface Spec extends TurboModule {
     nativeNodeReference: mixed /* NativeNodeReference */,
   ) => $ReadOnlyArray<mixed> /* $ReadOnlyArray<InstanceHandle> */;
 
+  +getElementById?: (
+    nativeNodeReference: mixed /* NativeNodeReference */,
+    id: string,
+  ) => mixed /* ?InstanceHandle */;
+
   +getParentNode: (
     nativeNodeReference: mixed /* NativeNodeReference */,
   ) => mixed /* ?InstanceHandle */;
@@ -204,6 +209,15 @@ export interface RefinedSpec {
     nativeNodeReference: NativeNodeReference,
   ) => $ReadOnlyArray<InstanceHandle>;
 
+  /**
+   * This is a React Native implementation of `Document.prototype.getElementById`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
+   *
+   * If the document is active and contains an element with the given ID, it
+   * returns the instance handle of that element. Otherwise, it returns `null`.
+   */
+  +getElementById: (rootTag: RootTag, id: string) => ?InstanceHandle;
+
   /**
    * This is a React Native implementation of `Node.prototype.parentNode`
    * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode).
@@ -451,6 +465,14 @@ const NativeDOM: RefinedSpec = {
     ): $ReadOnlyArray<InstanceHandle>);
   },
 
+  getElementById(rootTag, id) {
+    // $FlowExpectedError[incompatible-cast]
+    return (nullthrows(RawNativeDOM?.getElementById)(
+      rootTag,
+      id,
+    ): ?InstanceHandle);
+  },
+
   getParentNode(nativeNodeReference) {
     // $FlowExpectedError[incompatible-cast]
     return (nullthrows(RawNativeDOM).getParentNode(