wip: migrating to vite

marabesi · marabesi · commit 90ecbdacf210 · 2026-03-01T18:08:31.000+01:00
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,8 @@
+// Babel config used by Jest (standalone, without react-scripts)
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <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="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="/logo192.png" />
+  <link rel="manifest" href="/manifest.json" />
+  <title>JSON utility tool</title>
+</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>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,18 +23,18 @@
     "react-hot-toast": "^2.6.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^7.12.0",
-    "react-scripts": "5.0.1",
     "react-switch": "^7.1.0"
   },
   "overrides": {
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
     "@chromatic-com/cypress": "^0.11.8",
-    "@craco/craco": "^7.1.0",
     "@cypress/code-coverage": "^3.14.7",
-    "@cypress/instrument-cra": "^1.4.0",
     "@stryker-mutator/core": "^9.0.1",
     "@stryker-mutator/jest-runner": "^9.0.1",
     "@stryker-mutator/typescript-checker": "^9.0.1",
@@ -47,9 +47,9 @@
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@types/react-router-dom": "^5.3.3",
-    "autoprefixer": "^9.8.7",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
     "babel-jest": "^29.7.0",
-    "babel-plugin-preval": "^5.0.0",
     "chromatic": "^13.3.4",
     "concurrently": "^9.2.1",
     "coveralls-next": "^4.2.1",
@@ -58,32 +58,38 @@
     "cypress-file-upload": "^5.0.8",
     "electron": "^40.4.1",
     "electron-builder": "^26.7.0",
+    "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-react": "^7.26.1",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
+    "jest": "^29.7.0",
     "jest-clipboard": "^0.0.11",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom-worker": "^0.3.0",
     "lcov-result-merger": "^5.0.1",
+    "node-fetch": "^2.7.0",
     "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.4.18",
+    "typescript": "^5.8.2",
+    "vite": "^6.3.5",
+    "vite-plugin-istanbul": "^6.0.0",
     "wait-on": "^8.0.3"
   },
   "postinstall": "electron-builder install-app-deps && husky install",
   "scripts": {
-    "start": "HOST=0.0.0.0 BROWSER=none craco start",
-    "start-instrumented": "HOST=0.0.0.0 BROWSER=none craco -r @cypress/instrument-cra start",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider craco build",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "test": "craco test --max-workers=60%",
+    "start": "vite",
+    "start-instrumented": "VITE_COVERAGE=true vite",
+    "build": "vite build",
+    "analyze": "source-map-explorer 'build/assets/*.js'",
+    "test": "jest --max-workers=60%",
     "test:all": "npm run e2e && npm run test -- --watchAll=false",
-    "coverage": "npm run test -- --env=jsdom --no-cache --collectCoverage --ci --watchAll=false --colors --silent",
+    "coverage": "jest --no-cache --collectCoverage --ci --watchAll=false --colors --silent",
     "coveralls": "coveralls < merged_coverage.info",
     "e2e": "ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 CYPRESS_BASE_URL=http://localhost:3000 cypress run",
     "e2e:open": "CYPRESS_BASE_URL=http://localhost:3000 cypress open",
-    "eject": "craco eject",
-    "dev": "concurrently -k \"npm start\" \"npm run electron\"",
+    "dev": "concurrently -k \"vite\" \"npm run electron\"",
     "setup": "npm run build && cp package.json ./build",
     "package": "npm run setup && electron-builder --linux snap -p never",
     "package-windows": "npm run setup && electron-builder --win --x64 -p never",
@@ -144,11 +150,22 @@
     }
   },
   "jest": {
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/cypress/"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "<rootDir>/src/__mocks__/styleMock.js"
+    },
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/?!(.*)"
     ],
     "transform": {
-      "^.+\\.tsx?$": "babel-jest"
+      "^.+\\.(tsx?|js)$": "babel-jest"
     }
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/__mocks__/styleMock.js b/src/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/src/__test__/core/__snapshots__/formater.test.ts.snap b/src/__test__/core/__snapshots__/formater.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`json utility tool should format json with two space 1`] = `
 "{
-  \\"a\\": true,
-  \\"b\\": false
+  "a": true,
+  "b": false
 }"
 `;
diff --git a/src/tailwindResolver.js b/src/tailwindResolver.js
@@ -2,7 +2,7 @@
 
 // ignore file is in here because of cypress instrumentation code
 
-// @preval
-const resolveConfig = require('tailwindcss/resolveConfig');
-const tailwindConfig = require('../tailwind.config');
-module.exports = resolveConfig(tailwindConfig);
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../tailwind.config';
+
+export default resolveConfig(tailwindConfig);
diff --git a/stryker.config.json b/stryker.config.json
@@ -8,9 +8,6 @@
     "html"
   ],
   "coverageAnalysis": "off",
-  "jest": {
-    "projectType": "create-react-app"
-  },
   "checkers": [
     "typescript"
   ],
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
   darkMode: 'class',
   theme: {
     extend: {
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "target": "es5",
+    "target": "ESNext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -14,12 +14,13 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vite/client", "jest", "node"]
   },
   "include": [
     "src"
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => {
+  const plugins: import('vite').PluginOption[] = [react()];
+
+  // Enable Istanbul instrumentation only when running the instrumented dev server
+  // (used for Cypress E2E code coverage via @cypress/code-coverage)
+  if (process.env.VITE_COVERAGE === 'true') {
+    const { default: istanbul } = await import('vite-plugin-istanbul');
+    plugins.push(
+      istanbul({
+        include: 'src/**',
+        exclude: ['node_modules', 'src/__test__/**'],
+        extension: ['.js', '.ts', '.tsx'],
+        requireEnv: false,
+      })
+    );
+  }
+
+  return {
+    plugins,
+    base: './',
+    build: {
+      outDir: 'build',
+      sourcemap: true,
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+    },
+  };
+});
