add util.ts for sharing common functions between frontend and backend

package-lock.json

@@ -600,6 +600,16 @@
         "@types/node": "*"
       }
     },
+    "@types/bootstrap": {
+      "version": "5.0.17",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.0.17.tgz",
+      "integrity": "sha512-uQQQ3p+zw10VjZLvtCuKWI6QgVCYEnK/yHnno3gyEhikfQdiZexS2XPxjWRboGmX135o470GkmCta9eAgQMVLQ==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "@types/jquery": "*"
+      }
+    },
     "@types/component-emitter": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -676,6 +686,15 @@
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-1.8.1.tgz",
       "integrity": "sha512-e+2rjEwK6KDaNOm5Aa9wNGgyS9oSZU/4pfSMMPYNOfjvFI0WVXm29+ITRFr6aKDvvKo7uU1jV68MW4ScsfDi7Q=="
     },
+    "@types/jquery": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz",
+      "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
     "@types/keygrip": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.2.tgz",
@@ -760,6 +779,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
+      "dev": true
+    },
     "@types/unist": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -6673,6 +6698,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "dev": true
+    },
     "unc-path-regex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",

package.json

@@ -56,6 +56,7 @@
         "vue-toastification": "^2.0.0-rc.1"
     },
     "devDependencies": {
+        "@types/bootstrap": "^5.0.17",
         "@vitejs/plugin-legacy": "^1.5.0",
         "@vitejs/plugin-vue": "^1.3.0",
         "@vue/compiler-sfc": "^3.1.5",
@@ -66,6 +67,7 @@
         "stylelint": "^13.13.1",
         "stylelint-config-recommended": "^5.0.0",
         "stylelint-config-standard": "^22.0.0",
+        "typescript": "^4.3.5",
         "vite": "^2.4.4"
     }
 }

server/database.js

@@ -1,5 +1,5 @@
 const fs = require("fs");
-const {sleep} = require("./util");
+const {sleep} = require("../src/util");
 const {R} = require("redbean-node");
 const {setSetting, setting} = require("./util-server");
 

server/model/monitor.js

@@ -6,7 +6,7 @@ dayjs.extend(utc)
 dayjs.extend(timezone)
 const axios = require("axios");
 const {Prometheus} = require("../prometheus");
-const {debug, UP, DOWN, PENDING} = require("../util");
+const {debug, UP, DOWN, PENDING} = require("../../src/util");
 const {tcping, ping, checkCertificate} = require("../util-server");
 const {R} = require("redbean-node");
 const {BeanModel} = require("redbean-node/dist/bean-model");
@@ -221,9 +221,12 @@ class Monitor extends BeanModel {
         clearInterval(this.heartbeatInterval)
     }
 
-    // Helper Method:
+    /**
-    // returns URL object for further usage
+     * Helper Method:
-    // returns null if url is invalid
+     * returns URL object for further usage
+     * returns null if url is invalid
+     * @returns {null|URL}
+     */
     getUrl() {
         try {
             return new URL(this.url);
@@ -232,7 +235,11 @@ class Monitor extends BeanModel {
         }
     }
 
-    // Store TLS info to database
+    /**
+     * Store TLS info to database
+     * @param checkCertificateResult
+     * @returns {Promise<void>}
+     */
     async updateTlsInfo(checkCertificateResult) {
         let tls_info_bean = await R.findOne("monitor_tls_info", "monitor_id = ?", [
             this.id

server/server.js

@@ -12,7 +12,7 @@ const { getSettings } = require("./util-server");
 const { Notification } = require("./notification")
 const gracefulShutdown = require("http-graceful-shutdown");
 const Database = require("./database");
-const { sleep } = require("./util");
+const { sleep } = require("../src/util");
 const args = require("args-parser")(process.argv);
 const prometheusAPIMetrics = require("prometheus-api-metrics");
 const { basicAuth } = require("./auth");

server/util.js

@@ -1,25 +0,0 @@
-// Common JS cannot be used in frontend sadly
-// sleep, ucfirst is duplicated in ../src/util-frontend.js
-
-exports.DOWN = 0;
-exports.UP = 1;
-exports.PENDING = 2;
-
-exports.sleep = function (ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-exports.ucfirst = function (str) {
-    if (! str) {
-        return str;
-    }
-
-    const firstLetter = str.substr(0, 1);
-    return firstLetter.toUpperCase() + str.substr(1);
-}
-
-exports.debug = (msg) => {
-    if (process.env.NODE_ENV === "development") {
-        console.log(msg)
-    }
-}

src/components/CountUp.vue

@@ -3,9 +3,9 @@
     <span v-else>{{ value }}</span>
 </template>
 
-<script>
+<script lang="ts">
 
-import { sleep } from "../util-frontend"
+import { sleep } from "../util.ts"
 
 export default {
 

src/components/NotificationDialog.vue

@@ -345,9 +345,9 @@
     </Confirm>
 </template>
 
-<script>
+<script lang="ts">
 import { Modal } from "bootstrap"
-import { ucfirst } from "../util-frontend"
+import { ucfirst } from "../util.ts"
 import axios from "axios";
 import { useToast } from "vue-toastification"
 import Confirm from "./Confirm.vue";

src/util-frontend.js

@@ -5,19 +5,6 @@ import utc from "dayjs/plugin/utc";
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
-export function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export function ucfirst(str) {
-    if (! str) {
-        return str;
-    }
-
-    const firstLetter = str.substr(0, 1);
-    return firstLetter.toUpperCase() + str.substr(1);
-}
-
 function getTimezoneOffset(timeZone) {
     const now = new Date();
     const tzString = now.toLocaleString("en-US", {

src/util.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debug = exports.ucfirst = exports.sleep = exports.PENDING = exports.UP = exports.DOWN = void 0;
+exports.DOWN = 0;
+exports.UP = 1;
+exports.PENDING = 2;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
+function ucfirst(str) {
+    if (!str) {
+        return str;
+    }
+    const firstLetter = str.substr(0, 1);
+    return firstLetter.toUpperCase() + str.substr(1);
+}
+exports.ucfirst = ucfirst;
+function debug(msg) {
+    if (process.env.NODE_ENV === "development") {
+        console.log(msg);
+    }
+}
+exports.debug = debug;

src/util.ts

@@ -0,0 +1,31 @@
+// Common Util for frontend and backend
+// Backend uses the compiled file util.js
+// Frontend uses util.ts
+// Need to run "tsc" to compile if there are any changes.
+
+export const DOWN = 0;
+export const UP = 1;
+export const PENDING = 2;
+
+export function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * PHP's ucfirst
+ * @param str
+ */
+export function ucfirst(str) {
+    if (! str) {
+        return str;
+    }
+
+    const firstLetter = str.substr(0, 1);
+    return firstLetter.toUpperCase() + str.substr(1);
+}
+
+export function debug(msg) {
+    if (process.env.NODE_ENV === "development") {
+        console.log(msg)
+    }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compileOnSave": true,
+    "compilerOptions": {
+        "target": "ES2018",
+        "module": "commonjs",
+        "removeComments": true,
+        "preserveConstEnums": true,
+        "sourceMap": false,
+        "files.insertFinalNewline": true
+    },
+    "files": [
+        "./server/util.ts"
+    ]
+}