Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix source mapping for codegenNativeCommands
Summary: `babel-plugin-codegen` transforms `codegenNativeComponent`s by expending it with a whole set of many commands (~40 lines) that don't have a good equivalent on the source file. Currently these lines are pointing to random parts of the due to a bug that causes the source maps to be incorrect and confusing. Instead, I point all these generated lines of code to the default export as the only line that can represent them. This way, if an error is thrown from that generated code it would point to that export. If the users are confused by how it works, there's a comment in the function that is used in the default export in these that explains it: ``` // If this function runs then that means the view configs were not // generated at build time using `GenerateViewConfigJs.js`. Thus // we need to `requireNativeComponent` to get the view configs from view managers. // `requireNativeComponent` is not available in Bridgeless mode. // e.g. This function runs at runtime if `codegenNativeComponent` was not called // from a file suffixed with NativeComponent.js. function codegenNativeComponent<Props>( componentName: string, options?: Options, ): NativeComponentType<Props> { ``` The transformation is from all the types and exports after the imports: [`MyNativeViewNativeComponent` for example](https://github.com/facebook/react-native/blob/773a02ad5d3cc38e0f5837b42ba9a5e05a206bf9/packages/rn-tester/NativeComponentExample/js/MyNativeViewNativeComponent.js#L4) Which is roughly (ignoring all typing): ``` // types and exports export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({ supportedCommands: [ 'callNativeMethodToChangeBackgroundColor', 'callNativeMethodToAddOverlays', 'callNativeMethodToRemoveOverlays', 'fireLagacyStyleEvent', ], }); export default (codegenNativeComponent<NativeProps>( 'RNTMyNativeView', ): MyNativeViewType); ``` to roughly: ``` var React = require('react'); var nativeComponentName = 'RNTMyNativeView'; var __INTERNAL_VIEW_CONFIG = { uiViewClassName: 'RNTMyNativeView', bubblingEventTypes: { topIntArrayChanged: { /* */ }, topAlternativeLegacyName: { /* */ }, }, validAttributes: { opacity: true, values: true, ...require('ViewConfigIgnore').ConditionallyIgnoredEventHandlers({ onIntArrayChanged: true, onLegacyStyleEvent: true }) } }; var _default = require('NativeComponentRegistry').get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG); var Commands = { callNativeMethodToChangeBackgroundColor(ref, color) { require('RendererProxy').dispatchCommand(ref, "callNativeMethodToChangeBackgroundColor", [color]); }, callNativeMethodToAddOverlays(ref, overlayColors) { require('RendererProxy').dispatchCommand(ref, "callNativeMethodToAddOverlays", [overlayColors]); }, callNativeMethodToRemoveOverlays(ref) { require('RendererProxy').dispatchCommand(ref, "callNativeMethodToRemoveOverlays", []); }, fireLagacyStyleEvent(ref) { require('RendererProxy').dispatchCommand(ref, "fireLagacyStyleEvent", []); } }; exports.default = _default; exports.__INTERNAL_VIEW_CONFIG = __INTERNAL_VIEW_CONFIG; exports.Commands = Commands; ``` Differential Revision: D62443699
- Loading branch information