build: Migrate to Vite 🚀 #6713

ad1992 · 2023-06-22T17:40:21Z

TODOS

Support Eslint with Vite
Push sourcemaps in production

Migrating the Tests has been a tricky part as Jest doesn't ES Modules (Its still experimental) and I am trying to move to vitest instead.
Here are the blockers

Mocking the Canvas

Canvas mock doesn't work, tried using vitest-canvas-mock which is a wrapper over jest-canvas-mock but its not working well. I opened an issue here
On further debugging I found that the error was raised from jest-canvas-mock of not mocking canvas element correctly, I opened an issue was raised from jest-canvas-mock instead and there is a PR to fix this but not merged yet.
On further research, downgrading to 2.4.0 for jest-canvas-mock helped along with resolutions field as mentioned here

Later a patch of vitest was released with locking jest-canvas-mock@2.4.0 so resolutions field isn't needed anymore

Partial Mocking

Unfortunately partial mocking isn't working in vitest when migrating jest to vite - more info in vitest-dev/vitest#3680

But fortunately for these cases - Spying + mocking the implementation has worked out.

DOM not updating after user events eg click

The DOM isn't updating after click events due to which few tests are failing. I am not sure why so debugging the same
This probably was related to mocking as well which is fixed automatically after mocking issue was fixed

Stats

Jest -> Vitest

So even though Vitest commits to be blazing fast but still its slower the Jest.
After migrating all the tests to Vite this is the result with threads true (default setting for Vitest) 👇🏻

So Vitest ~8s slower than Jest, something to be aware of, here is an open issue regarding the slowness of Vitest when compared with Jest and Vitest team have added it in roadmap of v1.x as well

PWA and Service workers

Vite has a plugin vitePWA for PWA so we don't need to have custom code for registering and unregistering service workers and more. Mostly everything can be taken care by config.

Since we have some custom stuff in https://github.com/excalidraw/excalidraw/blob/master/src/service-worker.ts which we do to optimise the cache, here are the things need to take care

Create a fonts cache with all fonts and font.css
This is working, though font.css I do see in fonts cache in local but in prod I am not seeing it.
Cache for locales and filter it from pre-cache
This has turned out to be lot tricky and I have been trying out various approaches to fix this. I have opened an issue as well in as navigateFallbackDenylist doesn't exclude the url.
And since it doesn't work with src folders I got the suggestion to try out manifestTransforms as mentioned here and this is finally working but only in local. In production still the locals get pre-cached and locales cache isn't related

All the service worker issues are now resolved - vite-pwa/vite-plugin-pwa#546 (comment)

Locales folder is now nested inside assets with rollup build
Locales cache is also created separately - however in chrome I don't see it getting updated when more langs are added but in other browser eg firefox it does and it works offline too in both so I think some caching issue with my chrome but offline behaviour is as expected so thats great
fonts.css is also now cached inside fonts cache after glob ignore.

Testing

I have tested and its working well however I would still appreciate if you can help in testing :)

Note
This PR had to be reverted post-merge as the developer experience was impacted as mentioned in #6713 (comment)

It was continued in #6818 which was finally deployed to production

…mpatible with import.meta syntax

atible with vite

vercel · 2023-06-22T17:40:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
excalidraw	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 10:22am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 10:22am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview	Jul 26, 2023 10:22am

ad1992 · 2023-07-26T10:24:26Z

Alright finally the PR is ready to merge!! 🚀
This turned out to be great collaborative effort ✨

Huge thanks to @userquin for helping with all the queries related to vite-pwa
Thanks to @wesbragagt for initial attempt of integrating Vite and @dwelle for review

This reverts commit e93bbc5.

Revert "build: Migrate to Vite 🚀 (#6713)" This reverts commit e93bbc5.

ad1992 · 2023-07-26T17:12:19Z

Reverted the PR since the Developer experience seems to be deteriorated for larger files likeApp.tsx :/
The page load seems to be slower compared to CRA and shows a blank screen as well - In mac its somewhere around ~8-10 seconds and windows around ~15 seconds.
There are couple of issues opened related to this in Vite - vitejs/vite#7608, vitejs/vite#5145.

So we will need to decouple the source code and break into smaller components post that moving to Vite will be fruitful and this might take some time and come back to Vite once we have decent page load time

userquin · 2023-07-26T17:46:19Z

@ad1992 can you restore the branch? We can use the Vite profiler to check what's happening

ad1992 · 2023-07-26T18:20:04Z

@ad1992 can you restore the branch? We can use the Vite profiler to check what's happening

Sure @userquin, I have restored the branch

userquin · 2023-07-27T09:05:06Z

