Typescript: Feature Request: Collapsible chained methods.

[ChocolateLoverRaj]

Search Terms

Collapsible
Chained

I was told to file a feature request upstream

This was originally an issue on the vscode github.

Suggestion

Chained methods should be collapsible, just like objects and arrays that span multiple lines.

Use Cases

Why This Is a Helpful Feature

When a lot of chained methods are written in a file, it can be really annoying because currently they aren't chainable. For example, with a library that I'm making which is heavily based on chained methods, they can take up a lot of space. In Visual Studio 2019, I _can_ collapse chained methods, but in VSCode, I can't.

My Many Chained Methods

new Scene()
    .setBackgroundColor("skyBlue")
    .add(0, 5, new Rectangle(0, 250, 600, 350)
        .fill("yellow")
    )
    .add(0, 5, new Group(-600, 0)
        .fill("red")
        .add(new Rectangle(100, 100, 300, 200))
        .add(new Rectangle(400, 200, 100, 100))
        .add(wheel(400, 300))
        .add(wheel(200, 300))
        .animate(0, 5, new Animation({
            x: -600
        }, {
            x: 600
        }))
    ))

Examples

Builtin Classes like Map and Set.

Expanded.

var m = new Map()
    .set("apple", "red")
    .set("banana", "yellow")
    .set("grapes", "purple")

Collapsed should be something like this.

> var m = new Map()...
  )

Promises

Expanded

fsPromises.unlink("somePath")
    .then(() => {
        //Do something
    })
    .catch(err => {
        //Handle error
    })

Collapsed should be something like this.

> fsPromises.unlink("somePath")...
  )

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [x] This feature would agree with the rest of TypeScript's Design Goals.

[DanielRosenwasser]

Thoughts @jessetrinity? I looked through existing issues, and while there are a lot of these, it doesn't look like anyone has requested the chaining behavior. Also wonder what other languages do here.

[jessetrinity]

It seems about as reasonable as the outlining for call expressions that was added recently. I'm not aware of C# doing this in Visual Studio though. I'm looking at some chained calls in one of our projects and don't see it there anyway. Of course, we don't have it for .ts/.js.

@ChocolateLoverRaj would you be able to provide the example that does this in VS?

[ChocolateLoverRaj]

@jessetrinity I'm not sure what you mean about C#. Just to clarify, both of the examples are in JavaScript. I'm pretty sure that both of the examples are foldable in visual studio 2019.

[jessetrinity]

@ChocolateLoverRaj VSCode and VS _should_ have the same collapsible regions since the feature is powered by TypeScript. There might be a few places where the editor add some addition functionality, but AFAIK VS does not do anything like that for .ts files.

The collapsible regions you in this example are a consequence of #39109. The outlines are coming from the multiline call expression, not from the call chaining, and they show up in VS and VSCode. The second example with no multiline call expressions does not produce outlining spans in VS or VSCode:

I was only referring to C# as an example of another place where VS might be doing this.

[ChocolateLoverRaj]

@jessetrinity I see how the second example has the same effect on Vscode and Vs. I saw the top image you sent, and I see how there is a - icon where () spam multiple lines. Is this the same for vscode too? I don't remember being able to collapse any part of the top example is vscode.

[jessetrinity]

@ChocolateLoverRaj I think this is a 4.0 feature so you would see it in VSCode if you had the nightly extension. Now that I think about it it would be really surprising if you saw this in VS... I'm curious now what version of TS you were using in VS.

[ChocolateLoverRaj]

So how do I update my typescript to be able to collapse parts of the code like the first image you sent? I don't have VS installed anymore because I switched to Vscode.

Also, would it still be possible to add the feature that can collapse all chained methods?

[jessetrinity]

@ChocolateLoverRaj for VSCode follow the instructions here.

[jessetrinity]

To the original issue: I think it seems reasonable. I am interested to know if others would like to see this.

[ChocolateLoverRaj]

I think this is a 4.0 feature so you would see it in VSCode if you had the nightly extension.

@jessetrinity You said that the feature is in typescript 4.0. If I just wait for that version to be a regular release, around when will that update be? I don't know how the features and versioning works for typescript. Do new versions get released in a certain time interval, or do they get released when there are big changes?

[DanielRosenwasser]

We release iteration plans to give an idea of when to expect new features. New releases come out around every 3 months. Our current iteration plan for 4.0 has a stable release planned for August 18th. We also have pre-releases like the beta or RC that you can try in the meantime!

[ChocolateLoverRaj]

To the original issue: I think it seems reasonable. I am interested to know if others would like to see this.

@jessetrinity So how will we know if others will like to see this? So far only three people (@jessetrinity, @DanielRosenwasser, @jessetrinity) have talked about this issue.