Support emitting typed RCTDeviceEmitter events

Summary: This enables to code-gen base C++ types for custom exported JS types from a RN TM spec - which have been previously excluded from code-gen as these aren't used in any function. The only work around so far was to ‘register’ a random function using the custom type which should be used for RCTDeviceEventEmitter events Changelog: [Internal] Differential Revision: D56685903
facebook · Apr 30, 2024 · 4797dbe · 4797dbe
1 parent b7de916
commit 4797dbe
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 12 deletions.
diff --git a/packages/react-native-codegen/src/parsers/flow/modules/__test_fixtures__/fixtures.js b/packages/react-native-codegen/src/parsers/flow/modules/__test_fixtures__/fixtures.js
@@ -742,6 +742,12 @@ export type GraphNode = {
   neighbors?: Array<GraphNode>,
 };
 
+export type CustomDeviceEvent = {
+  type: string,
+  level: number,
+  degree?: number,
+};
+
 export interface Spec extends TurboModule {
   +getCallback: () => () => void;
   +getMixed: (arg: mixed) => mixed;

diff --git a/...egen/src/parsers/flow/modules/__tests__/__snapshots__/module-parser-snapshot-test.js.snap b/...egen/src/parsers/flow/modules/__tests__/__snapshots__/module-parser-snapshot-test.js.snap
@@ -102,6 +102,32 @@ exports[`RN Codegen Flow Parser can generate fixture CXX_ONLY_NATIVE_MODULE 1`]
               }
             }
           ]
+        },
+        'CustomDeviceEvent': {
+          'type': 'ObjectTypeAnnotation',
+          'properties': [
+            {
+              'name': 'type',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'StringTypeAnnotation'
+              }
+            },
+            {
+              'name': 'level',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'NumberTypeAnnotation'
+              }
+            },
+            {
+              'name': 'degree',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'NumberTypeAnnotation'
+              }
+            }
+          ]
         }
       },
       'enumMap': {

diff --git a/packages/react-native-codegen/src/parsers/parsers-commons.js b/packages/react-native-codegen/src/parsers/parsers-commons.js
@@ -171,6 +171,52 @@ function isObjectProperty(property: $FlowFixMe, language: ParserType): boolean {
   }
 }
 