@ad1992 to run the profiler I add this new script: "start-profiler": "vite dev --profile --open", run it, await excalidraw finish loading the page, then back to the terminal and press h key (for help), then press p key to stop the profiler and press q key to stop Vite dev server, a new vite-profile-0.cpuprofile file will be generated in the root folder.

Go to https://www.speedscope.app/ and upload the cpu profile using the BROWSE button.

Once loaded, select Left Heavy tab at the top left corner:

userquin · 2023-07-27T09:15:12Z

Removing eslint plugin in vite.config.ts file, why are you using eslint in dev? you can run the linter in a lint stage script, check Vite repo for example: https://github.com/vitejs/vite/blob/main/package.json#L95-L111

ad1992 · 2023-07-27T09:54:50Z

Yes we were discussing with team too and removing Eslint from dev server reduces the page load time to 3-4 seconds but the blank screen still is visible. I will remove eslint plugin from dev server and keep it only for lint stage

Thanks @userquin for sharing profiler data, will be very helpful for optimising perf / DX

ad1992 · 2023-07-27T10:23:09Z

I have created a new PR for improving DX so we can discuss further updates in #6818

cc @userquin @dwelle

userquin · 2023-07-27T11:30:47Z

Maybe you can move from sass to postcss + postcss nested plugin, sass dart takes ~700ms

You should check also UnoCSS Preset Icons, svg files to your css stylesheets no more svgr or svg in the html markup:
https://unocss.dev/presets/icons

