Adding TypeScript to vue

README.md

@@ -96,7 +96,7 @@ After doing the above steps, navigate to `http://localhost:1331` to see the Serv
  - `dev` - runs `vite` that starts development server doing hot reload over source files
  - `build` - runs build script that outputs files to `..\app` folder
  - `lint` - checks with eslint all vue, ts and js files
- - `preview` - runs `build` and starts static http server that enables smoketesting production build
+ - `type-check` - runs TypeScript in no emit mode
 
 #### AngularJS
 

src/ServicePulse.Host.Tests/ApprovalFiles/APIApprovals.PlatformSampleApprovals.approved.txt

@@ -1,8 +1,8 @@
 window.defaultConfig = {
-    default_route: '/dashboard',
-    base_url: '/',
-    version: '1.2.0',
-    service_control_url: 'http://localhost:33333/api/',
-    monitoring_urls: ['http://localhost:33633/'],
-    showPendingRetry: false
-};
+  default_route: '/dashboard',
+  base_url: '/',
+  version: '1.2.0',
+  service_control_url: 'http://localhost:33333/api/',
+  monitoring_urls: ['http://localhost:33633/'],
+  showPendingRetry: false,
+};

src/ServicePulse.Host.Tests/Owin/StaticMiddlewareTests.cs

@@ -152,7 +152,7 @@ public async Task Should_find_prefer_constants_file_on_disk_over_embedded_if_bot
                 }
             };
             await middleware.Invoke(context);
-            const long sizeOfFileOnDisk = 231; // this is the /app/js/app.constants.js file
+            const long sizeOfFileOnDisk = 232; // this is the /app/js/app.constants.js file
             Assert.That(context.Response.ContentLength, Is.EqualTo(sizeOfFileOnDisk));
             Assert.That(context.Response.ContentType, Is.EqualTo("application/javascript"));
         }

src/ServicePulse.Host.Tests/app/js/app.constants.js

@@ -3,5 +3,5 @@ window.defaultConfig = {
     version: '1.2.0',
     service_control_url: 'http://some.host.com:33333/api/',
     monitoring_urls: ['http://some.host.com:33633/'],
-    showPendingRetry: true
+    showPendingRetry: true,
 };

src/ServicePulse.Host/vue/.eslintrc.cjs

@@ -0,0 +1,30 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    es6: true,
+  },
+  ignorePatterns: ["node_modules/**/*", "dist/**/*", "*.ts"],
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "plugin:@typescript-eslint/recommended", "@vue/eslint-config-prettier/skip-formatting"],
+  parser: "vue-eslint-parser",
+  plugins: ["@typescript-eslint", "github"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser",
+    extraFileExtensions: [".vue"],
+  },
+  rules: {
+    "prettier/prettier": "error",
+    "require-await": "error",
+    "no-await-in-loop": "error",
+    "github/no-then": "error",
+    "prefer-rest-params": "warn",
+    "prefer-spread": "warn",
+    "no-var": "warn",
+    "prefer-const": "warn",
+    eqeqeq: ["warn", "smart"],
+  },
+};

src/ServicePulse.Host/vue/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

src/ServicePulse.Host/vue/.prettierrc.json

@@ -3,5 +3,12 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": "public/js/app.constants.js",
+      "options": {
+        "singleQuote": true
+      }
+    }]
 }

src/ServicePulse.Host/vue/env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vite/client" />
+
+export {};
+
+declare global {
+  interface Window {
+    defaultConfig: {
+      default_route: string;
+      base_url: string;
+      version: string;
+      service_control_url: string;
+      monitoring_urls: string;
+      showPendingRetry: boolean;
+    };
+  }
+}

src/ServicePulse.Host/vue/index.html

@@ -1,15 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script type="module" src="./js/app.constants.js"></script>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="text/javascript" src="./js/app.constants.js"></script>
     <title>ServicePulse</title>
-</head>
-<body>
+  </head>
+  <body>
     <div id="modalDisplay"></div>
     <div id="app"></div>
-    <script type="module" src="src/main.js"></script>
-</body>
+    <script type="module" src="src/main.ts"></script>
+  </body>
 </html>