Migration of JavaScript files to TypeScript

benchexec/tablegenerator/react-table/package.json

@@ -33,19 +33,44 @@
     "node": ">=18.0.0"
   },
   "scripts": {
+    "typecheck": "tsc --noEmit",
     "injectWorkers": " node scripts/workerDataUrls.js && eslint --fix ./src/workers/dataUrls.js",
     "start": "(test -f src/data/dependencies.json || node scripts/dependencies.js) && npm run injectWorkers && node scripts/start.js",
     "build": "node scripts/dependencies.js && npm run injectWorkers  && react-app-rewired build",
     "test": "(test -f src/data/dependencies.json || node scripts/dependencies.js) && npm run injectWorkers && react-app-rewired test",
-    "lint:fix": "(test -f src/data/dependencies.json || node scripts/dependencies.js) && eslint --fix --ignore-path .lintignores $(pwd)'/**/*.js' && prettier --ignore-path .lintignores --write $(pwd)'/**/*.+(css|scss|json)'",
-    "lint": "(test -f src/data/dependencies.json || node scripts/dependencies.js) &&  eslint --max-warnings 0 --ignore-path .lintignores . && prettier --ignore-path .lintignores --check $(pwd)'/**/*.+(css|scss|json)'"
+    "lint:fix": "(test -f src/data/dependencies.json || node scripts/dependencies.js) && eslint --fix --ignore-path .lintignores --ext .js,.jsx,.ts,.tsx . && prettier --ignore-path .lintignores --write \"**/*.{css,scss,json}\"",
+    "lint": "(test -f src/data/dependencies.json || node scripts/dependencies.js) &&  eslint --max-warnings 0 --ignore-path .lintignores --ext .js,.jsx,.ts,.tsx . && prettier --ignore-path .lintignores --check \"**/*.{css,scss,json}\""
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "plugin:prettier/recommended",
       "prettier"
     ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.ts",
+          "**/*.tsx"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+          "@typescript-eslint"
+        ],
+        "extends": [
+          "plugin:@typescript-eslint/recommended"
+        ],
+        "rules": {
+          "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+              "varsIgnorePattern": "^_",
+              "argsIgnorePattern": "^_"
+            }
+          ]
+        }
+      }
+    ],
     "rules": {
       "prettier/prettier": "warn"
     }
@@ -54,7 +79,8 @@
     "src/vendor/"
   ],
   "prettier": {
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "endOfLine": "auto"
   },
   "browserslist": {
     "production": [
@@ -81,13 +107,24 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
+    "@types/deep-equal": "^1.0.4",
+    "@types/node": "^18.19.130",
+    "@types/path-browserify": "^1.0.3",
+    "@types/react": "^17.0.91",
+    "@types/react-dom": "^17.0.26",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-table": "^7.7.20",
+    "@types/react-test-renderer": "^19.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "license-checker": "^25.0.1",
     "prettier": "^2.7.1",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "5.0.1",
     "react-test-renderer": "^17.0.2",
-    "sass": "^1.53.0"
+    "sass": "^1.53.0",
+    "typescript": "^4.9.5"
   }
 }

benchexec/tablegenerator/react-table/scripts/dependencies.js

@@ -35,7 +35,7 @@ checker.init(
     // The following is the list of currently allowed licenses for bundled code.
     // We can add other free licenses, but must adjust the licences for
     // build/vendors.min* in ../../../.reuse/dep5, the linkification code in
-    // src/components/Info.js and pyproject.toml accordingly,
+    // src/components/Info.tsx and pyproject.toml accordingly,
     // and run "reuse download --all".
     onlyAllow: "BSD-3-Clause; CC-BY-4.0; ISC; MIT",
     customFormat: {

benchexec/tablegenerator/react-table/src/App.test.js → benchexec/tablegenerator/react-table/src/App.test.tsx

@@ -10,10 +10,14 @@ import ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 import App from "./App";
 
+type StatsReadyResolver = () => void;
+
 it("renders without crashing", async () => {
   const div = document.createElement("div");
-  let statsResolver;
-  const StatsReadyPromise = new Promise((resolve) => (statsResolver = resolve));
+  let statsResolver: StatsReadyResolver;
+  const StatsReadyPromise = new Promise<void>((resolve) => {
+    statsResolver = resolve;
+  });
   await act(async () => {
     ReactDOM.render(<App onStatsReady={statsResolver} />, div);
     await StatsReadyPromise;

benchexec/tablegenerator/react-table/src/App.js → benchexec/tablegenerator/react-table/src/App.tsx

@@ -9,13 +9,39 @@ import "./App.scss";
 import React from "react";
 import Overview from "./components/Overview";
 
+// ==============================
+// Global augmentations
+// ==============================
+
+declare global {
+  interface Window {
+    // Global injected app data (loaded via @data in dev and via index.html in prod).
+    data: unknown;
+  }
+}
+
+// ==============================
+// Component props
+// ==============================
+
+interface AppProps {
+  // Callback that is forwarded to Overview. We keep it generic here
+  // because the exact payload type is defined by Overview.
+  onStatsReady?: (stats: unknown) => void;
+}
+
 if (process.env.NODE_ENV !== "production") {
   // Load example data for development
-  window.data = require("@data");
-  window.data.version = "(development build)";
+  // `require` is used here intentionally because @data is only available in dev builds.
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  window.data = require("@data") as unknown;
+
+  // `window.data` is `unknown` on purpose (shape depends on runtime data).
+  // We keep the original behavior and only narrow locally for this assignment.
+  (window.data as { version?: string }).version = "(development build)";
 }
 
-const App = (props) => {
+const App = (props: AppProps): JSX.Element => {
   // If we visit this page without a hash, like www.domain.com/ or www.domain.com/subpage, we
   // append a hash to the URL to ensure that the page is loaded correctly. This is necessary
   // to ensure correct routing in the app.