Skip to content

Commit bbb2fb2

Browse files
Riccardo Cipolleschifacebook-github-bot
Riccardo Cipolleschi
authored and
facebook-github-bot
committed
Parse custom NativeState in TypeScript (#34786)
Summary: Pull Request resolved: #34786 This diff is the TS equivalent of D39686251. It introduces the possibility to parse a custom Native State in Typescript. The parsing follows the exact same rules as props, as initial heuristic. This should allow enough customization for the developers who needs a custom state. Currently, we only support using `interface` for the state and the interface must contain the `NativeState` string in its name. This diff introduces also tests for the TypeScript parser and it aligns the tests between Flow and TS. ## Changelog [General][Added] - Implement custom Native State parsing in TypeScript Reviewed By: cortinico Differential Revision: D39811476 fbshipit-source-id: 1e1b86b50b9632c13157ff6c8115f5ebcbada643
1 parent 925b153 commit bbb2fb2

File tree

9 files changed

+5082
-1481
lines changed

9 files changed

+5082
-1481
lines changed

‎packages/react-native-codegen/src/parsers/consistency/__tests__/checkComponentSnaps-test.js

+3-12
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,11 @@ const {compareSnaps, compareTsArraySnaps} = require('../compareSnaps.js');
1414

1515
const flowFixtures = require('../../flow/components/__test_fixtures__/fixtures.js');
1616
const flowSnaps = require('../../../../src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap');
17-
const flowExtraCases = [
18-
//TODO: remove these once we implement TypeScript parser for Custom State
19-
'ALL_STATE_TYPES',
20-
'ARRAY_STATE_TYPES',
21-
'COMMANDS_EVENTS_STATE_TYPES_EXPORTED',
22-
'OBJECT_STATE_TYPES',
23-
];
17+
const flowExtraCases = [];
2418
const tsFixtures = require('../../typescript/components/__test_fixtures__/fixtures.js');
2519
const tsSnaps = require('../../../../src/parsers/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap');
26-
const tsExtraCases = ['ARRAY2_PROP_TYPES_NO_EVENTS'].concat([
27-
//TODO: remove these once we implement TypeScript parser for Custom State
28-
'COMMANDS_AND_EVENTS_TYPES_EXPORTED',
29-
]);
30-
const ignoredCases = ['ARRAY_PROP_TYPES_NO_EVENTS'];
20+
const tsExtraCases = ['ARRAY2_PROP_TYPES_NO_EVENTS', 'ARRAY2_STATE_TYPES'];
21+
const ignoredCases = ['ARRAY_PROP_TYPES_NO_EVENTS', 'ARRAY_STATE_TYPES'];
3122

3223
compareSnaps(
3324
flowFixtures,

‎packages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/failures.js

+315
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,310 @@ export default codegenNativeComponent<ModuleProps>(
485485
) as HostComponent<ModuleProps>;
486486
`;
487487

488+
// === STATE ===
489+
const NULLABLE_STATE_WITH_DEFAULT = `
490+
/**
491+
* Copyright (c) Meta Platforms, Inc. and affiliates.
492+
*
493+
* This source code is licensed under the MIT license found in the
494+
* LICENSE file in the root directory of this source tree.
495+
*
496+
* @format
497+
*/
498+
499+
const codegenNativeComponent = require('codegenNativeComponent');
500+
501+
import type {WithDefault, Float} from 'CodegenTypes';
502+
import type {ViewProps} from 'ViewPropTypes';
503+
import type {HostComponent} from 'react-native';
504+
505+
export interface ModuleProps extends ViewProps { }
506+
507+
interface ModuleNativeState {
508+
nullable_with_default: WithDefault<Float, 1.0> | null | undefined;
509+
}
510+
511+
export default codegenNativeComponent<ModuleProps>(
512+
'Module',
513+
) as HostComponent<ModuleProps>;
514+
`;
515+
516+
const NON_OPTIONAL_KEY_STATE_WITH_DEFAULT_VALUE = `
517+
/**
518+
* Copyright (c) Meta Platforms, Inc. and affiliates.
519+
*
520+
* This source code is licensed under the MIT license found in the
521+
* LICENSE file in the root directory of this source tree.
522+
*
523+
* @format
524+
*/
525+
526+
const codegenNativeComponent = require('codegenNativeComponent');
527+
528+
import type {WithDefault, Float} from 'CodegenTypes';
529+
import type {ViewProps} from 'ViewPropTypes';
530+
import type {HostComponent} from 'react-native';
531+
532+
export interface ModuleProps extends ViewProps {}
533+
534+
export interface ModuleNativeState {
535+
required_key_with_default: WithDefault<Float, 1.0>;
536+
}
537+
538+
export default codegenNativeComponent<ModuleProps>(
539+
'Module',
540+
) as HostComponent<ModuleProps>;
541+
`;
542+
543+
const STATE_CONFLICT_NAMES = `
544+
/**
545+
* Copyright (c) Meta Platforms, Inc. and affiliates.
546+
*
547+
* This source code is licensed under the MIT license found in the
548+
* LICENSE file in the root directory of this source tree.
549+
*
550+
* @format
551+
*/
552+
553+
const codegenNativeComponent = require('codegenNativeComponent');
554+
555+
import type {ViewProps} from 'ViewPropTypes';
556+
import type {HostComponent} from 'react-native';
557+
558+
export interface ModuleProps extends ViewProps { }
559+
560+
interface ModuleNativeState {
561+
isEnabled: string,
562+
563+
isEnabled: boolean,
564+
}
565+
566+
export default codegenNativeComponent<ModuleProps>(
567+
'Module',
568+
) as HostComponent<ModuleProps>;
569+
`;
570+
571+
const STATE_CONFLICT_WITH_SPREAD_PROPS = `
572+
/**
573+
* Copyright (c) Meta Platforms, Inc. and affiliates.
574+
*
575+
* This source code is licensed under the MIT license found in the
576+
* LICENSE file in the root directory of this source tree.
577+
*
578+
* @format
579+
*/
580+
581+
const codegenNativeComponent = require('codegenNativeComponent');
582+
583+
import type {ViewProps} from 'ViewPropTypes';
584+
import type {HostComponent} from 'react-native';
585+
586+
export interface ModuleProps extends ViewProps { }
587+
588+
type PropsInFile = Readonly<{
589+
isEnabled: boolean,
590+
}>;
591+
592+
export interface ModuleNativeState extends PropsInFile {
593+
isEnabled: boolean,
594+
}
595+
596+
export default codegenNativeComponent<ModuleProps>(
597+
'Module',
598+
) as HostComponent<ModuleProps>;
599+
`;
600+
601+
const STATE_NUMBER_TYPE = `
602+
/**
603+
* Copyright (c) Meta Platforms, Inc. and affiliates.
604+
*
605+
* This source code is licensed under the MIT license found in the
606+
* LICENSE file in the root directory of this source tree.
607+
*
608+
* @format
609+
*/
610+
611+
const codegenNativeComponent = require('codegenNativeComponent');
612+
613+
import type {ViewProps} from 'ViewPropTypes';
614+
import type {HostComponent} from 'react-native';
615+
616+
export interface ModuleProps extends ViewProps { }
617+
618+
interface ModuleNativeState {
619+
someProp: number
620+
}
621+
622+
export default codegenNativeComponent<ModuleProps>(
623+
'Module',
624+
) as HostComponent<ModuleProps>;
625+
`;
626+
627+
const STATE_MIXED_ENUM = `
628+
/**
629+
* Copyright (c) Meta Platforms, Inc. and affiliates.
630+
*
631+
* This source code is licensed under the MIT license found in the
632+
* LICENSE file in the root directory of this source tree.
633+
*
634+
* @format
635+
*/
636+
637+
const codegenNativeComponent = require('codegenNativeComponent');
638+
639+
import type {ViewProps} from 'ViewPropTypes';
640+
import type {HostComponent} from 'react-native';
641+
import type {WithDefault} from 'CodegenTypes';
642+
643+
export interface ModuleProps extends ViewProps { }
644+
645+
export interface ModuleNativeState {
646+
someProp?: WithDefault<'foo' | 1, 1>;
647+
}
648+
649+
export default codegenNativeComponent<ModuleProps>(
650+
'Module',
651+
) as HostComponent<ModuleProps>;
652+
`;
653+
654+
const STATE_ENUM_BOOLEAN = `
655+
/**
656+
* Copyright (c) Meta Platforms, Inc. and affiliates.
657+
*
658+
* This source code is licensed under the MIT license found in the
659+
* LICENSE file in the root directory of this source tree.
660+
*
661+
* @format
662+
*/
663+
664+
const codegenNativeComponent = require('codegenNativeComponent');
665+
666+
import type {ViewProps} from 'ViewPropTypes';
667+
import type {HostComponent} from 'react-native';
668+
import type {WithDefault} from 'CodegenTypes';
669+
670+
export interface ModuleProps extends ViewProps { }
671+
672+
interface ModuleNativeState {
673+
someProp?: WithDefault<false | true, false>
674+
}
675+
676+
export default codegenNativeComponent<ModuleProps>(
677+
'Module',
678+
) as HostComponent<ModuleProps>;
679+
`;
680+
681+
const STATE_ARRAY_MIXED_ENUM = `
682+
/**
683+
* Copyright (c) Meta Platforms, Inc. and affiliates.
684+
*
685+
* This source code is licensed under the MIT license found in the
686+
* LICENSE file in the root directory of this source tree.
687+
*
688+
* @format
689+
*/
690+
691+
const codegenNativeComponent = require('codegenNativeComponent');
692+
693+
import type {ViewProps} from 'ViewPropTypes';
694+
import type {HostComponent} from 'react-native';
695+
import type {WithDefault} from 'CodegenTypes';
696+
697+
export interface ModuleProps extends ViewProps { }
698+
699+
export interface ModuleNativeState {
700+
someProp?: WithDefault<ReadonlyArray<'foo' | 1>, 1>;
701+
}
702+
703+
export default codegenNativeComponent<ModuleProps>(
704+
'Module',
705+
) as HostComponent<ModuleProps>;
706+
`;
707+
708+
const STATE_ARRAY_ENUM_BOOLEAN = `
709+
/**
710+
* Copyright (c) Meta Platforms, Inc. and affiliates.
711+
*
712+
* This source code is licensed under the MIT license found in the
713+
* LICENSE file in the root directory of this source tree.
714+
*
715+
* @format
716+
*/
717+
718+
const codegenNativeComponent = require('codegenNativeComponent');
719+
720+
import type {ViewProps} from 'ViewPropTypes';
721+
import type {HostComponent} from 'react-native';
722+
import type {WithDefault} from 'CodegenTypes';
723+
724+
export interface ModuleProps extends ViewProps { }
725+
726+
interface ModuleNativeState {
727+
someProp?: WithDefault<ReadonlyArray<false | true>, false>;
728+
}
729+
730+
export default codegenNativeComponent<ModuleProps>(
731+
'Module',
732+
) as HostComponent<ModuleProps>;
733+
`;
734+
735+
const STATE_ARRAY_ENUM_INT = `
736+
/**
737+
* Copyright (c) Meta Platforms, Inc. and affiliates.
738+
*
739+
* This source code is licensed under the MIT license found in the
740+
* LICENSE file in the root directory of this source tree.
741+
*
742+
* @format
743+
*/
744+
745+
const codegenNativeComponent = require('codegenNativeComponent');
746+
747+
import type {ViewProps} from 'ViewPropTypes';
748+
import type {HostComponent} from 'react-native';
749+
import type {WithDefault} from 'CodegenTypes';
750+
751+
export interface ModuleProps extends ViewProps { }
752+
753+
export interface ModuleNativeState {
754+
someProp?: WithDefault<ReadonlyArray<0 | 1>, 0>;
755+
}
756+
757+
export default codegenNativeComponent<ModuleProps>(
758+
'Module',
759+
) as HostComponent<ModuleProps>;
760+
`;
761+
762+
const DOUBLE_STATE_IN_FILE = `
763+
/**
764+
* Copyright (c) Meta Platforms, Inc. and affiliates.
765+
*
766+
* This source code is licensed under the MIT license found in the
767+
* LICENSE file in the root directory of this source tree.
768+
*
769+
* @format
770+
*/
771+
772+
const codegenNativeComponent = require('codegenNativeComponent');
773+
774+
import type {ViewProps} from 'ViewPropTypes';
775+
import type {HostComponent} from 'react-native';
776+
777+
export interface ModuleProps extends ViewProps { }
778+
779+
interface SecondNativeState {
780+
someProp: boolean
781+
}
782+
783+
export interface ModuleNativeState {
784+
someOtherProp: boolean
785+
}
786+
787+
export default codegenNativeComponent<ModuleProps>(
788+
'Module',
789+
) as HostComponent<ModuleProps>;
790+
`;
791+
488792
module.exports = {
489793
COMMANDS_DEFINED_INLINE,
490794
COMMANDS_DEFINED_MULTIPLE_TIMES,
@@ -502,4 +806,15 @@ module.exports = {
502806
PROP_ARRAY_MIXED_ENUM,
503807
PROP_ARRAY_ENUM_BOOLEAN,
504808
PROP_ARRAY_ENUM_INT,
809+
NULLABLE_STATE_WITH_DEFAULT,
810+
NON_OPTIONAL_KEY_STATE_WITH_DEFAULT_VALUE,
811+
STATE_CONFLICT_NAMES,
812+
STATE_CONFLICT_WITH_SPREAD_PROPS,
813+
STATE_NUMBER_TYPE,
814+
STATE_MIXED_ENUM,
815+
STATE_ENUM_BOOLEAN,
816+
STATE_ARRAY_MIXED_ENUM,
817+
STATE_ARRAY_ENUM_BOOLEAN,
818+
STATE_ARRAY_ENUM_INT,
819+
DOUBLE_STATE_IN_FILE,
505820
};

0 commit comments

Comments
 (0)