migrate to vite and vitest from cra and jest

.github/workflows/deploy-preview.yml

@@ -6,8 +6,8 @@ on:
     # paths:
     # - "website/**"
 env:
-  REACT_APP_FIREBASE_PROJECT_ID: rowyio
+  VITE_APP_FIREBASE_PROJECT_ID: rowyio
-  REACT_APP_FIREBASE_PROJECT_WEB_API_KEY:
+  VITE_APP_FIREBASE_PROJECT_WEB_API_KEY:
     "${{ secrets.FIREBASE_WEB_API_KEY_TRYROWY }}"
   CI: ""
 jobs:

.gitignore

@@ -7,6 +7,7 @@
 
 # production
 /build
+/dist
 cloud_functions/functions/lib
 
 # firebase

createDotEnv.js

@@ -8,10 +8,10 @@ const main = (
 ) => {
   return fs.writeFileSync(
     ".env",
-    `REACT_APP_FIREBASE_PROJECT_ID = ${projectID}
+    `VITE_APP_FIREBASE_PROJECT_ID = ${projectID}
-REACT_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
+VITE_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
-REACT_APP_ALGOLIA_APP_ID = ${algoliaAppId}
+VITE_APP_ALGOLIA_APP_ID = ${algoliaAppId}
-REACT_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
+VITE_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
   );
 };
 

firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "build",
+    "public": "dist",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {

index.html

@@ -15,30 +15,30 @@
     <link
       rel="apple-touch-icon"
       sizes="180x180"
-      href="%PUBLIC_URL%/favicon/apple-touch-icon.png"
+      href="/favicon/apple-touch-icon.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="%PUBLIC_URL%/favicon/favicon-32x32.png"
+      href="/favicon/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="%PUBLIC_URL%/favicon/favicon-16x16.png"
+      href="/favicon/favicon-16x16.png"
     />
     <link
       rel="icon"
       type="image/svg+xml"
-      href="%PUBLIC_URL%/favicon/icon.svg"
+      href="/favicon/icon.svg"
       id="favicon-svg"
     />
-    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="manifest" href="/site.webmanifest" />
     <link
       rel="mask-icon"
-      href="%PUBLIC_URL%/favicon/safari-pinned-tab.svg"
+      href="/favicon/safari-pinned-tab.svg"
       color="#4200FF"
     />
     <meta name="msapplication-TileColor" content="#4200FF" />
@@ -47,13 +47,13 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       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
+      Unlike "/favicon.ico" or "favicon.ico", "/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`.
     -->
@@ -87,7 +87,7 @@
       property="og:description"
       content="Build on the Google Cloud Platform in minutes. Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to third-party apps. Rowy is open source!"
     />
-    <meta property="og:image" content="%PUBLIC_URL%/static/meta.png" />
+    <meta property="og:image" content="/static/meta.png" />
 
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://rowy.io/" />
@@ -96,11 +96,12 @@
       property="twitter:description"
       content="Build on the Google Cloud Platform in minutes. Manage Firestore data in a spreadsheet-like UI, write Cloud Functions effortlessly in the browser, and connect to third-party apps. Rowy is open source!"
     />
-    <meta property="twitter:image" content="%PUBLIC_URL%/static/meta.png" />
+    <meta property="twitter:image" content="/static/meta.png" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@json2csv/plainjs": "^7.0.1",
     "@mdi/js": "^6.6.96",
     "@monaco-editor/react": "^4.4.4",
     "@mui/icons-material": "^5.10.16",
@@ -33,7 +34,6 @@
     "firebaseui": "^6.0.1",
     "jotai": "^1.8.4",
     "json-stable-stringify-without-jsonify": "^1.0.1",
-    "json2csv": "^5.0.7",
     "jszip": "^3.10.0",
     "lodash-es": "^4.17.21",
     "match-sorter": "^6.3.1",
@@ -62,7 +62,6 @@
     "react-markdown": "^8.0.3",
     "react-router-dom": "6.3.0",
     "react-router-hash-link": "^2.4.3",
-    "react-scripts": "^5.0.1",
     "react-usestateref": "^1.0.8",
     "react-virtual": "^2.10.4",
     "remark-gfm": "^3.0.1",
@@ -74,17 +73,18 @@
     "typescript": "^4.9.3",
     "use-algolia": "^1.5.3",
     "use-async-memo": "^1.2.4",
-    "use-debounce": "^8.0.0",
+    "use-debounce": "^9.0.4",
     "use-memo-value": "^1.0.1",
     "web-vitals": "^2.1.4",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "scripts": {
-    "start": "cross-env PORT=7699 craco start",
+    "start": "vite --port 7699",
-    "startWithEmulators": "cross-env PORT=7699 REACT_APP_FIREBASE_EMULATORS=true craco start",
+    "startWithEmulators": "VITE_APP_FIREBASE_EMULATORS=true vite --port 7699",
     "emulators": "firebase emulators:start --only firestore,auth --import ./emulators/ --export-on-exit",
-    "test": "craco test --env ./src/test/custom-jest-env.js --verbose --detectOpenHandles",
+    "test": "vitest",
-    "build": "craco build",
+    "build": "tsc && vite build",
+    "preview": "vite preview --port 7699",
     "analyze": "source-map-explorer ./build/static/js/*.js",
     "prepare": "husky install",
     "env": "node createDotEnv",
@@ -154,7 +154,6 @@
     "@types/dompurify": "^2.3.3",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.4.1",
-    "@types/json2csv": "^5.0.3",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^17.0.23",
     "@types/react": "^18.0.25",
@@ -167,6 +166,8 @@
     "@types/seedrandom": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "craco-alias": "^3.0.1",
     "craco-swc": "^0.5.1",
     "cross-env": "^7.0.3",
@@ -176,6 +177,7 @@
     "eslint-plugin-local-rules": "^1.1.0",
     "eslint-plugin-no-relative-import-paths": "^1.2.0",
     "eslint-plugin-tsdoc": "^0.2.16",
+    "happy-dom": "^9.20.3",
     "husky": ">=7.0.4",
     "lint-staged": ">=12.3.7",
     "monaco-editor": "^0.33.0",
@@ -183,7 +185,11 @@
     "raw-loader": "^4.0.2",
     "source-map-explorer": "^2.5.2",
     "ts-jest": "^28.0.2",
-    "typedoc": "^0.23.21"
+    "typedoc": "^0.23.21",
+    "vite": "^4.3.9",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.31.4"
   },
   "resolutions": {
     "@types/react": "^18"

src/components/CodeEditor/useMonacoCustomizations.ts

@@ -12,13 +12,12 @@ import type { languages } from "monaco-editor/esm/vs/editor/editor.api";
 import { useTheme } from "@mui/material";
 import type { SystemStyleObject, Theme } from "@mui/system";
 
-/* eslint-disable import/no-webpack-loader-syntax */
+import firestoreDefs from "./firestore.d.ts?raw";
-import firestoreDefs from "!!raw-loader!./firestore.d.ts";
+import firebaseAuthDefs from "./firebaseAuth.d.ts?raw";
-import firebaseAuthDefs from "!!raw-loader!./firebaseAuth.d.ts";
+import firebaseStorageDefs from "./firebaseStorage.d.ts?raw";
-import firebaseStorageDefs from "!!raw-loader!./firebaseStorage.d.ts";
+import utilsDefs from "./utils.d.ts?raw";
-import utilsDefs from "!!raw-loader!./utils.d.ts";
+import rowyUtilsDefs from "./rowy.d.ts?raw";
-import rowyUtilsDefs from "!!raw-loader!./rowy.d.ts";
+import extensionsDefs from "./extensions.d.ts?raw";
-import extensionsDefs from "!!raw-loader!./extensions.d.ts";
 import { runRoutes } from "@src/constants/runRoutes";
 import { rowyRunAtom, projectScope } from "@src/atoms/projectScope";
 import { getFieldProp } from "@src/components/fields";

src/components/ColumnModals/ColumnConfigModal/DefaultValueInput.tsx

@@ -11,8 +11,7 @@ import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
 import { FieldType } from "@src/constants/fields";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 
-/* eslint-disable import/no-webpack-loader-syntax */
+import defaultValueDefs from "./defaultValue.d.ts?raw";
-import defaultValueDefs from "!!raw-loader!./defaultValue.d.ts";
 import {
   projectScope,
   compatibleRowyRunVersionAtom,

src/components/RichTextEditor.tsx

@@ -11,14 +11,14 @@ import "tinymce/themes/silver";
 import "tinymce/icons/default";
 // Editor styles
 /* eslint import/no-webpack-loader-syntax: off */
-import skinCss from "!!raw-loader!tinymce/skins/ui/oxide/skin.min.css";
+import skinCss from "tinymce/skins/ui/oxide/skin.min.css?inline";
-import skinDarkCss from "!!raw-loader!tinymce/skins/ui/oxide-dark/skin.min.css";
+import skinDarkCss from "tinymce/skins/ui/oxide-dark/skin.min.css?inline";
 // Content styles, including inline UI like fake cursors
 /* eslint import/no-webpack-loader-syntax: off */
-import contentCss from "!!raw-loader!tinymce/skins/content/default/content.min.css";
+import contentCss from "tinymce/skins/content/default/content.min.css?inline";
-import contentUiCss from "!!raw-loader!tinymce/skins/ui/oxide/content.min.css";
+import contentUiCss from "tinymce/skins/ui/oxide/content.min.css?inline";
-import contentCssDark from "!!raw-loader!tinymce/skins/content/dark/content.min.css";
+import contentCssDark from "tinymce/skins/content/dark/content.min.css?inline";
-import contentUiCssDark from "!!raw-loader!tinymce/skins/ui/oxide-dark/content.min.css";
+import contentUiCssDark from "tinymce/skins/ui/oxide-dark/content.min.css?inline";
 
 // Plugins
 import "tinymce/plugins/autoresize";

src/components/TableModals/ExportModal/ModalContentsExport.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useAtom } from "jotai";
-import { parse as json2csv } from "json2csv";
+import { Parser } from "@json2csv/plainjs";
 import { saveAs } from "file-saver";
 import { useSnackbar } from "notistack";
 import { getDocs } from "firebase/firestore";
@@ -150,10 +150,10 @@ export default function Export({
         const csvData = docs.map((doc: any) =>
           columns.reduce(selectedColumnsCsvReducer(doc), {})
         );
-        const csv = json2csv(
+        const parser = new Parser(
-          csvData,
           exportType === "tsv" ? { delimiter: "\t" } : undefined
         );
+        const csv = parser.parse(csvData);
         const csvBlob = new Blob([csv], {
           type: `text/${exportType};charset=utf-8`,
         });

src/components/TableToolbar/ImportData/ImportFromCsv.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useAtom, useSetAtom } from "jotai";
 import { parse } from "csv-parse/browser/esm";
-import { parse as parseJSON } from "json2csv";
+import { Parser, ParserOptions } from "@json2csv/plainjs";
 import { useDropzone } from "react-dropzone";
 import { useDebouncedCallback } from "use-debounce";
 import { useSnackbar } from "notistack";
@@ -78,7 +78,8 @@ function convertJSONToCSV(rawData: string): string | false {
   };
 
   try {
-    const csv = parseJSON(rawDataJSONified, opts);
+    const parser = new Parser(opts as ParserOptions);
+    const csv = parser.parse(rawDataJSONified);
     return csv;
   } catch (err) {
     return false;

src/components/fields/Action/Settings.tsx

@@ -42,8 +42,7 @@ import {
 import { tableScope, tableColumnsOrderedAtom } from "@src/atoms/tableScope";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 
-/* eslint-disable import/no-webpack-loader-syntax */
+import actionDefs from "./action.d.ts?raw";
-import actionDefs from "!!raw-loader!./action.d.ts";
 import { RUN_ACTION_TEMPLATE, UNDO_ACTION_TEMPLATE } from "./templates";
 import { ROUTES } from "@src/constants/routes";
 import { ISettingsProps } from "@src/components/fields/types";

src/components/fields/Connector/Settings.tsx

@@ -14,8 +14,7 @@ import {
 import FieldSkeleton from "@src/components/SideDrawer/FieldSkeleton";
 import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
-/* eslint-disable import/no-webpack-loader-syntax */
+import connectorDefs from "./connector.d.ts?raw";
-import connectorDefs from "!!raw-loader!./connector.d.ts";
 
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 import { baseFunction } from "./utils";
@@ -26,7 +25,7 @@ import {
   rowyRunModalAtom,
 } from "@src/atoms/projectScope";
 
-//import typeDefs from "!!raw-loader!./types.d.ts";
+//import typeDefs from "./types.d.ts?raw";
 const CodeEditor = lazy(
   () =>
     import("@src/components/CodeEditor" /* webpackChunkName: "CodeEditor" */)

src/components/fields/Derivative/Settings.tsx

@@ -19,8 +19,7 @@ import { FieldType } from "@src/constants/fields";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 
 import { getFieldProp } from "@src/components/fields";
-/* eslint-disable import/no-webpack-loader-syntax */
+import derivativeDefs from "./derivative.d.ts?raw";
-import derivativeDefs from "!!raw-loader!./derivative.d.ts";
 
 const CodeEditor = lazy(
   () =>

src/components/fields/Formula/Settings.tsx

@@ -21,8 +21,7 @@ import { defaultFn, listenerFieldTypes, outputFieldTypes } from "./util";
 import PreviewTable from "./PreviewTable";
 import { getFieldProp } from "..";
 
-/* eslint-disable import/no-webpack-loader-syntax */
+import formulaDefs from "./formula.d.ts?raw";
-import formulaDefs from "!!raw-loader!./formula.d.ts";
 import { WIKI_LINKS } from "@src/constants/externalLinks";
 import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";
 

src/hooks/useDocumentTitle.ts

@@ -2,11 +2,11 @@ import { useEffect } from "react";
 
 const DOCUMENT_TITLE_BASE =
   "Rowy" +
-  (process.env.NODE_ENV === "production"
+  (import.meta.env.MODE === "production"
     ? ""
     : ` (${
-        process.env.REACT_APP_FIREBASE_EMULATORS ? "Emulator • " : ""
+        import.meta.env.VITE_APP_FIREBASE_EMULATORS ? "Emulator • " : ""
-      }${process.env.NODE_ENV.replace("development", "dev")})`);
+      }${import.meta.env.MODE.replace("development", "dev")})`);
 
 /**
  * Sets the document/tab title and resets when the page is changed

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

src/sources/ProjectSourceFirebase/init.ts

@@ -10,17 +10,19 @@ import { getStorage, connectStorageEmulator } from "firebase/storage";
 import { getFunctions } from "firebase/functions";
 
 export const envConfig = {
-  apiKey: process.env.REACT_APP_FIREBASE_PROJECT_WEB_API_KEY,
+  apiKey: import.meta.env.VITE_APP_FIREBASE_PROJECT_WEB_API_KEY,
-  authDomain: `${process.env.REACT_APP_FIREBASE_PROJECT_ID}.firebaseapp.com`,
+  authDomain: `${import.meta.env.VITE_APP_FIREBASE_PROJECT_ID}.firebaseapp.com`,
-  databaseURL: `https://${process.env.REACT_APP_FIREBASE_PROJECT_ID}.firebaseio.com`,
+  databaseURL: `https://${
-  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+    import.meta.env.VITE_APP_FIREBASE_PROJECT_ID
-  storageBucket: `${process.env.REACT_APP_FIREBASE_PROJECT_ID}.appspot.com`,
+  }.firebaseio.com`,
+  projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
+  storageBucket: `${import.meta.env.VITE_APP_FIREBASE_PROJECT_ID}.appspot.com`,
 };
 
 // Connect emulators based on env vars
 const envConnectEmulators =
-  process.env.NODE_ENV === "test" ||
+  import.meta.env.NODE_ENV === "test" ||
-  process.env.REACT_APP_FIREBASE_EMULATORS === "true";
+  import.meta.env.VITE_APP_FIREBASE_EMULATORS === "true";
 
 /**
  * Store Firebase config here so it can be set programmatically.

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.json

@@ -3,9 +3,9 @@
   "compilerOptions": {
     "target": "es2021",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
     "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,

vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import viteTsconfigPaths from "vite-tsconfig-paths";
+import svgrPlugin from "vite-plugin-svgr";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  resolve: {
+    // Explicitly setting mainFields to default value. For some reason, Vitest isn't
+    // respecting the 'module' field in package.json without specifying it explicitly
+    mainFields: ["module", "jsnext:main", "jsnext"],
+  },
+  plugins: [
+    react({
+      babel: {
+        plugins: [
+          "jotai/babel/plugin-react-refresh",
+          "jotai/babel/plugin-debug-label",
+        ],
+      },
+    }),
+    // To enable import '@src/' type of imports
+    viteTsconfigPaths(),
+    // To enable import of SVG as React component
+    svgrPlugin(),
+  ],
+  test: {
+    globals: true,
+    environment: "happy-dom",
+    setupFiles: "src/test/setupTests.ts",
+    deps: {
+      // According to vitest, clsx exports ES Module code in a CommonJS package.
+      // This fixes it.
+      inline: ["clsx"],
+    },
+  },
+});