Initial Javascript to Typescript convert

frontend/index.html

@@ -187,6 +187,6 @@
       </div>
     </div>
 
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

frontend/package-lock.json

@@ -35,6 +35,7 @@
       },
       "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.12.3",
+        "@types/node": "^20.5.9",
         "@vitejs/plugin-legacy": "^4.1.1",
         "@vitejs/plugin-vue": "^4.3.3",
         "@vue/eslint-config-prettier": "^8.0.0",
@@ -46,6 +47,7 @@
         "postcss": "^8.4.28",
         "prettier": "^3.0.2",
         "terser": "^5.19.2",
+        "typescript": "^5.2.2",
         "vite": "^4.4.9",
         "vite-plugin-compression2": "^0.10.4",
         "vite-plugin-rewrite-all": "^1.0.1"
@@ -2490,6 +2492,12 @@
       "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.5.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.9.tgz",
+      "integrity": "sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.17",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
@@ -3681,15 +3689,6 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
-    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -3799,108 +3798,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/eslint/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -3930,6 +3827,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@@ -6049,6 +5959,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.0.tgz",

frontend/package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.12.3",
+    "@types/node": "^20.5.9",
     "@vitejs/plugin-legacy": "^4.1.1",
     "@vitejs/plugin-vue": "^4.3.3",
     "@vue/eslint-config-prettier": "^8.0.0",
@@ -52,6 +53,7 @@
     "postcss": "^8.4.28",
     "prettier": "^3.0.2",
     "terser": "^5.19.2",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
     "vite-plugin-compression2": "^0.10.4",
     "vite-plugin-rewrite-all": "^1.0.1"

frontend/src/App.vue

@@ -4,20 +4,20 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: "app",
   mounted() {
     const loading = document.getElementById("loading");
-    loading.classList.add("done");
+    if(loading !== null) {
+      loading.classList.add("done");
 
-    setTimeout(function () {
-      loading.parentNode.removeChild(loading);
-    }, 200);
+      setTimeout(function () {
+        if(loading.parentNode !== null) {
+          loading.parentNode.removeChild(loading);
+        }
+      }, 200);
+    } 
   },
 };
-</script>
-
-<style>
-@import "./css/styles.css";
-</style>
+</script>

frontend/src/index.d.ts

@@ -0,0 +1 @@
+declare module '*.vue';

frontend/src/main.ts

@@ -1,13 +1,14 @@
 import { disableExternal } from "@/utils/constants";
-import { createApp, configureCompat } from "vue";
+import { createApp } from "vue";
 import Noty from "noty";
 import VueLazyload from "vue-lazyload";
 import createPinia from "@/stores";
 import router from "@/router";
 import i18n from "@/i18n";
 import App from "@/App.vue";
+import '@/css/styles.css'
 
-configureCompat({ RENDER_FUNCTION: false });
+// configureCompat({ RENDER_FUNCTION: false });
 
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
@@ -43,7 +44,7 @@ app.directive("focus", {
   },
 });
 
-const notyDefault = {
+const notyDefault: Noty.Options = {
   type: "info",
   layout: "bottomCenter",
   timeout: 1000,
@@ -54,7 +55,7 @@ const notyDefault = {
 //   new Noty(Object.assign({}, notyDefault, opts)).show();
 // });
 
-app.provide("$showSuccess", (message) => {
+app.provide("$showSuccess", (message: any) => {
   new Noty(
     Object.assign({}, notyDefault, {
       text: message,
@@ -63,8 +64,9 @@ app.provide("$showSuccess", (message) => {
   ).show();
 });
 
-app.provide("$showError", (error, displayReport = true) => {
+app.provide("$showError", (error: any, displayReport = true) => {
   let btns = [
+    // @ts-ignore
     Noty.button(i18n.global.t("buttons.close"), "", function () {
       n.close();
     }),

frontend/src/stores/clipboard.ts

@@ -12,7 +12,7 @@ export const useClipboardStore = defineStore("clipboard", {
   },
   actions: {
     // no context as first argument, use `this` instead
-    updateClipboard(value) {
+    updateClipboard(value: any) {
       this.key = value.key;
       this.items = value.items;
       this.path = value.path;

frontend/src/types/global.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+    interface Window {
+        FileBrowser: any;
+    }
+}

frontend/src/utils/vue.cjs

@@ -1,12 +1,11 @@
 import Vue from "vue";
 import Noty from "noty";
 import VueLazyload from "vue-lazyload";
+// @ts-ignore
 import i18n from "@/i18n";
 import { disableExternal } from "@/utils/constants";
-import AsyncComputed from "vue-async-computed";
 
 Vue.use(VueLazyload);
-Vue.use(AsyncComputed);
 
 Vue.config.productionTip = true;
 

frontend/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "outDir": "../dist/frontend",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "typeRoots": ["./node_modules/@types", "./some-custom-lib"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "./**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+  ],
+  "exclude": ["node_modules", "dist"]
+}

frontend/vite.config.ts

@@ -15,7 +15,7 @@ const plugins = [
       },
     },
   }),
-  VueI18nPlugin(),
+  VueI18nPlugin({}),
   compression({ include: /\.js$/i, deleteOriginalAssets: true }),
   pluginRewriteAll(), // fixes 404 error with paths containing dot in dev server
 ];