build: migrate to Vite 🚀 #6818

ad1992 · 2023-07-27T10:19:24Z

Continuation of #6713

The above PR had to be reverted as the developer experience was impacted as mentioned in #6713 (comment)

Will continue to make changes in this PR for improving DX

Removing vite-plugin-eslint reduces the time from ~8-10 seconds in Mac and ~14 seconds on Windows to ~3-4 seconds.
Show TS errors runtime
Integrate vite-plugin-checker this is pretty fast as it runs in worker thread and shows the errors in browser as well which is even better

Show Eslint errors/warnings in dev using checker

Pushing the overlay behind a flag VITE_APP_COLLAPSE_OVERLAY so its optional to use
Enable eslint behind a flag VITE_APP_ENABLE_ESLINT, by default it will be true
Make port configurable - added VITE_APP_PORT
HMR at times stop working and I get 👇🏻 error - not sure its related to Vite but adding here as a note

This was some browser related bad cache and it works fine it other browsers so not related to Vite

…mpatible with import.meta syntax

atible with vite

…on WSL

dwelle · 2023-07-27T17:27:31Z

take 2 👍🚀

ad1992 · 2023-07-27T18:16:15Z

Using "@vitejs/plugin-react-swc": "^3.3.2" instead babel, no idea if it has side effects, swc plugin has some caveats (I'm not a react developer):

https://github.com/vitejs/vite-plugin-react-swc#caveats

Add react swc plugin as dev dependency and switch react plugin in the vite config file.

Sure I will look into this separately, for now we are good to ship 🚀

ad1992 · 2023-07-27T18:19:57Z

Alright merging! Thanks everyone 💜

* 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>

* 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 * 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>

Weslley Braga and others added 30 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

Add script for testing with vite ui

666880f

fix all tests related to mocking

bc2d29f

fix more test

9dbc0dc

fix more

b4e22ad

fix flip.test.tsx

88f55e8

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

vercel bot deployed to Preview – excalidraw July 27, 2023 16:10 View deployment

Enable eslint behind flag as its not working well with windows with n…

fff9528

…on WSL

vercel bot had a problem deploying to Preview – excalidraw July 27, 2023 16:27 Failure

vercel bot deployed to Preview – excalidraw-package-example July 27, 2023 16:27 View deployment

ad1992 force-pushed the aakansha-vite branch from dafb79b to fff9528 Compare July 27, 2023 16:28

vercel bot deployed to Preview – excalidraw July 27, 2023 16:29 View deployment

vercel bot deployed to Preview – excalidraw-package-example July 27, 2023 16:29 View deployment

make port configurable

d1da404

vercel bot deployed to Preview – excalidraw-package-example July 27, 2023 17:12 View deployment

vercel bot deployed to Preview – excalidraw July 27, 2023 17:12 View deployment

open the browser when server ready

10dde7a

vercel bot deployed to Preview – excalidraw July 27, 2023 17:16 View deployment

vercel bot deployed to Preview – excalidraw-package-example July 27, 2023 17:16 View deployment

dwelle approved these changes Jul 27, 2023

View reviewed changes

enable eslint by default

d5e285c

vercel bot deployed to Preview – excalidraw-package-example July 27, 2023 17:32 View deployment

vercel bot deployed to Preview – excalidraw July 27, 2023 17:33 View deployment

ad1992 merged commit 4892468 into master Jul 27, 2023
9 checks passed

ad1992 deleted the aakansha-vite branch July 27, 2023 18:20

ad1992 mentioned this pull request Aug 1, 2023

Migrate from CRA to Vite #6684

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build: migrate to Vite 🚀 #6818

build: migrate to Vite 🚀 #6818

ad1992 commented Jul 27, 2023 •

edited

dwelle commented Jul 27, 2023

ad1992 commented Jul 27, 2023

ad1992 commented Jul 27, 2023

build: migrate to Vite 🚀 #6818

build: migrate to Vite 🚀 #6818

Conversation

ad1992 commented Jul 27, 2023 • edited

dwelle commented Jul 27, 2023

ad1992 commented Jul 27, 2023

ad1992 commented Jul 27, 2023

ad1992 commented Jul 27, 2023 •

edited