JSX attributes support?

[felixhao28]

Hi. Is it possible to change quotes on JSX attributes?

From

 <input type="text"
            onChange={this.change}
            value={word} />

To

 <input type='text'
            onChange={this.change}
            value={word} />

[twolfson]

What's the current behavior? Do we error out or skip over JSX attributes?

[felixhao28]

Skipping it

[twolfson]

What version of esformatter are you using?

[felixhao28]

"esformatter": "^0.9.3", "esformatter-quotes": "^1.0.3",

[twolfson]

Hmm, that should be using espree so we should be getting JSX attributes. Are the other plugins you are using handling JSX properly?

[felixhao28]

esformatter-jsx seems to handle the block fine. Here is my config:

{
  "jsx": {
    "formatJSX": true,
    "attrsOnSameLineAsTag": false,
    "maxAttrsOnTag": 3,
    "firstAttributeOnSameLine": true,
    "alignWithFirstAttribute": true,
    "spaceInJSXExpressionContainers": "",
    "htmlOptions": {
      "brace_style": "collapse-preserve-inline",
      "indent_char": " ",
      "indent_size": 2,
      "max_preserve_newlines": 2,
      "preserve_newlines": true
    }
  },

  "plugins": [
    "esformatter-quotes",
    "esformatter-literal-notation",
    "esformatter-semicolon-first",
    "esformatter-spaced-lined-comment",
    "esformatter-jsx"
  ],

  "quotes": {
    "type": "single",
    "avoidEscape": true
  }
}

[felixhao28]

And your plugin works if I remove "esformatter-jsx" from plugin list. I wonder if the two plugins can work together. I love them equally.

[millermedeiros]

maybe related to https://github.com/millermedeiros/esformatter-quotes/issues/14 and https://github.com/millermedeiros/esformatter/issues/415

[twolfson]

As a heads up, I am afk for today and tomorrow so I don't be able to look until later On May 31, 2016 4:07 AM, "Miller Medeiros" notifications@github.com wrote:

maybe related to #14 https://github.com/millermedeiros/esformatter-quotes/issues/14 and millermedeiros/esformatter#415 https://github.com/millermedeiros/esformatter/issues/415

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/millermedeiros/esformatter-quotes/issues/15#issuecomment-222632728, or mute the thread https://github.com/notifications/unsubscribe/AA3FWNJ40u87CwQvbRb_0ZYEwMxxiAQ4ks5qG_o4gaJpZM4IpmaR .

[twolfson]

I created a gist to reproduce the issue. Moving to tokenAfter didn't alter the result (esformatter-jsx uses stringBefore). I'm digging around to triage what the issue is now; it looks like we see JSXIdentifier as a single token but nothing about its attributes.

[twolfson]

Gist: https://gist.github.com/twolfson/00b1fa09f71f93632ae2737346f4a2ae

[twolfson]

Alright, I can't seem to find the source of the issue and unfortunately I don't have time to keep digging. It looks like the token doesn't have any info for JSX (verified via console.log) and I can't seem to find any relevant documentation in espree =/

[millermedeiros]

@twolfson thanks a lot for the gist - saved me some time trying to reproduce the bug.

the problem here is that esformatter-jsx uses stringBefore to replace the JSX elements with a comment and it uses srtringAfter to restore the JSX elements and format them.. this is probably because of the old esformatter versions that used a parser that wasn't compatible with JSX.

the only way to fix this is to change the way esformatter-jsx works (by not using the comment replacement hack), or changing this plugin to also use stringAfter, or changing the way esformatter handles plugins (https://github.com/millermedeiros/esformatter/issues/415#issuecomment-198093408)

[millermedeiros]

one thing is that some style guides would actually want the behavior of the JSX attribute quotes to be different from the literal strings, eg:

// want single quote for regular string
var foo = 'bar';
// and double quotes for JSX attributes
var dolor = <Ipsum amet="maecennas" sit={foo} />;