babel / babel/babel

Newline having a trailing whitespace character is removed in JSX attribute value

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

Description

## Bug Report

**Current Behavior**
new line (\n character) is removed from jsx attribute value when there is a whitespace character (\s+) right after new line.
new line (\n character) is NOT removed from jsx attribute value when there are no whitespace characters (\s+) right after new line.

**Input Code**
- [REPL](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwEwlgbgfAUABHUk5gHaoKYCcASAVAWQBkBeAIhggEMs4AzAewbhLgEYBuOAem4BcMAZz4pUAGzQY4AYwYBbORlR9KNOACM1rAExcE-g4bgwyPWAiQRRmXIVIVqtRs1YBmLrwHDREzDPmKyvBGIQaqtJq0rAAseqHGptywwNzg0EA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=&prettier=false&targets=&version=7.5.5&externalPlugins=%40babel%2Fplugin-transform-react-jsx%407.3.0)

**Expected behavior/code**
Newline should be processed more consistently. Either it should be removed or not removed in both cases mentioned in the current behavior.

**Impact**
react helmet is used for injecting scripts to the document head. react helmet allows to add inline scripts using innerHTML attribute. once we add inline scripts containing inline comments then we end up with broken script produced by react render

example
```


</Helmet>
```
will produce
```
<script data-react-helmet="true" >
var firstVariable = 1; //test var lostVariable = 2;

```

**Possible Solution**
Option 1. do not remove new line, remove only trailing whitespace characters.

change
```
value.value = value.value.replace(/\n\s+/g, " ");
```
into
```
value.value = value.value.replace(/\n\s+/g, "\n");
```
in [babel-helper-builder-react-jsx](https://github.com/babel/babel/blob/master/packages/babel-helper-builder-react-jsx/src/index.js#L91)

**Concerns**
were there any reasons why the new line was replaced with whitespace?

Contributor guide

Open the contributing guide

Research direction

Read packages/babel-helper-builder-react-jsx/src/index.js at the cited newline replacement, then reproduce the JSX attribute cases using the linked Babel REPL or input example. Done means the newline behavior is consistent for values with and without trailing whitespace, with the resulting transformed script retaining the intended line separation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.