Wrong indentation

[sassanh]

I'm editing some jsx files and am using vim-javascript and vim-jsx. It was all fine till around 10 days ago something went wrong. Consider this:

    return <div
        style={{
            x: 1,
                y: 2,    //   Wrong indentation ######################
                z: 2,    //   Wrong indentation ######################
                w: 2,    //   Wrong indentation ######################
        }}>
            123
        </div>;

Look at the lines I marked. If I change double {{ with single { it works alright but obviously it doesn't compile.

[bounceme]

So why use two curlies? I don't know whether that is css or xml or js, but in js it's a syntax error

[bounceme]

oh nevermind, it's supposed to be a js object within the jsx. but that would likely be an issue for mxw/vim-jsx

[amadeus]

@bounceme so in JSX, the first { and } are used to define where you can write actual JS. The second ones are actually the object itself.

i.e.

() => {
    return <div
        defaultStringProp="some string"
        anotherStringProp={"another string"}
        aNumberProp={12}
        anArrayProp={[1, 2, 3]}
        anObject={{ key: 'val' }}>
  </div>;
}

This would be invalid JSX, and would throw an error:

() => {
    return <div aNumberProp={key: 'value'}></div>;
}

[amadeus]

Not sure exactly how it's supposed to work, but we might have to build special casing for being within a JSX region. JSX regions start whenever you have a < immediately followed by a letter.

So <a would be the start of a jsx region, and it won't end until it finds a matching </ that is followed by the starting letters from <a.

Within that syntax though, anytime you do { and } it is basically a way to say, forget the JSX syntax, I want to write JS now. So all JS indentation rules should apply at that point. Perhaps you can do some sort of special case lookup in the indent script that detects a jsBlock within a jsxRegion?

[bounceme]

The real issue here in javascript(possibly not in es6) ,there isn't any valid place to have two opening curlies which delimit an object, so parsers and whatnot get confused by the { token.

I could add the curly here https://github.com/pangloss/vim-javascript/blob/master/indent/javascript.vim#L86 but I need to make sure it doesn't conflict with regular js first

[sassanh]

Thanks for quick replies guys. As you mentioned it's jsx, the weird thing is first line has correct indent but from second line it goes wrong. vim-jsx is updated rarely (compared to develop branch of vim-javascript which I use.) So I'm pretty sure it happened after one of vim-javascript updates, as I said around 10 or 15 days ago. I just thought it'll get fixed in some new version but never happened.

Btw, generally it'd be super if vim-javascript and vim-jsx could merge together somehow as vim-jsx relies on vim-javascript a lot. But I don't know if that's possible at all.

[bounceme]

You can just add a { to this regex part [-=~!<*+,.?^%|&\[(] . this makes the indenter consider the curlies as object braces

[sassanh]

Thank you, it solved it. Is it the clean solution and is going to be in coming releases or should I just keep it for myself?

[bounceme]

should be clean, as long as things like this aren't considered blocks (or are just errors):

if (){
  { '1': 1 }
}

[bounceme]

actually not:

if (9){
    { 
        console.log(5)
    }
}

this is valid js
(edit: formatting)

[sassanh]

Yeah, then I guess I should solve this in vim-jsx. Or is there anyway you apply vim-javascript indentation only for things that are in js-blocks? this way first brace doesn't affect the indentation.

[bounceme]

Not that I know of, i'll take a look at the jsx plugin later

[sassanh]

That'll be kind of you.