Migration to Vite.

mglaman · Apr 13, 2024 · a5554a1 · a5554a1
1 parent 5dce944
commit a5554a1
Show file tree

Hide file tree

Showing 52 changed files with 2,397 additions and 7,803 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -38,15 +38,15 @@ jobs:
       - install-composer
   build_frontend:
     docker:
-      - image: cimg/node:16.16
+      - image: cimg/node:18.20.2
     working_directory: ~/repo
     steps:
       - checkout
       - install-yarn
       - run: yarn run frontend-build
   build_extension:
     docker:
-      - image: cimg/node:16.16
+      - image: cimg/node:18.20.2
     working_directory: ~/repo
     steps:
       - checkout

diff --git a/.ddev/config.yaml b/.ddev/config.yaml
@@ -16,7 +16,7 @@ composer_version: "2"
 web_environment:
   - LAGOON_PROJECT=contribkanban
   - LAGOON_ENVIRONMENT=master
-nodejs_version: "16"
+nodejs_version: "18"
 hooks:
   post-start:
     - exec: yarn install
@@ -26,8 +26,8 @@ web_extra_daemons:
     directory: /var/www/html
 web_extra_exposed_ports:
   - name: react-app
-    container_port: 4000
-    http_port: 9090
+    container_port: 9443
+    http_port: 9442
     https_port: 9443
 
 

diff --git a/extension/package.json b/extension/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.9.4",
     "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.9.1",

