ES6 Module Loading Object Destructuring newlines

[godd9170]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Module_loading

var { ProjectStore } = require('../stores');

Becomes

var {
    ProjectStore
} = require('../stores');

[bitwiseman]

Thanks!

Poor formatting but not breaking, right?
Is this really a JSX issue or more a general ES6 issue?

[godd9170]

No it certainly still runs just fine, I'd say it is best classed as an ES6 issue yeah.

[darlanalves]

#315 Would fix this too I think

[bitwiseman]

Partly, but var {...} = foo; is also something the beautifier doesn't really understand yet.

[darlanalves]

@bitwiseman I've tried to read the code and figure out how to implement #315, but it's way too much for a initial read.

If you point me how it's done maybe I can help :)

[bitwiseman]

We treat all braces the basically the same when talking about expand or collapse.
You might try fixing just this scenario. I'd be happy to have your help. 😄 I'll get you some info in the next day or so.

[brantwedel]

I see alot of places where people don't expect a { Literal } is expanded to

{
  Literal
}

I think any "Objects" that consist of only Literals should not be broken, this would cover beautification of imports, exports, as well as shorthand objects where the Literal name is expanded, I think in all these situations it is expected to have a single line.

Maybe a config for collapse_literals to turn this on and off.

import { Thing, AnotherThing } from "things";

var { ThingOptions } = require('../options')

var name = "a thing name";

// expanded by some specs to: Thing.setOptions({ name: name });
Thing.setOptions({ name });
Thing.setOptions({
  name: name,
  version: ThingOptions.version
});

exports { Thing };

[hugoduraes]

@brantwedel 👍

[loopmode]

I currently use a naive patch as a workaround until a proper implementation. It works fine for me so far.
primitive, pragmatic.

// in Sublime Text, Preferences -> Browse Packages, find HTML-CSS-JS Prettify/scripts/node_modules/js-beautify/js/lib/beautify.js
// find the last line of the 'beautify' function, and place the next lines just before 'return sweet_code';

// es7 decorators
sweet_code = sweet_code.replace(/@\n/g, '@'); 
sweet_code = sweet_code.replace(/\)@\s/g, ')\n@'); 
sweet_code = sweet_code.replace(/    @    /g, '    @'); 
sweet_code = sweet_code.replace(/@\s/g, '\n@'); 
// destructuring imports
sweet_code = sweet_code.replace(/(import {\n)(\t|\s*)/g, '\import {'); 
sweet_code = sweet_code.replace(/\n}\nfrom\s/g, '} from '); 

https://gist.github.com/loopmode/d091bce3b76efaf15d63

[bitwiseman]

@brantwedel - Interesting idea.

@loopmode - thanks for the workaround. As you say, primitive and pragmatic. 😄

[iksose]

@loopmode Great fix, works in atom

[skulptur]

the fix works, thanks

[bitwiseman]

This is sub-case of #511 and #382. Leaving open for reference.