From b12d7d7d762d0c91c3159b10dfb031790d8248e8 Mon Sep 17 00:00:00 2001
From: Martin Pitt <mpitt@redhat.com>
Date: Thu, 11 Jul 2024 11:39:39 +0200
Subject: [PATCH] Convert to TypeScript

This needs the usual "I know the `app` element exists" annotation, plus
dealing with a non-existing /etc/hostname (in which case the watch will
return `null`, and we shouldn't poke that into a `string` state).
---
 .eslintrc.json              | 14 +++++++++++++-
 README.md                   |  2 +-
 package.json                |  6 +++++-
 src/{app.jsx => app.tsx}    |  2 +-
 src/{index.js => index.tsx} |  2 +-
 tsconfig.json               | 22 ++++++++++++++++++++++
 6 files changed, 43 insertions(+), 5 deletions(-)
 rename src/{app.jsx => app.tsx} (95%)
 rename src/{index.js => index.tsx} (93%)
 create mode 100644 tsconfig.json

diff --git a/.eslintrc.json b/.eslintrc.json
index 10914e5..d499b3e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -45,5 +45,17 @@
     "globals": {
         "require": "readonly",
         "module": "readonly"
-    }
+    },
+    "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "plugins": [
+        "@typescript-eslint"
+      ],
+      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": ["./tsconfig.json"]
+      }
+    }]
 }
diff --git a/README.md b/README.md
index 0399a6c..284459b 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@ remove manually the symlink:
 # Running eslint
 
 Cockpit Starter Kit uses [ESLint](https://eslint.org/) to automatically check
-JavaScript code style in `.js` and `.jsx` files.
+JavaScript/TypeScript code style in `.js[x]` and `.ts[x]` files.
 
 eslint is executed as part of `test/static-code`, aka. `make codecheck`.
 
diff --git a/package.json b/package.json
index f415d74..2c82f4b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,9 @@
     "stylelint:fix": "stylelint --fix src/*{.css,scss}"
   },
   "devDependencies": {
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
     "argparse": "2.0.1",
     "chrome-remote-interface": "0.33.2",
     "esbuild": "0.23.0",
@@ -43,7 +46,8 @@
     "stylelint-config-recommended-scss": "14.0.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-config-standard-scss": "13.1.0",
-    "stylelint-formatter-pretty": "4.0.0"
+    "stylelint-formatter-pretty": "4.0.0",
+    "typescript": "5.5.3"
   },
   "dependencies": {
     "@patternfly/patternfly": "5.3.1",
diff --git a/src/app.jsx b/src/app.tsx
similarity index 95%
rename from src/app.jsx
rename to src/app.tsx
index 06bcf00..693dd51 100644
--- a/src/app.jsx
+++ b/src/app.tsx
@@ -30,7 +30,7 @@ export const Application = () => {
 
     useEffect(() => {
         const hostname = cockpit.file('/etc/hostname');
-        hostname.watch(content => setHostname(content.trim()));
+        hostname.watch(content => setHostname(content?.trim() ?? ""));
         return hostname.close;
     });
 
diff --git a/src/index.js b/src/index.tsx
similarity index 93%
rename from src/index.js
rename to src/index.tsx
index f1c4da6..51254c0 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -28,5 +28,5 @@ import "patternfly/patternfly-5-cockpit.scss";
 import './app.scss';
 
 document.addEventListener("DOMContentLoaded", () => {
-    createRoot(document.getElementById("app")).render(<Application />);
+    createRoot(document.getElementById("app")!).render(<Application />);
 });
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c4b1669
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "react",
+    "lib": [
+      "dom",
+      "es2020"
+    ],
+    "paths": {
+        "*": ["./pkg/lib/*"]
+    },
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "strict": true,
+    "target": "es2020"
+  },
+  "include": [
+    "src/**/*"
+  ]
+}