question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make downleveling of code from ES2015 to ES5 optional when generating UMD bundles

See original GitHub issue

Type of Issue

[ ] Bug Report
[X] Feature Request

Description

I want to use ES2015 UMD bundles along with the ES2015 version of Angular. These libraries are loaded at runtime using SystemJS in the browser.

Currently, the generated UMD bundles are automatically transpiled to ES5. This results in errors in libraries which have classes that are extending ES2015 classes coming from other libraries that are loaded at runtime.

Feature request: Add a configuration parameter to make it optional to transpile from ES2015 to ES5.

Some details regarding my specific usecase: I am using single-spa with multiple Angular applications and am trying to share the same angular libraries between all of the applications.

Am using Angular 11 with Ivy, and wanted to use the ES2015 version of the library. Currently, when using the UMD version of the single-spa-angular library (generated with ng-packagr) with this, it throws an error, since an ES5 class in that library is trying to extend an ES2015 class from Angular.

The exact details of the error have been captured here: https://github.com/single-spa/single-spa-angular/issues/370

Additional investigation here: https://github.com/single-spa/single-spa-angular/issues/370#issuecomment-859545789

Expected Behaviour

The source code in ng-packagr relevant to this is:

  1. https://github.com/ng-packagr/ng-packagr/blob/6e22549aa32ffe43ca8a12e120fcdc4c0e89e63d/src/lib/ng-package/entry-point/write-bundles.transform.ts#L65

image

  1. https://github.com/ng-packagr/ng-packagr/blob/6e22549aa32ffe43ca8a12e120fcdc4c0e89e63d/src/lib/flatten/downlevel-plugin.ts#L25

image

This seems to be explicitly transpiling the ES2015 UMD bundle to ES5. This could be made optional.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: 11.2.4
@angular/compiler: 11.2.3
typescript: 4.0.5
rollup: 2.40.0
node: v12.22.1
npm: 7.16.0

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
alan-agius4commented, Jun 12, 2021

Drive by comment, my-packagr follows the APF specs which implies that UMDs should be in ES5 format.

Including an option that allows UMDs to contain ES2015, is not on the table for 2 main reasons. Firstly because this goes against the spec and secondary because UMD format will likely be dropped in the near future.

0reactions
github-actions[bot]commented, Jul 24, 2021

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Downlevel Iteration for ES3/ES5 in TypeScript - Marius Schulz
When targeting ES3 or ES5, the TypeScript compiler will happily generate an index-based for -loop for the above code: var text = "Booh!...
Read more >
Enabling Modern JavaScript on npm - JASON Format
Current solutions for producing paired modern & legacy bundles focus solely on “authored code” - the code we write that implements an ...
Read more >
Compiler Options - Microsoft Open Source
Compiler Options. TypeScript has a wide array of configuration options. This page is organized by theme, and within each theme the options are...
Read more >
TSConfig Reference - Docs on every TSConfig option
This technique lets you generate types ahead of time for the non-code source files. Imports then work naturally based off the source file's...
Read more >
Angular package format
Packages that use APF are compatible with the tooling offered by the ... to use ES2015 code, where async / await structures have...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found