babel / babel/babel

Comments in rendering code not retained after transformation of ReactNative JSX (T7193)

Open
#4,164 1 comment 0 reactions 0 assignees View on GitHub
area: comments area: jsx
Dominant language
TypeScript
Stars
44k
Forks
6k
Avg merge
5d 15h
Merged PRs (30d)
23

Description

> Issue originally made by @mishaaq
### Bug information
- **Babel version:** 6.7.2
- **Node version:** 5.4.0
- **npm version:** 3.3.12
### Options

```
presets: react-native
comments: true
compact: false
retailLines: false
```
### Input code

```
class SimpleComponent extends Component {

render() {
var selected = 1;

/* comment 1 */

return (
/* comment 2 */

test {/* comment 3 */}
{/*
comment 4
*/}

)
}
}
```
### Description

The output is:

```
var SimpleComponent = function (_Component) {
_inherits(SimpleComponent, _Component);

function SimpleComponent() {
_classCallCheck(this, SimpleComponent);

return _possibleConstructorReturn(this, Object.getPrototypeOf(SimpleComponent).apply(this, arguments));
}

_createClass(SimpleComponent, [{
key: "render",
value: function render() {
var selected = 1;

/* comment 1 */

return React.createElement(
View,
null,
React.createElement(
Text,
null,
"test "
)
);
}
}]);

return SimpleComponent;
}(Component);
```

As you see - only "comment1" is retained. All the comments enclosed by return statement are missing.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied JSX with Babel 6.7.2, the react-native preset, and comments enabled, then trace the JSX transformation that produces React.createElement calls. Done means comments 2–4 are retained in the generated output while comment 1 remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.