Skip to content

Commit

Permalink
Clean interface for public instances between React and React Native (#…
Browse files Browse the repository at this point in the history
…26416)

## Summary

We are going to move the definition of public instances from React to
React Native to have them together with the native methods in Fabric
that they invoke. This will allow us to have a better type safety
between them and iterate faster on the implementation of this proposal:
react-native-community/discussions-and-proposals#607

The interface between React and React Native would look like this after
this change and a following PR (#26418):

React → React Native:
```javascript
ReactNativePrivateInterface.createPublicInstance // to provide via refs
ReactNativePrivateInterface.getNodeFromPublicInstance // for DevTools, commands, etc.
ReactNativePrivateInterface.getNativeTagFromPublicInstance // to implement `findNodeHandle`
```

React Native → React (ReactFabric):
```javascript
ReactFabric.getNodeFromInternalInstanceHandle // to get most recent node to call into native
ReactFabric.getPublicInstanceFromInternalInstanceHandle // to get public instances from results from native
```

## How did you test this change?

Flow
Existing unit tests

DiffTrain build for commit 3554c88.
  • Loading branch information
sammy-SC committed Mar 20, 2023
1 parent df61ea1 commit eee3aa6
Show file tree
Hide file tree
Showing 13 changed files with 180 additions and 163 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23499,7 +23499,7 @@ function createFiberRoot(
return root;
}

var ReactVersion = "18.3.0-next-c57b90f50-20230320";
var ReactVersion = "18.3.0-next-3554c8852-20230320";

// Might add PROFILE later.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8526,7 +8526,7 @@ var devToolsConfig$jscomp$inline_1010 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-next-c57b90f50-20230320",
version: "18.3.0-next-3554c8852-20230320",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1202 = {
Expand Down Expand Up @@ -8557,7 +8557,7 @@ var internals$jscomp$inline_1202 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-c57b90f50-20230320"
reconcilerVersion: "18.3.0-next-3554c8852-20230320"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1203 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8953,7 +8953,7 @@ var devToolsConfig$jscomp$inline_1051 = {
throw Error("TestRenderer does not support findFiberByHostInstance()");
},
bundleType: 0,
version: "18.3.0-next-c57b90f50-20230320",
version: "18.3.0-next-3554c8852-20230320",
rendererPackageName: "react-test-renderer"
};
var internals$jscomp$inline_1241 = {
Expand Down Expand Up @@ -8984,7 +8984,7 @@ var internals$jscomp$inline_1241 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-c57b90f50-20230320"
reconcilerVersion: "18.3.0-next-3554c8852-20230320"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1242 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ if (
}
"use strict";

var ReactVersion = "18.3.0-next-c57b90f50-20230320";
var ReactVersion = "18.3.0-next-3554c8852-20230320";

// ATTENTION
// When adding new symbols to this file,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -639,4 +639,4 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-next-c57b90f50-20230320";
exports.version = "18.3.0-next-3554c8852-20230320";
Original file line number Diff line number Diff line change
Expand Up @@ -642,7 +642,7 @@ exports.useSyncExternalStore = function (
);
};
exports.useTransition = useTransition;
exports.version = "18.3.0-next-c57b90f50-20230320";
exports.version = "18.3.0-next-3554c8852-20230320";

/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
if (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26257,7 +26257,7 @@ function createFiberRoot(
return root;
}

var ReactVersion = "18.3.0-next-c57b90f50-20230320";
var ReactVersion = "18.3.0-next-3554c8852-20230320";

function createPortal$1(
children,
Expand Down Expand Up @@ -26792,11 +26792,18 @@ function injectIntoDevTools(devToolsConfig) {
* `nativeFabricUIManager` to be defined in the global scope (which does not
* happen in Paper).
*/

function getNativeTagFromPublicInstance(publicInstance) {
return publicInstance.__nativeTag;
}
function getInternalInstanceHandleFromPublicInstance(publicInstance) {
return publicInstance.__internalInstanceHandle;
function getNodeFromPublicInstance(publicInstance) {
if (publicInstance.__internalInstanceHandle == null) {
return null;
}

return getNodeFromInternalInstanceHandle(
publicInstance.__internalInstanceHandle
);
}

var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
Expand Down Expand Up @@ -26933,15 +26940,10 @@ function dispatchCommand(handle, command, args) {
return;
}

var internalInstanceHandle =
getInternalInstanceHandleFromPublicInstance(handle);

if (internalInstanceHandle != null) {
var node = getNodeFromInternalInstanceHandle(internalInstanceHandle);
var node = getNodeFromPublicInstance(handle);

if (node != null) {
nativeFabricUIManager.dispatchCommand(node, command, args);
}
if (node != null) {
nativeFabricUIManager.dispatchCommand(node, command, args);
} else {
ReactNativePrivateInterface.UIManager.dispatchViewManagerCommand(
nativeTag,
Expand All @@ -26967,15 +26969,10 @@ function sendAccessibilityEvent(handle, eventType) {
return;
}

var internalInstanceHandle =
getInternalInstanceHandleFromPublicInstance(handle);

if (internalInstanceHandle != null) {
var node = getNodeFromInternalInstanceHandle(internalInstanceHandle);
var node = getNodeFromPublicInstance(handle);

if (node != null) {
nativeFabricUIManager.sendAccessibilityEvent(node, eventType);
}
if (node != null) {
nativeFabricUIManager.sendAccessibilityEvent(node, eventType);
} else {
ReactNativePrivateInterface.legacySendAccessibilityEvent(
nativeTag,
Expand Down Expand Up @@ -27466,6 +27463,10 @@ function getPublicInstance(instance) {

return null;
}
function getPublicInstanceFromInternalInstanceHandle(internalInstanceHandle) {
var instance = internalInstanceHandle.stateNode;
return getPublicInstance(instance);
}
function prepareUpdate(instance, type, oldProps, newProps, hostContext) {
var viewConfig = instance.canonical.viewConfig;
var updatePayload = diff(oldProps, newProps, viewConfig.validAttributes); // TODO: If the event handlers have changed, we need to update the current props
Expand Down Expand Up @@ -27803,12 +27804,7 @@ function getInspectorDataForViewAtPoint(
) {
{
var closestInstance = null;
var fabricInstanceHandle =
getInternalInstanceHandleFromPublicInstance(inspectedView);
var fabricNode =
fabricInstanceHandle != null
? getNodeFromInternalInstanceHandle(fabricInstanceHandle)
: null;
var fabricNode = getNodeFromPublicInstance(inspectedView);

if (fabricNode) {
// For Fabric we can look up the instance handle directly and measure it.
Expand Down Expand Up @@ -27971,6 +27967,8 @@ exports.findHostInstance_DEPRECATED = findHostInstance_DEPRECATED;
exports.findNodeHandle = findNodeHandle;
exports.getInspectorDataForInstance = getInspectorDataForInstance;
exports.getNodeFromInternalInstanceHandle = getNodeFromInternalInstanceHandle;
exports.getPublicInstanceFromInternalInstanceHandle =
getPublicInstanceFromInternalInstanceHandle;
exports.render = render;
exports.sendAccessibilityEvent = sendAccessibilityEvent;
exports.stopSurface = stopSurface;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9461,7 +9461,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1030 = {
findFiberByHostInstance: getInstanceFromNode,
bundleType: 0,
version: "18.3.0-next-c57b90f50-20230320",
version: "18.3.0-next-3554c8852-20230320",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
Expand Down Expand Up @@ -9503,7 +9503,7 @@ var internals$jscomp$inline_1277 = {
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-c57b90f50-20230320"
reconcilerVersion: "18.3.0-next-3554c8852-20230320"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1278 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand All @@ -9530,11 +9530,12 @@ exports.dispatchCommand = function (handle, command, args) {
var nativeTag =
null != handle._nativeTag ? handle._nativeTag : handle.__nativeTag;
null != nativeTag &&
((handle = handle.__internalInstanceHandle),
((handle =
null == handle.__internalInstanceHandle
? null
: getNodeFromInternalInstanceHandle(handle.__internalInstanceHandle)),
null != handle
? ((nativeTag = getNodeFromInternalInstanceHandle(handle)),
null != nativeTag &&
nativeFabricUIManager.dispatchCommand(nativeTag, command, args))
? nativeFabricUIManager.dispatchCommand(handle, command, args)
: ReactNativePrivateInterface.UIManager.dispatchViewManagerCommand(
nativeTag,
command,
Expand Down Expand Up @@ -9585,6 +9586,11 @@ exports.getInspectorDataForInstance = function (closestInstance) {
};
};
exports.getNodeFromInternalInstanceHandle = getNodeFromInternalInstanceHandle;
exports.getPublicInstanceFromInternalInstanceHandle = function (
internalInstanceHandle
) {
return getPublicInstance(internalInstanceHandle.stateNode);
};
exports.render = function (element, containerTag, callback, concurrentRoot) {
var root = roots.get(containerTag);
root ||
Expand Down Expand Up @@ -9620,11 +9626,12 @@ exports.sendAccessibilityEvent = function (handle, eventType) {
var nativeTag =
null != handle._nativeTag ? handle._nativeTag : handle.__nativeTag;
null != nativeTag &&
((handle = handle.__internalInstanceHandle),
((handle =
null == handle.__internalInstanceHandle
? null
: getNodeFromInternalInstanceHandle(handle.__internalInstanceHandle)),
null != handle
? ((nativeTag = getNodeFromInternalInstanceHandle(handle)),
null != nativeTag &&
nativeFabricUIManager.sendAccessibilityEvent(nativeTag, eventType))
? nativeFabricUIManager.sendAccessibilityEvent(handle, eventType)
: ReactNativePrivateInterface.legacySendAccessibilityEvent(
nativeTag,
eventType
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10171,7 +10171,7 @@ var roots = new Map(),
devToolsConfig$jscomp$inline_1107 = {
findFiberByHostInstance: getInstanceFromNode,
bundleType: 0,
version: "18.3.0-next-c57b90f50-20230320",
version: "18.3.0-next-3554c8852-20230320",
rendererPackageName: "react-native-renderer",
rendererConfig: {
getInspectorDataForViewTag: function () {
Expand Down Expand Up @@ -10226,7 +10226,7 @@ var roots = new Map(),
scheduleRoot: null,
setRefreshHandler: null,
getCurrentFiber: null,
reconcilerVersion: "18.3.0-next-c57b90f50-20230320"
reconcilerVersion: "18.3.0-next-3554c8852-20230320"
});
exports.createPortal = function (children, containerTag) {
return createPortal$1(
Expand All @@ -10240,11 +10240,12 @@ exports.dispatchCommand = function (handle, command, args) {
var nativeTag =
null != handle._nativeTag ? handle._nativeTag : handle.__nativeTag;
null != nativeTag &&
((handle = handle.__internalInstanceHandle),
((handle =
null == handle.__internalInstanceHandle
? null
: getNodeFromInternalInstanceHandle(handle.__internalInstanceHandle)),
null != handle
? ((nativeTag = getNodeFromInternalInstanceHandle(handle)),
null != nativeTag &&
nativeFabricUIManager.dispatchCommand(nativeTag, command, args))
? nativeFabricUIManager.dispatchCommand(handle, command, args)
: ReactNativePrivateInterface.UIManager.dispatchViewManagerCommand(
nativeTag,
command,
Expand Down Expand Up @@ -10295,6 +10296,11 @@ exports.getInspectorDataForInstance = function (closestInstance) {
};
};
exports.getNodeFromInternalInstanceHandle = getNodeFromInternalInstanceHandle;
exports.getPublicInstanceFromInternalInstanceHandle = function (
internalInstanceHandle
) {
return getPublicInstance(internalInstanceHandle.stateNode);
};
exports.render = function (element, containerTag, callback, concurrentRoot) {
var root = roots.get(containerTag);
root ||
Expand Down Expand Up @@ -10332,11 +10338,12 @@ exports.sendAccessibilityEvent = function (handle, eventType) {
var nativeTag =
null != handle._nativeTag ? handle._nativeTag : handle.__nativeTag;
null != nativeTag &&
((handle = handle.__internalInstanceHandle),
((handle =
null == handle.__internalInstanceHandle
? null
: getNodeFromInternalInstanceHandle(handle.__internalInstanceHandle)),
null != handle
? ((nativeTag = getNodeFromInternalInstanceHandle(handle)),
null != nativeTag &&
nativeFabricUIManager.sendAccessibilityEvent(nativeTag, eventType))
? nativeFabricUIManager.sendAccessibilityEvent(handle, eventType)
: ReactNativePrivateInterface.legacySendAccessibilityEvent(
nativeTag,
eventType
Expand Down
Loading

0 comments on commit eee3aa6

Please sign in to comment.