ESBuild

[sidharthv96]

📑 Summary

Uses esbuild

📏 Design Decisions

ESBuild is freakishly fast.

yarn build:production used to take 31.59s to run.

yarn build:webpack still uses webpack along with esbuild to generate umd and esm builds. (9.85s)
yarn build:code only uses esbuild and emits js. (1.18s)
yarn build:new uses esbuild + tsc and emits js & d.ts. (3.23s)

develop
yarn build:production  31.59s user 1.36s system 248% cpu 13.281 total

sidv/esbuild
yarn build:webpack  9.85s user 0.98s system 161% cpu 6.701 total
yarn build:code  1.18s user 0.18s system 159% cpu 0.853 total
yarn build  11.22s user 1.13s system 178% cpu 6.928 total

npx envinfo --system

  System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 77.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh

TODO:

• Remove babel
• Serve files and run e2e with esbuild
• Remove webpack if umd build isn't needed

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

[sidharthv96]

@knsv There are changes to the build commands.

• build:code: Only builds code. Does not typecheck. (The editor will be verifying types anyway. This is the fastest)
• build:types: Only builds types using tsc. Slower than just esbuild.
• build:webpack: Uses eslint-loader within webpack to build as we were doing previously.
• build: Builds both code & types.

[sidharthv96]

@aloisklink any idea why this test is failing just in this branch? Logically it should fail in all branches as root is a body selector, which will be undefined. Wondering if it's a bug with esbuild-jest/mocking or if we should fix the test.

[aloisklink]

Wow! This is so much faster! Great work 🚀

Minor issue that the jisonPlugin is currently ignoring errors, but otherwise this looks good to me!

If esbuild produced ESM and UMD (and a http dev server), is there any point in keeping webpack?

@aloisklink any idea why this test is failing just in this branch? Logically it should fail in all branches as root is a body selector, which will be undefined. Wondering if it's a bug with esbuild-jest/mocking or if we should fix the test.

jest.mock() should mock mermaidAPI.render() (since it doesn't work in Node.JS), so the root part should never be run.

However, it looks like esbuild doesn't support mocking ESM: evanw/esbuild#412

I've got a fix in aloisklink@6aeef3d. You're welcome to copy and paste, or download the 6aeef3d1.patch and use git apply 6aeef3d1.patch. Basically, if you replace import mermaid from 'mermaid'; with const {default: mermaid} = require('./mermaid'), it looks very ugly, but it works.

[knsv]

God job Sid!