Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix interface support in turbo module TypeScript codegen (component only) #34778

Closed
wants to merge 12 commits into from
Closed

Fix interface support in turbo module TypeScript codegen (component only) #34778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f206fbb
PROPS_AND_EVENTS_WITH_INTERFACES
ZihanChen-MSFT Sep 22, 2022
0120cc9
Update fixtures.js
ZihanChen-MSFT Sep 24, 2022
880c80a
Update fixtures.js
ZihanChen-MSFT Sep 24, 2022
dd1926a
Refactory interface handling in getPropProperties
ZihanChen-MSFT Sep 24, 2022
9530b2e
Refactor interface support for events
ZihanChen-MSFT Sep 24, 2022
4e55ef3
Test nested array
ZihanChen-MSFT Sep 24, 2022
0dfa3af
yarn prettier
ZihanChen-MSFT Sep 24, 2022
c360fac
Merge from main
ZihanChen-MSFT Sep 26, 2022
c4b4f32
Update componentsUtils.js
ZihanChen-MSFT Sep 26, 2022
8eff2c5
Update events.js
ZihanChen-MSFT Sep 26, 2022
5c5a1c1
Update props.js
ZihanChen-MSFT Sep 26, 2022
ea1b680
yarn prettier
ZihanChen-MSFT Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/react-native-codegen/src/parsers/consistency/__tests__/checkComponentSnaps-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,11 @@ const flowSnaps = require('../../../../src/parsers/flow/components/__tests__/__s
const flowExtraCases = [];
const tsFixtures = require('../../typescript/components/__test_fixtures__/fixtures.js');
const tsSnaps = require('../../../../src/parsers/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap');
const tsExtraCases = ['ARRAY2_PROP_TYPES_NO_EVENTS', 'ARRAY2_STATE_TYPES'];
const tsExtraCases = [
'ARRAY2_PROP_TYPES_NO_EVENTS',
'ARRAY2_STATE_TYPES',
'PROPS_AND_EVENTS_WITH_INTERFACES',
];
const ignoredCases = ['ARRAY_PROP_TYPES_NO_EVENTS', 'ARRAY_STATE_TYPES'];

compareSnaps(
Expand Down
44 changes: 44 additions & 0 deletions ...ages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1095,6 +1095,49 @@ export default codegenNativeComponent<ModuleProps>(
) as NativeType;
`;

const PROPS_AND_EVENTS_WITH_INTERFACES = `
import type {
BubblingEventHandler,
DirectEventHandler,
Int32,
} from 'CodegenTypes';
import type {ViewProps} from 'ViewPropTypes';
import type {HostComponent} from 'react-native';

const codegenNativeComponent = require('codegenNativeComponent');

export interface Base1 {
readonly x: string;
}

export interface Base2 {
readonly y: Int32;
}

export interface Derived extends Base1, Base2 {
readonly z: boolean;
}

export interface ModuleProps extends ViewProps {
// Props
ordinary_prop: Derived;
readonly_prop: Readonly<Derived>;
ordinary_array_prop?: readonly Derived[];
readonly_array_prop?: readonly Readonly<Derived>[];
ordinary_nested_array_prop?: readonly Derived[][];
readonly_nested_array_prop?: readonly Readonly<Derived>[][];

// Events
onDirect: DirectEventHandler<Derived>;
onBubbling: BubblingEventHandler<Readonly<Derived>>;
}

export default codegenNativeComponent<ModuleProps>('Module', {
interfaceOnly: true,
paperComponentName: 'RCTModule',
}) as HostComponent<ModuleProps>;
`;

// === STATE ===
const ALL_STATE_TYPES = `
/**
Expand Down Expand Up @@ -1630,6 +1673,7 @@ module.exports = {
COMMANDS_DEFINED_WITH_ALL_TYPES,
PROPS_AS_EXTERNAL_TYPES,
COMMANDS_WITH_EXTERNAL_TYPES,
PROPS_AND_EVENTS_WITH_INTERFACES,
ALL_STATE_TYPES,
ARRAY_STATE_TYPES,
ARRAY2_STATE_TYPES,
Expand Down
311 changes: 311 additions & 0 deletions ...rs/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12640,6 +12640,317 @@ exports[`RN Codegen TypeScript Parser can generate fixture PROPS_AND_EVENTS_TYPE
}"
`;

exports[`RN Codegen TypeScript Parser can generate fixture PROPS_AND_EVENTS_WITH_INTERFACES 1`] = `
"{
'modules': {
'Module': {
'type': 'Component',
'components': {
'Module': {
'interfaceOnly': true,
'paperComponentName': 'RCTModule',
'extendsProps': [
{
'type': 'ReactNativeBuiltInType',
'knownTypeName': 'ReactNativeCoreViewProps'
}
],
'events': [
{
'name': 'onDirect',
'optional': false,
'bubblingType': 'direct',
'typeAnnotation': {
'type': 'EventTypeAnnotation',
'argument': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation'
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation'
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation'
}
}
]
}
}
},
{
'name': 'onBubbling',
'optional': false,
'bubblingType': 'bubble',
'typeAnnotation': {
'type': 'EventTypeAnnotation',
'argument': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation'
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation'
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation'
}
}
]
}
}
}
],
'props': [
{
'name': 'ordinary_prop',
'optional': false,
'typeAnnotation': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
},
{
'name': 'readonly_prop',
'optional': false,
'typeAnnotation': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
},
{
'name': 'ordinary_array_prop',
'optional': true,
'typeAnnotation': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
}
},
{
'name': 'readonly_array_prop',
'optional': true,
'typeAnnotation': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
}
},
{
'name': 'ordinary_nested_array_prop',
'optional': true,
'typeAnnotation': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
}
}
},
{
'name': 'readonly_nested_array_prop',
'optional': true,
'typeAnnotation': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ArrayTypeAnnotation',
'elementType': {
'type': 'ObjectTypeAnnotation',
'properties': [
{
'name': 'x',
'optional': false,
'typeAnnotation': {
'type': 'StringTypeAnnotation',
'default': null
}
},
{
'name': 'y',
'optional': false,
'typeAnnotation': {
'type': 'Int32TypeAnnotation',
'default': 0
}
},
{
'name': 'z',
'optional': false,
'typeAnnotation': {
'type': 'BooleanTypeAnnotation',
'default': false
}
}
]
}
}
}
}
],
'commands': []
}
}
}
}
}"
`;

exports[`RN Codegen TypeScript Parser can generate fixture PROPS_AS_EXTERNAL_TYPES 1`] = `
"{
'modules': {
Expand Down
Loading