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:
`jscodeshift` is only used in one module (`src/generators/components/GenerateViewConfigJs.js`, but depends on a rather complex dependency chain and has a rather large maintenance burden relative to what it's used for and the value it adds in the codebase.
Since the `GenerateViewConfigJs` module creates simple templates, using `babel/core` (and implicitly `babel/template` and `babel/types`) is a lot simpler and changes little code. The only change this introduces to the output are formatting changes (`singleQuote` and `trailingCommas` options are discarded). The code is otherwise functionally identical.
## Changelog:
[INTERNAL] [CHANGED] - Drop jscodeshift dependency from react-native/codegen
Pull Request resolved: https://github.com/facebook/react-native/pull/49641
Test Plan:
This was tested against a React Native build with the `react-native/babel-plugin-codegen` plugina active and using the snapshots in the repo itself. While the snapshots have changed in formatting, none of the outputs change the code's AST.
<details>
<summary>
Example output from <code>react-native/babel-plugin-codegen</code> to supplement the snapshot tests
</summary>
This is the example bundling output of `AndroidSwipeRefreshLayout`. This demonstrates that both the view config output and the `Commands` export continue to be generated correctly.
```js
var _interopRequireDefault = require(_dependencyMap[0]);
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.__INTERNAL_VIEW_CONFIG = exports.Commands = undefined;
var _codegenNativeCommands = _interopRequireDefault(require(_dependencyMap[1]));
var _codegenNativeComponent = _interopRequireDefault(require(_dependencyMap[2]));
var React = _interopRequireWildcard(require(_dependencyMap[3]));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var NativeComponentRegistry = require(_dependencyMap[4]);
var _require = require(_dependencyMap[5]),
ConditionallyIgnoredEventHandlers = _require.ConditionallyIgnoredEventHandlers;
var _require2 = require(_dependencyMap[6]),
dispatchCommand = _require2.dispatchCommand;
var nativeComponentName = 'AndroidSwipeRefreshLayout';
var __INTERNAL_VIEW_CONFIG = exports.__INTERNAL_VIEW_CONFIG = {
uiViewClassName: "AndroidSwipeRefreshLayout",
directEventTypes: {
topRefresh: {
registrationName: "onRefresh"
}
},
validAttributes: {
enabled: true,
colors: {
process: (req => 'default' in req ? req.default : req)(require(_dependencyMap[7]))
},
progressBackgroundColor: {
process: require(_dependencyMap[8]).default
},
size: true,
progressViewOffset: true,
refreshing: true,
...ConditionallyIgnoredEventHandlers({
onRefresh: true
})
}
};
var _default = exports.default = NativeComponentRegistry.get(nativeComponentName, () => __INTERNAL_VIEW_CONFIG);
var Commands = exports.Commands = {
setNativeRefreshing(ref, value) {
dispatchCommand(ref, "setNativeRefreshing", [value]);
}
};
```
</details>
Reviewed By: yungsters
Differential Revision: D70580474
Pulled By: elicwhite
fbshipit-source-id: 85bc6578b685f19a1565ded8d7e56dc2a1ff1999
Summary:
Changelog: [Internal] - Remove all imports back to CJS for changelog in 0.72
We are reverting these imports as it may regress perf as we don't have a recommended inlining solution for ES modules at the current time.
Reviewed By: NickGerleman
Differential Revision: D43630911
fbshipit-source-id: ff3bb80009f327c4d51dad21f2cd287ce46d5964
Summary:
Update `babel/generator` to the latest, which is a semver-minor update within the pre-existing range.
I'm separating this out for ease of review because it brings some noisy snapshot changes, including more granular source maps and fewer empty lines in generated output. The majority of this is a result of https://github.com/babel/babel/pull/14980 (`>=7.19.4`).
This and the previous diff clear the way for a general Babel update, which is currently blocking a perf-boosting Metro PR https://github.com/facebook/metro/pull/854.
Changelog: [Internal] Bump `babel/generator dependency` to `^7.20.0`
Reviewed By: motiz88
Differential Revision: D41438635
fbshipit-source-id: d56853169be22a2197ad53d6320ec6c1faf6b2a7
Summary:
Changelog: [internal]
This replaces all direct references to the `ReactNative` module (which is the Paper renderer) to `RendererProxy` which would select between Paper and Fabric correctly.
The implementation of these functions is exactly the same right now.
As per the removal of the fix for T55744311 in `ScrollView`, I verified this doesn't cause any issues in the screen where it failed before.
Reviewed By: javache
Differential Revision: D39270691
fbshipit-source-id: 03882748fe4b754b9a2c5e9d4c4f003b94ed49ef
Summary:
For every direct and bubbling event, RCTComponentData (iOS-only) creates a {eventName}: true entry in the component's ViewConfig validAttributes. This entry is unnecessary, and creates a discrepancy between ViewConfigs on iOS vs Android.
This diff removes this entry for all events to:
1. Reduce bloat in native ViewConfigs
2. Create consistency betweeen Android and iOS.
Changelog: [Internal]
Reviewed By: yungsters
Differential Revision: D33303950
fbshipit-source-id: 870c8a2a6d41156ac89bd8554eb09f292bb6108e
Summary:
Changelog: [Internal]
Some environments that use codegen don't have Haste enabled, breaking the `require('NativeComponentRegistry')` call in generated view configs. Here we change it to reference an explicit path relative to `react-native`.
Reviewed By: JoshuaGross
Differential Revision: D31166063
fbshipit-source-id: cebc23d0d95b5cde76d0f8473eabc03ca82a862e
Summary:
Forgot to delete these snapshot tests in D25915169 (https://github.com/facebook/react-native/commit/e67fc7cadadab065901fc67d5f1485c696197362). They are no longer necessary, because we're deleting the JS TurboModule codegen.
Changelog: [Internal]
Reviewed By: mdvacca
Differential Revision: D25920310
fbshipit-source-id: 66f6fa3fcba5b53210798a204e4f76e4595b3f25
Summary:
## Changes
1. In the NativeModule spec parser, the moduleName is now being extracted from the TurboModuleRegistry.get<Spec>(...) call by examining the Flow ast node. Previously, we used regex parsing, which was unsafe because it could be fooled by TurboModuleRegistry.get<Spec>(...) calls in comments.
2. The logic to parse and validate the TurboModuleRegistry.get<Spec>(...) call is now centralized in the NativeModule Spec Parser (it was removed from the react-native-modules ESLint rule). The linter is now only responsible for three things:
1. Detecting if a JavaScript file contains a TurboModuleRegistry.get<Spec> call or a TurboModule interface, and if so
2. Running the NativeModule spec parser on it.
3. It also validates that the Module spec's filename starts with the prefix "Native".
The React Native Modules linter now completely delegates to the NativeModules Spec parser, without doing any error checking of its own. If an error is reported by the React Native Modules linter, and that error doesn't have anything to do with the "Native" prefix, then it *must* be addressed. Otherwise, it will cause the NativeModule Spec Parser to fail on that particular spec.
Changelog: [Internal]
Reviewed By: hramos
Differential Revision: D25153243
fbshipit-source-id: da74dbb66b1d8dca3a2b1952402222c6696b73d6
Summary:
Changes `react-native/babel-plugin-codegen` to generate calls to `NativeComponentRegistry` instead of `registerGeneratedViewConfig`.
The only notable changes in behavior from this will be:
1. In bridgeless mode, all components using `codegenNativeComponent` will no longer access `UIManager`.
2. In bridge mode, all components using `codegenNativeComponent` will no longer verify equivalence in production. Only in `__DEV__`. (This may improve performance slightly.)
This also changes the `ViewConfig` to be lazily allocated and drops support for `__INTERNAL_VIEW_CONFIG`, which we no longer need.
Changelog:
[Internal]
Reviewed By: JoshuaGross
Differential Revision: D25135881
fbshipit-source-id: ca2191872c02622ab2279b808102eeb1f664d207
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
Phil Pluckthun
Luna Wei
Rob Hogan
Rubén Norte
Ramanpreet Nara
Paige Sun
Moti Zilberman
Micha Reiser
Tim Yung