Remove react-scripts (#937)

Author: Dreamsorcerer

.github/workflows/ci.yml

@@ -74,9 +74,10 @@ jobs:
         path: |
           ${{ env.yarn_cache }}
           admin-js/node_modules
+          admin-js/yarn.lock
     - name: Yarn install
       if: steps.cache_node_modules.outputs.cache-hit != 'true'
-      run: yarn install
+      run: yarn install --production
       working-directory: admin-js/
     - name: Cache output files
       uses: actions/cache@v4
@@ -85,10 +86,10 @@ jobs:
         key: yarn-${{ hashFiles('admin-js/src/*') }}-${{ hashFiles('admin-js/yarn.lock') }}
         path: |
           aiohttp_admin/static/admin.js
-          aiohttp_admin/static/*.map
+          aiohttp_admin/static/admin.js.map
     - name: Yarn build
       if: steps.cache_admin_js.outputs.cache-hit != 'true'
-      run: yarn build
+      run: yarn build --minify false
       working-directory: admin-js/
 
   test:
@@ -235,10 +236,10 @@ jobs:
     - name: Install yarn
       run: sudo apt install yarn -y
     - name: Yarn install
-      run: yarn install
+      run: yarn install --production
       working-directory: admin-js/
     - name: Yarn build
-      run: yarn build
+      run: yarn build --production
       working-directory: admin-js/
     - name: Install dependencies
       run:

admin-js/package.json

@@ -6,6 +6,8 @@
     "react": "18.2.0",
     "react-admin": "4.16.7",
     "react-dom": "18.2.0",
+    "terser": "5.40.0",
+    "vite": "6.2.6",
 
     "create-react-admin": "4.16.7",
     "ra-core": "4.16.7",
@@ -25,19 +27,22 @@
     "ra-ui-materialui": "4.16.7"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@ungap/structured-clone": "1.3.0",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-fail-on-console": "3.3.1",
-    "react-scripts": "5.0.1"
+    "whatwg-fetch": "3.6.20"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build && (rm ../aiohttp_admin/static/*.js.map || true) && mv build/static/js/main.*.js ../aiohttp_admin/static/admin.js && mv build/static/js/main.*.js.map ../aiohttp_admin/static/ && rm -rf build/",
-    "test": "jest",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "test": "jest"
   },
   "eslintConfig": {
     "extends": [

admin-js/public/index.html

@@ -449,9 +449,9 @@ const App = (props) => {
     STATE = aiohttpState;
     const [loaded, setLoaded] = useState(STATE["js_module"] === null);
     if (!loaded) {
-        // The inline comment skips the webpack import() and allows us to use the native
+        // The inline comment skips the Vite import() and allows us to use the native
         // browser's import() function. Needed to dynamically import a module.
-        import(/* webpackIgnore: true */ STATE["js_module"]).then((mod) => {
+        import(/* @vite-ignore */ STATE["js_module"]).then((mod) => {
             Object.assign(COMPONENTS, mod.components);
             Object.assign(FUNCTIONS, mod.functions);
             setLoaded(true);

admin-js/src/App.js renamed to admin-js/src/App.jsx

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    build: {
+        minify: "terser",
+        outDir: "../aiohttp_admin/static/",
+        rollupOptions: {
+            input: "src/admin.jsx",
+            output: {
+                entryFileNames: "[name].js"
+            }
+        },
+        sourcemap: true,
+    },
+})