Rewrite scripts to typescript

.eleventy.js

@@ -1,5 +1,6 @@
 import ChildProcess from "node:child_process";
 import MarkdownItAnchor from "markdown-it-anchor";
+import { promisify } from 'node:util';
 
 export default (eleventyConfig) => {
   const sourceDir = "src";
@@ -8,12 +9,14 @@ export default (eleventyConfig) => {
   eleventyConfig.addPassthroughCopy(`${sourceDir}/.well-known`);
   eleventyConfig.addPassthroughCopy(`${sourceDir}/css`);
   eleventyConfig.addPassthroughCopy(`${sourceDir}/img`);
-  eleventyConfig.addPassthroughCopy(`${sourceDir}/scripts`);
   // Copy files as-is
   eleventyConfig.addPassthroughCopy(`${sourceDir}/.htaccess`);
   eleventyConfig.addPassthroughCopy(`${sourceDir}/favicon.ico`);
   eleventyConfig.addPassthroughCopy(`${sourceDir}/favicon.svg`);
 
+  // Additional watch targets
+  eleventyConfig.addWatchTarget(`${sourceDir}/scripts/*.ts`);
+
   // Ignored files
   eleventyConfig.ignores.add(`${sourceDir}/old_news.md`);
 
@@ -26,12 +29,27 @@ export default (eleventyConfig) => {
   });
 
   // Run after the build ends
-  eleventyConfig.on("eleventy.after", ({ dir }) => {
-      // Generate Atom feed
-      const generateAtomCmd = `npm run -w atom_generator generate -- -i ../${dir.output}/news.html -o ../${dir.output}/news_feed.atom`;
-      ChildProcess.execSync(generateAtomCmd, { stdio: 'inherit' });
-    }
-  );
+  eleventyConfig.on("eleventy.after", async ({ dir }) => {
+    const run = (cmd) => {
+      const exec = promisify(ChildProcess.exec);
+      return exec(cmd).then(
+        (result) => { console.log(result.stdout); },
+        (result) => { console.error(result.stderr); }
+      );
+    };
+
+    const compileTS = () => {
+      return run("tsc");
+    };
+    const generateAtomFeed = () => {
+      return run(`npm run -w atom_generator generate -- -i ../${dir.output}/news.html -o ../${dir.output}/news_feed.atom`);
+    };
+
+    return Promise.allSettled([
+      compileTS(),
+      generateAtomFeed()
+    ]);
+  });
 
   return {
     dir: {

.jsbeautifyrc

@@ -1,29 +0,0 @@
-{
-    "indent_size": 4,
-    "indent_char": " ",
-    "indent_with_tabs": false,
-    "eol": "\n",
-    "end_with_newline": true,
-    "indent_level": 0,
-    "preserve_newlines": true,
-    "max_preserve_newlines": 2,
-    "space_in_paren": false,
-    "space_in_empty_paren": false,
-    "jslint_happy": false,
-    "space_after_anon_function": false,
-    "brace_style": "end-expand,preserve-inline",
-    "unindent_chained_methods": false,
-    "break_chained_methods": false,
-    "keep_array_indentation": false,
-    "unescape_strings": false,
-    "wrap_line_length": 0,
-    "e4x": false,
-    "comma_first": false,
-    "operator_position": "after-newline",
-
-    "html": {
-        "js": {
-            "end_with_newline": false
-        }
-    }
-}

_site/scripts/download.js

@@ -1,39 +1,25 @@
 "use strict";
-
-function setIdClassAttr(id, value) {
-    const element = document.getElementById(id);
-    if (!element)
-        return;
-    element.className = value;
-}
-
-function showOption(element) {
-    const resetClassAttr = (id, value) => {
-        const options = document.getElementById(id).options;
-        for (const option of options)
-            setIdClassAttr(`${option.value}Div`, value);
-    };
-
-    // reset all
-    if (element.id === "OSSelect") {
-        resetClassAttr("OSSelect", "invisible");
-        distroSelect.value = "emptyDist";
-    }
-    resetClassAttr("distroSelect", "invisible");
-
-    setIdClassAttr(`${element.value}Div`, ""); // display selected element
-}
-
 document.addEventListener("DOMContentLoaded", () => {
+    const distroSelect = document.getElementById("distroSelect");
+    const showOption = (element) => {
+        const hideOptionDivs = (element) => {
+            for (const option of element.options)
+                document.getElementById(`${option.value}Div`)?.classList.add("invisible");
+        };
+        if (element.id === "OSSelect") {
+            hideOptionDivs(element);
+            distroSelect.value = "emptyDist";
+        }
+        hideOptionDivs(distroSelect);
+        document.getElementById(`${element.value}Div`)?.classList.remove("invisible");
+    };
     const osSelect = document.getElementById("OSSelect");
-    osSelect.addEventListener("change", (event) => {
-        showOption(event.target);
+    osSelect.addEventListener("change", (_event) => {
+        showOption(osSelect);
     });
     osSelect.value = "emptyOS";
-
-    const distroSelect = document.getElementById("distroSelect");
-    distroSelect.addEventListener("change", (event) => {
-        showOption(event.target);
+    distroSelect.addEventListener("change", (_event) => {
+        showOption(distroSelect);
     });
     distroSelect.value = "emptyDist";
 });

eslint.config.mjs

@@ -1,21 +1,27 @@
+import ESLint from "@eslint/js";
 import Globals from "globals";
 import Html from "eslint-plugin-html";
-import Js from "@eslint/js";
 import Stylistic from '@stylistic/eslint-plugin';
+import TsESLint from 'typescript-eslint';
 
 export default [
-    Js.configs.recommended,
+    ESLint.configs.recommended,
     Stylistic.configs['disable-legacy'],
+    ...TsESLint.configs.strictTypeChecked,
+    ...TsESLint.configs.stylisticTypeChecked,
     {
         files: [
             "**/*.html",
-            "**/*.js",
-            "**/*.mjs"
+            "**/*.ts"
         ],
         languageOptions: {
-            ecmaVersion: 2021,
+            ecmaVersion: 2023,
             globals: {
                 ...Globals.browser
+            },
+            parserOptions: {
+                project: true,
+                tsconfigDirName: import.meta.dirname,
             }
         },
         plugins: {
@@ -33,6 +39,14 @@ export default [
             "prefer-arrow-callback": "error",
             "prefer-const": "error",
             "radix": "error",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    "argsIgnorePattern": "^_",
+                    "caughtErrorsIgnorePattern": "^_",
+                    "varsIgnorePattern": "^_",
+                }
+            ],
             "Stylistic/no-mixed-operators": [
                 "error",
                 {

package.json

@@ -8,8 +8,8 @@
   "scripts": {
     "build": "eleventy",
     "check-html": "html-validate _site/*.html",
-    "format": "js-beautify -r src/**.js && prettier --write **.css",
-    "lint": "eslint src/scripts/**.js && stylelint **/*.css",
+    "format": "prettier --write **.css",
+    "lint": "tsc --noEmit && eslint src/scripts/**.ts && stylelint **/*.css",
     "serve": "eleventy --serve"
   },
   "type": "module",
@@ -24,7 +24,9 @@
     "prettier": "*",
     "stylelint": "*",
     "stylelint-config-standard": "*",
-    "stylelint-order": "*"
+    "stylelint-order": "*",
+    "typescript": "*",
+    "typescript-eslint": "*"
   },
   "workspaces": [
     "atom_generator"

src/scripts/download.js

@@ -1,39 +0,0 @@
-"use strict";
-
-function setIdClassAttr(id, value) {
-    const element = document.getElementById(id);
-    if (!element)
-        return;
-    element.className = value;
-}
-
-function showOption(element) {
-    const resetClassAttr = (id, value) => {
-        const options = document.getElementById(id).options;
-        for (const option of options)
-            setIdClassAttr(`${option.value}Div`, value);
-    };
-
-    // reset all
-    if (element.id === "OSSelect") {
-        resetClassAttr("OSSelect", "invisible");
-        distroSelect.value = "emptyDist";
-    }
-    resetClassAttr("distroSelect", "invisible");
-
-    setIdClassAttr(`${element.value}Div`, ""); // display selected element
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-    const osSelect = document.getElementById("OSSelect");
-    osSelect.addEventListener("change", (event) => {
-        showOption(event.target);
-    });
-    osSelect.value = "emptyOS";
-
-    const distroSelect = document.getElementById("distroSelect");
-    distroSelect.addEventListener("change", (event) => {
-        showOption(event.target);
-    });
-    distroSelect.value = "emptyDist";
-});

src/scripts/download.ts

@@ -0,0 +1,31 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const distroSelect = document.getElementById("distroSelect") as HTMLSelectElement;
+
+    const showOption = (element: HTMLSelectElement) => {
+        const hideOptionDivs = (element: HTMLSelectElement) => {
+            for (const option of element.options)
+                document.getElementById(`${option.value}Div`)?.classList.add("invisible");
+        };
+
+        // reset all
+        if (element.id === "OSSelect") {
+            hideOptionDivs(element);
+            distroSelect.value = "emptyDist";
+        }
+        hideOptionDivs(distroSelect);
+
+        // show selected
+        document.getElementById(`${element.value}Div`)?.classList.remove("invisible");
+    };
+
+    const osSelect = document.getElementById("OSSelect") as HTMLSelectElement;
+    osSelect.addEventListener("change", (_event) => {
+        showOption(osSelect);
+    });
+    osSelect.value = "emptyOS";
+
+    distroSelect.addEventListener("change", (_event) => {
+        showOption(distroSelect);
+    });
+    distroSelect.value = "emptyDist";
+});

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions":
+    {
+        "esModuleInterop": true,
+        "module": "preserve",
+        "noImplicitAny": true,
+        "outDir": "_site/scripts",
+        "removeComments": true,
+        "strict": true,
+        "target": "ES2023"
+    },
+    "include": ["src/scripts/*.ts"],
+}