reactjs: move to vite

pom.xml

@@ -749,7 +749,7 @@
                         </execution>
                     </executions>
                     <configuration>
-                        <nodeVersion>v12.16.3</nodeVersion>
+                        <nodeVersion>v22.21.1</nodeVersion>
                         <installDirectory>.mvn</installDirectory>
                         <workingDirectory>src</workingDirectory>
                     </configuration>

webtau-reactjs/package.json

@@ -2,6 +2,7 @@
   "name": "webtau-reactjs",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "clipboard": "^2.0.1",
     "d3-scale": "^2.1.0",
@@ -11,34 +12,24 @@
     "react": "^17.0.2",
     "react-debounce-input": "^3.2.0",
     "react-dom": "^17.0.2",
-    "react-json-tree": "^0.11.0"
+    "react-json-tree": "^0.18.0"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
+    "@types/node": "^22.10.7",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "add": "^2.0.6",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "prettier": "^2.2.1",
     "react-component-viewer": "0.25.0",
-    "react-scripts": "^4.0.3",
-    "typescript": "^4.1.2"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "format": "prettier --write src/**/*.ts{,x}",
-    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
+    "lint": "tsc --noEmit"
   },
   "browserslist": {
     "production": [

webtau-reactjs/pom.xml

@@ -52,19 +52,11 @@
                             <include name="css/*.*" />
                         </fileset>
 
-                        <fileset id="assets" dir="build/">
-                            <include name="asset-manifest.json" />
-                        </fileset>
-
                         <copy verbose="true" todir="${project.build.outputDirectory}/static">
                             <fileset refid="bundle" />
                         </copy>
 
-                        <copy verbose="true" todir="${project.build.outputDirectory}/">
-                            <fileset refid="assets" />
-                        </copy>
-
-                        <copy file="${project.basedir}/public/webtau-theme.js" toFile="${project.build.outputDirectory}/webtau-theme.js" />
+                        <copy file="${project.basedir}/build/webtau-theme.js" toFile="${project.build.outputDirectory}/webtau-theme.js" />
                     </target>
                 </configuration>
             </plugin>

webtau-reactjs/src/report/compression/reportDataCompression.js

@@ -1,4 +1,5 @@
 /*
+ * Copyright 2026 webtau maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,11 +15,17 @@
  * limitations under the License.
  */
 
-const gzip = require('gzip-js')
+import * as gzip from 'gzip-js';
 
 export function decompressAndDecodeReportData(base64input) {
-    const input = Buffer.from(base64input, 'base64')
+  const binaryString = atob(base64input);
 
-    const uncompressed = gzip.unzip(input)
-    return Buffer.from(uncompressed).toString()
-}
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  const uncompressed = gzip.unzip(bytes);
+
+  return new TextDecoder().decode(new Uint8Array(uncompressed));
+}

webtau-reactjs/src/report/details/http/JsonPayload.js

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import JSONTree from 'react-json-tree';
+import { JSONTree } from 'react-json-tree';
 
 import './JsonPayload.css';
 

webtau-reactjs/tsconfig.json

@@ -1,26 +1,25 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

webtau-report/src/main/java/org/testingisdocumenting/webtau/report/ReactJsBundle.java

@@ -16,22 +16,18 @@
 
 package org.testingisdocumenting.webtau.report;
 
-import org.testingisdocumenting.webtau.utils.JsonUtils;
 import org.testingisdocumenting.webtau.utils.ResourceUtils;
 
-import java.util.List;
-import java.util.Map;
-import java.util.function.Predicate;
-import java.util.stream.Collectors;
-
 class ReactJsBundle {
+    private static final String JS_BUNDLE_PATH = "static/js/webtau-report.js";
+    private static final String CSS_BUNDLE_PATH = "static/css/webtau-report.css";
+
     private final String javaScript;
     private final String css;
 
     public ReactJsBundle() {
-        Manifest manifest = Manifest.load();
-        this.javaScript = manifest.combineJavaScripts();
-        this.css = manifest.combineCss();
+        this.javaScript = ResourceUtils.textContent(JS_BUNDLE_PATH);
+        this.css = ResourceUtils.textContent(CSS_BUNDLE_PATH);
     }
 
     public String getJavaScript() {
@@ -41,45 +37,4 @@ public String getJavaScript() {
     public String getCss() {
         return css;
     }
-
-    public static class Manifest {
-        private Map<String, String> files;
-        private List<String> entrypoints;
-
-        public Map<String, String> getFiles() {
-            return files;
-        }
-
-        public void setFiles(Map<String, String> files) {
-            this.files = files;
-        }
-
-        public List<String> getEntrypoints() {
-            return entrypoints;
-        }
-
-        public void setEntrypoints(List<String> entrypoints) {
-            this.entrypoints = entrypoints;
-        }
-
-        public static Manifest load() {
-            String assetManifest = ResourceUtils.textContent("asset-manifest.json");
-            return JsonUtils.deserializeAs(assetManifest, Manifest.class);
-        }
-
-        public String combineJavaScripts() {
-            return combineBasedOnFilter(p -> p.endsWith(".js"));
-        }
-
-        public String combineCss() {
-            return combineBasedOnFilter(p -> p.endsWith(".css"));
-        }
-
-        private String combineBasedOnFilter(Predicate<String> predicate) {
-            return entrypoints.stream()
-                    .filter(predicate)
-                    .map(ResourceUtils::textContent)
-                    .collect(Collectors.joining("\n"));
-        }
-    }
 }