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
facebook · Sep 26, 2022 · bbb2fb2 · bbb2fb2
1 parent 925b153
commit bbb2fb2
Show file tree

Hide file tree

Showing 9 changed files with 5,082 additions and 1,481 deletions.
diff --git a/packages/react-native-codegen/src/parsers/consistency/__tests__/checkComponentSnaps-test.js b/packages/react-native-codegen/src/parsers/consistency/__tests__/checkComponentSnaps-test.js
@@ -14,20 +14,11 @@ const {compareSnaps, compareTsArraySnaps} = require('../compareSnaps.js');
 
 const flowFixtures = require('../../flow/components/__test_fixtures__/fixtures.js');
 const flowSnaps = require('../../../../src/parsers/flow/components/__tests__/__snapshots__/component-parser-test.js.snap');
-const flowExtraCases = [
-  //TODO: remove these once we implement TypeScript parser for Custom State
-  'ALL_STATE_TYPES',
-  'ARRAY_STATE_TYPES',
-  'COMMANDS_EVENTS_STATE_TYPES_EXPORTED',
-  'OBJECT_STATE_TYPES',
-];
+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'].concat([
-  //TODO: remove these once we implement TypeScript parser for Custom State
-  'COMMANDS_AND_EVENTS_TYPES_EXPORTED',
-]);
-const ignoredCases = ['ARRAY_PROP_TYPES_NO_EVENTS'];
+const tsExtraCases = ['ARRAY2_PROP_TYPES_NO_EVENTS', 'ARRAY2_STATE_TYPES'];
+const ignoredCases = ['ARRAY_PROP_TYPES_NO_EVENTS', 'ARRAY_STATE_TYPES'];
 
 compareSnaps(
   flowFixtures,

diff --git a/...ages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/failures.js b/...ages/react-native-codegen/src/parsers/typescript/components/__test_fixtures__/failures.js
@@ -485,6 +485,310 @@ export default codegenNativeComponent<ModuleProps>(
 ) as HostComponent<ModuleProps>;
 `;
 
+// === STATE ===
+const NULLABLE_STATE_WITH_DEFAULT = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {WithDefault, Float} from 'CodegenTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps { }
+
+interface ModuleNativeState {
+  nullable_with_default: WithDefault<Float, 1.0> | null | undefined;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const NON_OPTIONAL_KEY_STATE_WITH_DEFAULT_VALUE = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {WithDefault, Float} from 'CodegenTypes';
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps {}
+
+export interface ModuleNativeState {
+  required_key_with_default: WithDefault<Float, 1.0>;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_CONFLICT_NAMES = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps { }
+
+interface ModuleNativeState {
+  isEnabled: string,
+
+  isEnabled: boolean,
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_CONFLICT_WITH_SPREAD_PROPS = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps { }
+
+type PropsInFile = Readonly<{
+  isEnabled: boolean,
+}>;
+
+export interface ModuleNativeState extends PropsInFile {
+  isEnabled: boolean,
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_NUMBER_TYPE = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps { }
+
+interface ModuleNativeState {
+  someProp: number
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_MIXED_ENUM = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import type {WithDefault} from 'CodegenTypes';
+
+export interface ModuleProps extends ViewProps { }
+
+export interface ModuleNativeState {
+  someProp?: WithDefault<'foo' | 1, 1>;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_ENUM_BOOLEAN = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import type {WithDefault} from 'CodegenTypes';
+
+export interface ModuleProps extends ViewProps { }
+
+interface ModuleNativeState {
+  someProp?: WithDefault<false | true, false>
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_ARRAY_MIXED_ENUM = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import type {WithDefault} from 'CodegenTypes';
+
+export interface ModuleProps extends ViewProps { }
+
+export interface ModuleNativeState {
+  someProp?: WithDefault<ReadonlyArray<'foo' | 1>, 1>;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_ARRAY_ENUM_BOOLEAN = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import type {WithDefault} from 'CodegenTypes';
+
+export interface ModuleProps extends ViewProps { }
+
+interface ModuleNativeState {
+  someProp?: WithDefault<ReadonlyArray<false | true>, false>;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const STATE_ARRAY_ENUM_INT = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+import type {WithDefault} from 'CodegenTypes';
+
+export interface ModuleProps extends ViewProps { }
+
+export interface ModuleNativeState {
+  someProp?: WithDefault<ReadonlyArray<0 | 1>, 0>;
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
+const DOUBLE_STATE_IN_FILE = `
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+const codegenNativeComponent = require('codegenNativeComponent');
+
+import type {ViewProps} from 'ViewPropTypes';
+import type {HostComponent} from 'react-native';
+
+export interface ModuleProps extends ViewProps { }
+
+interface SecondNativeState {
+  someProp: boolean
+}
+
+export interface ModuleNativeState {
+  someOtherProp: boolean
+}
+
+export default codegenNativeComponent<ModuleProps>(
+  'Module',
+) as HostComponent<ModuleProps>;
+`;
+
 module.exports = {
   COMMANDS_DEFINED_INLINE,
   COMMANDS_DEFINED_MULTIPLE_TIMES,
@@ -502,4 +806,15 @@ module.exports = {
   PROP_ARRAY_MIXED_ENUM,
   PROP_ARRAY_ENUM_BOOLEAN,
   PROP_ARRAY_ENUM_INT,
+  NULLABLE_STATE_WITH_DEFAULT,
+  NON_OPTIONAL_KEY_STATE_WITH_DEFAULT_VALUE,
+  STATE_CONFLICT_NAMES,
+  STATE_CONFLICT_WITH_SPREAD_PROPS,
+  STATE_NUMBER_TYPE,
+  STATE_MIXED_ENUM,
+  STATE_ENUM_BOOLEAN,
+  STATE_ARRAY_MIXED_ENUM,
+  STATE_ARRAY_ENUM_BOOLEAN,
+  STATE_ARRAY_ENUM_INT,
+  DOUBLE_STATE_IN_FILE,
 };