Files
react-native/packages/babel-plugin-codegen/index.js
T
Vitali Zaidman 8fba154b66 Fix source mapping for codegenNativeCommands (#46452)
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
2024-09-16 05:22:38 -07:00

205 lines
6.1 KiB
JavaScript

/**
* 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
*/
'use strict';
let FlowParser, TypeScriptParser, RNCodegen;
const {basename} = require('path');
const {cheap: traverseCheap} = require('@babel/traverse').default;
try {
FlowParser =
require('@react-native/codegen/src/parsers/flow/parser').FlowParser;
TypeScriptParser =
require('@react-native/codegen/src/parsers/typescript/parser').TypeScriptParser;
RNCodegen = require('@react-native/codegen/src/generators/RNCodegen');
} catch (e) {
// Fallback to lib when source doesn't exit (e.g. when installed as a dev dependency)
FlowParser =
require('@react-native/codegen/lib/parsers/flow/parser').FlowParser;
TypeScriptParser =
require('@react-native/codegen/lib/parsers/typescript/parser').TypeScriptParser;
RNCodegen = require('@react-native/codegen/lib/generators/RNCodegen');
}
const flowParser = new FlowParser();
const typeScriptParser = new TypeScriptParser();
function parseFile(filename, code) {
if (filename.endsWith('js')) {
return flowParser.parseString(code);
}
if (filename.endsWith('ts')) {
return typeScriptParser.parseString(code);
}
throw new Error(
`Unable to parse file '${filename}'. Unsupported filename extension.`,
);
}
function generateViewConfig(filename, code) {
const schema = parseFile(filename, code);
const libraryName = basename(filename).replace(
/NativeComponent\.(js|ts)$/,
'',
);
return RNCodegen.generateViewConfig({
schema,
libraryName,
});
}
function isCodegenDeclaration(declaration) {
if (!declaration) {
return false;
}
if (
declaration.left &&
declaration.left.left &&
declaration.left.left.name === 'codegenNativeComponent'
) {
return true;
} else if (
declaration.callee &&
declaration.callee.name &&
declaration.callee.name === 'codegenNativeComponent'
) {
return true;
} else if (
(declaration.type === 'TypeCastExpression' ||
declaration.type === 'AsExpression') &&
declaration.expression &&
declaration.expression.callee &&
declaration.expression.callee.name &&
declaration.expression.callee.name === 'codegenNativeComponent'
) {
return true;
} else if (
declaration.type === 'TSAsExpression' &&
declaration.expression &&
declaration.expression.callee &&
declaration.expression.callee.name &&
declaration.expression.callee.name === 'codegenNativeComponent'
) {
return true;
}
return false;
}
module.exports = function ({parse, types: t}) {
return {
pre(state) {
this.code = state.code;
this.filename = state.opts.filename;
this.defaultExport = null;
this.commandsExport = null;
this.codeInserted = false;
},
visitor: {
ExportNamedDeclaration(path) {
if (this.codeInserted) {
return;
}
if (
path.node.declaration &&
path.node.declaration.declarations &&
path.node.declaration.declarations[0]
) {
const firstDeclaration = path.node.declaration.declarations[0];
if (firstDeclaration.type === 'VariableDeclarator') {
if (
firstDeclaration.init &&
firstDeclaration.init.type === 'CallExpression' &&
firstDeclaration.init.callee.type === 'Identifier' &&
firstDeclaration.init.callee.name === 'codegenNativeCommands'
) {
if (
firstDeclaration.id.type === 'Identifier' &&
firstDeclaration.id.name !== 'Commands'
) {
throw path.buildCodeFrameError(
"Native commands must be exported with the name 'Commands'",
);
}
this.commandsExport = path;
return;
} else {
if (firstDeclaration.id.name === 'Commands') {
throw path.buildCodeFrameError(
"'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands.",
);
}
}
}
} else if (path.node.specifiers && path.node.specifiers.length > 0) {
path.node.specifiers.forEach(specifier => {
if (
specifier.type === 'ExportSpecifier' &&
specifier.local.type === 'Identifier' &&
specifier.local.name === 'Commands'
) {
throw path.buildCodeFrameError(
"'Commands' is a reserved export and may only be used to export the result of codegenNativeCommands.",
);
}
});
}
},
ExportDefaultDeclaration(path, state) {
if (isCodegenDeclaration(path.node.declaration)) {
this.defaultExport = path;
}
},
Program: {
exit(path) {
if (this.defaultExport) {
const viewConfig = generateViewConfig(this.filename, this.code);
const ast = parse(viewConfig, {
babelrc: false,
browserslistConfigFile: false,
configFile: false,
});
// Almost the whole file is replaced with the viewConfig generated code that doesn't
// have a clear equivalent code on the source file when the user debugs, so we point
// it to the location of the default export that in that file, which is the closest
// to representing the code that is being generated.
// This is mostly useful when that generated code throws an error.
traverseCheap(ast, node => {
if (node?.loc) {
node.loc = this.defaultExport.node.loc;
node.start = this.defaultExport.node.start;
node.end = this.defaultExport.node.end;
}
});
this.defaultExport.replaceWithMultiple(ast.program.body);
if (this.commandsExport != null) {
this.commandsExport.remove();
}
this.codeInserted = true;
}
},
},
},
};
};