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

Feature/enable typescript Approved-by: Christian Cueni
2022-02-22 09:12:48 +00:00 · 2022-02-22 09:12:48 +00:00 · 198c9d75cf
parent d4e9464503 cefada2344
commit 198c9d75cf
8 changed files with 144 additions and 37 deletions
--- a/client/build/webpack.base.conf.js
+++ b/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: [
--- a/client/package-lock.json
+++ b/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",
--- a/client/package.json
+++ b/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"
  }
--- a/client/src/components/content-block-form/ContentBlockForm.vue
+++ b/client/src/components/content-block-form/ContentBlockForm.vue
@ -118,28 +118,30 @@
  </div>
 </template>

-<script>
-  import Toggle from '@/components/ui/Toggle';
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-  import InputWithLabel from '@/components/ui/InputWithLabel';
-  import AddContentLink from '@/components/content-block-form/AddContentLink';
+<script lang="ts">
+  import Vue, {PropType} from 'vue';
+  import Toggle from '@/components/ui/Toggle.vue';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
+  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 {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations';
+  import ContentElement from '@/components/content-block-form/ContentElement.vue';
+  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations.js';

-  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
+  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">
--- a/client/src/plugins/modal.d.ts
+++ b/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
+  }
+}
--- a/client/src/shims-vue.d.ts
+++ b/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
+// }
+//
--- a/client/src/types/index.ts
+++ b/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;
+}
--- a/client/tsconfig.json
+++ b/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": [
    "**/*.*"