Merged in feature/enable-typescript (pull request #99)

Feature/enable typescript

Approved-by: Christian Cueni

client/build/webpack.base.conf.js

@@ -44,23 +44,13 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'],
+    extensions: ['.js', '.ts', '.vue', '.json', '.gql', '.graphql', '.scss'],
     alias: {
       '@': resolve('src'),
       styles: resolve('src/styles'),
       gql: resolve('src/graphql/gql'),
       // vue: '@vue/compat',
     },
-    // we probably don't need this anymore
-    // fallback: {
-    //   // used to be in node: {setImmediate: false,...}
-    //   setImmediate: false,
-    //   dgram: false,
-    //   fs: false,
-    //   net: false,
-    //   tls: false,
-    //   child_process: false,
-    // },
   },
   module: {
     rules: [

client/package-lock.json

@@ -14092,6 +14092,33 @@
       "integrity": "sha512-zCVHv3p7zvUmen9zce9l965ZrI6rMbrm2/oqGaTerVYOaYskl/cVgTG/L7iIToTIpI7onk/f6tu8hxPXZdyy/g==",
       "dev": true
     },
+    "mock-require": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/mock-require/-/mock-require-3.0.3.tgz",
+      "integrity": "sha512-lLzfLHcyc10MKQnNUCv7dMcoY/2Qxd6wJfbqCcVk3LDb8An4hF6ohk5AztrvgKhJCqj36uyzi/p5se+tvyD+Wg==",
+      "dev": true,
+      "requires": {
+        "get-caller-file": "^1.0.2",
+        "normalize-path": "^2.1.1"
+      },
+      "dependencies": {
+        "get-caller-file": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+          "dev": true
+        },
+        "normalize-path": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+          "dev": true,
+          "requires": {
+            "remove-trailing-separator": "^1.0.1"
+          }
+        }
+      }
+    },
     "mrmime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.0.tgz",
@@ -19910,6 +19937,17 @@
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
       "dev": true
     },
+    "typescript-tslint-plugin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typescript-tslint-plugin/-/typescript-tslint-plugin-1.0.1.tgz",
+      "integrity": "sha512-akj+J1FDoEv8y5uSs6f6SfkY3ywnhnTifDvOmwejSs4U+a18p73YoetrllKCDf14iq0VMNwIgCxNY/v88K6QYg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4",
+        "mock-require": "^3.0.3",
+        "vscode-languageserver": "^5.2.1"
+      }
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -20410,6 +20448,44 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "vscode-jsonrpc": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-4.0.0.tgz",
+      "integrity": "sha512-perEnXQdQOJMTDFNv+UF3h1Y0z4iSiaN9jIlb0OqIYgosPCZGYh/MCUlkFtV2668PL69lRDO32hmvL2yiidUYg==",
+      "dev": true
+    },
+    "vscode-languageserver": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-5.2.1.tgz",
+      "integrity": "sha512-GuayqdKZqAwwaCUjDvMTAVRPJOp/SLON3mJ07eGsx/Iq9HjRymhKWztX41rISqDKhHVVyFM+IywICyZDla6U3A==",
+      "dev": true,
+      "requires": {
+        "vscode-languageserver-protocol": "3.14.1",
+        "vscode-uri": "^1.0.6"
+      }
+    },
+    "vscode-languageserver-protocol": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.14.1.tgz",
+      "integrity": "sha512-IL66BLb2g20uIKog5Y2dQ0IiigW0XKrvmWiOvc0yXw80z3tMEzEnHjaGAb3ENuU7MnQqgnYJ1Cl2l9RvNgDi4g==",
+      "dev": true,
+      "requires": {
+        "vscode-jsonrpc": "^4.0.0",
+        "vscode-languageserver-types": "3.14.0"
+      }
+    },
+    "vscode-languageserver-types": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.14.0.tgz",
+      "integrity": "sha512-lTmS6AlAlMHOvPQemVwo3CezxBp0sNB95KNPkqp3Nxd5VFEnuG1ByM0zlRWos0zjO3ZWtkvhal0COgiV1xIA4A==",
+      "dev": true
+    },
+    "vscode-uri": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz",
+      "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==",
+      "dev": true
+    },
     "vue": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",

client/package.json

@@ -129,6 +129,7 @@
     "mock-apollo-client": "^1.2.0",
     "ts-loader": "^8.3.0",
     "typescript": "^4.5.4",
+    "typescript-tslint-plugin": "^1.0.1",
     "vue-jest": "^3.0.4",
     "webpack-cli": "^4.9.1"
   }

client/src/components/content-block-form/ContentBlockForm.vue

