Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for ESM via esbuild #5092

Merged
merged 25 commits into from
Jul 7, 2024
Merged

Conversation

Tyriar
Copy link
Member

@Tyriar Tyriar commented Jul 5, 2024

This PR includes the esbuild-related parts from #5077

This is roughly how the dependencies work currently:

image

The big wins here are:

  • ESM support shipped in parallel via the module properly and lib/xterm.mjs (ES6 module no export Terminal #2878), vscode does not use this yet but will soon hopefully (Explore AMD to ESM migration microsoft/vscode#160416)
  • Smaller bundle size for the new core ESM module (285KB -> 253KB)
  • Much faster build times for the core lib and unit tests
    • tsc still runs at the same speed to verify the types and for project references, but it no longer blocks the demo file bundling so iteration time is better.
  • The demo now points at all the node modules, bringing it closer to what a user of xterm and its addons would do

@Tyriar Tyriar added this to the 5.6.0 milestone Jul 5, 2024
@Tyriar Tyriar self-assigned this Jul 5, 2024
@Tyriar
Copy link
Member Author

Tyriar commented Jul 7, 2024

Latest runs integration test off esbuild output 🎉

@Tyriar Tyriar marked this pull request as ready for review July 7, 2024 16:23
@Tyriar
Copy link
Member Author

Tyriar commented Jul 7, 2024

Ready to merge, this is much less risky then initially as the old tsc-based webpacked output is still shipped, just the ESM output is based on esbuild.

@Tyriar Tyriar merged commit d5921cd into xtermjs:master Jul 7, 2024
12 checks passed
@jerch
Copy link
Member

jerch commented Jul 9, 2024

@Tyriar Wow, this looks like some heavy lifting to get ESM rolling, thx for doing the nasty works! 🚀

This diagram looks important to me - should we link that under the wiki build page? Also to make sense for me - does that mean, that internally all packages are still handled by UMD, but the final packages for delivery are ESM now? Or do we ship now UMD and ESM in the final packages?

@Tyriar
Copy link
Member Author

Tyriar commented Jul 9, 2024

@jerch yeah it was a bit rough, but a lot of this felt necessary in order to bring the nice scroll bars over.

This diagram looks important to me - should we link that under the wiki build page?

Good idea, I'll clean up the diagram and stick it in contributing.md and/or the wiki.

Also to make sense for me - does that mean, that internally all packages are still handled by UMD, but the final packages for delivery are ESM now? Or do we ship now UMD and ESM in the final packages?

We ship both which is possible by using the main and module properties in the package.json. Internally all packages use the esbuild sources and webpack is not touched at all until yarn package happens which is where the big perf wins come from as we don't need to wait for webpack to bundle after a change happens.

I wanted tsc to use noEmit such that we could remove out/ and then remove -esbuild from those folders completely to simplify things, but in order to use project references ("composite": true and "references": {...}) we must emit the output. esbuild by itself doesn't verify types but instead just strips them out so we must run it.

@Tyriar
Copy link
Member Author

Tyriar commented Jul 9, 2024

Did a full rewrite of the contributing page https://github.com/xtermjs/xterm.js/wiki/Contributing and added image source to the repo in #5094

@Tyriar Tyriar modified the milestones: 5.6.0, 6.0.0 Jul 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants