Build mermaid using Vite #3503

sidharthv96 · 2022-09-22T10:10:46Z

📑 Summary

Uses vite to build instead of esbuild.
Solves the mermaid = mermaid.default workaround for esbuild, which was an issue for the monorepo.

Resolves #

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 Tasks

Make sure you

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

* develop: (221 commits) cleanup Fix docs Fix coverage Fix for issues in errorhandling and class diagrams after refactoring Replace GoogleAnalytics with Plausible chore(deps): bump dompurify from 2.3.10 to 2.4.0 (#3444) chore(deps): bump stylis from 4.1.1 to 4.1.2 (#3439) chore(deps-dev): bump webpack-dev-server from 4.10.1 to 4.11.0 (#3450) fix(git): support single character branch names Cleanup unused variables and some commented out code Cleanup fixing som lingering issues Remove extension Apply suggestions from code review ci(e2e): re-enable e2e tests style: fix .github/workflow/e2e styling chore: upgrade cypress to v10 fix(flowchart-v2): fix arrowMarkerAbsolute=true test(e2e): fix most arrowMarkerAbsolute tests text(e2e): give git tests consistent commit id test(e2e): widen flowchart width to within 10% ...

* develop: Revert #3475 chore: update browsers list Support EMPTYSTR in jison parser, add unit tests for git graph parser Use undefined to mean default tagging behavior feat(git): allow cherry-pick to suppress tag altogether Update src/diagrams/git/parser/gitGraph.jison fix(git): fix cherry-pick regex parsing error test(git): add basic parsing test for cherry-pick feat(git): cherry-pick keyword supports tag attribute ci(e2e-applitols): add applitools CI action Test docs:verify Cleanup docs Fixed Linting issues #3409 Clean up dead code #3409 Fixed the truncated tags issue

* sidv/vitestEsbuildOnly: Merge vitest & esbuild Merge vitest Revert "fix(test): No esm exports" fix(test): No esm exports unify Jison tranformers Fix jest fix: imports in HTML Revert "Add diagramAPI to outfile" Add `type: module` to package.json Update mermaid version Fix ports Fix mjs resolution Fix import errors fix: conflict ESM test Add local jison linting chore: cleanup chore: Remove webpack & babel dependencies feat: Remove webpack

* develop: (30 commits) Fix docs Auto stash before merge of "develop" and "origin/develop" vite -> cts add lcov chore(deps-dev): bump esbuild from 0.15.6 to 0.15.8 fix(docs): update link CI Concurrency 4 Remove build Parallel e2e Revert "unify Jison tranformers" Update yarn.lock fix(docs): `mmd` detection Hope this fails Remove `docs:build` from postbuild. Add verification log This should fail CI chore(deps-dev): bump @types/lodash from 4.14.184 to 4.14.185 Update integrations.md Add vitepress pluin Fix lint ...

* develop: chore: Add recommended extensions Fix user-journey leaking css Add "Debug Current Test File" configuration for VSCode

aloisklink · 2022-09-23T07:22:14Z

cypress/platform/bundle-test.js

@@ -1,4 +1,4 @@
-import mermaid from '../../dist/mermaid.core';
+import mermaid from '../../src/mermaid';


I think this test was originally here to check if the mermaid.core file works.

If this isn't testing it anymore, maybe we should delete it/rename/add a comment.

I have a suspicion that the current core build might be botched.

It throws some warnings

In the mono repo PR, the mindmap package fails to build stating there's no default export.

How do you think we can test if core is working as expected?

Hmmmm, as a sanity check, we could always run npm pack and see if the generated mermaid.tar.gz file works with mermaid-live-editor.

If it does work, we know the test is broken, but the build works. If it doesn't work, then we know the build is botched, and the test is maybe okay.

That's a very good test. So it is indeed botched.

This was a crazy bug.
I was specifying esm for core build, but the output was umd.
Turns out, if you only specify a single output instead of an array, vite will default to building both esm and umd. But as we were specifying core.mjs extension, the umd file was overwriting the esm file. FML.

Also, testing with live editor was a bit tricky. yarn and vite's caches were holding the old umd build and no matter whatever build configs I changed in mermaid-vite, I was getting the same error.

phew 💦

Turns out, if you only specify a single output instead of an array, vite will default to building both esm and umd. But as we were specifying core.mjs extension, the umd file was overwriting the esm file. FML.

🤦 That sounds painful. Well, at least the test caught it before we merged this.

yarn and vite's caches were holding the old umd build

Yep, that happens a lot when using yarn pack.

yarn add git+https://github.com/mermaid-js/mermaid.git#YOUR_BRANCH_OR_GIT_TAG_HERE usually works better, but unfortunately it doesn't yet support mono-repos.

aloisklink

Looks good :)

Damn, that sucks that ESBuild doesn't support UMD output, vite is quite a bit slower (although nowhere near as slow as Webpack).

For Mermaid v10, we can drop UMD/IFFE support, and go ESM only, which would allow us to go back to the faster ESBuild.

Remember to delete esbuild from package.json#dependencies if we're not using it directly:

mermaid/package.json

Line 101 in 8a48917

"esbuild": "^0.15.8",

Edit: It might also be worth changing the PR title to Build Mermaid using Vite for better release notes/CHANGELOG entries.

tsconfig.json

cypress/platform/viewer.js

Co-authored-by: Alois Klink <alois@aloisklink.com>

sidharthv96 added 16 commits September 1, 2022 23:38

Vite

904eccc

Vite

e06a758

fix jison generation

7bf877d

Merge vitest

3b30232

Merge vitest & esbuild

59f8f5f

Cleanup

5791fc9

vite Server

36ad4a8

vite

7bd7bcf

Use vite for build

aeb31fe

Fix unit test coverage

1c4eeb2

Merge branch 'develop' into sidv/viteVitest

0d0de49

* develop: chore: Add recommended extensions Fix user-journey leaking css Add "Debug Current Test File" configuration for VSCode

fix: tests

9e35bf6

sidharthv96 marked this pull request as ready for review September 23, 2022 05:18

sidharthv96 changed the title ~~WIP: Vite~~ Vite Sep 23, 2022

sidharthv96 self-assigned this Sep 23, 2022

sidharthv96 added 3 commits September 23, 2022 10:50

remove esbuild

d940658

cleanup

f40f2a0

ts conversion

8a48917

sidharthv96 requested a review from aloisklink September 23, 2022 05:28

aloisklink reviewed Sep 23, 2022

View reviewed changes

tsconfig.json Outdated Show resolved Hide resolved

cypress/platform/viewer.js Outdated Show resolved Hide resolved

sidharthv96 changed the title ~~Vite~~ Build mermaid using Vite Sep 23, 2022

sidharthv96 and others added 4 commits September 23, 2022 15:23

fix: json import

2a86ced

Co-authored-by: Alois Klink <alois@aloisklink.com>

fix: json import, js-base64

eaa1602

Co-authored-by: Alois Klink <alois@aloisklink.com>

fix: js-base64

bc0be28

Co-authored-by: Alois Klink <alois@aloisklink.com>

fix OutputOptions type

67b1e8d

sidharthv96 and others added 2 commits September 23, 2022 16:53

fix: js-base64

8c63d00

Co-authored-by: Alois Klink <alois@aloisklink.com>

fix: Core build

1e71798

knsv merged commit 1a46582 into develop Sep 23, 2022

aloisklink deleted the sidv/viteVitest branch September 23, 2022 14:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build mermaid using Vite #3503

Build mermaid using Vite #3503

sidharthv96 commented Sep 22, 2022 •

edited

Loading

aloisklink Sep 23, 2022

sidharthv96 Sep 23, 2022 •

edited

Loading

aloisklink Sep 23, 2022

sidharthv96 Sep 23, 2022

sidharthv96 Sep 23, 2022

aloisklink Sep 23, 2022

aloisklink left a comment •

edited

Loading

		@@ -1,4 +1,4 @@
		import mermaid from '../../dist/mermaid.core';
		import mermaid from '../../src/mermaid';

Build mermaid using Vite #3503

Build mermaid using Vite #3503

Conversation

sidharthv96 commented Sep 22, 2022 • edited Loading

📑 Summary

📏 Design Decisions

📋 Tasks

aloisklink Sep 23, 2022

Choose a reason for hiding this comment

sidharthv96 Sep 23, 2022 • edited Loading

Choose a reason for hiding this comment

aloisklink Sep 23, 2022

Choose a reason for hiding this comment

sidharthv96 Sep 23, 2022

Choose a reason for hiding this comment

sidharthv96 Sep 23, 2022

Choose a reason for hiding this comment

aloisklink Sep 23, 2022

Choose a reason for hiding this comment

aloisklink left a comment • edited Loading

Choose a reason for hiding this comment

sidharthv96 commented Sep 22, 2022 •

edited

Loading

sidharthv96 Sep 23, 2022 •

edited

Loading

aloisklink left a comment •

edited

Loading