+function getObjectTypeAnnotations(
+  hasteModuleName: string,
+  types: TypeDeclarationMap,
+  tryParse: ParserErrorCapturer,
+  translateTypeAnnotation: $FlowFixMe,
+  parser: Parser,
+): {...NativeModuleAliasMap} {
+  const aliasMap: {...NativeModuleAliasMap} = {};
+  Object.entries(types).forEach(([key, value]) => {
+    const isTypeAlias =
+      value.type === 'TypeAlias' || value.type === 'TSTypeAliasDeclaration';
+    if (!isTypeAlias) {
+      return;
+    }
+    const parent = parser.nextNodeForTypeAlias(value);
+    if (
+      parent.type !== 'ObjectTypeAnnotation' &&
+      parent.type !== 'TSTypeLiteral'
+    ) {
+      return;
+    }
+    const typeProperties = parser
+      .getAnnotatedElementProperties(value)
+      .map(prop =>
+        parseObjectProperty(
+          parent,
+          prop,
+          hasteModuleName,
+          types,
+          aliasMap,
+          {}, // enumMap
+          tryParse,
+          true, // cxxOnly
+          prop?.optional || false,
+          translateTypeAnnotation,
+          parser,
+        ),
+      );
+    aliasMap[key] = {
+      type: 'ObjectTypeAnnotation',
+      properties: typeProperties,
+    };
+  });
+  return aliasMap;
+}
+
 function parseObjectProperty(
   parentObject?: $FlowFixMe,
   property: $FlowFixMe,
@@ -659,6 +705,16 @@ const buildModuleSchema = (
     moduleName,
   );
 
+  const aliasMap: {...NativeModuleAliasMap} = cxxOnly
+    ? getObjectTypeAnnotations(
+        hasteModuleName,
+        types,
+        tryParse,
+        translateTypeAnnotation,
+        parser,
+      )
+    : {};
+
   const properties: $ReadOnlyArray<$FlowFixMe> =
     language === 'Flow' ? moduleSpec.body.properties : moduleSpec.body.body;
 
@@ -675,9 +731,7 @@ const buildModuleSchema = (
       enumMap: NativeModuleEnumMap,
       propertyShape: NativeModulePropertyShape,
     }>(property => {
-      const aliasMap: {...NativeModuleAliasMap} = {};
       const enumMap: {...NativeModuleEnumMap} = {};
-
       return tryParse(() => ({
         aliasMap,
         enumMap,
@@ -696,10 +750,7 @@ const buildModuleSchema = (
     })
     .filter(Boolean)
     .reduce(
-      (
-        moduleSchema: NativeModuleSchema,
-        {aliasMap, enumMap, propertyShape},
-      ) => ({
+      (moduleSchema: NativeModuleSchema, {enumMap, propertyShape}) => ({
         type: 'NativeModule',
         aliasMap: {...moduleSchema.aliasMap, ...aliasMap},
         enumMap: {...moduleSchema.enumMap, ...enumMap},

diff --git a/packages/react-native-codegen/src/parsers/typescript/modules/__test_fixtures__/fixtures.js b/packages/react-native-codegen/src/parsers/typescript/modules/__test_fixtures__/fixtures.js
@@ -836,6 +836,12 @@ export type GraphNode = {
   neighbors?: Array<GraphNode>,
 };
 
+export type CustomDeviceEvent = {
+  type: string,
+  level: number,
+  degree?: number,
+};
+
 export interface Spec extends TurboModule {
   readonly getCallback: () => () => void;
   readonly getMixed: (arg: unknown) => unknown;

diff --git a/...typescript/modules/__tests__/__snapshots__/typescript-module-parser-snapshot-test.js.snap b/...typescript/modules/__tests__/__snapshots__/typescript-module-parser-snapshot-test.js.snap
@@ -93,6 +93,32 @@ exports[`RN Codegen TypeScript Parser can generate fixture CXX_ONLY_NATIVE_MODUL
               }
             }
           ]
+        },
+        'CustomDeviceEvent': {
+          'type': 'ObjectTypeAnnotation',
+          'properties': [
+            {
+              'name': 'type',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'StringTypeAnnotation'
+              }
+            },
+            {
+              'name': 'level',
+              'optional': false,
+              'typeAnnotation': {
+                'type': 'NumberTypeAnnotation'
+              }
+            },
+            {
+              'name': 'degree',
+              'optional': true,
+              'typeAnnotation': {
+                'type': 'NumberTypeAnnotation'
+              }
+            }
+          ]
         }
       },
       'enumMap': {

diff --git a/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.cpp b/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.cpp
@@ -180,15 +180,18 @@ void NativeCxxModuleExample::setMenu(jsi::Runtime& rt, MenuItem menuItem) {
 
 void NativeCxxModuleExample::emitCustomDeviceEvent(
     jsi::Runtime& rt,
-    jsi::String eventName) {
+    const std::string& eventName) {
   // Test emitting device events (RCTDeviceEventEmitter.emit) from C++
-  // TurboModule with arbitrary arguments
+  // TurboModule with arbitrary arguments. This can be called from any thread
   emitDeviceEvent(
-      eventName.utf8(rt).c_str(),
-      [](jsi::Runtime& rt, std::vector<jsi::Value>& args) {
+      eventName,
+      [jsInvoker = jsInvoker_](
+          jsi::Runtime& rt, std::vector<jsi::Value>& args) {
         args.emplace_back(jsi::Value(true));
         args.emplace_back(jsi::Value(42));
         args.emplace_back(jsi::String::createFromAscii(rt, "stringArg"));
+        args.emplace_back(bridging::toJs(
+            rt, CustomDeviceEvent{"one", 2, std::nullopt}, jsInvoker));
       });
 }
 

diff --git a/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.h b/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.h
@@ -116,6 +116,17 @@ template <>
 struct Bridging<MenuItem>
     : NativeCxxModuleExampleCxxMenuItemBridging<MenuItem> {};
 
+#pragma mark - RCTDeviceEventEmitter events
+
+using CustomDeviceEvent = NativeCxxModuleExampleCxxCustomDeviceEvent<
+    std::string,
+    int32_t,
+    std::optional<float>>;
+
+template <>
+struct Bridging<CustomDeviceEvent>
+    : NativeCxxModuleExampleCxxCustomDeviceEventBridging<CustomDeviceEvent> {};
+
 #pragma mark - implementation
 class NativeCxxModuleExample
     : public NativeCxxModuleExampleCxxSpec<NativeCxxModuleExample> {
@@ -185,7 +196,7 @@ class NativeCxxModuleExample
 
   void setMenu(jsi::Runtime& rt, MenuItem menuItem);
 
-  void emitCustomDeviceEvent(jsi::Runtime& rt, jsi::String eventName);
+  void emitCustomDeviceEvent(jsi::Runtime& rt, const std::string& eventName);
 
   void voidFuncThrows(jsi::Runtime& rt);
 

diff --git a/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.js b/packages/rn-tester/NativeCxxModuleExample/NativeCxxModuleExample.js
@@ -74,6 +74,12 @@ export type MenuItem = {
   items?: Array<MenuItem>,
 };
 
+export type CustomDeviceEvent = {
+  type: string,
+  level: number,
+  degree?: ?number,
+};
+
 export interface Spec extends TurboModule {
   +getArray: (arg: Array<ObjectStruct | null>) => Array<ObjectStruct | null>;
   +getBool: (arg: boolean) => boolean;

diff --git a/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js b/packages/rn-tester/js/examples/TurboModule/NativeCxxModuleExampleExample.js
@@ -165,7 +165,7 @@ class NativeCxxModuleExampleExample extends React.Component<{||}, State> {
       DeviceEventEmitter.addListener(CUSTOM_EVENT_TYPE, (...args) => {
         this._setResult(
           'emitDeviceEvent',
-          `${CUSTOM_EVENT_TYPE}(${args.map(s => `${s}`).join(', ')})`,
+          `${CUSTOM_EVENT_TYPE}(${args.map(s => (typeof s === 'object' ? JSON.stringify(s) : s)).join(', ')})`,
         );
       });
       NativeCxxModuleExample?.emitCustomDeviceEvent(CUSTOM_EVENT_TYPE);