Different handling of EcmaScript version specific features in JS and TS code

[Franziskus1988]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't know.

Description

I have a problem with Logical OR assignments:
When I use a Logical OR assignment in a TypeScript file and compile it with Angular Cli it is converted from a ||= b to a || (a = b) up to ES2020. With ES2021 it stays unchanged.
If such a Logical OR assignment is used in a JS lib (in my case pdfjs-dist) it is converted until ES5, but from ES6/ES2015 on it stays unchanged.

ES5

ES2015

The browserlist setting seem's to have no impact.

🔬 Minimal Reproduction

Create a plain Angular project, install a lib that contains a logical or assignment like pdfjs-dist, play around with the target property in tsconfig.json.

🔥 Exception or Error

Generated TS and JS code differs in usage of EcmaScript features. We detected it, because we have used an older Chrome version (83) for testing, which suddenly failed, because the ||= was unkown.

🌍 Your Environment

Angular CLI: 13.3.5
Node: 16.14.2
Package Manager: npm 8.6.0
OS: win32 x64

Angular: 13.3.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.5
@angular-devkit/build-angular   13.3.5
@angular-devkit/core            13.3.5
@angular-devkit/schematics      13.3.5
@angular/cli                    13.3.5
@schematics/angular             13.3.5
rxjs                            7.5.5
typescript                      4.6.4

Anything else relevant?

[alan-agius4]

Javascript code is only down levelled when targeting ES5. I think while this is confusing and probably should be changed for consistence.

It's important to point out that Chrome 83 is not a supposed browser. See https://angular.io/guide/browser-support

[Franziskus1988]

@alan-agius4

Javascript code is only down levelled when targeting ES5.

Is this documented somewhere?

I think while this is confusing and probably should be changed for consistence.

Yes, I think so, because for me it's a bug that JS and TS behave differently.

It's important to point out that Chrome 83 is not a supposed browser.

I know :) Just wanted to explain, how we detected it.

[alan-agius4]

We discussed this during our yesterday's meeting and we agreed that this is inconsistent and there is no standard for library authors to ship their library in different ES versions.

Therefore, we will be downlevelling libraries based on the list of supported browsers which is configured in the browserslist configuration. The TypeScript target option itself will not effect how the libraries get downlevelled.