From 48924688c75aada554674b5a2bc3c752d33d3444 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Thu, 27 Jul 2023 23:50:11 +0530 Subject: [PATCH] =?UTF-8?q?build:=20migrate=20to=20Vite=20=F0=9F=9A=80=20(?= =?UTF-8?q?#6818)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: dwelle --- .env.development | 31 +- .env.production | 16 +- .github/workflows/autorelease-excalidraw.yml | 4 +- .github/workflows/autorelease-preview.yml | 4 +- .github/workflows/lint.yml | 4 +- .github/workflows/locales-coverage.yml | 4 +- .github/workflows/sentry-production.yml | 4 +- .github/workflows/test.yml | 4 +- .gitignore | 2 + public/index.html => index.html | 24 +- package.json | 65 +- .../workbox/workbox-background-sync.prod.js | 2 - .../workbox/workbox-broadcast-update.prod.js | 2 - .../workbox-cacheable-response.prod.js | 2 - public/workbox/workbox-core.prod.js | 2 - public/workbox/workbox-expiration.prod.js | 2 - .../workbox-navigation-preload.prod.js | 2 - public/workbox/workbox-offline-ga.prod.js | 2 - public/workbox/workbox-precaching.prod.js | 2 - public/workbox/workbox-range-requests.prod.js | 2 - public/workbox/workbox-routing.prod.js | 2 - public/workbox/workbox-strategies.prod.js | 2 - public/workbox/workbox-streams.prod.js | 2 - public/workbox/workbox-sw.js | 2 - public/workbox/workbox-window.prod.es5.mjs | 2 - public/workbox/workbox-window.prod.mjs | 2 - public/workbox/workbox-window.prod.umd.js | 2 - src/analytics.ts | 2 +- src/charts.ts | 5 +- src/components/App.test.tsx | 3 +- src/components/App.tsx | 13 +- src/components/LibraryMenuBrowseButton.tsx | 2 +- src/components/PublishLibrary.tsx | 2 +- src/components/Sidebar/Sidebar.test.tsx | 3 +- src/components/Sidebar/Sidebar.tsx | 2 +- .../__snapshots__/App.test.tsx.snap | 4 +- src/element/newElement.ts | 2 +- src/element/sizeHelpers.test.ts | 18 +- src/element/textWysiwyg.test.tsx | 24 +- src/excalidraw-app/collab/Collab.tsx | 10 +- .../components/AppWelcomeScreen.tsx | 4 +- .../components/ExcalidrawPlusAppLink.tsx | 4 +- src/excalidraw-app/data/firebase.ts | 6 +- src/excalidraw-app/data/index.ts | 10 +- src/excalidraw-app/pwa.ts | 31 - src/excalidraw-app/sentry.ts | 4 +- src/global.d.ts | 10 - src/i18n.ts | 5 +- src/index.tsx | 3 +- src/packages/excalidraw/env.js | 6 +- src/packages/excalidraw/package.json | 1 + src/packages/excalidraw/publicPath.js | 2 +- src/packages/excalidraw/webpack.dev.config.js | 3 + .../excalidraw/webpack.prod.config.js | 3 + src/packages/excalidraw/yarn.lock | 5 + src/renderer/renderElement.ts | 2 +- src/scene/export.ts | 7 +- src/service-worker.ts | 147 - src/serviceWorkerRegistration.ts | 162 - src/setupTests.ts | 13 +- src/tests/MobileMenu.test.tsx | 11 +- .../__snapshots__/MobileMenu.test.tsx.snap | 4 +- src/tests/__snapshots__/charts.test.tsx.snap | 12 +- .../__snapshots__/contextmenu.test.tsx.snap | 2362 +++---- .../__snapshots__/dragCreate.test.tsx.snap | 62 +- src/tests/__snapshots__/export.test.tsx.snap | 4 +- .../linearElementEditor.test.tsx.snap | 6 +- src/tests/__snapshots__/move.test.tsx.snap | 68 +- .../multiPointCreate.test.tsx.snap | 38 +- .../regressionTests.test.tsx.snap | 5436 +++++++------- .../__snapshots__/selection.test.tsx.snap | 54 +- src/tests/appState.test.tsx | 1 + src/tests/clipboard.test.tsx | 9 +- src/tests/collab.test.tsx | 40 +- src/tests/contextmenu.test.tsx | 3 +- .../data/__snapshots__/restore.test.ts.snap | 114 +- src/tests/data/restore.test.ts | 11 +- src/tests/dragCreate.test.tsx | 3 +- src/tests/fitToContent.test.tsx | 5 +- src/tests/flip.test.tsx | 25 +- src/tests/library.test.tsx | 15 +- src/tests/linearElementEditor.test.tsx | 301 +- src/tests/move.test.tsx | 3 +- src/tests/multiPointCreate.test.tsx | 3 +- .../__snapshots__/excalidraw.test.tsx.snap | 6 +- .../packages/__snapshots__/utils.test.ts.snap | 22 +- src/tests/packages/excalidraw.test.tsx | 10 +- src/tests/packages/utils.test.ts | 30 +- src/tests/regressionTests.test.tsx | 4 +- src/tests/resize.test.tsx | 3 +- .../scene/__snapshots__/export.test.ts.snap | 10 +- src/tests/scene/export.test.ts | 2 +- src/tests/selection.test.tsx | 3 +- src/utils.ts | 4 +- src/vite-env.d.ts | 59 + tsconfig-types.json | 3 +- tsconfig.json | 6 +- vite.config.ts | 181 + vitest.config.ts | 9 + yarn.lock | 6230 ++++------------- 100 files changed, 6123 insertions(+), 9761 deletions(-) rename public/index.html => index.html (91%) delete mode 100644 public/workbox/workbox-background-sync.prod.js delete mode 100644 public/workbox/workbox-broadcast-update.prod.js delete mode 100644 public/workbox/workbox-cacheable-response.prod.js delete mode 100644 public/workbox/workbox-core.prod.js delete mode 100644 public/workbox/workbox-expiration.prod.js delete mode 100644 public/workbox/workbox-navigation-preload.prod.js delete mode 100644 public/workbox/workbox-offline-ga.prod.js delete mode 100644 public/workbox/workbox-precaching.prod.js delete mode 100644 public/workbox/workbox-range-requests.prod.js delete mode 100644 public/workbox/workbox-routing.prod.js delete mode 100644 public/workbox/workbox-strategies.prod.js delete mode 100644 public/workbox/workbox-streams.prod.js delete mode 100644 public/workbox/workbox-sw.js delete mode 100644 public/workbox/workbox-window.prod.es5.mjs delete mode 100644 public/workbox/workbox-window.prod.mjs delete mode 100644 public/workbox/workbox-window.prod.umd.js delete mode 100644 src/excalidraw-app/pwa.ts delete mode 100644 src/service-worker.ts delete mode 100644 src/serviceWorkerRegistration.ts create mode 100644 src/vite-env.d.ts create mode 100644 vite.config.ts create mode 100644 vitest.config.ts diff --git a/.env.development b/.env.development index c56b62b3..d67b137d 100644 --- a/.env.development +++ b/.env.development @@ -1,30 +1,39 @@ -REACT_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/ -REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/ +VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/ +VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/ -REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com -REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries +VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com +VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries # collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room) -REACT_APP_WS_SERVER_URL=http://localhost:3002 +VITE_APP_WS_SERVER_URL=http://localhost:3002 # set this only if using the collaboration workflow we use on excalidraw.com -REACT_APP_PORTAL_URL= +VITE_APP_PORTAL_URL= -REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}' +VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}' # put these in your .env.local, or make sure you don't commit! # must be lowercase `true` when turned on # # whether to enable Service Workers in development -REACT_APP_DEV_ENABLE_SW= +VITE_APP_DEV_ENABLE_SW= # whether to disable live reload / HMR. Usuaully what you want to do when # debugging Service Workers. -REACT_APP_DEV_DISABLE_LIVE_RELOAD= -REACT_APP_DISABLE_TRACKING=true +VITE_APP_DEV_DISABLE_LIVE_RELOAD= +VITE_APP_DISABLE_TRACKING=true FAST_REFRESH=false +# The port the run the dev server +VITE_APP_PORT=3000 + #Debug flags # To enable bounding box for text containers -REACT_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX= +VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX= + +# Set this flag to false if you want to open the overlay by default +VITE_APP_COLLAPSE_OVERLAY=true + +# Set this flag to false to disable eslint +VITE_APP_ENABLE_ESLINT=true diff --git a/.env.production b/.env.production index b86aa4bc..e3ece6df 100644 --- a/.env.production +++ b/.env.production @@ -1,15 +1,15 @@ REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/ REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/ -REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com -REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries +VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com +VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries -REACT_APP_PORTAL_URL=https://portal.excalidraw.com +VITE_APP_PORTAL_URL=https://portal.excalidraw.com # Fill to set socket server URL used for collaboration. -# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow -REACT_APP_WS_SERVER_URL= +# Meant for forks only: excalidraw.com uses custom VITE_APP_PORTAL_URL flow +VITE_APP_WS_SERVER_URL= -REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}' +VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}' -REACT_APP_PLUS_APP=https://app.excalidraw.com -REACT_APP_DISABLE_TRACKING= +VITE_APP_PLUS_APP=https://app.excalidraw.com +VITE_APP_DISABLE_TRACKING= diff --git a/.github/workflows/autorelease-excalidraw.yml b/.github/workflows/autorelease-excalidraw.yml index ad0a0a7e..4eaeb11f 100644 --- a/.github/workflows/autorelease-excalidraw.yml +++ b/.github/workflows/autorelease-excalidraw.yml @@ -12,10 +12,10 @@ jobs: - uses: actions/checkout@v2 with: fetch-depth: 2 - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Set up publish access run: | npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN} diff --git a/.github/workflows/autorelease-preview.yml b/.github/workflows/autorelease-preview.yml index 8fe7f40b..bcd50188 100644 --- a/.github/workflows/autorelease-preview.yml +++ b/.github/workflows/autorelease-preview.yml @@ -32,10 +32,10 @@ jobs: with: ref: ${{ steps.sha.outputs.result }} fetch-depth: 2 - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Set up publish access run: | npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN} diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 77d2ef4d..d42f8f63 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -9,10 +9,10 @@ jobs: steps: - uses: actions/checkout@v2 - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Install and lint run: | diff --git a/.github/workflows/locales-coverage.yml b/.github/workflows/locales-coverage.yml index 924dc9e9..822af06e 100644 --- a/.github/workflows/locales-coverage.yml +++ b/.github/workflows/locales-coverage.yml @@ -14,10 +14,10 @@ jobs: with: token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }} - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Create report file run: | diff --git a/.github/workflows/sentry-production.yml b/.github/workflows/sentry-production.yml index 6f53f91e..cea4cf63 100644 --- a/.github/workflows/sentry-production.yml +++ b/.github/workflows/sentry-production.yml @@ -10,10 +10,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Install and build run: | yarn --frozen-lockfile diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index b64ea473..5c4584e8 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -7,10 +7,10 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - name: Setup Node.js 14.x + - name: Setup Node.js 18.x uses: actions/setup-node@v2 with: - node-version: 14.x + node-version: 18.x - name: Install and test run: | yarn --frozen-lockfile diff --git a/.gitignore b/.gitignore index e637a8c0..6e430f4e 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,5 @@ src/packages/excalidraw/example/public/bundle.js src/packages/excalidraw/example/public/excalidraw-assets-dev src/packages/excalidraw/example/public/excalidraw.development.js coverage +dev-dist +html diff --git a/public/index.html b/index.html similarity index 91% rename from public/index.html rename to index.html index 5509ded8..cbdc7706 100644 --- a/public/index.html +++ b/index.html @@ -78,8 +78,7 @@ } - - <% if (process.env.NODE_ENV === "production") { %> + <% if ("%PROD%" === "true") { %> <% } %> - + - - - - <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %> + + <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%"==="true" ) { %> + <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%" !== 'true') { %>