Skip to content

Commit

Permalink
migrate to vite and vitest from cra and jest
Browse files Browse the repository at this point in the history
  • Loading branch information
il3ven committed Jun 6, 2023
1 parent 5708153 commit 7c12e3a
Show file tree
Hide file tree
Showing 22 changed files with 1,256 additions and 4,816 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/deploy-preview.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ on:
# paths:
# - "website/**"
env:
REACT_APP_FIREBASE_PROJECT_ID: rowyio
REACT_APP_FIREBASE_PROJECT_WEB_API_KEY:
VITE_APP_FIREBASE_PROJECT_ID: rowyio
VITE_APP_FIREBASE_PROJECT_WEB_API_KEY:
"${{ secrets.FIREBASE_WEB_API_KEY_TRYROWY }}"
CI: ""
jobs:
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

# production
/build
/dist
cloud_functions/functions/lib

# firebase
Expand Down
8 changes: 4 additions & 4 deletions createDotEnv.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ const main = (
) => {
return fs.writeFileSync(
".env",
`REACT_APP_FIREBASE_PROJECT_ID = ${projectID}
REACT_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
REACT_APP_ALGOLIA_APP_ID = ${algoliaAppId}
REACT_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
`VITE_APP_FIREBASE_PROJECT_ID = ${projectID}
VITE_APP_FIREBASE_PROJECT_WEB_API_KEY = ${firebaseWebApiKey}
VITE_APP_ALGOLIA_APP_ID = ${algoliaAppId}
VITE_APP_ALGOLIA_SEARCH_API_KEY = ${algoliaSearhApiKey}`
);
};

Expand Down
2 changes: 1 addition & 1 deletion firebase.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"hosting": {
"public": "build",
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
Expand Down
21 changes: 11 additions & 10 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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`.
-->
Expand Down Expand Up @@ -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/" />
Expand All @@ -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.
Expand Down
24 changes: 15 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
"startWithEmulators": "cross-env PORT=7699 REACT_APP_FIREBASE_EMULATORS=true craco start",
"start": "vite --port 7699",
"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",
"build": "craco build",
"test": "vitest",
"build": "tsc && vite build",
"preview": "vite preview --port 7699",
"analyze": "source-map-explorer ./build/static/js/*.js",
"prepare": "husky install",
"env": "node createDotEnv",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -176,14 +177,19 @@
"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",
"prettier": "^2.6.2",
"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"
Expand Down
13 changes: 6 additions & 7 deletions src/components/CodeEditor/useMonacoCustomizations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./firestore.d.ts";
import firebaseAuthDefs from "!!raw-loader!./firebaseAuth.d.ts";
import firebaseStorageDefs from "!!raw-loader!./firebaseStorage.d.ts";
import utilsDefs from "!!raw-loader!./utils.d.ts";
import rowyUtilsDefs from "!!raw-loader!./rowy.d.ts";
import extensionsDefs from "!!raw-loader!./extensions.d.ts";
import firestoreDefs from "./firestore.d.ts?raw";
import firebaseAuthDefs from "./firebaseAuth.d.ts?raw";
import firebaseStorageDefs from "./firebaseStorage.d.ts?raw";
import utilsDefs from "./utils.d.ts?raw";
import rowyUtilsDefs from "./rowy.d.ts?raw";
import extensionsDefs from "./extensions.d.ts?raw";
import { runRoutes } from "@src/constants/runRoutes";
import { rowyRunAtom, projectScope } from "@src/atoms/projectScope";
import { getFieldProp } from "@src/components/fields";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./defaultValue.d.ts";
import defaultValueDefs from "./defaultValue.d.ts?raw";
import {
projectScope,
compatibleRowyRunVersionAtom,
Expand Down
12 changes: 6 additions & 6 deletions src/components/RichTextEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 skinDarkCss from "!!raw-loader!tinymce/skins/ui/oxide-dark/skin.min.css";
import skinCss from "tinymce/skins/ui/oxide/skin.min.css?inline";
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 contentUiCss from "!!raw-loader!tinymce/skins/ui/oxide/content.min.css";
import contentCssDark from "!!raw-loader!tinymce/skins/content/dark/content.min.css";
import contentUiCssDark from "!!raw-loader!tinymce/skins/ui/oxide-dark/content.min.css";
import contentCss from "tinymce/skins/content/default/content.min.css?inline";
import contentUiCss from "tinymce/skins/ui/oxide/content.min.css?inline";
import contentCssDark from "tinymce/skins/content/dark/content.min.css?inline";
import contentUiCssDark from "tinymce/skins/ui/oxide-dark/content.min.css?inline";

// Plugins
import "tinymce/plugins/autoresize";
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -150,10 +150,10 @@ export default function Export({
const csvData = docs.map((doc: any) =>
columns.reduce(selectedColumnsCsvReducer(doc), {})
);
const csv = json2csv(
csvData,
const parser = new Parser(
exportType === "tsv" ? { delimiter: "\t" } : undefined
);
const csv = parser.parse(csvData);
const csvBlob = new Blob([csv], {
type: `text/${exportType};charset=utf-8`,
});
Expand Down
5 changes: 3 additions & 2 deletions src/components/TableToolbar/ImportData/ImportFromCsv.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions src/components/fields/Action/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./action.d.ts";
import actionDefs from "./action.d.ts?raw";
import { RUN_ACTION_TEMPLATE, UNDO_ACTION_TEMPLATE } from "./templates";
import { ROUTES } from "@src/constants/routes";
import { ISettingsProps } from "@src/components/fields/types";
Expand Down
5 changes: 2 additions & 3 deletions src/components/fields/Connector/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./connector.d.ts";
import connectorDefs from "./connector.d.ts?raw";

import { WIKI_LINKS } from "@src/constants/externalLinks";
import { baseFunction } from "./utils";
Expand All @@ -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" */)
Expand Down
3 changes: 1 addition & 2 deletions src/components/fields/Derivative/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./derivative.d.ts";
import derivativeDefs from "./derivative.d.ts?raw";

const CodeEditor = lazy(
() =>
Expand Down
3 changes: 1 addition & 2 deletions src/components/fields/Formula/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 "!!raw-loader!./formula.d.ts";
import formulaDefs from "./formula.d.ts?raw";
import { WIKI_LINKS } from "@src/constants/externalLinks";
import CodeEditorHelper from "@src/components/CodeEditor/CodeEditorHelper";

Expand Down
6 changes: 3 additions & 3 deletions src/hooks/useDocumentTitle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 • " : ""
}${process.env.NODE_ENV.replace("development", "dev")})`);
import.meta.env.VITE_APP_FIREBASE_EMULATORS ? "Emulator • " : ""
}${import.meta.env.MODE.replace("development", "dev")})`);

/**
* Sets the document/tab title and resets when the page is changed
Expand Down
1 change: 0 additions & 1 deletion src/react-app-env.d.ts

This file was deleted.

16 changes: 9 additions & 7 deletions src/sources/ProjectSourceFirebase/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
authDomain: `${process.env.REACT_APP_FIREBASE_PROJECT_ID}.firebaseapp.com`,
databaseURL: `https://${process.env.REACT_APP_FIREBASE_PROJECT_ID}.firebaseio.com`,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: `${process.env.REACT_APP_FIREBASE_PROJECT_ID}.appspot.com`,
apiKey: import.meta.env.VITE_APP_FIREBASE_PROJECT_WEB_API_KEY,
authDomain: `${import.meta.env.VITE_APP_FIREBASE_PROJECT_ID}.firebaseapp.com`,
databaseURL: `https://${
import.meta.env.VITE_APP_FIREBASE_PROJECT_ID
}.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" ||
process.env.REACT_APP_FIREBASE_EMULATORS === "true";
import.meta.env.NODE_ENV === "test" ||
import.meta.env.VITE_APP_FIREBASE_EMULATORS === "true";

/**
* Store Firebase config here so it can be set programmatically.
Expand Down
1 change: 1 addition & 0 deletions src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
Loading

0 comments on commit 7c12e3a

Please sign in to comment.