Skip to content

Commit 9bb7165

Browse files
ZihanChen-MSFTfacebook-github-bot
ZihanChen-MSFT
authored and
facebook-github-bot
committed
Add @react-native/codegen-typescript-test to verify .d.ts files in @react-native/codegen (1) (facebook#36562)
Summary: - Add a typescript project to test `CodegenSchema.d.ts`. More tests for other .d.ts files will be added in future pull requests. - The build script scans all snapshots from `react-native/codegen`'s typescript frontend and generates .ts files for each snapshot, but they are .gitignore-ed. - `npm run build` will build these .ts files against `CodegenSchema.d.ts` after generating them. - A failed jest case is included to ensure CI catch it, it will be removed before merged. bypass-github-export-checks ## Changelog: [General] [Added] - Add react-native/codegen-typescript-test to verify .d.ts files in react-native/codegen (1) Pull Request resolved: facebook#36562 Test Plan: `npm run build` in `packages/react-native-codegen-typescript-test` and see all test files appear in `__generated__`. ## Screenshot ![Untitled](https://user-images.githubusercontent.com/53799235/226757755-cab4cb29-7d22-46a1-9ecb-d6732122ed38.png) Reviewed By: rshest Differential Revision: D44292277 Pulled By: cipolleschi fbshipit-source-id: 8d79fe913f9563d64c92aae7c4f4e97a24ae9a21
1 parent a248456 commit 9bb7165

File tree

11 files changed

+2488
-41
lines changed

11 files changed

+2488
-41
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ package-lock.json
127127
/packages/rn-tester/NativeModuleExample/ScreenshotManagerSpec*
128128
/**/RCTThirdPartyFabricComponentsProvider.*
129129

130+
# @react-native/codegen-typescript-test
131+
/packages/react-native-codegen-typescript-test/lib
130132

131133
# Additional SDKs
132134
/packages/react-native/sdks/download

‎packages/react-native-codegen-typescript-test/__generated__/.gitignore

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/react-native-codegen-typescript-test/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@react-native/codegen-typescript-test",
3+
"version": "0.0.1",
4+
"description": "⚛️ TypeScript related unit test for @react-native/codegen",
5+
"homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/react-native-typescript-test",
6+
"repository": {
7+
"type": "git",
8+
"url": "[email protected]:facebook/react-native.git",
9+
"directory": "packages/react-native-codegen-typescript-test"
10+
},
11+
"scripts": {
12+
"build": "yarn clean && node scripts/build.js --verbose && tsc",
13+
"clean": "rimraf lib && rimraf __generated__/*.ts",
14+
"prepare": "yarn run build"
15+
},
16+
"license": "MIT",
17+
"dependencies": {
18+
"@react-native/codegen": "*"
19+
},
20+
"devDependencies": {
21+
"@babel/core": "^7.20.0",
22+
"@babel/plugin-proposal-class-properties": "^7.0.0",
23+
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
24+
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
25+
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
26+
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
27+
"@babel/plugin-transform-async-to-generator": "^7.0.0",
28+
"@babel/plugin-transform-destructuring": "^7.0.0",
29+
"@babel/plugin-transform-flow-strip-types": "^7.0.0",
30+
"@babel/preset-env": "^7.14.0",
31+
"@types/jest": "^24.0.17",
32+
"jest": "^24.0.17",
33+
"rimraf": "^3.0.2"
34+
},
35+
"peerDependencies": {
36+
"@babel/preset-env": "^7.1.6"
37+
}
38+
}

