working on switching to vite

unfoldingWord · Dec 11, 2023 · 7d72e11 · 7d72e11
1 parent bd4a646
commit 7d72e11
Show file tree

Hide file tree

Showing 33 changed files with 636 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ yarn test:headless
 
 - Structure of the React components in this app
 
-Application (in pages/\_app.js) contains:
+Application (in pages/\App.jsx) contains:
 
 - AuthContext context
 - StoreContext context:

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,8 +2,12 @@
   "name": "gateway-edit",
   "version": "2.3.0",
   "scripts": {
-    "dev": "bash -c \"source ./scripts/set-env.sh && next\"",
-    "build": "bash -c \"source ./scripts/set-env.sh && next build\"",
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "devx": "bash -c \"source ./scripts/set-env.sh && next\"",
+    "buildx": "bash -c \"source ./scripts/set-env.sh && next build\"",
     "start": "bash -c \"source ./scripts/set-env.sh && next start\"",
     "export": "next export",
     "postinstall": "husky install",
@@ -43,9 +47,9 @@
     "markdown-translatable": "2.0.3",
     "next": "10.2.0",
     "postcss": "^8.2.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-bootstrap": "0.32.4",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-icons": "^4.8.0",
     "regenerator-runtime": "^0.13.7",
@@ -68,6 +72,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
+    "@vitejs/plugin-react": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",
     "babel-plugin-istanbul": "^6.1.1",
@@ -91,7 +96,8 @@
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "react-icons": "^4.8.0",
-    "start-server-and-test": "^1.14.0"
+    "start-server-and-test": "^1.14.0",
+    "vite": "^5.0.0"
   },
   "nyc": {
     "report-dir": "cypress-coverage"

diff --git a/pages/index.js b/pages/index.js
@@ -1,14 +1,15 @@
 import dynamic from 'next/dynamic'
-import Layout from '@components/Layout'
-import CircularProgress from '@components/CircularProgress'
+// import Layout from '@components/Layout'
+import WorkspaceContainer from '@components/WorkspaceContainer'
+// import CircularProgress from '@components/CircularProgress'
 
-const WorkspaceContainer = dynamic(
-  () => import('@components/WorkspaceContainer'),
-  {
-    ssr: false,
-    loading: () => <CircularProgress size={180} />,
-  },
-)
+// const WorkspaceContainer = dynamic(
+//   () => import('@components/WorkspaceContainer'),
+//   {
+//     ssr: false,
+//     loading: () => <CircularProgress size={180} />,
+//   },
+// )
 
 const Home = () => (
   <Layout>

diff --git a/scripts/zulip-notification/index.js b/scripts/zulip-notification/index.js
@@ -22,7 +22,7 @@ function getEnvironment(netlifyConfig, packageJson) {
   const environment = netlifyConfig.build.environment
   const deployUrl = environment.DEPLOY_PRIME_URL
   const branchName = environment.BRANCH
-  const pullBranch = process.env.BRANCH
+  const pullBranch = import.meta.env.BRANCH
   const appName = packageJson.name
   const version = packageJson.version
   const appFullName = `${appName} v${version}`
@@ -38,8 +38,8 @@ function getEnvironment(netlifyConfig, packageJson) {
 
 async function zulipNotify(appName, branchName, content) {
   try {
-    const token = process.env.ZULIP_TOKEN
-    const username = process.env.ZULIP_USER
+    const token = import.meta.env.ZULIP_TOKEN
+    const username = import.meta.env.ZULIP_USER
 
     const data = {
       to: 'SOFTWARE - UR/github',

diff --git a/src/common/sendFeedback.js b/src/common/sendFeedback.js
@@ -17,14 +17,14 @@ export default async function sendFeedback({ name, email, message, category, ext
   }
 
   const msg = {
-    to: process.env.HELP_DESK_EMAIL,
+    to: import.meta.env.HELP_DESK_EMAIL,
     from: email,
     subject: `gatewayEdit App: ${category}`,
     text: fullMessage,
     html: fullMessage.replace(/\n/g, '<br>'),
   }
 
-  sgMail.setApiKey(process.env.HELP_DESK_TOKEN)
+  sgMail.setApiKey(import.meta.env.HELP_DESK_TOKEN)
 
   return sgMail.send(msg)
 }
diff --git a/src/components/AccountSetup.js → src/components/AccountSetup.jsx b/src/components/AccountSetup.js → src/components/AccountSetup.jsx
diff --git a/pages/_app.js → src/components/App.jsx b/pages/_app.js → src/components/App.jsx
@@ -5,11 +5,10 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import StoreContextProvider from '@context/StoreContext'
 import AuthContextProvider from '@context/AuthContext'
 import { APP_NAME } from '@common/constants'
-import AppHead from '@components/AppHead'
-import theme from '../src/theme'
+import theme from '../theme'
 import '@styles/globals.css'
 
-export default function Application({ Component, pageProps }) {
+export default function Application() {
   useEffect(() => {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side')
@@ -21,13 +20,12 @@ export default function Application({ Component, pageProps }) {
 
   return (
     <>
-      <AppHead title={APP_NAME} />
       <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
         <AuthContextProvider>
           <StoreContextProvider>
-            <Component {...pageProps} />
+            {<Component {...pageProps} />}
           </StoreContextProvider>
         </AuthContextProvider>
       </ThemeProvider>

diff --git a/src/components/AppHead.js b/src/components/AppHead.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import Head from 'next/head'
 import { string } from 'prop-types'
 
 const defaultDescription = ''

diff --git a/src/components/BibleReference.js → src/components/BibleReference.jsx b/src/components/BibleReference.js → src/components/BibleReference.jsx
diff --git a/src/components/CircularProgress.js → src/components/CircularProgress.jsx b/src/components/CircularProgress.js → src/components/CircularProgress.jsx
diff --git a/src/components/Drawer.js → src/components/Drawer.jsx b/src/components/Drawer.js → src/components/Drawer.jsx
diff --git a/src/components/ErrorPopUp.js → src/components/ErrorPopUp.jsx b/src/components/ErrorPopUp.js → src/components/ErrorPopUp.jsx
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button'
 import DraggableCard from 'translation-helps-rcl/dist/components/DraggableCard'
 import { CANCEL } from '@common/constants'
 
-export default function ErrorPopup(
+export default function ErrorPopUp(
   {
     onClose,
     title,
@@ -91,7 +91,7 @@ export default function ErrorPopup(
   )
 }
 
-ErrorPopup.defaultProps = {
+ErrorPopUp.defaultProps = {
   id: `error_popup`,
   actionButtonStr: '',
   startIcon: null,
@@ -102,7 +102,7 @@ ErrorPopup.defaultProps = {
   dimBackground: true,
 }
 
-ErrorPopup.propTypes = {
+ErrorPopUp.propTypes = {
   /** On close event handler */
   onClose: PropTypes.func,
   /** title Content */

diff --git a/src/components/FeedbackCard.js → src/components/FeedbackCard.jsx b/src/components/FeedbackCard.js → src/components/FeedbackCard.jsx
@@ -11,11 +11,11 @@ import { getBuildId } from '@utils/build'
 import { getLocalStorageItem, getUserKey } from '@hooks/useUserLocalStorage'
 import { processNetworkError } from '@utils/network'
 import { CLOSE, HTTP_GET_MAX_WAIT_TIME } from '@common/constants'
-import NetworkErrorPopup from '@components/NetworkErrorPopUp'
+import NetworkErrorPopUp from '@components/NetworkErrorPopUp'
 import PropTypes from 'prop-types'
 import useFeedbackData from '@hooks/useFeedbackData'
 
-// FeedbackCard.js renders feedback content that is placed in FeedbackPopup
+// FeedbackCard.jsx renders feedback content that is placed in FeedbackPopup
 
 /**
  * show message bar with alert
@@ -372,7 +372,7 @@ const FeedbackCard = ({
         </div>
       </div>
       { !!state.networkError &&
-        <NetworkErrorPopup
+        <NetworkErrorPopUp
           networkError={state.networkError}
           setNetworkError={actions.setNetworkError}
           closeButtonStr={CLOSE}

diff --git a/src/components/FeedbackPopup.js → src/components/FeedbackPopup.jsx b/src/components/FeedbackPopup.js → src/components/FeedbackPopup.jsx
diff --git a/src/components/Footer.js → src/components/Footer.jsx b/src/components/Footer.js → src/components/Footer.jsx
diff --git a/src/components/Header.js → src/components/Header.jsx b/src/components/Header.js → src/components/Header.jsx
diff --git a/src/components/Layout.js → src/components/Layout.jsx b/src/components/Layout.js → src/components/Layout.jsx
@@ -63,10 +63,10 @@ export default function Layout({
       let serverID_ = params.server.toUpperCase() === QA ? QA : PROD
       let server_ = (serverID_ === QA) ? QA_BASE_URL : BASE_URL
       if (params.server?.length === 0){
-        server_ = (process.env.NEXT_PUBLIC_BUILD_CONTEXT === 'production') ? BASE_URL : QA_BASE_URL
+        server_ = (import.meta.env.NEXT_PUBLIC_BUILD_CONTEXT === 'production') ? BASE_URL : QA_BASE_URL
         serverID_ = (server_ === QA_BASE_URL) ? QA : PROD
       }
-      
+
       if (server !== server_) {
         console.log(`_app.js - On init switching server to: ${serverID_}, url server param '${params.server}', old server ${server}, reloading page`)
         setServer(server_) // persist server selection in localstorage

diff --git a/src/components/NetlifyBadge.js → src/components/NetlifyBadge.jsx b/src/components/NetlifyBadge.js → src/components/NetlifyBadge.jsx
diff --git a/src/components/NetworkErrorPopUp.js → src/components/NetworkErrorPopUp.jsx b/src/components/NetworkErrorPopUp.js → src/components/NetworkErrorPopUp.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { NETWORK_ERROR, RETRY } from '@common/constants'
-import ErrorPopup from '@components/ErrorPopUp'
+import ErrorPopUp from '@components/ErrorPopUp'
 import SaveIcon from '@material-ui/icons/Save'
 
-export default function NetworkErrorPopup(
+export default function NetworkErrorPopUp(
   {
     networkError,
     setNetworkError,
@@ -21,7 +21,7 @@ export default function NetworkErrorPopup(
   const closeButtonDefault = !retryDefault // otherwise close button is default
 
   return (
-    <ErrorPopup
+    <ErrorPopUp
       title={title}
       message={networkError.errorMessage}
       dimBackground={dimBackground}
@@ -42,13 +42,13 @@ export default function NetworkErrorPopup(
   )
 }
 
-NetworkErrorPopup.defaultProps = {
+NetworkErrorPopUp.defaultProps = {
   title: NETWORK_ERROR,
   hideClose: false,
   dimBackground: true,
 }
 
-NetworkErrorPopup.propTypes = {
+NetworkErrorPopUp.propTypes = {
   /** On close event handler */
   onClose: PropTypes.func,
   /** custom title text */

diff --git a/src/components/Onboarding.js → src/components/Onboarding.jsx b/src/components/Onboarding.js → src/components/Onboarding.jsx
diff --git a/src/components/PopoverComponent.js → src/components/PopoverComponent.jsx b/src/components/PopoverComponent.js → src/components/PopoverComponent.jsx
diff --git a/src/components/ResourceCard.js → src/components/ResourceCard.jsx b/src/components/ResourceCard.js → src/components/ResourceCard.jsx
diff --git a/src/components/SubmitButton.js → src/components/SubmitButton.jsx b/src/components/SubmitButton.js → src/components/SubmitButton.jsx
diff --git a/src/components/TranslationSettings.js → src/components/TranslationSettings.jsx b/src/components/TranslationSettings.js → src/components/TranslationSettings.jsx
@@ -24,7 +24,7 @@ import {
 } from '@utils/network'
 import { useRouter } from 'next/router'
 import { AuthContext } from '@context/AuthContext'
-import NetworkErrorPopup from '@components/NetworkErrorPopUp'
+import NetworkErrorPopUp from '@components/NetworkErrorPopUp'
 import CircularProgress from './CircularProgress'
 
 const useStyles = makeStyles(theme => ({
@@ -154,7 +154,7 @@ export default function TranslationSettings({ authentication }) {
   return (
     <>
       {!!networkError && (
-        <NetworkErrorPopup
+        <NetworkErrorPopUp
           networkError={networkError}
           setNetworkError={setNetworkError}
           onActionButton={onNetworkActionButton}

diff --git a/src/components/WordAlignerDialog.js → src/components/WordAlignerDialog.jsx b/src/components/WordAlignerDialog.js → src/components/WordAlignerDialog.jsx
diff --git a/src/components/WorkspaceContainer.js → src/components/WorkspaceContainer.jsx b/src/components/WorkspaceContainer.js → src/components/WorkspaceContainer.jsx
@@ -43,7 +43,7 @@ import {
 } from '@utils/network'
 import { useRouter } from 'next/router'
 import { HTTP_CONFIG } from '@common/constants'
-import NetworkErrorPopup from '@components/NetworkErrorPopUp'
+import NetworkErrorPopUp from '@components/NetworkErrorPopUp'
 import WordAlignerDialog from '@components/WordAlignerDialog'
 import useLexicon from '@hooks/useLexicon'
 import useWindowDimensions from '@hooks/useWindowDimensions'
@@ -251,7 +251,7 @@ function WorkspaceContainer() {
         setTokenNetworkError({ ...tokenNetworkError, router }) // make sure router is set
       }
       return (
-        <NetworkErrorPopup
+        <NetworkErrorPopUp
           networkError={tokenNetworkError}
           setNetworkError={(error) => {
             setTokenNetworkError(error)
@@ -263,7 +263,7 @@ function WorkspaceContainer() {
       )
     } else if (networkError) { // for all other workspace network errors
       return (
-        <NetworkErrorPopup
+        <NetworkErrorPopUp
           networkError={networkError}
           setNetworkError={setNetworkError}
           onActionButton={onNetworkActionButton}

diff --git a/src/context/AuthContext.js → src/context/AuthContext.jsx b/src/context/AuthContext.js → src/context/AuthContext.jsx
@@ -14,15 +14,15 @@ import {
   processNetworkError,
   unAuthenticated,
 } from '@utils/network'
-import NetworkErrorPopup from '@components/NetworkErrorPopUp'
+import NetworkErrorPopUp from '@components/NetworkErrorPopUp'
 import useLocalStorage from '@hooks/useLocalStorage'
 
 export const AuthContext = createContext({})
 
 export default function AuthContextProvider(props) {
   const [authentication, setAuthentication] = useState(null)
   const [networkError, setNetworkError] = useState(null)
-  const defaultServer = (process.env.NEXT_PUBLIC_BUILD_CONTEXT === 'production') ? BASE_URL : QA_BASE_URL
+  const defaultServer = (import.meta.env.NEXT_PUBLIC_BUILD_CONTEXT === 'production') ? BASE_URL : QA_BASE_URL
   const [server, setServer] = useLocalStorage(SERVER_KEY, defaultServer)
 
   /**
@@ -130,7 +130,7 @@ export default function AuthContextProvider(props) {
         {props.children}
       </AuthenticationContextProvider>
       { !!networkError &&
-        <NetworkErrorPopup
+        <NetworkErrorPopUp
           networkError={networkError}
           setNetworkError={setNetworkError}
           closeButtonStr={CLOSE}

diff --git a/src/context/StoreContext.js → src/context/StoreContext.jsx b/src/context/StoreContext.js → src/context/StoreContext.jsx
@@ -5,7 +5,7 @@ import React, {
 } from 'react'
 import PropTypes from 'prop-types'
 import useLocalStorage from '@hooks/useLocalStorage'
-import * as useULS from '@hooks/useUserLocalStorage'
+import useULS from '@hooks/useUserLocalStorage'
 import { AuthContext } from '@context/AuthContext'
 import useSaveChangesPrompt from '@hooks/useSaveChangesPrompt'
 
@@ -63,7 +63,7 @@ export default function StoreContextProvider(props) {
    * @return {any[]}
    */
   function useUserLocalStorage(key, initialValue) {
-    return useULS.useUserLocalStorage(username, key, initialValue)
+    return useULS(username, key, initialValue)
   }
 
   const [mainScreenRef, setMainScreenRef] = useState(null)

diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './components/App.jsx'
+// import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/src/utils/build.js b/src/utils/build.js
@@ -10,7 +10,7 @@ export function getCommitHash() {
   let commitHash
 
   try {
-    commitHash = process.env.NEXT_PUBLIC_BUILD_NUMBER
+    commitHash = import.meta.env.NEXT_PUBLIC_BUILD_NUMBER
   } catch (e) {
     console.error(`getCommitHash() - could not get commit hash`, e)
   }

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// const env = loadEnv(mode, process.cwd(), '');
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  define: {
+    'process.platform': JSON.stringify(process.platform),
+  },
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@components": path.resolve(__dirname, 'src/components'),
+      "@context": path.resolve(__dirname, 'src/context'),
+      "@hooks": path.resolve(__dirname, 'src/hooks'),
+      "@styles": path.resolve(__dirname, 'src/styles'),
+      "@common": path.resolve(__dirname, 'src/common'),
+      "@utils": path.resolve(__dirname, 'src/utils')
+    }
+  }
+})