From 6974697b049eff0038a17e3ebf962ec7451a5aa4 Mon Sep 17 00:00:00 2001 From: Dmitry Rykun Date: Tue, 13 Feb 2024 04:31:25 -0800 Subject: [PATCH] Use paperTopLevelNameDeprecated in generated EventEmitters if defined (#42812) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/42812 There is a way of defining events where you specify additional string type parameter in the EventHandler in the spec. This additional type parameter is an overridden top level event name, that can be completely unrelated to the event handler name. More context here D16042065. Let's say we have ``` onLegacyStyleEvent?: ?BubblingEventHandler ``` This will produce the following entry in the view config: ``` topAlternativeLegacyName: { phasedRegistrationNames: { captured: 'onLegacyStyleEventCapture', bubbled: 'onLegacyStyleEvent' } } ``` This means that React expects `topAlternativeLegacyName`. But the generated EventEmitter looks like this: ``` void RNTMyNativeViewEventEmitter::onLegacyStyleEvent(OnLegacyStyleEvent $event) const { dispatchEvent("legacyStyleEvent", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, "string", $event.string); return $payload; }); } ``` The native component will emit `legacyStyleEvent` (`topLegacyStyleEvent` after normalization) that React will not be able to handle. This issue only happens on iOS because Android doesn't use EventEmitter currently. To address this issue we'll use `paperTopLevelNameDeprecated` for the generated EventEmitters if it is defined. Changelog: [iOS][Fixed] - Fixed support for event name override in component specs. Reviewed By: cortinico, mdvacca, cipolleschi Differential Revision: D53310654 fbshipit-source-id: 018d5b11d8d36e2ecf900b9d8d6fe3e2ed71f80b --- .../__snapshots__/GenerateEventEmitterCpp-test.js.snap | 8 ++++---- .../src/generators/components/GenerateEventEmitterCpp.js | 7 ++++--- .../__snapshots__/GenerateEventEmitterCpp-test.js.snap | 4 ++-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateEventEmitterCpp-test.js.snap b/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateEventEmitterCpp-test.js.snap index bccda779f83e92..a53541759bf301 100644 --- a/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateEventEmitterCpp-test.js.snap +++ b/packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateEventEmitterCpp-test.js.snap @@ -190,7 +190,7 @@ Object { namespace facebook::react { void EventPropsNativeComponentViewEventEmitter::onChange(OnChange $event) const { - dispatchEvent(\\"change\\", [$event=std::move($event)](jsi::Runtime &runtime) { + dispatchEvent(\\"paperDirectName\\", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, \\"value\\", $event.value); $payload.setProperty(runtime, \\"source\\", $event.source); @@ -211,7 +211,7 @@ void EventPropsNativeComponentViewEventEmitter::onEventDirect(OnEventDirect $eve void EventPropsNativeComponentViewEventEmitter::onEventDirectWithPaperName(OnEventDirectWithPaperName $event) const { - dispatchEvent(\\"eventDirectWithPaperName\\", [$event=std::move($event)](jsi::Runtime &runtime) { + dispatchEvent(\\"paperDirectName\\", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, \\"value\\", $event.value); return $payload; @@ -220,7 +220,7 @@ void EventPropsNativeComponentViewEventEmitter::onEventDirectWithPaperName(OnEve void EventPropsNativeComponentViewEventEmitter::onOrientationChange(OnOrientationChange $event) const { - dispatchEvent(\\"orientationChange\\", [$event=std::move($event)](jsi::Runtime &runtime) { + dispatchEvent(\\"paperBubblingName\\", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, \\"orientation\\", toString($event.orientation)); return $payload; @@ -238,7 +238,7 @@ void EventPropsNativeComponentViewEventEmitter::onEnd(OnEnd $event) const { void EventPropsNativeComponentViewEventEmitter::onEventBubblingWithPaperName(OnEventBubblingWithPaperName $event) const { - dispatchEvent(\\"eventBubblingWithPaperName\\", [](jsi::Runtime &runtime) { + dispatchEvent(\\"paperBubblingName\\", [](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); return $payload; diff --git a/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js b/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js index 2b3326677eede8..2f2a829d19955d 100644 --- a/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js +++ b/packages/react-native-codegen/src/generators/components/GenerateEventEmitterCpp.js @@ -369,9 +369,10 @@ function generateEvent( // In order to migrate to this new system we have to support the current // naming scheme. We should delete this once we are able to control this name // throughout the system. - const dispatchEventName = `${event.name[2].toLowerCase()}${event.name.slice( - 3, - )}`; + const dispatchEventName = + event.paperTopLevelNameDeprecated != null + ? event.paperTopLevelNameDeprecated + : `${event.name[2].toLowerCase()}${event.name.slice(3)}`; if (event.typeAnnotation.argument) { const implementation = ` diff --git a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateEventEmitterCpp-test.js.snap b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateEventEmitterCpp-test.js.snap index 57a82be1187497..ff3dea1de62bda 100644 --- a/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateEventEmitterCpp-test.js.snap +++ b/packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateEventEmitterCpp-test.js.snap @@ -361,7 +361,7 @@ Map { namespace facebook::react { void InterfaceOnlyComponentEventEmitter::onChange(OnChange $event) const { - dispatchEvent(\\"change\\", [$event=std::move($event)](jsi::Runtime &runtime) { + dispatchEvent(\\"paperChange\\", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, \\"value\\", $event.value); return $payload; @@ -370,7 +370,7 @@ void InterfaceOnlyComponentEventEmitter::onChange(OnChange $event) const { void InterfaceOnlyComponentEventEmitter::onDirectChange(OnDirectChange $event) const { - dispatchEvent(\\"directChange\\", [$event=std::move($event)](jsi::Runtime &runtime) { + dispatchEvent(\\"paperDirectChange\\", [$event=std::move($event)](jsi::Runtime &runtime) { auto $payload = jsi::Object(runtime); $payload.setProperty(runtime, \\"value\\", $event.value); return $payload;