‎packages/react-native-codegen-typescript-test/scripts/build.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
const fs = require('fs');
9+
const path = require('path');
10+
11+
const tsComponentFixturePath = path.join(__dirname, '../../react-native-codegen/src/parsers/typescript/components/__test_fixtures__/fixtures.js');
12+
const tsComponentSnapshotPath = path.join(__dirname, '../../react-native-codegen/src/parsers/typescript/components/__tests__/__snapshots__/typescript-component-parser-test.js.snap');
13+
const tsModuleFixturePath = path.join(__dirname, '../../react-native-codegen/src/parsers/typescript/modules/__test_fixtures__/fixtures.js');
14+
const tsModuleSnapshotPath = path.join(__dirname, '../../react-native-codegen/src/parsers/typescript/modules/__tests__/__snapshots__/typescript-module-parser-snapshot-test.js.snap');
15+
const snapshotOutputPath = path.join(__dirname, '../__generated__');
16+
17+
function genereateSnapshotTestCases(name, fixturePath, snapshotPath, outputPath) {
18+
const fixtures = require(fixturePath);
19+
const snapshots = require(snapshotPath);
20+
for (const key of Object.keys(fixtures)) {
21+
const snapshotName = `RN Codegen TypeScript Parser can generate fixture ${key} 1`;
22+
const snapshotString = snapshots[snapshotName];
23+
const snapshot = snapshotString.substring(2, snapshotString.length - 2);
24+
const tsSourceCode = `
25+
/**
26+
* Copyright (c) Meta Platforms, Inc. and affiliates.
27+
*
28+
* DO NOT MODIFY
29+
* Generated by src/build.js
30+
* From snapshot: ${name} - ${key}
31+
*/
32+
33+
import type { SchemaType } from '@react-native/codegen/lib/CodegenSchema';
34+
const snapshot : SchemaType = ${snapshot};
35+
export default snapshot;
36+
`;
37+
fs.writeFileSync(path.join(outputPath, `${name}_${key}.ts`), tsSourceCode, { encoding: 'utf-8' });
38+
}
39+
}
40+
41+
genereateSnapshotTestCases('component', tsComponentFixturePath, tsComponentSnapshotPath, snapshotOutputPath);
42+
genereateSnapshotTestCases('module', tsModuleFixturePath, tsModuleSnapshotPath, snapshotOutputPath);

‎packages/react-native-codegen-typescript-test/src/__tests__/simple-scenario-frontend-test.ts

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @format
8+
*/
9+
10+
import * as assert from 'assert';
11+
import type {SchemaType} from '@react-native/codegen/lib/CodegenSchema';
12+
import {TypeScriptParser} from '@react-native/codegen/lib/parsers/typescript/parser';
13+
14+
test(`@rn/codegen should parse an empty TypeScript module`, () => {
15+
const tsInput = `
16+
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
17+
import * as TurboModuleRegistry from 'react-native/Libraries/TurboModule/TurboModuleRegistry';
18+
19+
export interface Spec extends TurboModule {}
20+
export default TurboModuleRegistry.getEnforcing<Spec>('SampleTurboModule');
21+
`;
22+
const parser = new TypeScriptParser();
23+
const actual = parser.parseString(tsInput, 'SampleTurboModule.ts');
24+
const expected: SchemaType = {
25+
modules: {
26+
SampleTurboModule: {
27+
aliasMap: {},
28+
enumMap: {},
29+
excludedPlatforms: undefined,
30+
moduleName: 'SampleTurboModule',
31+
spec: {
32+
properties: [],
33+
},
34+
type: 'NativeModule',
35+
},
36+
},
37+
};
38+
assert.deepStrictEqual(actual, expected);
39+
});
40+
41+
test(`@rn/codegen should parse an empty TypeScript component`, () => {
42+
const tsInput = `
43+
import type {ViewProps} from 'ViewPropTypes';
44+
import type {HostComponent} from 'react-native';
45+
46+
const codegenNativeComponent = require('codegenNativeComponent');
47+
48+
export interface ModuleProps extends ViewProps {}
49+
export default codegenNativeComponent<ModuleProps>('Module', {
50+
interfaceOnly: true,
51+
paperComponentName: 'RCTModule',
52+
}) as HostComponent<ModuleProps>;
53+
`;
54+
const parser = new TypeScriptParser();
55+
const actual = parser.parseString(tsInput, 'SampleNativeComponent.ts');
56+
const expected: SchemaType = {
57+
modules: {
58+
Module: {
59+
components: {
60+
Module: {
61+
commands: [],
62+
events: [],
63+
extendsProps: [
64+
{
65+
knownTypeName: 'ReactNativeCoreViewProps',
66+
type: 'ReactNativeBuiltInType',
67+
},
68+
],
69+
interfaceOnly: true,
70+
paperComponentName: 'RCTModule',
71+
props: [],
72+
},
73+
},
74+
type: 'Component',
75+
},
76+
},
77+
};
78+
assert.deepStrictEqual(actual, expected);
79+
});

‎packages/react-native-codegen-typescript-test/tsconfig.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"lib": [
4+
"es6"
5+
],
6+
"module": "commonjs",
7+
"moduleResolution": "node",
8+
"target": "es5",
9+
"declaration": false,
10+
"sourceMap": false,
11+
"outDir": "./lib",
12+
"noEmitOnError": true,
13+
"noUnusedLocals": true,
14+
"strictNullChecks": true,
15+
},
16+
"exclude": [
17+
"node_modules",
18+
"lib"
19+
]
20+
}

