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

@@ -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"]
+      }
+    }]
 }

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`.
 

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",

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;
     });
 

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 />);
 });

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/**/*"
+  ]
+}