Migration to Vite

.env

@@ -5,19 +5,19 @@
 EXTEND_ESLINT=true
 
 # ALGOLIA CONFIG
-REACT_APP_ALGOLIA_SEARCH_KEY_ENDPOINT=https://us-central1-em-search-test.cloudfunctions.net/getSearchKey
-REACT_APP_ALGOLIA_APPPLICATION_ID=AJCS0S8FVN
-REACT_APP_ALGOLIA_INDEX=SEARCH_EM
+VITE_ALGOLIA_SEARCH_KEY_ENDPOINT=https://us-central1-em-search-test.cloudfunctions.net/getSearchKey
+VITE_ALGOLIA_APPPLICATION_ID=AJCS0S8FVN
+VITE_ALGOLIA_INDEX=SEARCH_EM
 
 # FIREBASE CONFIG
 # Firebase API Key is safe to expose
 # See: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public
-REACT_APP_FIREBASE_API_KEY=AIzaSyB7sj38woH-oJ7hcSwpq0lB7hUteyZMxNo
-REACT_APP_FIREBASE_AUTH_DOMAIN=em-proto.firebaseapp.com
-REACT_APP_FIREBASE_DATABASE_URL=https://em-proto.firebaseio.com
-REACT_APP_FIREBASE_PROJECT_ID=em-proto
-REACT_APP_FIREBASE_STORAGE_BUCKET=gs://em-proto.appspot.com/
-REACT_APP_FIREBASE_MESSAGE_SENDER_ID=91947960488
+VITE_FIREBASE_API_KEY=AIzaSyB7sj38woH-oJ7hcSwpq0lB7hUteyZMxNo
+VITE_FIREBASE_AUTH_DOMAIN=em-proto.firebaseapp.com
+VITE_FIREBASE_DATABASE_URL=https://em-proto.firebaseio.com
+VITE_FIREBASE_PROJECT_ID=em-proto
+VITE_FIREBASE_STORAGE_BUCKET=gs://em-proto.appspot.com/
+VITE_FIREBASE_MESSAGE_SENDER_ID=91947960488
 
 # Demo mode
-# REACT_APP_DEMO=1
+# VITE_DEMO=1

.env.development

@@ -4,15 +4,15 @@
 # See: https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
 
 # FEEDBACK CONFIG
-REACT_APP_FEEDBACK_URL=https://us-central1-em-search-test.cloudfunctions.net/sendFeedbackEmail
+VITE_FEEDBACK_URL=https://us-central1-em-search-test.cloudfunctions.net/sendFeedbackEmail
 
 # WEBSOCKET
-REACT_APP_WEBSOCKET_HOST=localhost
-REACT_APP_WEBSOCKET_PORT=3001
+VITE_WEBSOCKET_HOST=localhost
+VITE_WEBSOCKET_PORT=3001
 
 # CAPACITOR
 # Local IP addresses should only be defined in .env.development.local so that they are not checked into version control.
 CAPACITOR_SERVER_URL=
 
 # AI SERVER
-REACT_APP_AI_URL=http://localhost:3001/ai
+VITE_AI_URL=http://localhost:3001/ai

.env.production

@@ -3,11 +3,11 @@
 # See: https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
 
 # FEEDBACK CONFIG
-REACT_APP_FEEDBACK_URL=https://us-central1-em-proto.cloudfunctions.net/sendFeedbackEmail
+VITE_FEEDBACK_URL=https://us-central1-em-proto.cloudfunctions.net/sendFeedbackEmail
 
 # WEBSOCKET
-REACT_APP_WEBSOCKET_HOST=em-staging-sa2jm.ondigitalocean.app
-REACT_APP_WEBSOCKET_PORT=
+VITE_WEBSOCKET_HOST=em-staging-sa2jm.ondigitalocean.app
+VITE_WEBSOCKET_PORT=
 
 # AI SERVER
-REACT_APP_AI_URL=https://em-staging-sa2jm.ondigitalocean.app/ai
+VITE_AI_URL=https://em-staging-sa2jm.ondigitalocean.app/ai

.ncurc.js