* build: increase limit to 290 kB for prod bundle (excalidraw#6809) * build: Migrate to Vite 🚀 (excalidraw#6713) * init * add: vite dev build working * fix: href serving from public * feat: add ejs plugin * feat: migrated env files and ejs templating * chore: add types related to envs * chore: add vite-env types * feat: support vite pwa * chore: upgrade vite pwa * chore: pin node version to 16.18.1 * chore: preserve use of nodejs 14 * refactor: preserve REACT_APP as env prefix * chore: support esm environment variables * fix ts config * use VITE prefix and remove vite-plugin-env-compatible * introduce import-meta-loader for building pacakge as webpack isn't compatible with import.meta syntax * lint * remove import.meta.env in main.js * set debug flag to false * migrate to vitest and use jest-canvas-mock 2.4.0 so its comp atible with vite * integrate vitest-ui * fix most of teh test * snaps * Add script for testing with vite ui * fix all tests related to mocking * fix more test * fix more * fix flip.test.tsx * fix contentxmenu snaps * fix regression snaps * fix excalidraw.test.tsx and this makes all tests finally pass :) * use node 16 * specify node version * use node 16 in lint as well * fix mobile.test.tsx * use node 16 * add style-loader * upgrade to node 18 * fix lint package.json * support eslint with vite * fix lint * fix lint * fix ts * remove pwa/sw stuff * use env vars in EJS the vite way * fix lint * move remainig jest mock/spy to vite * don't cache locales * fix regex * add fonts cache * tweak * add custom service worker * upgrade vite and create font cache again * cache fonts.css and locales * tweak * use manifestTransforms for filtering locales * use assets js pattern for locales * add font.css to globIgnore so its pushed to fonts cache * create a separate chunk for locales with rollup * remove manifestTransforms and fix glob pattern for locales to filter from workbox pre-cache * push sourcemaps in production * add comments in config * lint * use node 18 * disable pwa in dev * fix * fix * increase limit of bundle * upgrade vite-pwa to latest * remove public/workbox so workbox assets are not precached * fon't club en.json and percentages.json with manual locales chunk to fix first load+offline mode * tweak regex * remove happy-dom as its not used * add comment * use any instead of ts-ignore * cleanup * remove jest-canvas-mock resolution as vite-canvas-mock was patched locking deps at 2.4.0 * use same theme color present in entry point --------- Co-authored-by: Weslley Braga <weslley@bambee.com> Co-authored-by: dwelle <luzar.david@gmail.com> * feat: adds support for stackblitz.com embeds (excalidraw#6813) feat: adds stackblitz.com embeds * revert: "build: Migrate to Vite 🚀" (excalidraw#6814) Revert "build: Migrate to Vite 🚀 (excalidraw#6713)" This reverts commit e93bbc5. * fix: prevent binding focus NaN value (excalidraw#6803) Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com> * chore: typo - Collab.ts (excalidraw#6812) * fix: adding to selection via shift box-select (excalidraw#6815) * build: migrate to Vite 🚀 (excalidraw#6818) * init * add: vite dev build working * fix: href serving from public * feat: add ejs plugin * feat: migrated env files and ejs templating * chore: add types related to envs * chore: add vite-env types * feat: support vite pwa * chore: upgrade vite pwa * chore: pin node version to 16.18.1 * chore: preserve use of nodejs 14 * refactor: preserve REACT_APP as env prefix * chore: support esm environment variables * fix ts config * use VITE prefix and remove vite-plugin-env-compatible * introduce import-meta-loader for building pacakge as webpack isn't compatible with import.meta syntax * lint * remove import.meta.env in main.js * set debug flag to false * migrate to vitest and use jest-canvas-mock 2.4.0 so its comp atible with vite * integrate vitest-ui * fix most of teh test * snaps * Add script for testing with vite ui * fix all tests related to mocking * fix more test * fix more * fix flip.test.tsx * fix contentxmenu snaps * fix regression snaps * fix excalidraw.test.tsx and this makes all tests finally pass :) * use node 16 * specify node version * use node 16 in lint as well * fix mobile.test.tsx * use node 16 * add style-loader * upgrade to node 18 * fix lint package.json * support eslint with vite * fix lint * fix lint * fix ts * remove pwa/sw stuff * use env vars in EJS the vite way * fix lint * move remainig jest mock/spy to vite * don't cache locales * fix regex * add fonts cache * tweak * add custom service worker * upgrade vite and create font cache again * cache fonts.css and locales * tweak * use manifestTransforms for filtering locales * use assets js pattern for locales * add font.css to globIgnore so its pushed to fonts cache * create a separate chunk for locales with rollup * remove manifestTransforms and fix glob pattern for locales to filter from workbox pre-cache * push sourcemaps in production * add comments in config * lint * use node 18 * disable pwa in dev * fix * fix * increase limit of bundle * upgrade vite-pwa to latest * remove public/workbox so workbox assets are not precached * fon't club en.json and percentages.json with manual locales chunk to fix first load+offline mode * tweak regex * remove happy-dom as its not used * add comment * use any instead of ts-ignore * cleanup * remove jest-canvas-mock resolution as vite-canvas-mock was patched locking deps at 2.4.0 * use same theme color present in entry point * remove vite-plugin-eslint as it improves DX significantly * integrate vite-plugin-checker for ts errors * add nabla/vite-plugin-eslint * use eslint from checker only * add env variable VITE_APP_COLLAPSE_OVERLAY for collapsing the checker overlay * tweak vite checker overlay badge position * Enable eslint behind flag as its not working well with windows with non WSL * make port configurable * open the browser when server ready * enable eslint by default --------- Co-authored-by: Weslley Braga <weslley@bambee.com> Co-authored-by: dwelle <luzar.david@gmail.com> * feat: render bold lines in grid (excalidraw#6779) Co-authored-by: dwelle <luzar.david@gmail.com> * build: update to node 18 in docker (excalidraw#6822) * fix: refresh sw when browser refreshed (excalidraw#6824) * fix: refresh sw when browser refreshed * dummy test * enable immediate reload * test * fix * autoupdate * don't immediate * test * testing testing * test * test * its same * revert logs * fix types --------- * feat: add support for val.town embeds (excalidraw#6821) * feat: add support for simplePDF in Web-Embeds (excalidraw#6810) * fix: forgotten REACT_APP env variables (excalidraw#6834) * fix: add self destroying service-worker.js to migrate everyone from CRA to Vite (excalidraw#6833) * fix: add self destroying service-worker.js to migrate everyone from CRA to VITE * add comment * don't add service-worker.js to app pre-cache * fix: eye-dropper not working with app offset correctly on non-1 dPR (excalidraw#6835) * chore: update required node version to 18 (excalidraw#6837) * build(deps): bump word-wrap from 1.2.3 to 1.2.5 (excalidraw#6811) Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.5. - [Release notes](https://github.com/jonschlinkert/word-wrap/releases) - [Commits](jonschlinkert/word-wrap@1.2.3...1.2.5) --- updated-dependencies: - dependency-name: word-wrap dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * test: add coverage report for PR (excalidraw#6840) * test: add coverage report for PR * gh token * fix * fix * add reporter * fix * enable v8 for coverage * no watch * test * add threshold * fix * change name so the action isn't required * change job name * rename job so it doesn't collid with test required check * remove log * build(deps): bump semver from 5.7.1 to 5.7.2 in /dev-docs (excalidraw#6757) Bumps [semver](https://github.com/npm/node-semver) from 5.7.1 to 5.7.2. - [Release notes](https://github.com/npm/node-semver/releases) - [Changelog](https://github.com/npm/node-semver/blob/v5.7.2/CHANGELOG.md) - [Commits](npm/node-semver@v5.7.1...v5.7.2) --- updated-dependencies: - dependency-name: semver dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: resizing arrow labels (excalidraw#6789) * fix arrow labels resizing - min arrow labels width based on font size - labels width and padding in % of container's width - resize labels simply multiplying by scale * remove no longer needed getContainerDims * fix arrow labels font size not updated on change font size action * fix bound arrows not updated right after resize * fix test * fix 3+ point arrow label resizing with shift * fix bound text not scaling when resizing with shift & n or s handle * fix arrow labels width not updating when moving a 2-point arrow point with shift --------- Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com> * fix webpack config * updated exclude statements --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com> Co-authored-by: Weslley Braga <weslley@bambee.com> Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Tomek Sułkowski <tomek.sulkowski@gmail.com> Co-authored-by: Max Kovalenko <mxsshere@gmail.com> Co-authored-by: Arnost Pleskot <arnostpleskot@gmail.com> Co-authored-by: Achille Lacoin <achille.lacoin@gmail.com> Co-authored-by: Benjamin André-Micolon <benjamin.andremicolon@gmail.com> Co-authored-by: Ives van Hoorne <Ives.v.h@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alex Kim <45559664+alex-kim-dev@users.noreply.github.com>

* init * add: vite dev build working * fix: href serving from public * feat: add ejs plugin * feat: migrated env files and ejs templating * chore: add types related to envs * chore: add vite-env types * feat: support vite pwa * chore: upgrade vite pwa * chore: pin node version to 16.18.1 * chore: preserve use of nodejs 14 * refactor: preserve REACT_APP as env prefix * chore: support esm environment variables * fix ts config * use VITE prefix and remove vite-plugin-env-compatible * introduce import-meta-loader for building pacakge as webpack isn't compatible with import.meta syntax * lint * remove import.meta.env in main.js * set debug flag to false * migrate to vitest and use jest-canvas-mock 2.4.0 so its comp atible with vite * integrate vitest-ui * fix most of teh test * snaps * Add script for testing with vite ui * fix all tests related to mocking * fix more test * fix more * fix flip.test.tsx * fix contentxmenu snaps * fix regression snaps * fix excalidraw.test.tsx and this makes all tests finally pass :) * use node 16 * specify node version * use node 16 in lint as well * fix mobile.test.tsx * use node 16 * add style-loader * upgrade to node 18 * fix lint package.json * support eslint with vite * fix lint * fix lint * fix ts * remove pwa/sw stuff * use env vars in EJS the vite way * fix lint * move remainig jest mock/spy to vite * don't cache locales * fix regex * add fonts cache * tweak * add custom service worker * upgrade vite and create font cache again * cache fonts.css and locales * tweak * use manifestTransforms for filtering locales * use assets js pattern for locales * add font.css to globIgnore so its pushed to fonts cache * create a separate chunk for locales with rollup * remove manifestTransforms and fix glob pattern for locales to filter from workbox pre-cache * push sourcemaps in production * add comments in config * lint * use node 18 * disable pwa in dev * fix * fix * increase limit of bundle * upgrade vite-pwa to latest * remove public/workbox so workbox assets are not precached * fon't club en.json and percentages.json with manual locales chunk to fix first load+offline mode * tweak regex * remove happy-dom as its not used * add comment * use any instead of ts-ignore * cleanup * remove jest-canvas-mock resolution as vite-canvas-mock was patched locking deps at 2.4.0 * use same theme color present in entry point --------- Co-authored-by: Weslley Braga <weslley@bambee.com> Co-authored-by: dwelle <luzar.david@gmail.com>

Revert "build: Migrate to Vite 🚀 (excalidraw#6713)" This reverts commit e93bbc5.

Weslley Braga and others added 24 commits April 9, 2023 20:56

init

3c19128

add: vite dev build working

6f7cfe5

fix: href serving from public

dca0306

feat: add ejs plugin

dbe3123

feat: migrated env files and ejs templating

b7558ff

chore: add types related to envs

1320a21

chore: add vite-env types

da8a52b

feat: support vite pwa

a7f1e98

chore: upgrade vite pwa

1a0c288

chore: pin node version to 16.18.1

a7a593d

chore: preserve use of nodejs 14

0aae517

refactor: preserve REACT_APP as env prefix

8ffae42

chore: support esm environment variables

709692a

Merge remote-tracking branch 'origin/master' into use-vite

0a41133

fix ts config

5c5760a

Merge remote-tracking branch 'origin/master' into use-vite

beecdda

use VITE prefix and remove vite-plugin-env-compatible

316203a

introduce import-meta-loader for building pacakge as webpack isn't co…

2436bf6

…mpatible with import.meta syntax

lint

6aad614

remove import.meta.env in main.js

09a9176

set debug flag to false

fdb86e2

migrate to vitest and use jest-canvas-mock 2.4.0 so its comp

6c516c2

atible with vite

integrate vitest-ui

0c8d402

fix most of teh test

16d47f1

snaps

f80199f

vercel bot deployed to Preview – excalidraw June 22, 2023 17:46 View deployment

vercel bot had a problem deploying to Preview – excalidraw-package-example June 22, 2023 17:46 Failure

ad1992 mentioned this pull request Jun 27, 2023

Partial Mocking with importActual hanging the tests vitest-dev/vitest#3680

Closed

6 tasks

Add script for testing with vite ui

666880f

vercel bot deployed to Preview – excalidraw July 26, 2023 08:36 View deployment

use same theme color present in entry point

a9dcbbc

vercel bot deployed to Preview – excalidraw July 26, 2023 10:09 View deployment

vercel bot deployed to Preview – excalidraw-package-example July 26, 2023 10:09 View deployment

ad1992 merged commit e93bbc5 into master Jul 26, 2023
8 checks passed

ad1992 deleted the aakansha-vite branch July 26, 2023 10:25

ad1992 added a commit that referenced this pull request Jul 26, 2023

Revert "build: Migrate to Vite 🚀 (#6713)"

9f40621

This reverts commit e93bbc5.

ad1992 mentioned this pull request Jul 26, 2023

revert: "build: Migrate to Vite 🚀" #6814

Merged

ad1992 added a commit that referenced this pull request Jul 26, 2023

revert: "build: Migrate to Vite 🚀" (#6814)

8104068

Revert "build: Migrate to Vite 🚀 (#6713)" This reverts commit e93bbc5.

ad1992 restored the aakansha-vite branch July 26, 2023 18:16

ad1992 mentioned this pull request Jul 27, 2023

build: migrate to Vite 🚀 #6818

Merged

7 tasks

ad1992 mentioned this pull request Jul 31, 2023

build: migrate from CRA to Vite 🎉 #6441

Closed

4 tasks

codingmickey mentioned this pull request Jul 31, 2023

Migrate from CRA to Vite #6684

Closed

ad1992 mentioned this pull request Aug 9, 2023

Install fail: Self-hosting docker build fail #6839

Open

userquin mentioned this pull request Aug 11, 2023

docs(cli): include --profile option vitejs/vite#14079

Merged

9 tasks

This was referenced Nov 15, 2023

feat/v0.16.1/env dynamic in docker container alswl/excalidraw#10

Closed

feat/v0.16.1/add basic http backend alswl/excalidraw#12

Closed

alswl pushed a commit to alswl/excalidraw that referenced this pull request Nov 15, 2023

revert: "build: Migrate to Vite 🚀" (excalidraw#6814)

2d2bdb3

Revert "build: Migrate to Vite 🚀 (excalidraw#6713)" This reverts commit e93bbc5.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build: Migrate to Vite 🚀 #6713

build: Migrate to Vite 🚀 #6713

ad1992 commented Jun 22, 2023 •

edited

vercel bot commented Jun 22, 2023 •

edited

ad1992 commented Jul 26, 2023

ad1992 commented Jul 26, 2023

userquin commented Jul 26, 2023

ad1992 commented Jul 26, 2023

userquin commented Jul 27, 2023 •

edited

userquin commented Jul 27, 2023 •

edited

ad1992 commented Jul 27, 2023 •

edited

ad1992 commented Jul 27, 2023

userquin commented Jul 27, 2023 •

edited

build: Migrate to Vite 🚀 #6713

build: Migrate to Vite 🚀 #6713

Conversation

ad1992 commented Jun 22, 2023 • edited

Mocking the Canvas

Partial Mocking

DOM not updating after user events eg click

Stats

Jest -> Vitest

PWA and Service workers

Testing

vercel bot commented Jun 22, 2023 • edited

ad1992 commented Jul 26, 2023

ad1992 commented Jul 26, 2023

userquin commented Jul 26, 2023

ad1992 commented Jul 26, 2023

userquin commented Jul 27, 2023 • edited

userquin commented Jul 27, 2023 • edited

ad1992 commented Jul 27, 2023 • edited

ad1992 commented Jul 27, 2023

userquin commented Jul 27, 2023 • edited

ad1992 commented Jun 22, 2023 •

edited

vercel bot commented Jun 22, 2023 •

edited

userquin commented Jul 27, 2023 •

edited

userquin commented Jul 27, 2023 •

edited

ad1992 commented Jul 27, 2023 •

edited

userquin commented Jul 27, 2023 •

edited