Creating ESM build for package @excalidraw/excalidraw

[ad1992]

WHY

We currently only support the UMD build for the package which works well for the browser as well as the node. But we also lose the benefits of tree shaking and importing specific utils which aren't possible withumd build.

One recent example is the package @excalidraw/mermaid-to-excalidraw where we wanted to import only a function convertToExcalidrawElements from the package but to do that we will need to add react, react-dom unnecessarily which leads to increase in bundle size as well as taking more bandwidth.

Hence we should support the ESM build, the UMD build will always be there for fallback.

With ESM Build we can support

1. Importing specific functions as needed without importing the whole bundle
2. Tree shaking, dead code elimination, and better code splitting as bundlers will have full control over it
3. In @excalidraw/mermaid-to-excalidraw we can start using convertToExcalidraw function so the host doesn't need to call it explicitly when using the package

HOW

There are a few changes needed in the codebase before we start supporting ESM

• [x] Code separation of excalidraw-app and package - This would make sure the package has only the package code and make it easier to create an ESM build so we don't ship unnecessary code in the package - https://github.com/excalidraw/excalidraw/pull/6987
• [ ] Decouple package dependencies for package and app - This will make sure all the dependencies needed for the package are present in its own package json - https://github.com/excalidraw/excalidraw/pull/7021
• [ ] Move the build process of excalidraw-app inside excalidraw-app folder as well - this is good to have and will help mono repo architecture faster. - https://github.com/excalidraw/excalidraw/pull/7021
• [ ] Update typescript to 5.x.x and use NodeNext as module resolution and module to support ESM syntax eg https://github.com/excalidraw/mermaid-to-excalidraw/pull/30
• [ ] Compile to JS using tsc and test

With these changes for the ESM build, we will also get closer to Monorepo architecture

[RegiByte]

This is extremely important for the future of this package. I'm willing to help however I can to make this happen. The community would appreciate it a lot!

[dwelle]

Thanks @RegiByte. The effort is underway! We'll post in this issue if there are actionable issues someone could help with.

Do you have experience with publishing ESM packages yourself?

[RegiByte]

@dwelle I have experience publishing ESM and CJS packages, for Excalidraw I don't think CJS will be needed so it's a little easier.

If I can help in any way just let me know, I'm mostly using Excalidraw with rich-text editors like ProseMirror and Lexical, they integrate nicely but the lack of ESM support causes problems with some bundlers depending on how they are configured.

I never contributed to Excalidraw directly but I'd be really happy to if I have the opportunity.

[gut4]

@ad1992 any updates on this? Looks like all required pull requests were merged

[luckyboykg]

I saw the to-do list was finished. Do you know if we have any updates on this issue?