Typescript: Support fold regions for lambda without block

[xiaoxiangmoe]

Search Terms

VSCode, Language Service

Suggestion

Support fold regions for lambda without block

const fooBar$ = pageList$.pipe(
  map(pageList =>
    pageList.map(
      page =>
        page.pageConfig.find(
          config =>
            config.key.orgId === KeyOrgId.MyOrg &&
            config.key.Id === KeytId.MyKey,
        ).data ?? {},
    ),
  ),
  shareReplay(1),
)

This TypeScript code can't fold unless we change all x=>y to x=>{ return y; }

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.

Related issue

https://github.com/microsoft/vscode/issues/97415

[ahejlsberg]

Please post a complete example. Several functions/methods have no declaration so it's impossible to know what they do.

[xiaoxiangmoe]

@ahejlsberg

If we write arrow function without braces block, no fold regions:

If we refactor it with braces block, it will support fold regions:

[xiaoxiangmoe]

When we use rxjs with arrow functions, we cannot collapse most of the code.

[DanielRosenwasser]

@jessetrinity do we have any sort of heuristics where things that aren't blocks but are multi-line still get an outlining span?

[DanielRosenwasser]

Also, in this case the declarations aren't really necessary, outlining spans don't currently need semantic information.

[jessetrinity]

In most cases we collapse to the bounds defined by the open/close tokens. One example is JSX elements for which we collapse about < and >.

In the arrow functions case, we could probably just collapse the arrow function body?

[xiaoxiangmoe]

@jessetrinity Great Job!

Also, can we fold long parameters list?

For example:

const bar$ = foo$.pipe(
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  map(x => x),
  shareReplay(1)
);

It would be great if we can fold in .pipe()

[DanielRosenwasser]

I would say arrow function body provided it spans 3 lines at least.

[Kingwl]

Happy to work on this if @jessetrinity did not start the work.

[jessetrinity]

Go for it, I just added a case for arrow functions to the switch statement here:
https://github.com/microsoft/TypeScript/blob/e97003f26387402a17dfd9cf76874076f6b93053/src/services/outliningElementsCollector.ts#L165

It looked like there was more tweaking to do to to correctly fold the body when the function call is on the same line as the arrow e.g.

a => map(
    ...
)

[DanielRosenwasser]

Thanks @kingwl!