Skip to content

Commit 8f763bf

Browse files
acoates-msacoates-ms
authored
Codegen: Fix issues with more complex props and event types (#15647)
* Fix issues with more complex props and event types * Change files * lint * fix
1 parent 3889efa commit 8f763bf

6 files changed

Lines changed: 236 additions & 24 deletions

File tree

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Fix issues with more complex props and event types",
4+
"packageName": "@react-native-windows/codegen",
5+
"email": "30809111+acoates-ms@users.noreply.github.com",
6+
"dependentChangeType": "patch"
7+
}

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

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ struct ::_OBJECT_NAME_:: {
7070
`;
7171

7272
const eventEmitterMethodTemplate = ` void ::_EVENT_NAME_::(::_EVENT_OBJECT_TYPE_:: &value) const {
73-
m_eventEmitter.DispatchEvent(L"::_EVENT_NAME_NO_ON_::", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
73+
m_eventEmitter.DispatchEvent(L"::_EVENT_NAME_NO_ON_::", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
7474
winrt::Microsoft::ReactNative::WriteValue(writer, value);
7575
});
7676
}`;
@@ -344,7 +344,9 @@ export function createComponentGenerator({
344344

345345
const propInitializers = componentShape.props
346346
.map(prop => {
347-
return ` ${prop.name} = cloneFromProps->${prop.name};`;
347+
if (prop.typeAnnotation.type === 'MixedTypeAnnotation')
348+
return ` ${prop.name} = cloneFromProps->${prop.name}.Copy();`;
349+
else return ` ${prop.name} = cloneFromProps->${prop.name};`;
348350
})
349351
.join('\n');
350352

@@ -414,7 +416,30 @@ export function createComponentGenerator({
414416
})
415417
.join('\n\n');
416418

419+
const eventObjectUsings = eventObjectAliases.jobs
420+
.map(eventObjectTypeName => {
421+
return ` using ${eventObjectTypeName.replace('on', 'On')} = ${
422+
getAliasCppName(eventObjectTypeName) /*.replace('_on', '_On')*/
423+
};`;
424+
})
425+
.join('\n');
426+
427+
// Collect all the alias types for the event objects so that we can generate the unnamed types within objects
428+
eventObjectAliases.jobs.forEach(eventObjectTypeName => {
429+
const eventObjectType =
430+
eventObjectAliases.types[eventObjectTypeName]!;
431+
eventObjectType.properties.forEach(property => {
432+
translateComponentEventType(
433+
property.typeAnnotation,
434+
eventObjectAliases,
435+
eventObjectTypeName,
436+
cppCodegenOptions,
437+
);
438+
});
439+
});
440+
417441
const eventObjects = eventObjectAliases.jobs
442+
.reverse()
418443
.map(eventObjectTypeName => {
419444
const eventObjectType =
420445
eventObjectAliases.types[eventObjectTypeName]!;
@@ -437,21 +462,12 @@ export function createComponentGenerator({
437462
return eventsObjectTemplate
438463
.replace(
439464
/::_OBJECT_NAME_::/g,
440-
`${componentName}_${eventObjectTypeName.replace('on', 'On')}`,
465+
getAliasCppName(eventObjectTypeName) /*.replace('_on', '_On')*/,
441466
)
442467
.replace(/::_OBJECT_FIELDS_::/g, eventObjectFields);
443468
})
444469
.join('\n');
445470

446-
const eventObjectUsings = eventObjectAliases.jobs
447-
.map(eventObjectTypeName => {
448-
return ` using ${eventObjectTypeName.replace(
449-
'on',
450-
'On',
451-
)} = ${componentName}_${eventObjectTypeName.replace('on', 'On')};`;
452-
})
453-
.join('\n');
454-
455471
const eventEmitter = eventEmitterTemplate
456472
.replace(/::_COMPONENT_EVENT_OBJECT_TYPES_::/g, eventObjects)
457473
.replace(/::_EVENT_EMITTER_METHODS_::/g, eventEmitterMethods)

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {codegenNativeComponent, codegenNativeCommands} from 'react-native';
1+
import { codegenNativeComponent, codegenNativeCommands } from 'react-native';
22
import type { ColorValue, HostComponent, ViewProps } from 'react-native';
33

44
import type {
@@ -7,6 +7,7 @@ import type {
77
Double,
88
Int32,
99
WithDefault,
10+
UnsafeMixed,
1011
} from 'react-native/Libraries/Types/CodegenTypes';
1112

1213
export type SomethingEvent = {
@@ -17,12 +18,16 @@ export type SomethingEvent = {
1718
export interface MovingLightProps extends ViewProps {
1819
// Props
1920
size?: WithDefault<Float, 42>;
20-
color?: ColorValue
21+
color?: ColorValue;
22+
testMixed?: UnsafeMixed;
2123
eventParam?: string;
22-
objectProp?: { number: Double, string: string};
24+
objectProp?: { number: Double, string: string };
2325

2426
// Events
2527
onSomething?: DirectEventHandler<SomethingEvent>,
28+
onTestObjectEvent?: DirectEventHandler<{ target: Int32; testObject: UnsafeMixed }>;
29+
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 }>;
30+
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 }>;
2631
}
2732

2833

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ struct CalendarViewComponentView : public winrt::implements<CalendarViewComponen
2828

2929
m_calendarView.SelectedDatesChanged([this](auto &&, auto &&) {
3030
if (auto emitter = EventEmitter()) {
31-
Codegen::CalendarView_OnSelectedDatesChanged args;
31+
Codegen::CalendarViewEventEmitter::OnSelectedDatesChanged args;
3232
auto selectedDates = m_calendarView.SelectedDates();
3333
if (selectedDates.Size() == 0) {
3434
args.startDate = "(none)";

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ struct CalendarViewProps : winrt::implements<CalendarViewProps, winrt::Microsoft
3939
const winrt::Microsoft::ReactNative::ViewProps ViewProps;
4040
};
4141

42-
REACT_STRUCT(CalendarView_OnSelectedDatesChanged)
43-
struct CalendarView_OnSelectedDatesChanged {
42+
REACT_STRUCT(CalendarViewSpec_onSelectedDatesChanged)
43+
struct CalendarViewSpec_onSelectedDatesChanged {
4444
REACT_FIELD(value)
4545
bool value{};
4646

@@ -52,10 +52,10 @@ struct CalendarViewEventEmitter {
5252
CalendarViewEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
5353
: m_eventEmitter(eventEmitter) {}
5454

55-
using OnSelectedDatesChanged = CalendarView_OnSelectedDatesChanged;
55+
using OnSelectedDatesChanged = CalendarViewSpec_onSelectedDatesChanged;
5656

5757
void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
58-
m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
58+
m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
5959
winrt::Microsoft::ReactNative::WriteValue(writer, value);
6060
});
6161
}

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

Lines changed: 188 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
3636
auto cloneFromProps = cloneFrom.as<MovingLightProps>();
3737
size = cloneFromProps->size;
3838
color = cloneFromProps->color;
39+
testMixed = cloneFromProps->testMixed.Copy();
3940
eventParam = cloneFromProps->eventParam;
4041
objectProp = cloneFromProps->objectProp;
4142
}
@@ -51,6 +52,9 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
5152
REACT_FIELD(color)
5253
winrt::Microsoft::ReactNative::Color color{nullptr};
5354

55+
REACT_FIELD(testMixed)
56+
winrt::Microsoft::ReactNative::JSValue testMixed{nullptr};
57+
5458
REACT_FIELD(eventParam)
5559
std::optional<std::string> eventParam;
5660

@@ -60,8 +64,167 @@ struct MovingLightProps : winrt::implements<MovingLightProps, winrt::Microsoft::
6064
const winrt::Microsoft::ReactNative::ViewProps ViewProps;
6165
};
6266

63-
REACT_STRUCT(MovingLight_OnSomething)
64-
struct MovingLight_OnSomething {
67+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes6)
68+
struct MovingLightSpec_onEventWithMultipleAliasTypes6 {
69+
REACT_FIELD(x)
70+
double x{};
71+
72+
REACT_FIELD(y)
73+
double y{};
74+
};
75+
76+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes5)
77+
struct MovingLightSpec_onEventWithMultipleAliasTypes5 {
78+
REACT_FIELD(width)
79+
double width{};
80+
81+
REACT_FIELD(height)
82+
double height{};
83+
};
84+
85+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes4)
86+
struct MovingLightSpec_onEventWithMultipleAliasTypes4 {
87+
REACT_FIELD(width)
88+
double width{};
89+
90+
REACT_FIELD(height)
91+
double height{};
92+
};
93+
94+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes3)
95+
struct MovingLightSpec_onEventWithMultipleAliasTypes3 {
96+
REACT_FIELD(x)
97+
double x{};
98+
99+
REACT_FIELD(y)
100+
double y{};
101+
};
102+
103+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes2)
104+
struct MovingLightSpec_onEventWithMultipleAliasTypes2 {
105+
REACT_FIELD(top)
106+
double top{};
107+
108+
REACT_FIELD(bottom)
109+
double bottom{};
110+
111+
REACT_FIELD(left)
112+
double left{};
113+
114+
REACT_FIELD(right)
115+
double right{};
116+
};
117+
118+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes6)
119+
struct MovingLightSpec_onEventWithInlineTypes6 {
120+
REACT_FIELD(x)
121+
double x{};
122+
123+
REACT_FIELD(y)
124+
double y{};
125+
};
126+
127+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes5)
128+
struct MovingLightSpec_onEventWithInlineTypes5 {
129+
REACT_FIELD(width)
130+
double width{};
131+
132+
REACT_FIELD(height)
133+
double height{};
134+
};
135+
136+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes4)
137+
struct MovingLightSpec_onEventWithInlineTypes4 {
138+
REACT_FIELD(width)
139+
double width{};
140+
141+
REACT_FIELD(height)
142+
double height{};
143+
};
144+
145+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes3)
146+
struct MovingLightSpec_onEventWithInlineTypes3 {
147+
REACT_FIELD(x)
148+
double x{};
149+
150+
REACT_FIELD(y)
151+
double y{};
152+
};
153+
154+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes2)
155+
struct MovingLightSpec_onEventWithInlineTypes2 {
156+
REACT_FIELD(top)
157+
double top{};
158+
159+
REACT_FIELD(bottom)
160+
double bottom{};
161+
162+
REACT_FIELD(left)
163+
double left{};
164+
165+
REACT_FIELD(right)
166+
double right{};
167+
};
168+
169+
REACT_STRUCT(MovingLightSpec_onEventWithMultipleAliasTypes)
170+
struct MovingLightSpec_onEventWithMultipleAliasTypes {
171+
REACT_FIELD(target)
172+
int32_t target{};
173+
174+
REACT_FIELD(contentInset)
175+
MovingLightSpec_onEventWithMultipleAliasTypes2 contentInset;
176+
177+
REACT_FIELD(contentOffset)
178+
MovingLightSpec_onEventWithMultipleAliasTypes3 contentOffset;
179+
180+
REACT_FIELD(contentSize)
181+
MovingLightSpec_onEventWithMultipleAliasTypes4 contentSize;
182+
183+
REACT_FIELD(layoutMeasurement)
184+
MovingLightSpec_onEventWithMultipleAliasTypes5 layoutMeasurement;
185+
186+
REACT_FIELD(velocity)
187+
MovingLightSpec_onEventWithMultipleAliasTypes6 velocity;
188+
189+
REACT_FIELD(isUserTriggered)
190+
bool isUserTriggered{};
191+
};
192+
193+
REACT_STRUCT(MovingLightSpec_onEventWithInlineTypes)
194+
struct MovingLightSpec_onEventWithInlineTypes {
195+
REACT_FIELD(target)
196+
int32_t target{};
197+
198+
REACT_FIELD(contentInset)
199+
MovingLightSpec_onEventWithInlineTypes2 contentInset;
200+
201+
REACT_FIELD(contentOffset)
202+
MovingLightSpec_onEventWithInlineTypes3 contentOffset;
203+
204+
REACT_FIELD(contentSize)
205+
MovingLightSpec_onEventWithInlineTypes4 contentSize;
206+
207+
REACT_FIELD(layoutMeasurement)
208+
MovingLightSpec_onEventWithInlineTypes5 layoutMeasurement;
209+
210+
REACT_FIELD(velocity)
211+
MovingLightSpec_onEventWithInlineTypes6 velocity;
212+
213+
REACT_FIELD(isUserTriggered)
214+
bool isUserTriggered{};
215+
};
216+
217+
REACT_STRUCT(MovingLightSpec_onTestObjectEvent)
218+
struct MovingLightSpec_onTestObjectEvent {
219+
REACT_FIELD(target)
220+
int32_t target{};
221+
222+
REACT_FIELD(testObject)
223+
winrt::Microsoft::ReactNative::JSValue testObject{nullptr};
224+
};
225+
226+
REACT_STRUCT(MovingLightSpec_onSomething)
227+
struct MovingLightSpec_onSomething {
65228
REACT_FIELD(value)
66229
std::string value;
67230

@@ -73,10 +236,31 @@ struct MovingLightEventEmitter {
73236
MovingLightEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
74237
: m_eventEmitter(eventEmitter) {}
75238

76-
using OnSomething = MovingLight_OnSomething;
239+
using OnSomething = MovingLightSpec_onSomething;
240+
using OnTestObjectEvent = MovingLightSpec_onTestObjectEvent;
241+
using OnEventWithInlineTypes = MovingLightSpec_onEventWithInlineTypes;
242+
using OnEventWithMultipleAliasTypes = MovingLightSpec_onEventWithMultipleAliasTypes;
77243

78244
void onSomething(OnSomething &value) const {
79-
m_eventEmitter.DispatchEvent(L"something", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
245+
m_eventEmitter.DispatchEvent(L"something", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
246+
winrt::Microsoft::ReactNative::WriteValue(writer, value);
247+
});
248+
}
249+
250+
void onTestObjectEvent(OnTestObjectEvent &value) const {
251+
m_eventEmitter.DispatchEvent(L"testObjectEvent", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
252+
winrt::Microsoft::ReactNative::WriteValue(writer, value);
253+
});
254+
}
255+
256+
void onEventWithInlineTypes(OnEventWithInlineTypes &value) const {
257+
m_eventEmitter.DispatchEvent(L"eventWithInlineTypes", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
258+
winrt::Microsoft::ReactNative::WriteValue(writer, value);
259+
});
260+
}
261+
262+
void onEventWithMultipleAliasTypes(OnEventWithMultipleAliasTypes &value) const {
263+
m_eventEmitter.DispatchEvent(L"eventWithMultipleAliasTypes", [&value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
80264
winrt::Microsoft::ReactNative::WriteValue(writer, value);
81265
});
82266
}

0 commit comments

Comments
 (0)