Fix all remaining vti errors and adopt VTI. Close #175. (#196)

.github/workflows/ci-check.yml

@@ -17,6 +17,6 @@ jobs:
       - name: Run Linter
         run: npm run lint
       - name: Type Check
-        run: npm run tsc
+        run: npm run type-check
       - name: Test
         run: npm run test

package.json

@@ -11,6 +11,7 @@
     "req-gen": "node requirement-generator-dist/generator.js",
     "lint": "vue-cli-service lint",
     "tsc": "tsc",
+    "type-check": "tsc && vti diagnostics",
     "build:staging": "vue-cli-service build --mode staging",
     "format": "prettier --write \"**/*.{js,ts,css,html}\" src/App.vue \"src/components/{BottomBar*,Caution,Confirmation,Footer,Login,NavBar,TopBar,Semester*,Modals/SemesterModal,Modals/TourWindow,Modals/*Semester}.vue\"",
     "format:check": "prettier --check \"**/*.{js,ts,css,html}\" src/App.vue \"src/components/{BottomBar*,Caution,Confirmation,Footer,Login,NavBar,TopBar,Semester*,Modals/SemesterModal,Modals/TourWindow,Modals/*Semester}.vue\"",
@@ -61,6 +62,7 @@
     "prettier": "^2.1.2",
     "sass-loader": "^8.0.2",
     "typescript": "~3.7.5",
+    "vti": "0.0.17",
     "vue-template-compiler": "^2.6.11"
   },
   "prettier": {

src/components/BottomBarTabView.vue

@@ -3,12 +3,12 @@
     <div class="bottombartabview-bottomCourseWrapper">
       <div
         v-for="(bottomCourse, index) in bottomCourses"
-        :key="bottomCourse.id"
+        :key="index"
         class="bottombartabview-courseWrapper"
       >
         <bottombartab
           v-bind="bottomCourse"
-          :id="bottomCourse.id"
+          :id="index"
           :subject="bottomCourse.subject"
           :number="bottomCourse.number"
           :color="bottomCourse.color"
@@ -40,8 +40,8 @@
       <div v-if="seeMoreOpen" class="bottombarSeeMoreOptions">
         <div class="seeMoreCourse-content">
           <div
-            v-for="seeMoreCourse in seeMoreCourses"
-            :key="seeMoreCourse.id"
+            v-for="(seeMoreCourse, index) in seeMoreCourses"
+            :key="index"
             class="seeMoreCourse-option"
           >
             <span class="seeMoreCourse-option-text" @click="moveToBottomBar(seeMoreCourse)"

src/components/Course.vue

@@ -61,7 +61,7 @@ import { clickOutside } from '@/utilities';
 
 Vue.component('coursemenu', CourseMenu);
 
-export default {
+export default Vue.extend({
   props: {
     courseObj: Object,
     subject: String,
@@ -163,7 +163,7 @@ export default {
   directives: {
     'click-outside': clickOutside
   }
-};
+});
 </script>
 
 <style scoped lang="scss">

src/components/Modals/CourseMenu.vue

@@ -15,8 +15,8 @@
 
         <div v-if="displayColors" class="courseMenu-content courseMenu-colors" :class="{'courseMenu-colors--left': isLeft }">
           <div
-            v-for="color in colors"
-            :key="color.id"
+            v-for="(color, index) in colors"
+            :key="index"
             class="courseMenu-section"
             @click="colorCourse(color)"
           >
@@ -71,7 +71,7 @@ import Vue from 'vue';
 import Course from '@/components/Course.vue';
 import { coursesColorSet } from '../../assets/constants/colors';
 
-export default {
+export default Vue.extend({
   props: {
     getCreditRange: Array,
     semId: Number,
@@ -139,7 +139,7 @@ export default {
       return creditArray;
     }
   }
-};
+});
 </script>
 
 <style scoped lang="scss">

src/components/Modals/Modal.vue

@@ -35,7 +35,7 @@ Vue.component('newCourse', NewCourse);
 Vue.component('newSemester', NewSemester);
 Vue.component('editSemester', EditSemester);
 
-export default {
+export default Vue.extend({
   data() {
     return {
       isOnboard: false,
@@ -168,7 +168,7 @@ export default {
       this.year = year;
     }
   }
-};
+});
 </script>
 
 <style lang="scss">

src/components/Modals/NewCourse.vue

@@ -8,9 +8,10 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import coursesJSON from '../../assets/courses/courses.json';
 
-export default {
+export default Vue.extend({
   props: {
     isOnboard: Boolean,
     semesterID: Number,
@@ -176,7 +177,7 @@ export default {
       if (this.$refs[`dropdown-${this.semesterID}`].value) this.$emit('addItem', this.semesterID);
     }
   }
-};
+});
 </script>
 
 <style lang="scss">

src/components/Modals/Onboarding.vue

@@ -63,7 +63,7 @@ Vue.component('onboardingTransfer', OnboardingTransfer);
 const placeholderText = 'Select one';
 const FINAL_PAGE = 3;
 
-export default {
+export default Vue.extend({
   props: {
     isEditingProfile: Boolean,
     user: Object
@@ -221,7 +221,7 @@ export default {
       this.$emit('cancelOnboarding');
     }
   }
-};
+});
 </script>
 <style scoped lang="scss">
   @import '@/components/Modals/Onboarding.scss';

src/components/Modals/OnboardingBasic.vue

@@ -176,14 +176,14 @@
 </template>
 
 <script>
-
+import Vue from 'vue';
 import reqsData from '@/requirements/typed-requirement-json';
 import { clickOutside } from '@/utilities';
 import { inactiveGray, yuxuanBlue, lightPlaceholderGray } from '@/assets/scss/_variables.scss';
 
 const placeholderText = 'Select one';
 
-export default {
+export default Vue.extend({
   props: {
     user: Object
   },
@@ -539,7 +539,7 @@ export default {
       this.displayOptions.minor.push(minor);
     }
   }
-};
+});
 
 </script>
 

src/components/Modals/OnboardingTransfer.vue

@@ -183,7 +183,7 @@
 </template>
 
 <script>
-
+import Vue from 'vue';
 import reqsData from '@/requirements/data/exams/ExamCredit';
 import coursesJSON from '../../assets/courses/courses.json';
 import NewCourse from '@/components/Modals/NewCourse.vue';
@@ -195,7 +195,7 @@ Vue.component('newCourse', NewCourse);
 const placeholderText = 'Select one';
 const placeholderColor = lightPlaceholderGray;
 
-export default {
+export default Vue.extend({
   props: {
     user: Object
   },
@@ -539,7 +539,7 @@ export default {
         });
     }
   }
-};
+});
 
 </script>