[#1632] Frontend: Add TypeScript

frontend/.eslintrc.json

@@ -1,31 +1,53 @@
 {
-    "env": {
-        "browser": true
-    },
-    "extends": [
-        "airbnb-base",
-        // "plugin:vue/base"
-        "plugin:vue/recommended"
+  "env": {
+    "browser": true
+  },
+  "extends": [
+    "airbnb-base",
+    "plugin:vue/recommended",
+    "@vue/typescript"
+  ],
+  "rules": {
+    "vue/component-definition-name-casing": [
+      "error",
+      "kebab-case"
     ],
-    "rules": {
-        "vue/component-definition-name-casing": ["error", "kebab-case"],
-        "vue/order-in-components": 0,  // Should remove eventually
-        "vue/require-prop-types": 0, // Should remove eventually
-        "no-param-reassign": 0,
-        "arrow-parens": ["error", "always"],
-        "indent": ["error", 2, {
-            "MemberExpression": 2,
-            "CallExpression": { "arguments": 2 },
-            "ArrayExpression": 2,
-            "ignoredNodes": [
-                "ConditionalExpression"
-            ]
-        }],
-        "prefer-destructuring": 0,
-        // "sort-imports": ["error", { "ignoreDeclarationSort": true }],
-        "func-names": ["error", "as-needed"],
-        "no-alert": 0,
-        "linebreak-style": 0,
-        "max-len": ["error", { "code": 130 }]
-    }
+    "vue/order-in-components": 0,
+    "vue/require-prop-types": 0,
+    "no-param-reassign": 0,
+    "arrow-parens": [
+      "error",
+      "always"
+    ],
+    "indent": [
+      "error",
+      2,
+      {
+        "MemberExpression": 2,
+        "CallExpression": {
+          "arguments": 2
+        },
+        "ArrayExpression": 2,
+        "ignoredNodes": [
+          "ConditionalExpression"
+        ]
+      }
+    ],
+    "prefer-destructuring": 0,
+    "func-names": [
+      "error",
+      "as-needed"
+    ],
+    "no-alert": 0,
+    "linebreak-style": 0,
+    "max-len": [
+      "error",
+      {
+        "code": 130
+      }
+    ]
+  },
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  }
 }

frontend/.pug-lintrc.json

@@ -17,7 +17,3 @@
   "validateDivTags": true,
   "validateIndentation": 2
 }
- /**
-  * TODO
-  * Add rule for line wraps when available
-  */

frontend/package.json

@@ -2,29 +2,17 @@
   "name": "reposense",
   "version": "1.0.0",
   "description": "[![Build Status](https://travis-ci.org/reposense/RepoSense.svg?branch=master)](https://travis-ci.org/reposense/RepoSense) [![Build status](https://ci.appveyor.com/api/projects/status/gsbkj5qby3pjd6nw/branch/master?svg=true)](https://ci.appveyor.com/project/eugenepeh/reposense/branch/master)",
-  "main": "index.js",
-  "directories": {
-    "doc": "docs"
-  },
+  "author": "",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "serveOpen": "vue-cli-service serve --open",
+    "build": "vue-cli-service build",
     "lint": "eslint src/**/*.{js,vue} cypress/tests/**/*.js cypress/support.js && stylelint ./src/**/*.{vue,scss} && npm run puglint",
+    "devbuild": "vue-cli-service build --mode development",
     "lintfix": "eslint --fix src/**/*.{js,vue} cypress/tests/**/*.js cypress/support.js && stylelint --fix ./src/**/*.{vue,scss}",
     "puglint": "pug-lint-vue src",
-    "build": "vue-cli-service build",
-    "devbuild": "vue-cli-service build --mode development"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/reposense/RepoSense.git"
-  },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/reposense/RepoSense/issues"
+    "serveOpen": "vue-cli-service serve --open"
   },
-  "homepage": "https://github.com/reposense/RepoSense#readme",
+  "main": "index.js",
   "dependencies": {
     "@fontsource/titillium-web": "^4.5.3",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
@@ -44,10 +32,14 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
     "@vue/cli-service": "~4.5.15",
     "@vue/compiler-sfc": "^3.2.30",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^13.0.0",
@@ -62,6 +54,19 @@
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-order": "^3.0.1",
     "stylelint-scss": "^3.18.0",
-    "stylelint-webpack-plugin": "^2.1.1"
+    "stylelint-webpack-plugin": "^2.1.1",
+    "typescript": "~4.5.5"
+  },
+  "bugs": {
+    "url": "https://github.com/reposense/RepoSense/issues"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "homepage": "https://github.com/reposense/RepoSense#readme",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reposense/RepoSense.git"
   }
 }

frontend/src/main.js → frontend/src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp, DirectiveBinding } from 'vue';
 import { dom } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import hljs from 'highlight.js';
@@ -21,7 +21,7 @@ dom.watch();
 const app = createApp(App);
 
 app.directive('hljs', {
-  mounted: (ele, binding) => {
+  mounted: (ele: any, binding: DirectiveBinding) => {
     const element = ele;
     element.className = binding.value.split('.').pop();
 

frontend/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

frontend/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

frontend/vue.config.js

@@ -3,7 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
 module.exports = {
   pages: {
     index: {
-      entry: 'src/main.js',
+      entry: 'src/main.ts',
       title: 'RepoSense Report',
     },
   },
@@ -31,13 +31,11 @@ module.exports = {
     config.module
         .rule('vue')
         .use('vue-loader')
-        .tap(options => {
-          return {
-            ...options,
-            compilerOptions: {
-              whitespace: 'preserve',
-            }
-          }
-        })
+        .tap((options) => ({
+          ...options,
+          compilerOptions: {
+            whitespace: 'preserve',
+          },
+        }));
   },
 };