@@ -24,7 +24,6 @@ module.exports = {
     // https://github.com/jsdom/whatwg-encoding/pull/11
     'ipfs-http-client',
 
-    // jest-puppeteer requires puppeteer <v10
     'puppeteer',
 
     // Broken:  ^6.0.1 → ^7.0.5

README.md

@@ -62,7 +62,7 @@ The above scripts run in development mode by default. You can copy or sync in pr
 
 em is an offline-first app that can run on a static web server.
 
-Environment variables are set in the appropriate .env file: `.env.development` and `.env.production`. Only `.env.production` is kept in source control. Environment variables that are prepended with `REACT_APP_` will be bundled with the build and available client-side.
+Environment variables are set in the appropriate .env file: `.env.development` and `.env.production`. Only `.env.production` is kept in source control. Environment variables that are prepended with `VITE_` will be bundled with the build and available client-side.
 
 ```sh
 # build the static HTML/CSS/JS app in the /build directory

public/index.html → index.html

@@ -12,24 +12,15 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
     <!-- Favicons -->
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <!-- Fixes PWA w/o service worker bug. See https://stackoverflow.com/questions/49689208/issue-with-pwa-on-ios-113 -->
-    <!-- <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest"> -->
-    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#333333" />
-    <link href="%PUBLIC_URL%/fonts/lora.css" rel="stylesheet" />
+    <!-- <link rel="manifest" href="/site.webmanifest"> -->
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#333333" />
+    <link href="/fonts/lora.css" rel="stylesheet" />
     <meta name="msapplication-TileColor" content="#000000" />
     <meta name="theme-color" content="#000" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>em</title>
 
     <style>
@@ -49,5 +40,6 @@
       const theme = localStorage.getItem('storageCache/theme')?.toLowerCase() || 'dark'
       document.body.classList.add(theme)
     </script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -18,15 +18,16 @@
       "last 1 safari version"
     ]
   },
+  "type": "module",
   "scripts": {
     "cap:ios": "npm run cap:sync && cap open ios",
     "cap:android": "npm run cap:sync && cap open android",
     "cap:copy": "NODE_ENV=development && cap copy",
     "cap:copy:prod": "NODE_ENV=production && cap copy",
     "cap:sync": "NODE_ENV=development && cap sync",
     "cap:sync:prod": "npm run build && NODE_ENV=production cap sync",
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "start": "vite --host --port 3000",
+    "build": "vite build",
     "clean": "rm -rf ./node_modules/.cache",
     "docs": "typedoc --options typedoc.json",
     "deploy:major": "npm run lint && npm version major && npm run build && firebase deploy --only hosting",
@@ -41,9 +42,9 @@
     "lint:no-npm": "node ./scripts/no-files.js package-lock.json",
     "postinstall": "scripts/install-hooks",
     "servebuild": "npx serve -s build -l 3000",
-    "test": "react-app-rewired test --testPathIgnorePatterns=./src/e2e",
-    "test:ios": "react-app-rewired test ./src/e2e/iOS --verbose",
-    "test:puppeteer": "react-app-rewired test ./src/e2e/puppeteer",
+    "test": "vitest --project unit",
+    "test:ios": "jest ./src/e2e/iOS --verbose",
+    "test:puppeteer": "vitest --project puppeteer-e2e",
     "websocket-server": "cd server && npm run build && npm start"
   },
   "lockfile-lint": {
@@ -60,7 +61,6 @@
     "empty-hostname": false,
     "path": "yarn.lock"
   },
-  "config-overrides-path": "react-app-rewired.config.js",
   "jest": {
     "resetMocks": false
   },
@@ -69,14 +69,16 @@
     "@typescript-eslint/parser": "^7.7.0"
   },
   "dependencies": {
-    "@bit/mui-org.material-ui.swipeable-drawer": "^4.9.10",
     "@capacitor/android": "^4.6.1",
     "@capacitor/clipboard": "^4.1.0",
     "@capacitor/core": "^4.6.1",
     "@capacitor/ios": "^4.6.1",
     "@capacitor/keyboard": "^4.1.1",
     "@capacitor/status-bar": "^4.1.1",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@hocuspocus/provider": "^2.7.0",
+    "@mui/material": "^5.15.16",
     "algoliasearch": "^4.9.2",
     "axios": "^1.6.8",
     "classnames": "^2.3.1",
@@ -110,7 +112,6 @@
     "react-native-gesture-handler": "^1.10.2",
     "react-native-web": "^0.16.5",
     "react-redux": "^7.2.4",
-    "react-scripts": "^5.0.1",
     "react-signature-pad-wrapper": "^3.3.1",
     "react-split-pane": "^0.1.92",
     "react-transition-group": "^4.4.2",
@@ -143,7 +144,6 @@
     "@types/expect-puppeteer": "^4.4.5",
     "@types/html-escaper": "^3.0.0",
     "@types/jest": "^26.0.23",
-    "@types/jest-environment-puppeteer": "^4.4.1",
     "@types/jest-image-snapshot": "^5.1.0",
     "@types/lodash": "^4.14.170",
     "@types/murmurhash3js": "^3.0.2",
@@ -163,6 +163,7 @@
     "@types/yallist": "^4.0.1",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "browserstack-local": "^1.4.8",
     "chalk": "^4.1.1",
     "dotenv": "8.2.0",
@@ -183,20 +184,17 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-react-native": "^3.11.0",
     "fake-indexeddb": "^5.0.2",
+    "happy-dom": "^14.7.1",
     "it-all": "^1.0.5",
     "jest": "^27.5.1",
     "jest-environment-node": "^27.0.3",
-    "jest-environment-puppeteer-jsdom": "^4.3.1",
     "jest-extended": "^4.0.2",
     "jest-image-snapshot": "^5.2.0",
-    "jest-localstorage-mock": "^2.4.14",
-    "jest-puppeteer": "^5.0.4",
     "lockfile-lint": "^4.9.6",
     "npm-run-all": "^4.1.5",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.0.0",
-    "puppeteer": "^9.1.1",
-    "react-app-rewired": "^2.2.1",
+    "puppeteer": "^22.8.0",
     "react-dnd-test-backend": "^14.0.0",
     "react-dnd-test-utils": "^11.1.3",
     "redux-mock-store": "^1.5.4",
@@ -206,6 +204,8 @@
     "typedoc-plugin-external-module-name": "^4.0.6",
     "typedoc-plugin-rename-named-parameters": "^1.0.6",
     "typescript": "^4.9.5",
+    "vite": "^5.2.10",
+    "vitest": "^1.5.3",
     "webdriverio": "^7.7.3"
   }
 }

server/README.md

@@ -1,6 +1,6 @@
 A websocket server that synchronizes thoughts between multiple devices and users.
 
-The app will automatically connect to the server specified by the client-side env variables `REACT_APP_WEBSOCKET_HOST` and `REACT_APP_WEBSOCKET_PORT` (see [client](https://github.com/cybersemics/em/tree/staging2/server#client)).
+The app will automatically connect to the server specified by the client-side env variables `VITE_WEBSOCKET_HOST` and `VITE_WEBSOCKET_PORT` (see [client](https://github.com/cybersemics/em/tree/staging2/server#client)).
 
 # Local Development
 
@@ -35,7 +35,7 @@ Other npm scripts:
 
 ## Testing with live staging or production data
 
-Normally in local development the app connects to the local websocket server and database. To test with live staging or production data, override `REACT_APP_WEBSOCKET_HOST` in `.env.development` with the value from `.env.production` or `.env.staging` and restart localhost. It is recommended that you run the app on a different port to ensure that local storage stays sandboxed, i.e. `PORT=3012 npm start`.
+Normally in local development the app connects to the local websocket server and database. To test with live staging or production data, override `VITE_WEBSOCKET_HOST` in `.env.development` with the value from `.env.production` or `.env.staging` and restart localhost. It is recommended that you run the app on a different port to ensure that local storage stays sandboxed, i.e. `PORT=3012 npm start`.
 
 Note: `NODE_ENV` itself cannot be manually overwritten, and is set based on how the server is started:
 
@@ -67,10 +67,10 @@ services:
       npm run build
     environment_slug: node-js
     envs:
-      - key: REACT_APP_WEBSOCKET_HOST
+      - key: VITE_WEBSOCKET_HOST
         scope: RUN_AND_BUILD_TIME
         value: 0.0.0.0
-      - key: REACT_APP_WEBSOCKET_PORT
+      - key: VITE_WEBSOCKET_PORT
         scope: RUN_AND_BUILD_TIME
         value: '80'
       - key: MONGODB_CONNECTION_STRING
@@ -98,8 +98,8 @@ services:
 The client-side app needs the following envirionment variables set to connect to the websocket server. They are stored in `.env` files and embedded in the static build by react-scripts. See: https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used.
 
 ```ini
-REACT_APP_WEBSOCKET_HOST=app12345.ondigitalocean.app
-REACT_APP_WEBSOCKET_PORT=
+VITE_WEBSOCKET_HOST=app12345.ondigitalocean.app
+VITE_WEBSOCKET_PORT=
 ```
 
 ### Server

src/components/MultiGesture.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { GestureResponderEvent } from 'react-native'
+import { GestureResponderEvent, PanResponder, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import Direction from '../@types/Direction'
 import GesturePath from '../@types/GesturePath'
@@ -10,10 +10,6 @@ import themeColors from '../selectors/themeColors'
 import gestureStore from '../stores/gesture'
 import TraceGesture from './TraceGesture'
 
-// expects peer dependencies react-dom and react-native-web
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { PanResponder, View } = require('react-native')
-
 interface Point {
   x: number
   y: number

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
-import SwipeableDrawer, { SwipeableDrawerProps } from '@bit/mui-org.material-ui.swipeable-drawer'
+import SwipeableDrawer, { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer'
 import _ from 'lodash'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import dragHold from '../action-creators/dragHold'
 import dragInProgress from '../action-creators/dragInProgress'

src/data-providers/yjs/index.ts

@@ -6,8 +6,8 @@ import Share from '../../@types/Share'
 import storage from '../../util/storage'
 import { encodePermissionsDocumentName } from './documentNameEncoder'
 
-const host = process.env.REACT_APP_WEBSOCKET_HOST || 'localhost'
-const port = process.env.REACT_APP_WEBSOCKET_PORT || (host === 'localhost' ? 3001 : '')
+const host = import.meta.env.VITE_WEBSOCKET_HOST || 'localhost'
+const port = import.meta.env.VITE_WEBSOCKET_PORT || (host === 'localhost' ? 3001 : '')
 const protocol = host === 'localhost' ? 'ws' : 'wss'
 
 export const websocketUrl = `${protocol}://${host}${port ? ':' + port : ''}/hocuspocus`
@@ -59,7 +59,7 @@ export const clientIdReady = (
 })
 
 // Disable IndexedDB during tests because of TransactionInactiveError in fake-indexeddb.
