JSX + inline JS indentation bug

[drywolf]

The following is a piece of JSX code after formatting it with tsfmt:

····return (
········<div ref="menu" style={[Style.control, style_override]}>
················<ul ref="menu" style={[Style.ul, style_override]}>
····················{menu_items}
····················</ul>
············</div>
····);

I replaced the spaces with dots so it is more clear what the result of the formatting is.
It looks like after some JS-code node that is inlined in the JSX, the formatter does not recognize that it should unindent at this point. After that, every following line will have one indent that is too much from what should be there.

PS: thanks for this awesome tool 😁

[myitcv]

@drywolf - can you confirm which version of typescript-formatter you are using?

[drywolf]

It's 1.2.0

[myitcv]

Please try v2.0.0.

And to be really sure you have a 'clean' install of v2.0.0, first npm uninstall --save-dev typescript-formatter then npm install --save-dev [email protected]

For the history on why, please see #30

[drywolf]

I updated to 2.0.0, but the formatting is still the same as from above.

[drywolf]

I did some more tests and I think the formatting issue is not related to the inlined JavaScript but just with the JSX indentation in general.

For example I tried to create an artificially wrong format like this...

····<div ref="menu" style={[Style.control, style_override]}>
····<ul ref="menu" style={[Style.ul, style_override]}>
··</ul>
············</div>

which turned into this after formatting...

····<div ref="menu" style={[Style.control, style_override]}>
····<ul ref="menu" style={[Style.ul, style_override]}>
······</ul>
······</div>

The behavior seems to be that every closing tag is indented one level deeper than its matching opening tag.

[drywolf]

Also every JSX opening tag that is not at the root level of the file will never change its indentation, as well as any javascript code that is wrapped in those tags. I had a look at the TypeScript code that does the formatting and it looks like JSX formatting is not really implemented by the typescript formatting service at all ?!

[myitcv]

@drywolf I just tried the code you supplied in your original post:

// test.tsx
export function TestFormat(): JSX.Element {
    return (
        <div ref="menu" style={[Style.control, style_override]}>
            <ul ref="menu" style={[Style.ul, style_override]}>
                {menu_items}
            </ul>
        </div>
    );
}

$ tsc --version
Version 1.9.0-dev.20160216
$ tsfmt --version
2.0.0

[drywolf]

@myitcv Thanks for testing.

After debugging the issue, I figured out that when I ran tsfmt from my IDE + npm scripts, it was using an older version (1.7.5) of TypeScript in the project's node_modules folder, rather than the globally installed TypeScript version.

Once I updated the TypeScript version in the node_modules of the project to @next, the issue was gone.

Thanks for your help.