@@ -118,28 +118,30 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-  import Toggle from '@/components/ui/Toggle';
+  import Vue, {PropType} from 'vue';
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+  import Toggle from '@/components/ui/Toggle.vue';
-  import InputWithLabel from '@/components/ui/InputWithLabel';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
-  import AddContentLink from '@/components/content-block-form/AddContentLink';
+  import InputWithLabel from '@/components/ui/InputWithLabel.vue';
+  import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
 
-  import ContentElement from '@/components/content-block-form/ContentElement';
+  import ContentElement from '@/components/content-block-form/ContentElement.vue';
-  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations';
+  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations.js';
 
-  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers';
+  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+  import {ContentBlock, numberOrUndefined} from "@/types";
 
   // TODO: refactor this file, it's huuuuuge!
 
-  export default {
+  export default Vue.extend({
     props: {
       title: {
         type: String,
         default: '',
       },
       contentBlock: {
-        type: Object,
+        type: Object as PropType<ContentBlock>,
         required: true,
       },
     },
@@ -163,12 +165,12 @@
       };
     },
     computed: {
-      isValid() {
+      isValid(): boolean {
         return this.localContentBlock.title > '';
       },
     },
     methods: {
-      update(index, element, parent) {
+      update(index: number, element: any, parent: numberOrUndefined = undefined) {
         if (parent === undefined) {
           // element is top level
           this.localContentBlock.contents = [
@@ -193,7 +195,7 @@
           ];
         }
       },
-      addBlock(afterOuterIndex, innerIndex) {
+      addBlock(afterOuterIndex: number, innerIndex: numberOrUndefined = undefined) {
         if (innerIndex !== undefined) {
           const block = this.localContentBlock.contents[afterOuterIndex];
           this.localContentBlock.contents = [
@@ -223,7 +225,7 @@
           ];
         }
       },
-      remove(outer, inner, askForConfirmation = true) {
+      remove(outer: number, inner: numberOrUndefined = undefined, askForConfirmation = true) {
         if(askForConfirmation) {
           this.$modal.open('confirm')
             .then(() => {
@@ -236,7 +238,7 @@
           this.executeRemoval(outer, inner);
         }
       },
-      shift(outer, inner, distance) {
+      shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
         if (inner === undefined) {
           this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
         } else {
@@ -249,7 +251,7 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      top(outer, inner) {
+      top(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
         } else {
@@ -262,13 +264,13 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      up(outer, inner) {
+      up(outer: number, inner: numberOrUndefined = undefined) {
         this.shift(outer, inner, -1);
       },
-      down(outer, inner) {
+      down(outer: number, inner: numberOrUndefined = undefined) {
         this.shift(outer, inner, 1);
       },
-      bottom(outer, inner) {
+      bottom(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           const maxIndex = this.localContentBlock.contents.length - 1;
           this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
@@ -283,7 +285,7 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      executeRemoval(outer, inner) {
+      executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           // not a list item container, just remove the element from the outer array
           this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
@@ -307,12 +309,12 @@
           }
         }
       },
-      save(contentBlock) {
+      save(contentBlock: ContentBlock) {
         this.$emit('save', contentBlock);
       },
     },
 
-  };
+  });
 </script>
 
 <style lang="scss">

client/src/plugins/modal.d.ts

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+
+interface Modal {
+  confirm: (res: any)  => void,
+  open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>,
+  cancel: () => void
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $modal: Modal
+  }
+}

client/src/shims-vue.d.ts

@@ -0,0 +1,13 @@
+// from https://stackoverflow.com/questions/64213461/vuejs-typescript-cannot-find-module-components-navigation-or-its-correspon
+declare module "*.vue" {
+  import Vue from 'vue';
+  export default Vue;
+}
+
+// for Vue 3
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue'
+//   const component: DefineComponent<{}, {}, any>
+//   export default component
+// }
+//

client/src/types/index.ts

@@ -0,0 +1,11 @@
+export type numberOrUndefined = number | undefined;
+
+type types = 'task' | 'normal' | 'base_communication' | 'base_society' | 'base_interdisciplinary';
+
+export interface ContentBlock {
+  title: string;
+  contents: any[];
+  id: string | undefined;
+  isAssignment: boolean;
+  type: types;
+}

client/tsconfig.json

@@ -4,17 +4,18 @@
     "checkJs": false,
     "resolveJsonModule": true,
     "lib": ["es2017", "dom"],
-    "target": "ES5",
+    "target": "es5",
     "module": "es2015",
     "strict": true,
     "moduleResolution": "node",
-    "baseUrl": "src",
+    "baseUrl": "./src",
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
     },
     "types": [
       "cypress"
     ],
+    "plugins": [{"name":  "typescript-tslint-plugin"}]
   },
   "include": [
     "**/*.*"