Js-beautify: es6 destructuring

[iksose]

function takeThing({prop}) {
    console.log("inner prop", prop)
}

is being reformatted to

function takeThing({
    prop
}) {
    console.log("inner prop", prop)
}

I don't think this is intentional.

[bitwiseman]

Well, it is expected... What does {prop} mean in es6?

[bitwiseman]

Here's a link for destructuring: http://wiki.ecmascript.org/doku.php?id=harmony:destructuring

[iksose]

var object = {name: "myObj", age: "a million"}

then you pass that to a function that destructures

function takeThing({name}) {
    console.log("inner prop", name)
}

takeThing(object) will take the name property, and log "myObj"

[iksose]

http://wiki.ecmascript.org/doku.php?id=harmony:destructuring#function_parameters

Function that destructures its first argument and accepts some optional object arguments:

function f( { "name": n }, ...[ a, b, c ] )
{
}

Basically, a function parameter that takes an "inline object" should not be on new lines like

function f( {
 "name": n 
}, ...[ a, b, c ] )
{
}

[therajumandapati]

Will there be support for the new ECMAScript syntax ?

[bitwiseman]

Eventually, not scheduled yet.

[amacdougall]

I'm trying to come up with a good way of doing this right now, but it's going to be a bit of a challenge. Part of the trouble is that destructuring identifiers can occur in various surrounding contexts:

var <destructuring> = input; // or let or const

var <destructuring> = input, <destructuring> = input_2; // possibly on separate lines

var a = 1,
    <destructuring> = input;

function(<destructuring>) {
  // implementation
};

<destructuring> => returnValue; // an arrow function

(<destructuring>, <destructuring>) => returnValue; // multi-param arrow function

I might even be missing a few right now. And then the destructuring form itself can be nested, at least somewhat, like [a, {b, c}], though as far as I can tell, nothing further can be nested within an object destructuring. Still investigating.

Object destructuring forms can also have default values: function({a = 1, b = 2}) {}, where it expects an object with optional a and b keys. This really does interact with https://github.com/beautify-web/js-beautify/issues/315, because MDN gives this tricky example:

function drawES6Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  ...
}

This code comes out like this currently:

function drawES6Chart({
    size = 'big', cords = {
        x: 0,
        y: 0
    }, radius = 25
} = {}) {
    ...
}

Right now I'm looking for a way to detect that we're entering or exiting a destructuring form, and just stop adding newlines until we exit it. But since there are quite a few possible forms...

I'm thinking the best approach might be to detect when we've entered a destructuring form, as opposed to some other kind of brace-delimited block. The basic cases are assignment (via var and friends), function parameter list, and => parameter list. Only the arrow function even requires lookahead.

[bitwiseman]

Fixed.

[JoyceBabu]

@bitwiseman I still seeing this issue? Is there an option for enabling the fix?

[bitwiseman]

@JoyceBabu Please file an issue with the details.

[JoyceBabu]

@bitwiseman I found out the option name from another issue. Fixed by setting "brace_style": "collapse-preserve-inline". Thank you.

[bitwiseman]

@JoyceBabu
Glad you found it. 😄 Please use "collapse,preserve-inline".