Transpilation of TypeScript code to ES6 modules

[orbitlens]

Currently, TS transpilation process converts TS source files into CommonJS modules compatible with older NodeJS versions. The problem is that such structure doesn't support bundler's (e.g. WebPack, Rollup) tree shaking and deduplication mechanisms. The whole SDK package is bundled in a single huge module regardless of the code actually utilized in an application.

Please check the following screenshot for the illustration. There's a stellar-base chunk modules at the bottom and a monolith stellar-sdk module at the top (which contains full duplicate bundled versions of stellar-base, js-xdr and other dependencies). The difference is that stellar-base relies on ES6 source code that supports bundler optimizations natively. Naturally, if the project or any of its dependencies contain a stellar-base package reference, the output bundle will always contain two duplicates of stellar-base, often causing weird problems, not to mention a monstrous bundle size.

Some work has been done on this problem in this commit (kudos to @Shaptic). However, this doesn't solve the problem completely.

A straightforward solution for this problem is to transpile TS code of stellar-sdk to ES6 modules during the package deployment phase. Probably, it's possible to achieve this by setting module to ES2020 or nodenext and moduleResolution to bundler or nodenext in the tsconfig.json. This might also require an additional webpack compilation step to bundle a special separate module for NodeJS, but it looks like these settings should work just fine as-is for all NodeJS versions > 16 (currently, LTS is v20), so it should be safe to use these settings targeting both NodeJS and browser environments.

[Shaptic]

Eesh, this is bad. I will look your suggestions as well as packaging the SDK in multiple formats.

[sydneynotthecity]

Estimated the ticket for discovery first and will follow up with a ticket to implement a fix.