-if (process.env.NODE_ENV !== 'test') {
+if (import.meta.env.MODE !== 'test') {
   // eslint-disable-next-line no-new
   new IndexeddbPersistence(encodePermissionsDocumentName(tsid), permissionsClientDoc)
 }

src/data-providers/yjs/thoughtspace.ts

@@ -1,6 +1,6 @@
 import { HocuspocusProvider, HocuspocusProviderWebsocket } from '@hocuspocus/provider'
 import { nanoid } from 'nanoid'
-import { IndexeddbPersistence } from 'y-indexeddb'
+import { IndexeddbPersistence, clearDocument } from 'y-indexeddb'
 import * as Y from 'yjs'
 import DocLogAction from '../../@types/DocLogAction'
 import Index from '../../@types/IndexType'
@@ -33,9 +33,6 @@ import {
 } from './documentNameEncoder'
 import replicationController from './replicationController'
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { clearDocument } = require('y-indexeddb') as { clearDocument: (name: string) => Promise<void> }
-
 /**********************************************************************
  * Types
  **********************************************************************/
@@ -295,7 +292,7 @@ export const init = async (options: ThoughtspaceOptions) => {
   doclog.on('subdocs', ({ added, removed, loaded }: { added: Set<Y.Doc>; removed: Set<Y.Doc>; loaded: Set<Y.Doc> }) => {
     loaded.forEach((subdoc: Y.Doc) => {
       // Disable IndexedDB during tests because of TransactionInactiveError in fake-indexeddb.
-      if (process.env.NODE_ENV !== 'test') {
+      if (import.meta.env.MODE !== 'test') {
         const persistence = new IndexeddbPersistence(subdoc.guid, subdoc)
         persistence.whenSynced
           .then(() => {
@@ -319,7 +316,7 @@ export const init = async (options: ThoughtspaceOptions) => {
   })
 
   // Disable IndexedDB during tests because of TransactionInactiveError in fake-indexeddb.
-  if (process.env.NODE_ENV !== 'test') {
+  if (import.meta.env.MODE !== 'test') {
     const doclogPersistence = new IndexeddbPersistence(encodeDocLogDocumentName(tsid), doclog)
     doclogPersistence.whenSynced
       .then(() => {
@@ -770,7 +767,7 @@ export const replicateChildren = async (
   // If the doc is cached, return as soon as the appropriate providers are synced.
   // Disable IDB during tests because of TransactionInactiveError in fake-indexeddb.
   // Disable websocket during tests because of infinite loop in sinon runAllAsync.
-  if (thoughtDocs.get(docKey) || process.env.NODE_ENV === 'test') {
+  if (thoughtDocs.get(docKey) || import.meta.env.MODE === 'test') {
     // The Doc exists, but it may not be populated yet if replication has not completed.
     // Wait for the appropriate replication to complete before accessing children.
     if (background && remote) {
@@ -986,7 +983,7 @@ export const replicateLexeme = async (
   // If the doc is cached, return as soon as the appropriate providers are synced.
   // Disable IDB during tests because of TransactionInactiveError in fake-indexeddb.
   // Disable websocket during tests because of infinite loop in sinon runAllAsync.
-  if (lexemeDocs.get(key) || process.env.NODE_ENV === 'test') {
+  if (lexemeDocs.get(key) || import.meta.env.MODE === 'test') {
     if (background) {
       await lexemeWebsocketSynced.get(key)
     } else {