diff --git a/frontend/public/index.html → frontend/index.html b/frontend/public/index.html → frontend/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="ContribKanban.com - turning Drupal.org issue queues into kanban boards to better Drupalkind"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@@ -18,13 +18,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.
+      Notice the use of  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`.
     -->
@@ -34,6 +34,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <script src="https://cdn.usefathom.com/script.js" data-site="ZARWNCHR" defer></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,23 +2,25 @@
   "name": "@contribkanban/frontend",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "qs": "^6.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -42,7 +44,15 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.2",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint-plugin-prettier": "^3.1.2",
-    "prettier": "2.0.3"
+    "jsdom": "^24.0.0",
+    "prettier": "2.0.3",
+    "vite": "^5.2.8",
+    "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^1.5.0"
   }
 }
diff --git a/frontend/setupTest.js b/frontend/setupTest.js
@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);
diff --git a/frontend/src/App.js → frontend/src/App.jsx b/frontend/src/App.js → frontend/src/App.jsx
diff --git a/frontend/src/__tests__/App.test.js → frontend/src/__tests__/App.test.jsx b/frontend/src/__tests__/App.test.js → frontend/src/__tests__/App.test.jsx
@@ -1,13 +1,16 @@
-import React from "react";
 import { render } from "@testing-library/react";
+import React from "react";
 import { MemoryRouter } from "react-router-dom";
+import { vi } from 'vitest';
 import App from "../App";
 
 function mockReactRouterDom() {
-  const original = require.requireActual("react-router-dom");
+  const original = vi.importActual("react-router-dom");
   return {
     ...original,
-    useLocation: jest.fn().mockReturnValue({
+    MemoryRouter: ({ children }) => <div>{children}</div>,
+    Route: ({ children }) => <div>{children}</div>,
+    useLocation: vi.fn().mockReturnValue({
       pathname: "/",
       search: "",
       hash: "",
@@ -17,7 +20,7 @@ function mockReactRouterDom() {
   };
 }
 
-jest.mock("react-router-dom", () => mockReactRouterDom());
+vi.mock("react-router-dom", async () => mockReactRouterDom());
 
 test("renders without crashing", () => {
   const { getByText } = render(

diff --git a/frontend/src/__tests__/Login.test.js → frontend/src/__tests__/Login.test.jsx b/frontend/src/__tests__/Login.test.js → frontend/src/__tests__/Login.test.jsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
 import {
   render,
-  waitForElementToBeRemoved,
   wait,
+  waitForElementToBeRemoved,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
 import App from "../App";
 
 describe("login form", () => {
@@ -22,7 +22,7 @@ describe("login form", () => {
     userEvent.click(submitButton);
 
     try {
-      await waitForElementToBeRemoved(() => getByText("Sign In"));
+      await waitForElementToBeRemoved(() => getByText("Sign In"), { timeout: 5000 });
     } catch (err) {
       debug();
       throw err;

diff --git a/frontend/src/__tests__/Register.test.js → frontend/src/__tests__/Register.test.jsx b/frontend/src/__tests__/Register.test.js → frontend/src/__tests__/Register.test.jsx
@@ -1,12 +1,12 @@
-import React from "react";
-import { createMemoryHistory as createHistory } from "history";
-import { MemoryRouter, Router } from "react-router-dom";
 import {
   render,
-  waitForElementToBeRemoved,
   wait,
+  waitForElementToBeRemoved,
 } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { createMemoryHistory as createHistory } from "history";
+import React from "react";
+import { MemoryRouter, Router } from "react-router-dom";
 import App from "../App";
 
 const createRandomEmail = () => {

diff --git a/frontend/src/api/index.js → frontend/src/api/index.jsx b/frontend/src/api/index.js → frontend/src/api/index.jsx
diff --git a/frontend/src/components/AppBar.js → frontend/src/components/AppBar.jsx b/frontend/src/components/AppBar.js → frontend/src/components/AppBar.jsx
diff --git a/frontend/src/components/Board/Board.js → frontend/src/components/Board/Board.jsx b/frontend/src/components/Board/Board.js → frontend/src/components/Board/Board.jsx
diff --git a/frontend/src/components/Board/Card.js → frontend/src/components/Board/Card.jsx b/frontend/src/components/Board/Card.js → frontend/src/components/Board/Card.jsx
diff --git a/frontend/src/components/Board/List.js → frontend/src/components/Board/List.jsx b/frontend/src/components/Board/List.js → frontend/src/components/Board/List.jsx
diff --git a/frontend/src/components/Board/NodeBoard.js → frontend/src/components/Board/NodeBoard.jsx b/frontend/src/components/Board/NodeBoard.js → frontend/src/components/Board/NodeBoard.jsx
diff --git a/...c/components/Board/__tests__/Card.test.js → .../components/Board/__tests__/Card.test.jsx b/...c/components/Board/__tests__/Card.test.js → .../components/Board/__tests__/Card.test.jsx
@@ -1,7 +1,7 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-
+import React from "react";
+import { vi } from 'vitest';
 import Card from "../Card";
 
 const mockedIssue = {
@@ -15,7 +15,7 @@ const mockedIssue = {
 
 describe("test the card component", () => {
   it("click the card opens the issue", async () => {
-    const mockOpen = jest.fn();
+    const mockOpen = vi.fn();
     global.open = mockOpen;
     const { container } = render(<Card data={mockedIssue} />);
     userEvent.click(container.firstChild);

diff --git a/frontend/src/components/BoardListing.js → frontend/src/components/BoardListing.jsx b/frontend/src/components/BoardListing.js → frontend/src/components/BoardListing.jsx
diff --git a/...ts/Dialogs/CreateIssueCollectionDialog.js → ...s/Dialogs/CreateIssueCollectionDialog.jsx b/...ts/Dialogs/CreateIssueCollectionDialog.js → ...s/Dialogs/CreateIssueCollectionDialog.jsx
diff --git a/...components/Dialogs/CreateProjectDialog.js → ...omponents/Dialogs/CreateProjectDialog.jsx b/...components/Dialogs/CreateProjectDialog.js → ...omponents/Dialogs/CreateProjectDialog.jsx
diff --git a/.../components/Dialogs/CreateSprintDialog.js → ...components/Dialogs/CreateSprintDialog.jsx b/.../components/Dialogs/CreateSprintDialog.js → ...components/Dialogs/CreateSprintDialog.jsx
diff --git a/frontend/src/components/Gravatar.js → frontend/src/components/Gravatar.jsx b/frontend/src/components/Gravatar.js → frontend/src/components/Gravatar.jsx
diff --git a/frontend/src/components/Menus/AppBarMenu.js → frontend/src/components/Menus/AppBarMenu.jsx b/frontend/src/components/Menus/AppBarMenu.js → frontend/src/components/Menus/AppBarMenu.jsx
diff --git a/frontend/src/components/Menus/BoardMenu.js → frontend/src/components/Menus/BoardMenu.jsx b/frontend/src/components/Menus/BoardMenu.js → frontend/src/components/Menus/BoardMenu.jsx
diff --git a/frontend/src/components/Menus/ProjectMenu.js → ...tend/src/components/Menus/ProjectMenu.jsx b/frontend/src/components/Menus/ProjectMenu.js → ...tend/src/components/Menus/ProjectMenu.jsx
diff --git a/frontend/src/components/Menus/UserMenu.js → frontend/src/components/Menus/UserMenu.jsx b/frontend/src/components/Menus/UserMenu.js → frontend/src/components/Menus/UserMenu.jsx
diff --git a/frontend/src/components/Toolbar.js → frontend/src/components/Toolbar.jsx b/frontend/src/components/Toolbar.js → frontend/src/components/Toolbar.jsx
diff --git a/frontend/src/context/appBar.js → frontend/src/context/appBar.jsx b/frontend/src/context/appBar.js → frontend/src/context/appBar.jsx
diff --git a/frontend/src/context/auth.js → frontend/src/context/auth.jsx b/frontend/src/context/auth.js → frontend/src/context/auth.jsx
diff --git a/frontend/src/hooks/appBarTitle.js → frontend/src/hooks/appBarTitle.jsx b/frontend/src/hooks/appBarTitle.js → frontend/src/hooks/appBarTitle.jsx
diff --git a/frontend/src/hooks/fetchIssue.js → frontend/src/hooks/fetchIssue.jsx b/frontend/src/hooks/fetchIssue.js → frontend/src/hooks/fetchIssue.jsx
diff --git a/frontend/src/hooks/pageTitle.js → frontend/src/hooks/pageTitle.jsx b/frontend/src/hooks/pageTitle.js → frontend/src/hooks/pageTitle.jsx
diff --git a/frontend/src/hooks/windowHeight.js → frontend/src/hooks/windowHeight.jsx b/frontend/src/hooks/windowHeight.js → frontend/src/hooks/windowHeight.jsx
diff --git a/frontend/src/index.js → frontend/src/index.jsx b/frontend/src/index.js → frontend/src/index.jsx
@@ -1,12 +1,11 @@
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 import React from "react";
 import ReactDOM from "react-dom";
-import { ThemeProvider } from "@material-ui/core/styles";
-import CssBaseline from "@material-ui/core/CssBaseline";
 import { BrowserRouter as Router } from "react-router-dom";
 import App from "./App";
-import * as serviceWorker from "./serviceWorker";
 import "./index.css";
-import { createMuiTheme } from "@material-ui/core/styles";
+import * as serviceWorker from "./serviceWorker";
 const muiTheme = createMuiTheme({
   palette: {
     primary: {

diff --git a/frontend/src/pages/Board.js → frontend/src/pages/Board.jsx b/frontend/src/pages/Board.js → frontend/src/pages/Board.jsx
@@ -1,22 +1,22 @@
-import React, { useState, useEffect } from "react";
-import { withStyles } from "@material-ui/core/styles";
 import {
-  Grid,
   FormControl,
+  Grid,
   InputLabel,
-  Select,
   MenuItem,
+  Select,
   Typography,
 } from "@material-ui/core";
+import { withStyles } from "@material-ui/core/styles";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   apiFetch,
   getMappedIncludes,
   getRelationshipFromMappedIncludes,
 } from "../api";
-import useWindowHeight from "../hooks/windowHeight";
-import usePageTitle from "../hooks/pageTitle";
 import KanbanBoard from "../components/Board/Board";
+import usePageTitle from "../hooks/pageTitle";
+import useWindowHeight from "../hooks/windowHeight";
 
 const styles = (theme) => ({
   root: {
@@ -88,7 +88,7 @@ function Board({ classes }) {
     }
   }, [board, filterCategory, filterPriority]);
 
-  const boardTitle = board?.data?.[0].attributes.title;
+  const boardTitle = board?.data?.[0]?.attributes.title;
   usePageTitle(boardTitle ? boardTitle : "Board");
   if (currentState === "LOADING") {
     return <span>Loading...</span>;

diff --git a/frontend/src/pages/Create.js → frontend/src/pages/Create.jsx b/frontend/src/pages/Create.js → frontend/src/pages/Create.jsx
diff --git a/frontend/src/pages/ForgotPassword.js → frontend/src/pages/ForgotPassword.jsx b/frontend/src/pages/ForgotPassword.js → frontend/src/pages/ForgotPassword.jsx
diff --git a/frontend/src/pages/Home.js → frontend/src/pages/Home.jsx b/frontend/src/pages/Home.js → frontend/src/pages/Home.jsx
diff --git a/frontend/src/pages/Login.js → frontend/src/pages/Login.jsx b/frontend/src/pages/Login.js → frontend/src/pages/Login.jsx
diff --git a/frontend/src/pages/Logout.js → frontend/src/pages/Logout.jsx b/frontend/src/pages/Logout.js → frontend/src/pages/Logout.jsx
diff --git a/frontend/src/pages/Me.js → frontend/src/pages/Me.jsx b/frontend/src/pages/Me.js → frontend/src/pages/Me.jsx
diff --git a/frontend/src/pages/NodeBoard.js → frontend/src/pages/NodeBoard.jsx b/frontend/src/pages/NodeBoard.js → frontend/src/pages/NodeBoard.jsx
diff --git a/frontend/src/pages/NodeBoardEditForm.js → frontend/src/pages/NodeBoardEditForm.jsx b/frontend/src/pages/NodeBoardEditForm.js → frontend/src/pages/NodeBoardEditForm.jsx
diff --git a/frontend/src/pages/Register.js → frontend/src/pages/Register.jsx b/frontend/src/pages/Register.js → frontend/src/pages/Register.jsx
diff --git a/frontend/src/routing/AuthRoute.js → frontend/src/routing/AuthRoute.jsx b/frontend/src/routing/AuthRoute.js → frontend/src/routing/AuthRoute.jsx
diff --git a/frontend/src/routing/GuestRoute.js → frontend/src/routing/GuestRoute.jsx b/frontend/src/routing/GuestRoute.js → frontend/src/routing/GuestRoute.jsx
diff --git a/frontend/src/serviceWorker.js → frontend/src/serviceWorker.jsx b/frontend/src/serviceWorker.js → frontend/src/serviceWorker.jsx
diff --git a/frontend/src/setupTests.js b/frontend/src/setupTests.js
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,48 @@
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+
+const port = 9443;
+const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // Add entrypoint
+  plugins: [react({ include: /\.(js|jsx|ts|tsx)$/, jsxRuntime: "classic" })],
+  define: {
+    "process.env.REACT_APP_API_BASE_URL": JSON.stringify(
+      "https://contribkanban.com.ddev.site"
+    ),
+    "process.env.PUBLIC_URL": JSON.stringify(
+      "https://contribkanban.com.ddev.site"
+    ),
+    "process.env.REACT_APP_LAGOON_BRANCH": JSON.stringify(""),
+    "process.env.REACT_APP_LAGOON_PROJECT": JSON.stringify(""),
+    "process.env.REACT_APP_LAGOON_ENVIRONMENT": JSON.stringify(""),
+    "process.env.NODE_ENV": JSON.stringify("local"),
+  },
+  build: {
+    // our entry
+    outDir: "build",
+    rollupOptions: {
+      input: path.resolve("src/index.jsx"),
+    },
+    // manifest
+    manifest: true,
+  },
+  // Adjust Vites dev server for DDEV
+  // https://vitejs.dev/config/server-options.html
+  server: {
+    // respond to all network requests:
+    host: "0.0.0.0",
+    port: port,
+    strictPort: true,
+    // Defines the origin of the generated asset URLs during development
+    origin: origin,
+  },
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: './setupTest.js',
+  },
+});
diff --git a/lagoon/Dockerfile.app b/lagoon/Dockerfile.app
@@ -1,4 +1,4 @@
-FROM node:16.16 as builder
+FROM node:18.20.2 as builder
 
 ARG LAGOON_PROJECT
 ARG LAGOON_GIT_BRANCH

diff --git a/package.json b/package.json
@@ -4,6 +4,9 @@
         "extension",
         "frontend"
     ],
+    "resolutions": {
+        "ansi-regex": "^6.0.1"
+    },
     "scripts": {
         "extension-build": "yarn workspace @contribkanban/chrome-extension build",
         "frontend-start": "yarn workspace @contribkanban/frontend start",