From 45ea68b150e864506b2a1ca2f8ef24b3c433ece5 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 23 Nov 2023 06:36:51 -0800 Subject: [PATCH 1/2] feat[TraceUpdateOverlay]: add iOS native component (#41563) Summary: Changelog: [iOS][Added] - support "highlighting updates when components render" feature from React DevTools Reviewed By: javache Differential Revision: D51470012 --- .../TraceUpdateOverlay/TraceUpdateOverlay.js | 10 ++- .../RCTFabricComponentsPlugins.h | 1 + .../RCTFabricComponentsPlugins.mm | 1 + .../RCTTraceUpdateOverlayComponentView.h | 16 +++++ .../RCTTraceUpdateOverlayComponentView.mm | 65 +++++++++++++++++++ .../React/Views/RCTTraceUpdateOverlay.h | 16 +++++ .../React/Views/RCTTraceUpdateOverlay.m | 57 ++++++++++++++++ .../Views/RCTTraceUpdateOverlayManager.h | 12 ++++ .../Views/RCTTraceUpdateOverlayManager.m | 38 +++++++++++ 9 files changed, 210 insertions(+), 6 deletions(-) create mode 100644 packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h create mode 100644 packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm create mode 100644 packages/react-native/React/Views/RCTTraceUpdateOverlay.h create mode 100644 packages/react-native/React/Views/RCTTraceUpdateOverlay.m create mode 100644 packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h create mode 100644 packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m diff --git a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js index 57c70fd5f28c75..97a4426e11fd42 100644 --- a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js +++ b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js @@ -17,7 +17,6 @@ import type {Overlay} from './TraceUpdateOverlayNativeComponent'; import UIManager from '../../ReactNative/UIManager'; import processColor from '../../StyleSheet/processColor'; import StyleSheet from '../../StyleSheet/StyleSheet'; -import Platform from '../../Utilities/Platform'; import View from '../View/View'; import TraceUpdateOverlayNativeComponent, { Commands, @@ -26,7 +25,6 @@ import * as React from 'react'; const {useEffect, useRef, useState} = React; const isNativeComponentReady = - Platform.OS === 'android' && UIManager.hasViewManagerConfig('TraceUpdateOverlay'); type Props = { @@ -39,13 +37,13 @@ export default function TraceUpdateOverlay({ const [overlayDisabled, setOverlayDisabled] = useState(false); useEffect(() => { - if (!isNativeComponentReady) { - return; - } - const drawTraceUpdates = ( nodesToDraw: Array<{node: InstanceFromReactDevTools, color: string}> = [], ) => { + if (!isNativeComponentReady) { + return; + } + // If overlay is disabled before, now it's enabled. setOverlayDisabled(false); diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h index ca5f395c3141a8..51912e25dcd143 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h @@ -38,6 +38,7 @@ Class RCTSafeAreaViewCls(void) __attribute__((used)); Class RCTScrollViewCls(void) __attribute__((used)); Class RCTSwitchCls(void) __attribute__((used)); Class RCTTextInputCls(void) __attribute__((used)); +Class RCTTraceUpdateOverlayCls(void) __attribute__((used)); Class RCTUnimplementedNativeViewCls(void) __attribute__((used)); Class RCTViewCls(void) __attribute__((used)); Class RCTImageCls(void) __attribute__((used)); diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm index 02d1dc1a125af7..dff4412f48ab38 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm @@ -26,6 +26,7 @@ {"ScrollView", RCTScrollViewCls}, {"Switch", RCTSwitchCls}, {"TextInput", RCTTextInputCls}, + {"TraceUpdateOverlay", RCTTraceUpdateOverlayCls}, {"UnimplementedNativeView", RCTUnimplementedNativeViewCls}, {"View", RCTViewCls}, {"Image", RCTImageCls}, diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h new file mode 100644 index 00000000000000..d6aa304ef5725b --- /dev/null +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h @@ -0,0 +1,16 @@ +/* + * 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. + */ + +#import + +#import + +#import + +@interface RCTTraceUpdateOverlayComponentView : RCTViewComponentView + +@end diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm new file mode 100644 index 00000000000000..6bf68de14e15a8 --- /dev/null +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm @@ -0,0 +1,65 @@ +/* + * 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. + */ + +#import "RCTTraceUpdateOverlayComponentView.h" + +#import +#import +#import + +#import +#import +#import +#import + +#import "RCTFabricComponentsPlugins.h" + +using namespace facebook::react; + +@implementation RCTTraceUpdateOverlayComponentView { + RCTTraceUpdateOverlay *_overlay; +} + +- (instancetype)initWithFrame:(CGRect)frame +{ + if (self = [super initWithFrame:frame]) { + static const auto defaultProps = std::make_shared(); + _props = defaultProps; + + _overlay = [[RCTTraceUpdateOverlay alloc] initWithFrame:self.bounds]; + + self.contentView = _overlay; + } + + return self; +} + +#pragma mark - RCTComponentViewProtocol + ++ (ComponentDescriptorProvider)componentDescriptorProvider +{ + return concreteComponentDescriptorProvider(); +} + +#pragma mark - Native commands + +- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args +{ + RCTTraceUpdateOverlayHandleCommand(self, commandName, args); +} + +- (void)draw:(NSString *)overlays +{ + [_overlay draw:overlays]; +} + +@end + +Class RCTTraceUpdateOverlayCls(void) +{ + return RCTTraceUpdateOverlayComponentView.class; +} diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlay.h b/packages/react-native/React/Views/RCTTraceUpdateOverlay.h new file mode 100644 index 00000000000000..480883044d2e49 --- /dev/null +++ b/packages/react-native/React/Views/RCTTraceUpdateOverlay.h @@ -0,0 +1,16 @@ +/* + * 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. + */ + +#import + +#import + +@interface RCTTraceUpdateOverlay : RCTView + +- (void)draw:(NSString *)serializedNodes; + +@end diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlay.m b/packages/react-native/React/Views/RCTTraceUpdateOverlay.m new file mode 100644 index 00000000000000..198f46b94429b6 --- /dev/null +++ b/packages/react-native/React/Views/RCTTraceUpdateOverlay.m @@ -0,0 +1,57 @@ +/* + * 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. + */ + +#import "RCTTraceUpdateOverlay.h" + +#import +#import +#import + +@implementation RCTTraceUpdateOverlay + +- (void)draw:(NSString *)serializedNodes +{ + NSArray *subViewsToRemove = [self subviews]; + for (UIView *v in subViewsToRemove) { + [v removeFromSuperview]; + } + + NSError *error = nil; + id deserializedNodes = RCTJSONParse(serializedNodes, &error); + + if (error) { + RCTLogError(@"Failed to parse serialized nodes passed to RCTTraceUpdatesOverlay"); + return; + } + + if (![deserializedNodes isKindOfClass:[NSArray class]]) { + RCTLogError(@"Expected to receive nodes as an array, got %@", NSStringFromClass([deserializedNodes class])); + return; + } + + for (NSDictionary *node in deserializedNodes) { + NSDictionary *nodeRectangle = node[@"rect"]; + NSNumber *nodeColor = node[@"color"]; + + NSNumber *x = nodeRectangle[@"left"]; + NSNumber *y = nodeRectangle[@"top"]; + NSNumber *width = nodeRectangle[@"width"]; + NSNumber *height = nodeRectangle[@"height"]; + + CGRect rect = CGRectMake(x.doubleValue, y.doubleValue, width.doubleValue, height.doubleValue); + + UIView *box = [[UIView alloc] initWithFrame:rect]; + box.backgroundColor = [UIColor clearColor]; + + box.layer.borderWidth = 2.0f; + box.layer.borderColor = [RCTConvert UIColor:nodeColor].CGColor; + + [self addSubview:box]; + } +} + +@end diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h b/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h new file mode 100644 index 00000000000000..f50680420dc332 --- /dev/null +++ b/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h @@ -0,0 +1,12 @@ +/* + * 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. + */ + +#import + +@interface RCTTraceUpdateOverlayManager : RCTViewManager + +@end diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m b/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m new file mode 100644 index 00000000000000..8386b94941d997 --- /dev/null +++ b/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m @@ -0,0 +1,38 @@ +/* + * 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. + */ + +#import "RCTTraceUpdateOverlayManager.h" +#import "RCTTraceUpdateOverlay.h" + +#import +#import + +#import "RCTBridge.h" + +@implementation RCTTraceUpdateOverlayManager + +RCT_EXPORT_MODULE(TraceUpdateOverlay) + +- (UIView *)view +{ + return [RCTTraceUpdateOverlay new]; +} + +RCT_EXPORT_METHOD(draw : (nonnull NSNumber *)viewTag nodes : (NSString *)serializedNodes) +{ + [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary *viewRegistry) { + UIView *view = viewRegistry[viewTag]; + + if ([view isKindOfClass:[RCTTraceUpdateOverlay class]]) { + [(RCTTraceUpdateOverlay *)view draw:serializedNodes]; + } else { + RCTLogError(@"Expected view to be RCTTraceUpdateOverlay, got %@", NSStringFromClass([view class])); + } + }]; +} + +@end From fac4f356c7f1f1666acfe394fe50db213a9fdf11 Mon Sep 17 00:00:00 2001 From: Ruslan Lesiutin Date: Thu, 23 Nov 2023 06:36:51 -0800 Subject: [PATCH 2/2] refactor: TraceUpdates native component -> DebuggingOverlay (#41562) Summary: Changelog: [Internal] We will use this native component as a single layer for drawing debugging information: both for trace updates and inspected components from React DevTools. Reviewed By: javache Differential Revision: D51470789 --- .../TraceUpdateOverlay/TraceUpdateOverlay.js | 14 ++++++------- .../DebuggingOverlayNativeComponent.js} | 16 +++++++-------- .../RCTDebuggingOverlayComponentView.h} | 2 +- .../RCTDebuggingOverlayComponentView.mm} | 20 +++++++++---------- .../RCTFabricComponentsPlugins.h | 2 +- .../RCTFabricComponentsPlugins.mm | 2 +- ...eUpdateOverlay.h => RCTDebuggingOverlay.h} | 2 +- ...eUpdateOverlay.m => RCTDebuggingOverlay.m} | 6 +++--- ...Manager.h => RCTDebuggingOverlayManager.h} | 2 +- ...Manager.m => RCTDebuggingOverlayManager.m} | 16 +++++++-------- .../com/facebook/react/DebugCorePackage.java | 5 ++--- .../DebuggingOverlay.java} | 6 +++--- .../DebuggingOverlayManager.java} | 20 +++++++++---------- .../react/fabric/CoreComponentsRegistry.cpp | 2 +- 14 files changed, 57 insertions(+), 58 deletions(-) rename packages/react-native/Libraries/{Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js => Debugging/DebuggingOverlayNativeComponent.js} (62%) rename packages/react-native/React/Fabric/Mounting/ComponentViews/{TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h => DebuggingOverlay/RCTDebuggingOverlayComponentView.h} (75%) rename packages/react-native/React/Fabric/Mounting/ComponentViews/{TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm => DebuggingOverlay/RCTDebuggingOverlayComponentView.mm} (63%) rename packages/react-native/React/Views/{RCTTraceUpdateOverlay.h => RCTDebuggingOverlay.h} (87%) rename packages/react-native/React/Views/{RCTTraceUpdateOverlay.m => RCTDebuggingOverlay.m} (93%) rename packages/react-native/React/Views/{RCTTraceUpdateOverlayManager.h => RCTDebuggingOverlayManager.h} (80%) rename packages/react-native/React/Views/{RCTTraceUpdateOverlayManager.m => RCTDebuggingOverlayManager.m} (57%) rename packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/{traceupdateoverlay/TraceUpdateOverlay.java => debuggingoverlay/DebuggingOverlay.java} (92%) rename packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/{traceupdateoverlay/TraceUpdateOverlayManager.java => debuggingoverlay/DebuggingOverlayManager.java} (76%) diff --git a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js index 97a4426e11fd42..94ded259e1249e 100644 --- a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js +++ b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js @@ -8,24 +8,24 @@ * @format */ +import type {Overlay} from '../../Debugging/DebuggingOverlayNativeComponent'; import type { InstanceFromReactDevTools, ReactDevToolsAgent, } from '../../Types/ReactDevToolsTypes'; -import type {Overlay} from './TraceUpdateOverlayNativeComponent'; +import DebuggingOverlayNativeComponent, { + Commands, +} from '../../Debugging/DebuggingOverlayNativeComponent'; import UIManager from '../../ReactNative/UIManager'; import processColor from '../../StyleSheet/processColor'; import StyleSheet from '../../StyleSheet/StyleSheet'; import View from '../View/View'; -import TraceUpdateOverlayNativeComponent, { - Commands, -} from './TraceUpdateOverlayNativeComponent'; import * as React from 'react'; const {useEffect, useRef, useState} = React; const isNativeComponentReady = - UIManager.hasViewManagerConfig('TraceUpdateOverlay'); + UIManager.hasViewManagerConfig('DebuggingOverlay'); type Props = { reactDevToolsAgent: ReactDevToolsAgent, @@ -111,13 +111,13 @@ export default function TraceUpdateOverlay({ }, [reactDevToolsAgent]); const nativeComponentRef = - useRef>(null); + useRef>(null); return ( !overlayDisabled && isNativeComponentReady && ( - diff --git a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js similarity index 62% rename from packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js rename to packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js index 837223e3774b2d..0e2f95514583e9 100644 --- a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js +++ b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js @@ -8,18 +8,18 @@ * @format */ -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import type {ProcessedColorValue} from '../../StyleSheet/processColor'; -import type {ViewProps} from '../View/ViewPropTypes'; +import type {ViewProps} from '../Components/View/ViewPropTypes'; +import type {HostComponent} from '../Renderer/shims/ReactNativeTypes'; +import type {ProcessedColorValue} from '../StyleSheet/processColor'; -import codegenNativeCommands from '../../Utilities/codegenNativeCommands'; -import codegenNativeComponent from '../../Utilities/codegenNativeComponent'; +import codegenNativeCommands from '../Utilities/codegenNativeCommands'; +import codegenNativeComponent from '../Utilities/codegenNativeComponent'; import * as React from 'react'; type NativeProps = $ReadOnly<{| ...ViewProps, |}>; -export type TraceUpdateOverlayNativeComponentType = HostComponent; +export type DebuggingOverlayNativeComponentType = HostComponent; export type Overlay = { rect: {left: number, top: number, width: number, height: number}, color: ?ProcessedColorValue, @@ -27,7 +27,7 @@ export type Overlay = { interface NativeCommands { +draw: ( - viewRef: React.ElementRef, + viewRef: React.ElementRef, // TODO(T144046177): Ideally we can pass array of Overlay, but currently // Array type is not supported in RN codegen for building native commands. overlays: string, @@ -39,5 +39,5 @@ export const Commands: NativeCommands = codegenNativeCommands({ }); export default (codegenNativeComponent( - 'TraceUpdateOverlay', + 'DebuggingOverlay', ): HostComponent); diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.h similarity index 75% rename from packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h rename to packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.h index d6aa304ef5725b..9ee08512265621 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.h +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.h @@ -11,6 +11,6 @@ #import -@interface RCTTraceUpdateOverlayComponentView : RCTViewComponentView +@interface RCTDebuggingOverlayComponentView : RCTViewComponentView @end diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.mm similarity index 63% rename from packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm rename to packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.mm index 6bf68de14e15a8..31d1dcb5f77962 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/TraceUpdateOverlay/RCTTraceUpdateOverlayComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.mm @@ -5,11 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -#import "RCTTraceUpdateOverlayComponentView.h" +#import "RCTDebuggingOverlayComponentView.h" +#import #import #import -#import #import #import @@ -20,17 +20,17 @@ using namespace facebook::react; -@implementation RCTTraceUpdateOverlayComponentView { - RCTTraceUpdateOverlay *_overlay; +@implementation RCTDebuggingOverlayComponentView { + RCTDebuggingOverlay *_overlay; } - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { - static const auto defaultProps = std::make_shared(); + static const auto defaultProps = std::make_shared(); _props = defaultProps; - _overlay = [[RCTTraceUpdateOverlay alloc] initWithFrame:self.bounds]; + _overlay = [[RCTDebuggingOverlay alloc] initWithFrame:self.bounds]; self.contentView = _overlay; } @@ -42,14 +42,14 @@ - (instancetype)initWithFrame:(CGRect)frame + (ComponentDescriptorProvider)componentDescriptorProvider { - return concreteComponentDescriptorProvider(); + return concreteComponentDescriptorProvider(); } #pragma mark - Native commands - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args { - RCTTraceUpdateOverlayHandleCommand(self, commandName, args); + RCTDebuggingOverlayHandleCommand(self, commandName, args); } - (void)draw:(NSString *)overlays @@ -59,7 +59,7 @@ - (void)draw:(NSString *)overlays @end -Class RCTTraceUpdateOverlayCls(void) +Class RCTDebuggingOverlayCls(void) { - return RCTTraceUpdateOverlayComponentView.class; + return RCTDebuggingOverlayComponentView.class; } diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h index 51912e25dcd143..54936a93de7c5c 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h @@ -31,6 +31,7 @@ Class RCTFabricComponentsProvider(const char *name); // Lookup functions Class RCTActivityIndicatorViewCls(void) __attribute__((used)); +Class RCTDebuggingOverlayCls(void) __attribute__((used)); Class RCTInputAccessoryCls(void) __attribute__((used)); Class RCTParagraphCls(void) __attribute__((used)); Class RCTPullToRefreshViewCls(void) __attribute__((used)); @@ -38,7 +39,6 @@ Class RCTSafeAreaViewCls(void) __attribute__((used)); Class RCTScrollViewCls(void) __attribute__((used)); Class RCTSwitchCls(void) __attribute__((used)); Class RCTTextInputCls(void) __attribute__((used)); -Class RCTTraceUpdateOverlayCls(void) __attribute__((used)); Class RCTUnimplementedNativeViewCls(void) __attribute__((used)); Class RCTViewCls(void) __attribute__((used)); Class RCTImageCls(void) __attribute__((used)); diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm index dff4412f48ab38..f07b0301cd28a5 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm @@ -19,6 +19,7 @@ Class RCTFabricComponentsProvider(const char *name) { static std::unordered_map sFabricComponentsClassMap = { {"ActivityIndicatorView", RCTActivityIndicatorViewCls}, + {"DebuggingOverlay", RCTDebuggingOverlayCls}, {"InputAccessoryView", RCTInputAccessoryCls}, {"Paragraph", RCTParagraphCls}, {"PullToRefreshView", RCTPullToRefreshViewCls}, @@ -26,7 +27,6 @@ {"ScrollView", RCTScrollViewCls}, {"Switch", RCTSwitchCls}, {"TextInput", RCTTextInputCls}, - {"TraceUpdateOverlay", RCTTraceUpdateOverlayCls}, {"UnimplementedNativeView", RCTUnimplementedNativeViewCls}, {"View", RCTViewCls}, {"Image", RCTImageCls}, diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlay.h b/packages/react-native/React/Views/RCTDebuggingOverlay.h similarity index 87% rename from packages/react-native/React/Views/RCTTraceUpdateOverlay.h rename to packages/react-native/React/Views/RCTDebuggingOverlay.h index 480883044d2e49..64b7d1feb03e45 100644 --- a/packages/react-native/React/Views/RCTTraceUpdateOverlay.h +++ b/packages/react-native/React/Views/RCTDebuggingOverlay.h @@ -9,7 +9,7 @@ #import -@interface RCTTraceUpdateOverlay : RCTView +@interface RCTDebuggingOverlay : RCTView - (void)draw:(NSString *)serializedNodes; diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlay.m b/packages/react-native/React/Views/RCTDebuggingOverlay.m similarity index 93% rename from packages/react-native/React/Views/RCTTraceUpdateOverlay.m rename to packages/react-native/React/Views/RCTDebuggingOverlay.m index 198f46b94429b6..992862bd5ec2f0 100644 --- a/packages/react-native/React/Views/RCTTraceUpdateOverlay.m +++ b/packages/react-native/React/Views/RCTDebuggingOverlay.m @@ -5,13 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -#import "RCTTraceUpdateOverlay.h" +#import "RCTDebuggingOverlay.h" #import #import #import -@implementation RCTTraceUpdateOverlay +@implementation RCTDebuggingOverlay - (void)draw:(NSString *)serializedNodes { @@ -24,7 +24,7 @@ - (void)draw:(NSString *)serializedNodes id deserializedNodes = RCTJSONParse(serializedNodes, &error); if (error) { - RCTLogError(@"Failed to parse serialized nodes passed to RCTTraceUpdatesOverlay"); + RCTLogError(@"Failed to parse serialized nodes passed to RCTDebuggingOverlay"); return; } diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h b/packages/react-native/React/Views/RCTDebuggingOverlayManager.h similarity index 80% rename from packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h rename to packages/react-native/React/Views/RCTDebuggingOverlayManager.h index f50680420dc332..a852cc81883e19 100644 --- a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.h +++ b/packages/react-native/React/Views/RCTDebuggingOverlayManager.h @@ -7,6 +7,6 @@ #import -@interface RCTTraceUpdateOverlayManager : RCTViewManager +@interface RCTDebuggingOverlayManager : RCTViewManager @end diff --git a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m b/packages/react-native/React/Views/RCTDebuggingOverlayManager.m similarity index 57% rename from packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m rename to packages/react-native/React/Views/RCTDebuggingOverlayManager.m index 8386b94941d997..ae00c27ac2e23a 100644 --- a/packages/react-native/React/Views/RCTTraceUpdateOverlayManager.m +++ b/packages/react-native/React/Views/RCTDebuggingOverlayManager.m @@ -5,21 +5,21 @@ * LICENSE file in the root directory of this source tree. */ -#import "RCTTraceUpdateOverlayManager.h" -#import "RCTTraceUpdateOverlay.h" +#import "RCTDebuggingOverlayManager.h" +#import "RCTDebuggingOverlay.h" #import #import #import "RCTBridge.h" -@implementation RCTTraceUpdateOverlayManager +@implementation RCTDebuggingOverlayManager -RCT_EXPORT_MODULE(TraceUpdateOverlay) +RCT_EXPORT_MODULE(DebuggingOverlay) - (UIView *)view { - return [RCTTraceUpdateOverlay new]; + return [RCTDebuggingOverlay new]; } RCT_EXPORT_METHOD(draw : (nonnull NSNumber *)viewTag nodes : (NSString *)serializedNodes) @@ -27,10 +27,10 @@ - (UIView *)view [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary *viewRegistry) { UIView *view = viewRegistry[viewTag]; - if ([view isKindOfClass:[RCTTraceUpdateOverlay class]]) { - [(RCTTraceUpdateOverlay *)view draw:serializedNodes]; + if ([view isKindOfClass:[RCTDebuggingOverlay class]]) { + [(RCTDebuggingOverlay *)view draw:serializedNodes]; } else { - RCTLogError(@"Expected view to be RCTTraceUpdateOverlay, got %@", NSStringFromClass([view class])); + RCTLogError(@"Expected view to be RCTDebuggingOverlay, got %@", NSStringFromClass([view class])); } }]; } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java index 398b69ac1a5684..69471937ab8501 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java @@ -19,7 +19,7 @@ import com.facebook.react.module.model.ReactModuleInfoProvider; import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.ViewManager; -import com.facebook.react.views.traceupdateoverlay.TraceUpdateOverlayManager; +import com.facebook.react.views.debuggingoverlay.DebuggingOverlayManager; import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; @@ -96,8 +96,7 @@ private static void appendMap( private Map getViewManagersMap() { if (mViewManagers == null) { Map viewManagers = new HashMap<>(); - appendMap( - viewManagers, TraceUpdateOverlayManager.REACT_CLASS, TraceUpdateOverlayManager::new); + appendMap(viewManagers, DebuggingOverlayManager.REACT_CLASS, DebuggingOverlayManager::new); mViewManagers = viewManagers; } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlay.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlay.java similarity index 92% rename from packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlay.java rename to packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlay.java index 6799848284828f..0ebaf4b8743866 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlay.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlay.java @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -package com.facebook.react.views.traceupdateoverlay; +package com.facebook.react.views.debuggingoverlay; import android.content.Context; import android.graphics.Canvas; @@ -17,7 +17,7 @@ import java.util.ArrayList; import java.util.List; -public class TraceUpdateOverlay extends View { +public class DebuggingOverlay extends View { private final Paint mOverlayPaint = new Paint(); private List mOverlays = new ArrayList(); @@ -43,7 +43,7 @@ public RectF getPixelRect() { } } - public TraceUpdateOverlay(Context context) { + public DebuggingOverlay(Context context) { super(context); mOverlayPaint.setStyle(Paint.Style.STROKE); mOverlayPaint.setStrokeWidth(6); diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlayManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java similarity index 76% rename from packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlayManager.java rename to packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java index 434be098b1a2fa..cacdd5c4dbfeda 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/traceupdateoverlay/TraceUpdateOverlayManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -package com.facebook.react.views.traceupdateoverlay; +package com.facebook.react.views.debuggingoverlay; import android.graphics.RectF; import androidx.annotation.Nullable; @@ -16,22 +16,22 @@ import com.facebook.react.module.annotations.ReactModule; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; -import com.facebook.react.views.traceupdateoverlay.TraceUpdateOverlay.Overlay; +import com.facebook.react.views.debuggingoverlay.DebuggingOverlay.Overlay; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; -@ReactModule(name = TraceUpdateOverlayManager.REACT_CLASS) -public class TraceUpdateOverlayManager extends SimpleViewManager { - public static final String REACT_CLASS = "TraceUpdateOverlay"; +@ReactModule(name = DebuggingOverlayManager.REACT_CLASS) +public class DebuggingOverlayManager extends SimpleViewManager { + public static final String REACT_CLASS = "DebuggingOverlay"; - public TraceUpdateOverlayManager() {} + public DebuggingOverlayManager() {} @Override public void receiveCommand( - TraceUpdateOverlay view, String commandId, @Nullable ReadableArray args) { + DebuggingOverlay view, String commandId, @Nullable ReadableArray args) { switch (commandId) { case "draw": if (args == null) { @@ -67,13 +67,13 @@ public void receiveCommand( ReactSoftExceptionLogger.logSoftException( REACT_CLASS, new ReactNoCrashSoftException( - "Received unexpected command in TraceUpdateOverlayManager")); + "Received unexpected command in DebuggingOverlayManager")); } } @Override - public TraceUpdateOverlay createViewInstance(ThemedReactContext context) { - return new TraceUpdateOverlay(context); + public DebuggingOverlay createViewInstance(ThemedReactContext context) { + return new DebuggingOverlay(context); } @Override diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp index 5cc5aae68d5bff..99ddee8b3b1dd1 100644 --- a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp +++ b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp @@ -66,7 +66,7 @@ CoreComponentsRegistry::sharedProviderRegistry() { providerRegistry->add(concreteComponentDescriptorProvider< AndroidDrawerLayoutComponentDescriptor>()); providerRegistry->add(concreteComponentDescriptorProvider< - TraceUpdateOverlayComponentDescriptor>()); + DebuggingOverlayComponentDescriptor>()); return providerRegistry; }();