New line indentation about babel-plugin-transform-react-createelement-to-jsx

[flying-sheep]

Huge thanks for you for this plugin!

i’m glad it’s useful for you!

I found just one drawback. Plugin pose all JSX tags just in one line. How can I avoid it?

i don’t know, but maybe we can find out together.

do you know how babel/ESTree represents whitespace?

[asiniy]

Unfortunately, nope.

[flying-sheep]

so you say

<ol>
    <li>a</li>
    <li>b</li>
</ol>

gets converted to

<ol><li>a</li><li>b</li></ol>

or what?

[asiniy]

I mean

React.createElement("ul", React.createElement("li"))

converts to

<ul><li></li></ul>

not

<ul>
  <li></li>
</ul>

[flying-sheep]

well, that’s correct, no?

React.createElement("ul",
    React.createElement("li")
)

should convert to

<ul>
  <li></li>
</ul>

or similar.

[foxyblocks]

It's not just JSX. I noticed that it did this for simple arrays also. I tried with a simple example:

Before:

let my_list = [
  "one",
  "two",
  "three",
  "four"
];

after:

let my_list = ["one", "two", "three", "four"];

[flying-sheep]

huh? that’s really weird, as i only replace nodes that pass all the checks (i.e. are React.createElement calls, etc.)

is what you observe inside of such an expression or will a file containing only what you showed me be transformed like that?

[foxyblocks]

Only what I showed you. It's a file containing only an array

[foxyblocks]

Adding the following to the test file will reproduce this:

it('should ignore regular javascript arrays', () => {
    let source = `
      let list = [
        "one",
        "two",
        "three",
      ]
    `
  expect(source).to.convertTo(source)
})

results in:

  1) createElement-to-JSX should ignore regular javascript arrays:

      Code “
      let list = [
        "one",
        "two",
        "three",
      ]
    ” converts wrongly
      + expected - actual


      -let list = ["one", "two", "three"];
      +      let list = [
      +        "one",
      +        "two",
      +        "three",
      +      ]
      +

      at Assertion.<anonymous> (test/chai-convert-to.js:62:41)
      at Assertion.ctx.(anonymous function) [as convertTo] (node_modules/chai/lib/chai/utils/addMethod.js:41:25)
      at Context.<anonymous> (test/index.js:72:21)

I'll try to debug further, to see if I can't get to the bottom of it.

[foxyblocks]

Further investigation shows that this is a problem with babel itself. I can reproduce it by running babel without any plugin options. Using the babel --retain-lines flag can mostly mitigate it, but not perfectly:

before

let foo = [
  'one',
  'two',
  'three'
];

after

let foo = [
'one',
'two',
'three'];

[flying-sheep]

OK, so it’s not actually a bug and i can close it, right?

[foxyblocks]

I should think so

[flying-sheep]

OK, thanks for investigating!