[0.81] Codegen: Fix issues with more complex props and event types

change/@react-native-windows-codegen-1a60d2fe-5491-4857-95e8-f2db0f4ae9c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issues with more complex props and event types",
+  "packageName": "@react-native-windows/codegen",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/react-native-windows-5a525e83-cbc3-442c-ac76-fc2d077da5a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update codegen'd files",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts

@@ -70,7 +70,7 @@ struct ::_OBJECT_NAME_:: {
 `;
 
 const eventEmitterMethodTemplate = `  void ::_EVENT_NAME_::(::_EVENT_OBJECT_TYPE_:: &value) const {
-    m_eventEmitter.DispatchEvent(L"::_EVENT_NAME_NO_ON_::", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+    m_eventEmitter.DispatchEvent(L"::_EVENT_NAME_NO_ON_::", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
       winrt::Microsoft::ReactNative::WriteValue(writer, value);
     });
   }`;
@@ -344,7 +344,9 @@ export function createComponentGenerator({
 
         const propInitializers = componentShape.props
           .map(prop => {
-            return `       ${prop.name} = cloneFromProps->${prop.name};`;
+            if (prop.typeAnnotation.type === 'MixedTypeAnnotation')
+              return `       ${prop.name} = cloneFromProps->${prop.name}.Copy();`;
+            else return `       ${prop.name} = cloneFromProps->${prop.name};`;
           })
           .join('\n');
 
@@ -414,7 +416,30 @@ export function createComponentGenerator({
           })
           .join('\n\n');
 
+        const eventObjectUsings = eventObjectAliases.jobs
+          .map(eventObjectTypeName => {
+            return `  using ${eventObjectTypeName.replace('on', 'On')} = ${
+              getAliasCppName(eventObjectTypeName) /*.replace('_on', '_On')*/
+            };`;
+          })
+          .join('\n');
+
+        // Collect all the alias types for the event objects so that we can generate the unnamed types within objects
+        eventObjectAliases.jobs.forEach(eventObjectTypeName => {
+          const eventObjectType =
+            eventObjectAliases.types[eventObjectTypeName]!;
+          eventObjectType.properties.forEach(property => {
+            translateComponentEventType(
+              property.typeAnnotation,
+              eventObjectAliases,
+              eventObjectTypeName,
+              cppCodegenOptions,
+            );
+          });
+        });
+
         const eventObjects = eventObjectAliases.jobs
+          .reverse()
           .map(eventObjectTypeName => {
             const eventObjectType =
               eventObjectAliases.types[eventObjectTypeName]!;
@@ -437,21 +462,12 @@ export function createComponentGenerator({
             return eventsObjectTemplate
               .replace(
                 /::_OBJECT_NAME_::/g,
-                `${componentName}_${eventObjectTypeName.replace('on', 'On')}`,
+                getAliasCppName(eventObjectTypeName) /*.replace('_on', '_On')*/,
               )
               .replace(/::_OBJECT_FIELDS_::/g, eventObjectFields);
           })
           .join('\n');
 
-        const eventObjectUsings = eventObjectAliases.jobs
-          .map(eventObjectTypeName => {
-            return `  using ${eventObjectTypeName.replace(
-              'on',
-              'On',
-            )} = ${componentName}_${eventObjectTypeName.replace('on', 'On')};`;
-          })
-          .join('\n');
-
         const eventEmitter = eventEmitterTemplate
           .replace(/::_COMPONENT_EVENT_OBJECT_TYPES_::/g, eventObjects)
           .replace(/::_EVENT_EMITTER_METHODS_::/g, eventEmitterMethods)

packages/sample-custom-component/src/MovingLightNativeComponent.ts

@@ -1,4 +1,4 @@
-import {codegenNativeComponent, codegenNativeCommands} from 'react-native';
+import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
 import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 
 import type {
@@ -7,6 +7,7 @@ import type {
   Double,
   Int32,
   WithDefault,
+  UnsafeMixed,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 export type SomethingEvent = {
@@ -17,12 +18,16 @@ export type SomethingEvent = {
 export interface MovingLightProps extends ViewProps {
   // Props
   size?: WithDefault<Float, 42>;
-  color?: ColorValue
+  color?: ColorValue;
+  testMixed?: UnsafeMixed;
   eventParam?: string;
-  objectProp?: { number: Double, string: string};
+  objectProp?: { number: Double, string: string };
 
   // Events
   onSomething?: DirectEventHandler<SomethingEvent>,
+  onTestObjectEvent?: DirectEventHandler<{ target: Int32; testObject: UnsafeMixed }>;
+  onEventWithInlineTypes?: DirectEventHandler<{ target: Int32; contentInset: { top: Double; bottom: Double; left: Double; right: Double }; contentOffset: { x: Double; y: Double }; contentSize: { width: Double; height: Double }; layoutMeasurement: { width: Double; height: Double }; velocity: { x: Double; y: Double }; isUserTriggered: boolean }>;
+  onEventWithMultipleAliasTypes?: DirectEventHandler<{ target: Int32; contentInset: { top: Double; bottom: Double; left: Double; right: Double }; contentOffset: { x: Double; y: Double }; contentSize: { width: Double; height: Double }; layoutMeasurement: { width: Double; height: Double }; velocity: { x: Double; y: Double }; isUserTriggered: boolean }>;
 }
 
 

packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp

@@ -28,7 +28,7 @@ struct CalendarViewComponentView : public winrt::implements<CalendarViewComponen
 
     m_calendarView.SelectedDatesChanged([this](auto &&, auto &&) {
       if (auto emitter = EventEmitter()) {
-        Codegen::CalendarView_OnSelectedDatesChanged args;
+        Codegen::CalendarViewEventEmitter::OnSelectedDatesChanged args;
         auto selectedDates = m_calendarView.SelectedDates();
         if (selectedDates.Size() == 0) {
           args.startDate = "(none)";

packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h

@@ -39,8 +39,8 @@ struct CalendarViewProps : winrt::implements<CalendarViewProps, winrt::Microsoft
   const winrt::Microsoft::ReactNative::ViewProps ViewProps;
 };
 
-REACT_STRUCT(CalendarView_OnSelectedDatesChanged)
-struct CalendarView_OnSelectedDatesChanged {
+REACT_STRUCT(CalendarViewSpec_onSelectedDatesChanged)
+struct CalendarViewSpec_onSelectedDatesChanged {
   REACT_FIELD(value)
   bool value{};
 
@@ -52,10 +52,10 @@ struct CalendarViewEventEmitter {
   CalendarViewEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
       : m_eventEmitter(eventEmitter) {}
 
-  using OnSelectedDatesChanged = CalendarView_OnSelectedDatesChanged;
+  using OnSelectedDatesChanged = CalendarViewSpec_onSelectedDatesChanged;
 
   void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
-    m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+    m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
       winrt::Microsoft::ReactNative::WriteValue(writer, value);
     });
   }

packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/MovingLight.g.h

@@ -36,6 +36,7 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
        auto cloneFromProps = cloneFrom.as<MovingLightProps>();
        size = cloneFromProps->size;
        color = cloneFromProps->color;
+       testMixed = cloneFromProps->testMixed.Copy();
        eventParam = cloneFromProps->eventParam;
        objectProp = cloneFromProps->objectProp;  
      }
@@ -51,6 +52,9 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
   REACT_FIELD(color)
   winrt::Microsoft::ReactNative::Color color{nullptr};
 
+  REACT_FIELD(testMixed)
+  winrt::Microsoft::ReactNative::JSValue testMixed{nullptr};
+
   REACT_FIELD(eventParam)
   std::optional<std::string> eventParam;
 
@@ -60,8 +64,167 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
   const winrt::Microsoft::ReactNative::ViewProps ViewProps;
 };
 
-REACT_STRUCT(MovingLight_OnSomething)
-struct MovingLight_OnSomething {
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes6)
+struct MovingLightSpec_onEventWithMultipleAliasTypes6 {
+  REACT_FIELD(x)
+  double x{};
+
+  REACT_FIELD(y)
+  double y{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes5)
+struct MovingLightSpec_onEventWithMultipleAliasTypes5 {
+  REACT_FIELD(width)
+  double width{};
+
+  REACT_FIELD(height)
+  double height{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes4)
+struct MovingLightSpec_onEventWithMultipleAliasTypes4 {
+  REACT_FIELD(width)
+  double width{};
+
+  REACT_FIELD(height)
+  double height{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes3)
+struct MovingLightSpec_onEventWithMultipleAliasTypes3 {
+  REACT_FIELD(x)
+  double x{};
+
+  REACT_FIELD(y)
+  double y{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes2)
+struct MovingLightSpec_onEventWithMultipleAliasTypes2 {
+  REACT_FIELD(top)
+  double top{};
+
+  REACT_FIELD(bottom)
+  double bottom{};
+
+  REACT_FIELD(left)
+  double left{};
+
+  REACT_FIELD(right)
+  double right{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes6)
+struct MovingLightSpec_onEventWithInlineTypes6 {
+  REACT_FIELD(x)
+  double x{};
+
+  REACT_FIELD(y)
+  double y{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes5)
+struct MovingLightSpec_onEventWithInlineTypes5 {
+  REACT_FIELD(width)
+  double width{};
+
+  REACT_FIELD(height)
+  double height{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes4)
+struct MovingLightSpec_onEventWithInlineTypes4 {
+  REACT_FIELD(width)
+  double width{};
+
+  REACT_FIELD(height)
+  double height{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes3)
+struct MovingLightSpec_onEventWithInlineTypes3 {
+  REACT_FIELD(x)
+  double x{};
+
+  REACT_FIELD(y)
+  double y{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes2)
+struct MovingLightSpec_onEventWithInlineTypes2 {
+  REACT_FIELD(top)
+  double top{};
+
+  REACT_FIELD(bottom)
+  double bottom{};
+
+  REACT_FIELD(left)
+  double left{};
+
+  REACT_FIELD(right)
+  double right{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes)
+struct MovingLightSpec_onEventWithMultipleAliasTypes {
+  REACT_FIELD(target)
+  int32_t target{};
+
+  REACT_FIELD(contentInset)
+  MovingLightSpec_onEventWithMultipleAliasTypes2 contentInset;
+
+  REACT_FIELD(contentOffset)
+  MovingLightSpec_onEventWithMultipleAliasTypes3 contentOffset;
+
+  REACT_FIELD(contentSize)
+  MovingLightSpec_onEventWithMultipleAliasTypes4 contentSize;
+
+  REACT_FIELD(layoutMeasurement)
+  MovingLightSpec_onEventWithMultipleAliasTypes5 layoutMeasurement;
+
+  REACT_FIELD(velocity)
+  MovingLightSpec_onEventWithMultipleAliasTypes6 velocity;
+
+  REACT_FIELD(isUserTriggered)
+  bool isUserTriggered{};
+};
+
+REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes)
+struct MovingLightSpec_onEventWithInlineTypes {
+  REACT_FIELD(target)
+  int32_t target{};
+
+  REACT_FIELD(contentInset)
+  MovingLightSpec_onEventWithInlineTypes2 contentInset;
+
+  REACT_FIELD(contentOffset)
+  MovingLightSpec_onEventWithInlineTypes3 contentOffset;
+
+  REACT_FIELD(contentSize)
+  MovingLightSpec_onEventWithInlineTypes4 contentSize;
+
+  REACT_FIELD(layoutMeasurement)
+  MovingLightSpec_onEventWithInlineTypes5 layoutMeasurement;
+
+  REACT_FIELD(velocity)
+  MovingLightSpec_onEventWithInlineTypes6 velocity;
+
+  REACT_FIELD(isUserTriggered)
+  bool isUserTriggered{};
+};
+
+REACT_STRUCT(MovingLightSpec_onTestObjectEvent)
+struct MovingLightSpec_onTestObjectEvent {
+  REACT_FIELD(target)
+  int32_t target{};
+
+  REACT_FIELD(testObject)
+  winrt::Microsoft::ReactNative::JSValue testObject{nullptr};
+};
+
+REACT_STRUCT(MovingLightSpec_onSomething)
+struct MovingLightSpec_onSomething {
   REACT_FIELD(value)
   std::string value;
 
@@ -73,10 +236,31 @@ struct MovingLightEventEmitter {
   MovingLightEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
       : m_eventEmitter(eventEmitter) {}
 
-  using OnSomething = MovingLight_OnSomething;
+  using OnSomething = MovingLightSpec_onSomething;
+  using OnTestObjectEvent = MovingLightSpec_onTestObjectEvent;
+  using OnEventWithInlineTypes = MovingLightSpec_onEventWithInlineTypes;
+  using OnEventWithMultipleAliasTypes = MovingLightSpec_onEventWithMultipleAliasTypes;
 
   void onSomething(OnSomething &value) const {
-    m_eventEmitter.DispatchEvent(L"something", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+    m_eventEmitter.DispatchEvent(L"something", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+  void onTestObjectEvent(OnTestObjectEvent &value) const {
+    m_eventEmitter.DispatchEvent(L"testObjectEvent", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+  void onEventWithInlineTypes(OnEventWithInlineTypes &value) const {
+    m_eventEmitter.DispatchEvent(L"eventWithInlineTypes", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+  void onEventWithMultipleAliasTypes(OnEventWithMultipleAliasTypes &value) const {
+    m_eventEmitter.DispatchEvent(L"eventWithMultipleAliasTypes", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
       winrt::Microsoft::ReactNative::WriteValue(writer, value);
     });
   }