Summary:
Changelog: [GENERAL] [FIXED] - Fixed babel plugin validation error when coverage instrumentation is enabled
Pull Request resolved: https://github.com/facebook/react-native/pull/53381
### Problem
[Workplace post](https://fb.workplace.com/groups/235694244595999/permalink/1278937163605030/)
React Native tests were failing **only when coverage collection was enabled** with the error:
`'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands.`
### Root Cause
The React Native Babel plugin's `codegenNativeCommands` validation logic only handled direct `CallExpression` AST nodes. When coverage instrumentation was enabled, it transformed:
**Normal code:**
`export const Commands = codegenNativeCommands<NativeCommands>({...})`
**With coverage:**
`export const Commands = (cov_xxx().s[0]++, codegenNativeCommands<NativeCommands>({...}))`
The plugin failed to recognize the valid `codegenNativeCommands` call wrapped in a `SequenceExpression` by coverage instrumentation.
### **Solution**
Added `isCodegenNativeCommandsDeclaration` function to handle:
1. **Coverage instrumentation**: `SequenceExpression` nodes containing the function call
2. **Flow type casts**: `TypeCastExpression` and `AsExpression`
3. **TypeScript assertions**: `TSAsExpression`
4. **Direct calls**: Original `CallExpression` (backward compatibility)
Reviewed By: andrewdacenko
Differential Revision: D80572666
fbshipit-source-id: 465f4312a0229d8a92e495c685f46b607ce326e4
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/51781
Adds `flow` to the remaining files that are lacking it in the `packages/react-native-codegen` directory.
This also adds any necessary type annotations (using comment syntax).
Changelog:
[Internal]
Reviewed By: huntie
Differential Revision: D75884727
fbshipit-source-id: 69e880b2dc63c3d6430f841652506e57436544a8
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/47109
Fixes the `lint/sort-imports` errors that are now surfaced after fixing the lint configuration.
For a couple files, I added lint suppressions instead because the unsorted import ordering is important due to interleaved calls with side effects.
Changelog:
[Internal]
Reviewed By: GijsWeterings
Differential Revision: D64569485
fbshipit-source-id: 26415d792e2b9efe08c05d1436f723faae549882
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46452
`babel-plugin-codegen` transforms `codegenNativeComponent`s by expending it with a whole set of many commands (~40 lines) that don't have a good equivalent on the source file.
Currently these lines are pointing to random parts of the due to a bug that causes the source maps to be incorrect and confusing.
Instead, I point all these generated lines of code to the default export as the only line that can represent them.
This way, if an error is thrown from that generated code it would point to that export.
If the users are confused by how it works, there's a comment in the function that is used in the default export in these that explains it:
```
// If this function runs then that means the view configs were not
// generated at build time using `GenerateViewConfigJs.js`. Thus
// we need to `requireNativeComponent` to get the view configs from view managers.
// `requireNativeComponent` is not available in Bridgeless mode.
// e.g. This function runs at runtime if `codegenNativeComponent` was not called
// from a file suffixed with NativeComponent.js.
function codegenNativeComponent<Props>(
componentName: string,
options?: Options,
): NativeComponentType<Props> {
```
The transformation is from all the types and exports after the imports:
[`MyNativeViewNativeComponent` for example](https://github.com/facebook/react-native/blob/773a02ad5d3cc38e0f5837b42ba9a5e05a206bf9/packages/rn-tester/NativeComponentExample/js/MyNativeViewNativeComponent.js#L4)
Which is roughly (ignoring all typing):
```
// types and exports
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
supportedCommands: [
'callNativeMethodToChangeBackgroundColor',
'callNativeMethodToAddOverlays',
'callNativeMethodToRemoveOverlays',
'fireLagacyStyleEvent',
],
});
export default (codegenNativeComponent<NativeProps>(
'RNTMyNativeView',
): MyNativeViewType);
```
to roughly:
```
var React = require('react');
var nativeComponentName = 'RNTMyNativeView';
var __INTERNAL_VIEW_CONFIG = {
uiViewClassName: 'RNTMyNativeView',
bubblingEventTypes: {
topIntArrayChanged: { /* */ },
topAlternativeLegacyName: { /* */ },
},
validAttributes: {
opacity: true,
values: true,
...require('ViewConfigIgnore').ConditionallyIgnoredEventHandlers({
onIntArrayChanged: true,
onLegacyStyleEvent: true
})
}
};
var _default = require('NativeComponentRegistry').get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
var Commands = {
callNativeMethodToChangeBackgroundColor(ref, color) {
require('RendererProxy').dispatchCommand(ref, "callNativeMethodToChangeBackgroundColor", [color]);
},
callNativeMethodToAddOverlays(ref, overlayColors) {
require('RendererProxy').dispatchCommand(ref, "callNativeMethodToAddOverlays", [overlayColors]);
},
callNativeMethodToRemoveOverlays(ref) {
require('RendererProxy').dispatchCommand(ref, "callNativeMethodToRemoveOverlays", []);
},
fireLagacyStyleEvent(ref) {
require('RendererProxy').dispatchCommand(ref, "fireLagacyStyleEvent", []);
}
};
exports.default = _default;
exports.__INTERNAL_VIEW_CONFIG = __INTERNAL_VIEW_CONFIG;
exports.Commands = Commands;
```
Changelog: [Fix] Fixed source maps in Native Components JS files that use codegenNativeComponent
Reviewed By: robhogan, huntie
Differential Revision: D62443699
fbshipit-source-id: 522b4382736a8fed93a1bc687a78d6885fe7c9d5
Summary:
Update various scripts to support AsExpressions, found by looking for scripts currently handling `TypeCastExpression`
Changelog: [Internal]
Reviewed By: SamChou19815
Differential Revision: D50822952
fbshipit-source-id: c88c04a507d94ddbc6458a68fd36509463e91953
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39540
This simplifies the use of Codegen when creating dev builds of `rn-tester` in the monorepo. It now runs from source for this internal scenario, and this package is now built using the shared monorepo build setup.
Changes:
- Migrate `packages/react-native-codegen` to the shared `yarn build` setup.
- Update package to use `"exports"` field and wrap entry point modules with `babel-register` (NOTE: This is only required for each entry point internally used in the monorepo).
- Fixup small Flow syntax quirks that fail under `hermes-parser`.
- Remove `BuildCodegenCLITask` task from Android build.
- Remove Codegen `build.sh` call from iOS build, use `require.resolve` for `combine-js-to-schema-cli.js` entry point.
Externally significant FYIs:
- `react-native/codegen` is converted to use the `"exports"` field — it should export all `.js` files, as before.
- `codegenPath` is now ignored and marked as deprecated on `ReactExtensions.kt`.
NOTE: TypeScript auto-generation is not yet enabled on this package, since it uses CommonJS `module.exports` syntax (unsupported by `flow-api-translator`).
Changelog: [Internal]
Reviewed By: cipolleschi
Differential Revision: D49370200
fbshipit-source-id: 992913155169912ea1a3cb24cb26efbd3f783058
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/40860
This diff adds support for the `AS` expression in TS sources. The following codegen declaration should work now:
```
export default codegenNativeComponent<NativeProps>(
'MyComponentView',
) as HostComponent<NativeProps>;
```
Changelog: [General][Added] - Handle TSAsExpression when looking for the codegen declaration
Reviewed By: shwanton
Differential Revision: D50225241
fbshipit-source-id: 247a3d341d742b548e82318d0fa21dff9884d2bd
Summary:
It is possible that `init` is null when using the following code.
```js
export var a;
```
The typescript compiler actually generates something like this for enums so a lot of third party libraries triggered this issue.
For example in expo-apple-authentication/build/AppleAuthentication.types.js
```js
export var AppleAuthenticationScope;
(function (AppleAuthenticationScope) {
AppleAuthenticationScope[AppleAuthenticationScope["FULL_NAME"] = 0] = "FULL_NAME";
AppleAuthenticationScope[AppleAuthenticationScope["EMAIL"] = 1] = "EMAIL";
})(AppleAuthenticationScope || (AppleAuthenticationScope = {}));
```
This simply adds a null check.
## Changelog
[General] [Fixed] - Fix babel-plugin-codegen crash when export init is null
Pull Request resolved: https://github.com/facebook/react-native/pull/33387
Test Plan: Tested that this fixed the crash in an app.
Reviewed By: javache
Differential Revision: D34687271
Pulled By: philIip
fbshipit-source-id: 7a7e0fe1bb6a7a21a5b442af26b221a263d4173d
Summary:
Changelog: [Internal] babel-plugin-codegen.js to fallback to use lib instead of src.
The bubel plugin uses react-native-codegen/src but it's not compatible when react-native-codegen is installed as a separate dependency (which is the case for OSS).
Reviewed By: cortinico
Differential Revision: D32908846
fbshipit-source-id: 1d3e3a3485e94e2f051e220d76dd2dbcdd8070a8
Summary:
Changelog: [Internal]
Disables implicit `babel.config.js` lookup in a `parse()` call that does not need any user-specified config.
Reviewed By: javache
Differential Revision: D30396331
fbshipit-source-id: 9b07c361eae53cdffc6a76ba30f1146a7af65a10
Summary:
There is partially compiled TurboModule code in [NativeAnimatedModule](https://fburl.com/diffusion/g91a70ng) that fails to build with:
`"File neither contains a module declaration, nor a component declaration. For module declarations, please make sure your file has an InterfaceDeclaration extending TurboModule. For component declarations, please make sure your file has a default export calling the codegenNativeComponent<Props>(...) macro"`
This diff removes react-native-web from the TurboModules logic while we work on a cleaner solution, tracked in T80868008
msdkland[metro]
Changelog: [Internal]
Reviewed By: cpojer, RSNara
Differential Revision: D25325163
fbshipit-source-id: 346abf52660073f976b0f978cbfbfc8402f4b3ee
Summary:
## New Functionality
- Detect if the JS file represents a NativeModule spec.
- **Note:** A JS file is a NativeModule spec if it contains a flow `interface` that extends `TurboModule`. This logic is copied over from the OSS Codegen, here: https://github.com/facebook/react-native/blob/7ccb67a49c087e7ee536c2ffb71717e68a79324b/packages/react-native-codegen/src/parsers/flow/index.js#L60-L75
- For all NativeModule specs, generate the spec's schema using the OSS Codegen for Modules, and conditionally inline it into every `TurboModuleRegistry.get(Enforcing)?` call in the spec, like so:
**Before:**
```
/**
* flow
*/
import type {TurboModule} from 'RCTExport';
export interface Spec extends TurboModule {
//...
}
export default TurboModuleRegistry.get<Spec>('FooModule');
```
**After:**
```
/**
* flow
*/
import type {TurboModule} from 'RCTExport';
export interface Spec extends TurboModule {
//...
}
export default TurboModuleRegistry.get<Spec>('FooModule', __getModuleShape());
function __getModuleShape() {
if (!(global.RN$EnableTurboModuleJSCodegen === true)) {
return undefined;
}
return {...};
}
```
Changelog: [General][Added] Extend react-native/babel-plugin-codegen to generate TurboModule JS codegen
Reviewed By: TheSavior
Differential Revision: D22803845
fbshipit-source-id: 18c157a1dbfcc575012184de31c38908acd53c36
Summary:
This babel plugin will also take care of the JS TurboModule Codegen. Therefore, we should rename this into something more generic.
Changelog:
[General][Changed] Rename babel-plugin-inline-view-configs to react-native/babel-plugin-codegen
Reviewed By: rickhanlonii, cpojer
Differential Revision: D22803209
fbshipit-source-id: 416c97fea6fa0820d25bbc91033a0cbbbbbff825
Umar Mohammad
Sam Zhou
Tim Yung
Vitali Zaidman
George Zahariev
Gijs Weterings
Alex Hunt
Dmitry Rykun
MaeIg
shivenmian
Ramanpreet Nara
Janic Duplessis
Andres Suarez
Sota Ogo
Tim Yung
Moti Zilberman
Micha Reiser
Danny van Velzen
Evan Gilbert
