Convert sequence of independent variables to an object

[qpwo]

Is this request related to a problem? Please describe.

I'm always frustrated when I'm converting global-variable-based code to functionalish code and I have to manually pack global variables into an object. Sometimes a function's internal variable will shadow the global, so I can't just replace-all foo to obj.foo.

Describe the solution you'd like

I'd like to select them and convert to an object and update all references correctly.

// input:

// Select the following three lines and "Abracadabra: convert variables to object"
const dogs = []
const cats = []
let preferred = ""
function addDog() {
    dogs.push("Dog")
    preferred = "dog"
}
function addCats() {
    cats.push("Cat")
    preferred = "cat"
}
function logFavFruit() {
    const preferred = "banana"
    console.log("My favorite fruit is " + preferred)
}

// output:

const data = {
    dogs: [],
    cats: [],
    preferred1: "",
}
function addDog() {
    data.dogs.push("Dog")
    data.preferred = "dog"
}
function addCats() {
    data.cats.push("Cat")
    data.preferred = "cat"
}
function logFavFruit() {
    const preferred = "banana"
    console.log("My favorite fruit is " + preferred)
}

[nicoespeon]

Interesting. I don't have a strong feeling on this one so far.

I'll leave this one open though, so other people can chime in and add their thoughts. If that's something you'd like over other refactorings, please tell me 😄

[qpwo]

How hard do you think it would be to convert function arguments to/from (destructured) objects as well? Relates to #341

[nicoespeon]

@qpwo great question.

For the refactoring presented here, most of the things are local to the file, so it shouldn't be too hard to retrieve the bindings of the variables and convert them.

I'm also thinking about exported variables. If one of the selected variables is exported (at the declaration or later), we need to detect that to either prevent the refactoring (could be the first iteration) or handle it.

Now re-ordering function arguments (#341) and changing them have more or less the same difficulty: we need to update code across the project. Again, a first iteration could make it work for non-exported functions only. But I suspect that will quickly limit the interest.

Current refactorings work within the scope of a single file. Or extracting things to other files.
The next milestone for Abracadabra is definitely to resolve dependencies so refactoring can be made on exported stuff. I didn't figure it out yet, but on it with #345 (same issue) 🤔

[qpwo]

Thanks for all your work on this project Nicolas

[qpwo]

Re:

How hard do you think it would be to convert function arguments to/from (destructured) objects as well? Relates to #341

Just occured to me a simpler way of phrasing this , and a more useful and general and simpler feature would be

Destructure/restructure object

// Destructured:
const {a, b, c} = o
const a2 = a * 2
const total = a + b + c

// "Restructured:"
const a2 = o.a * 2
const total = o.a + o.b + o.c

Maybe that should be a separate issue though

[qpwo]

Forgot to put an example with a function:

// destructured
function Card({x, y, color}: {x: number, y: number, color: string) {
     return <p style={{left: x, top: y, backgroundColor: color}}>{color}</p>
}
// restructured
function Card(props: {x: number, y: number, color: string) {
     return <p style={{left: props.x, top: props.y, backgroundColor: props.color}}>{props.color}</p>
}