‎packages/react-native-codegen/src/CodegenSchema.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ export interface ObjectTypeAnnotation<T> {
5050
readonly baseTypes?: readonly string[] | undefined;
5151
}
5252

53+
export interface MixedTypeAnnotation {
54+
readonly type: 'MixedTypeAnnotation';
55+
}
56+
5357
export interface FunctionTypeAnnotation<P, R> {
5458
readonly type: 'FunctionTypeAnnotation';
5559
readonly params: readonly NamedShape<P>[];
@@ -74,6 +78,7 @@ export interface ComponentShape extends OptionsShape {
7478
readonly events: readonly EventTypeShape[];
7579
readonly props: readonly NamedShape<PropTypeAnnotation>[];
7680
readonly commands: readonly NamedShape<CommandTypeAnnotation>[];
81+
readonly deprecatedViewConfigName?: string | undefined;
7782
}
7883

7984
export interface OptionsShape {
@@ -168,7 +173,8 @@ export type PropTypeAnnotation =
168173
readonly type: 'ArrayTypeAnnotation';
169174
readonly elementType: ObjectTypeAnnotation<PropTypeAnnotation>;
170175
};
171-
};
176+
}
177+
| MixedTypeAnnotation;
172178

173179
export interface ReservedPropTypeAnnotation {
174180
readonly type: 'ReservedPropTypeAnnotation';
@@ -263,7 +269,7 @@ export interface NativeModuleBooleanTypeAnnotation {
263269

264270
export type NativeModuleEnumMembers = readonly {
265271
readonly name: string;
266-
readonly value: string;
272+
readonly value: string | number;
267273
}[];
268274

269275
export type NativeModuleEnumMemberType =
@@ -343,6 +349,7 @@ export type NativeModuleTypeAnnotation =
343349
export type NativeModuleParamOnlyTypeAnnotation = NativeModuleFunctionTypeAnnotation;
344350

345351
export type NativeModuleReturnOnlyTypeAnnotation =
352+
| NativeModuleFunctionTypeAnnotation
346353
| NativeModulePromiseTypeAnnotation
347354
| VoidTypeAnnotation;
348355

‎packages/react-native-codegen/src/parsers/flow/parser.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import type {Parser} from '../parser';
8+
import type { Parser } from '../parser';
9+
import type { SchemaType } from '../../CodegenSchema';
10+
import type { ParserType } from '../errors';
911

10-
export declare class FlowParser implements Parser{}
12+
export declare class FlowParser implements Parser {
13+
language(): ParserType;
14+
parseFile(filename: string): SchemaType;
15+
parseString(contents: string, filename?: string): SchemaType;
16+
parseModuleFixture(filename: string): SchemaType;
17+
}

‎packages/react-native-codegen/src/parsers/typescript/parser.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import type {Parser} from '../parser';
8+
import type { Parser } from '../parser';
9+
import type { SchemaType } from '../../CodegenSchema';
10+
import type { ParserType } from '../errors';
911

10-
export declare class TypeScriptParser implements Parser{}
12+
export declare class TypeScriptParser implements Parser {
13+
language(): ParserType;
14+
parseFile(filename: string): SchemaType;
15+
parseString(contents: string, filename?: string): SchemaType;
16+
parseModuleFixture(filename: string): SchemaType;
17+
}

‎scripts/run-ci-javascript-tests.js

+27
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,33 @@ try {
5353
throw Error(exitCode);
5454
}
5555

56+
/*
57+
* Build @react-native/codegen and @react-native/codegen-typescript-test
58+
*
59+
* The typescript-test project use TypeScript to write test cases
60+
* In order to make these tests discoverable to jest
61+
* *-test.ts must be compiled to *-test.js before running jest
62+
*/
63+
64+
describe('Test: Build @react-native/codegen');
65+
if (
66+
exec(`${YARN_BINARY} --cwd ./packages/react-native-codegen run build`).code
67+
) {
68+
echo('Failed to build @react-native/codegen.');
69+
exitCode = 1;
70+
throw Error(exitCode);
71+
}
72+
describe('Test: Build @react-native/codegen-typescript-test');
73+
if (
74+
exec(
75+
`${YARN_BINARY} --cwd ./packages/react-native-codegen-typescript-test run build`,
76+
).code
77+
) {
78+
echo('Failed to build @react-native/codegen-typescript-test.');
79+
exitCode = 1;
80+
throw Error(exitCode);
81+
}
82+
5683
describe('Test: Jest');
5784
if (
5885
exec(

0 commit comments

Comments
 (0)