From 87c11bc3ad8c86c91b79e657d960b88b70f6a86c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Norte?= Date: Mon, 12 Jun 2023 11:02:22 -0700 Subject: [PATCH] Implement id property in ReadOnlyElement (#37755) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/37755 This implements the `id` property in `ReadOnlyElement` as an alias for the `id` or `nativeID` props of the element. This is currently implemented using an internal API in React but we should find an alternative solution for this in Fabric in the near future. Adding this now because it's useful for debugging. Changelog: [internal] Reviewed By: javache Differential Revision: D46518381 fbshipit-source-id: 1a72fe0349c248744f49b795022b6fdb3359885d --- .../Libraries/DOM/Nodes/ReadOnlyElement.js | 12 ++++++++++-- .../react-native/Libraries/DOM/Nodes/ReadOnlyNode.js | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js index b6ecccb0c84..321bf454027 100644 --- a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js +++ b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js @@ -15,7 +15,11 @@ import type HTMLCollection from '../OldStyleCollections/HTMLCollection'; import {getFabricUIManager} from '../../ReactNative/FabricUIManager'; import DOMRect from '../Geometry/DOMRect'; import {createHTMLCollection} from '../OldStyleCollections/HTMLCollection'; -import ReadOnlyNode, {getChildNodes, getShadowNode} from './ReadOnlyNode'; +import ReadOnlyNode, { + getChildNodes, + getInstanceHandle, + getShadowNode, +} from './ReadOnlyNode'; import {getElementSibling} from './Utilities/Traversal'; import nullthrows from 'nullthrows'; @@ -55,7 +59,11 @@ export default class ReadOnlyElement extends ReadOnlyNode { } get id(): string { - throw new TypeError('Unimplemented'); + const instanceHandle = getInstanceHandle(this); + // TODO: migrate off this private React API + // $FlowExpectedError[incompatible-use] + const props = instanceHandle?.stateNode?.canonical?.currentProps; + return props?.id ?? props?.nativeID ?? ''; } get lastElementChild(): ReadOnlyElement | null { diff --git a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js index e92a298be91..8a95751f8e4 100644 --- a/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js +++ b/packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js @@ -293,7 +293,7 @@ export default class ReadOnlyNode { const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle'); -function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle { +export function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle { // $FlowExpectedError[prop-missing] return node[INSTANCE_HANDLE_KEY]; }