[#2002] Add explicit return type annotations to TypeScript functions in *.vue files

frontend/.eslintrc.json

@@ -97,7 +97,9 @@
             "default": "generic",
             "readonly": "generic"
           }
-        ]
+        ],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["error"]
       }
     }
   ]

frontend/src/app.vue

@@ -38,7 +38,16 @@ const app = defineComponent({
   components: {
     LoadingOverlay,
   },
-  data() {
+  data(): {
+    repos: { [key: string]: Repo },
+    users: Array<Repo>
+      userUpdated: boolean,
+      loadingOverlayOpacity: number,
+      tabType: string,
+      creationDate: string,
+      reportGenerationTime: string,
+      errorMessages: { [key: string]: ErrorMessage }
+      } {
     return {
       repos: {} as { [key: string]: Repo },
       users: [] as Array<Repo>,
@@ -56,17 +65,17 @@ const app = defineComponent({
     ...mapState(['loadingOverlayCount', 'loadingOverlayMessage', 'isTabActive']),
   },
   watch: {
-    '$store.state.tabZoomInfo': function () {
+    '$store.state.tabZoomInfo': function (): void {
       if (this.$store.state.tabZoomInfo.isRefreshing) {
         return;
       }
       this.activateTab('zoom');
     },
-    '$store.state.tabAuthorshipInfo': function () {
+    '$store.state.tabAuthorshipInfo': function (): void {
       this.activateTab('authorship');
     },
   },
-  created() {
+  created(): void {
     try {
       window.decodeHash();
     } catch (error) {
@@ -76,7 +85,7 @@ const app = defineComponent({
   },
   methods: {
     // model functions //
-    updateReportZip(evt: Event) {
+    updateReportZip(evt: Event): void {
       this.users = [];
       const target = evt.target as HTMLInputElement;
       if (target.files === null) {
@@ -92,14 +101,14 @@ const app = defineComponent({
         .then(() => this.updateReportView());
     },
 
-    updateReportDir() {
+    updateReportDir(): void {
       window.REPORT_ZIP = null;
 
       this.users = [];
       this.updateReportView();
     },
 
-    async updateReportView() {
+    async updateReportView(): Promise<void> {
       this.$store.commit('updateLoadingOverlayMessage', loadingResourcesMessage);
       this.userUpdated = false;
       await this.$store.dispatch('incrementLoadingOverlayCountForceReload', 1);
@@ -131,7 +140,7 @@ const app = defineComponent({
         this.$store.commit('incrementLoadingOverlayCount', -1);
       }
     },
-    getUsers() {
+    getUsers(): void {
       const full: Array<Repo> = [];
       Object.keys(this.repos).forEach((repo) => {
         if (this.repos[repo].users) {
@@ -142,7 +151,7 @@ const app = defineComponent({
     },
 
     // handle opening of sidebar //
-    activateTab(tabName: string) {
+    activateTab(tabName: string): void {
       if (this.$refs.tabWrapper) {
         (this.$refs.tabWrapper as HTMLElement).scrollTop = 0;
       }
@@ -153,7 +162,7 @@ const app = defineComponent({
       window.encodeHash();
     },
 
-    renderAuthorShipTabHash(minDate: string, maxDate: string) {
+    renderAuthorShipTabHash(minDate: string, maxDate: string): void {
       const hash = window.hashParams;
       const info: AuthorshipInfo = {
         author: hash.tabAuthor,
@@ -173,7 +182,7 @@ const app = defineComponent({
       }
     },
 
-    renderZoomTabHash() {
+    renderZoomTabHash(): void {
       const hash = window.hashParams;
       const zoomInfo: ZoomInfo = {
         isRefreshing: true,
@@ -196,7 +205,7 @@ const app = defineComponent({
       }
     },
 
-    renderTabHash() {
+    renderTabHash(): void {
       const hash = window.hashParams;
       if (!hash.tabOpen) {
         return;
@@ -217,15 +226,15 @@ const app = defineComponent({
       }
     },
 
-    getRepoSenseHomeLink() {
+    getRepoSenseHomeLink(): string {
       const version = window.repoSenseVersion;
       if (!version) {
         return `${window.HOME_PAGE_URL}/RepoSense/`;
       }
       return `${window.HOME_PAGE_URL}`;
     },
 
-    getRepoLink() {
+    getRepoLink(): string | undefined {
       const { REPOS, hashParams } = window;
       const { location, branch } = REPOS[hashParams.tabRepo];
 

frontend/src/components/c-ramp.vue

@@ -84,7 +84,7 @@ export default defineComponent({
       default: false,
     },
   },
-  data() {
+  data(): {rampSize: number} {
     return {
       rampSize: 0.01 as number,
     };
@@ -100,16 +100,16 @@ export default defineComponent({
   },
 
   methods: {
-    getLink(commit: CommitResult) {
+    getLink(commit: CommitResult): string | undefined {
       return window.getCommitLink(commit.repoId, commit.hash);
     },
-    getContributions(commit: CommitResult | Commit) {
+    getContributions(commit: CommitResult | Commit): number {
       return commit.insertions + commit.deletions;
     },
-    isDeletesContribution(commit: CommitResult | Commit) {
+    isDeletesContribution(commit: CommitResult | Commit): boolean {
       return commit.insertions === 0 && commit.deletions > 0;
     },
-    getWidth(slice: CommitResult | Commit) {
+    getWidth(slice: CommitResult | Commit): number {
       // Check if slice contains 'isMergeCommit' attribute
       if ('isMergeCommit' in slice && slice.isMergeCommit) {
         return this.mergeCommitRampSize;
@@ -124,17 +124,17 @@ export default defineComponent({
       const newSize = 100 * (slice.insertions / +this.avgsize);
       return Math.max(newSize * this.rampSize, 0.5);
     },
-    getContributionMessageByCommit(slice: Commit, commit: CommitResult) {
+    getContributionMessageByCommit(slice: Commit, commit: CommitResult): string {
       return `[${slice.date}] ${commit.messageTitle}: +${commit.insertions} -${commit.deletions} lines `;
     },
-    getContributionMessage(slice: Commit) {
+    getContributionMessage(slice: Commit): string {
       let title = this.tframe === 'day'
           ? `[${slice.date}] Daily `
           : `[${slice.date} till ${slice.endDate}] Weekly `;
       title += `contribution: +${slice.insertions} -${slice.deletions} lines`;
       return title;
     },
-    openTabZoom(user: User, slice: Commit, evt: MouseEvent) {
+    openTabZoom(user: User, slice: Commit, evt: MouseEvent): void {
       // prevent opening of zoom tab when cmd/ctrl click
       if (window.isMacintosh ? evt.metaKey : evt.ctrlKey) {
         return;
@@ -171,27 +171,27 @@ export default defineComponent({
     },
 
     // position for commit granularity
-    getCommitPos(i: number, total: number) {
+    getCommitPos(i: number, total: number): number {
       return (((total - i - 1) * window.DAY_IN_MS) / total)
           / (this.getTotalForPos(this.sdate, this.udate) + window.DAY_IN_MS);
     },
     // position for day granularity
-    getSlicePos(date: string) {
+    getSlicePos(date: string): number {
       const total = this.getTotalForPos(this.sdate, this.udate);
       return (new Date(this.udate).valueOf() - new Date(date).valueOf()) / (total + window.DAY_IN_MS);
     },
 
     // get duration in miliseconds between 2 date
-    getTotalForPos(sinceDate: string, untilDate: string) {
+    getTotalForPos(sinceDate: string, untilDate: string): number {
       return new Date(untilDate).valueOf() - new Date(sinceDate).valueOf();
     },
-    getRampColor(commit: CommitResult, slice: Commit) {
+    getRampColor(commit: CommitResult, slice: Commit): number | '-deletes' {
       if (this.isDeletesContribution(commit)) {
         return '-deletes';
       }
       return this.getSliceColor(slice);
     },
-    getSliceColor(slice: Commit) {
+    getSliceColor(slice: Commit): number | '-deletes' {
       if (this.isDeletesContribution(slice)) {
         return '-deletes';
       }
@@ -203,13 +203,13 @@ export default defineComponent({
     },
 
     // Prevent browser from switching to new tab when clicking ramp
-    rampClick(evt: MouseEvent) {
+    rampClick(evt: MouseEvent): void {
       const isKeyPressed = window.isMacintosh ? evt.metaKey : evt.ctrlKey;
       if (isKeyPressed) {
         evt.preventDefault();
       }
     },
-    getReportLink() {
+    getReportLink(): string | undefined {
       if (this.isWidgetMode) {
         const url = window.location.href;
         const regexToRemoveWidget = /([?&])((chartIndex|chartGroupIndex)=\d+)/g;

frontend/src/components/c-resizer.vue

@@ -34,9 +34,9 @@ const GUIDE_BAR_WIDTH = 2;
  *  parameters, i.e. an event of type MouseEvent.
  */
 // eslint-disable-next-line no-unused-vars
-const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown) => {
+const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown): ((event: MouseEvent) => void) => {
   let lastCalled = 0;
-  return (event: MouseEvent) => {
+  return (event: MouseEvent): void => {
     if (Date.now() - lastCalled > delay) {
       lastCalled = Date.now();
       handler(event);
@@ -47,7 +47,11 @@ const throttledEvent = (delay: number, handler: (event: MouseEvent) => unknown)
 export default defineComponent({
   name: 'c-resizer',
 
-  data() {
+  data(): {
+    guideWidth: number,
+    flexWidth: number,
+    isResizing: boolean
+    } {
     return {
       guideWidth: (0.5 * window.innerWidth - (GUIDE_BAR_WIDTH / 2)) / window.innerWidth,
       flexWidth: 0.5,
@@ -56,23 +60,23 @@ export default defineComponent({
   },
 
   computed: {
-    appStyles() {
+    appStyles(): string {
       return this.isResizing
         ? 'user-select: none; cursor: col-resize;'
         : '';
     },
 
-    guideStyles() {
+    guideStyles(): string {
       return this.isResizing
         ? `display: block; right: ${this.guideWidth * 100}%;`
         : '';
     },
 
-    rightContainerStyles() {
+    rightContainerStyles(): string {
       return `flex: 0 0 ${this.flexWidth * 100}%;`;
     },
 
-    mouseMove() {
+    mouseMove(): Function {
       if (this.isResizing) {
         return throttledEvent(25, (event: MouseEvent) => {
           this.guideWidth = (
@@ -94,17 +98,17 @@ export default defineComponent({
   },
 
   methods: {
-    registerMouseMove() {
+    registerMouseMove(): void {
       this.isResizing = true;
     },
 
-    deregisterMouseMove() {
+    deregisterMouseMove(): void {
       this.isResizing = false;
       this.flexWidth = (this.guideWidth * window.innerWidth + (GUIDE_BAR_WIDTH / 2))
         / window.innerWidth;
     },
 
-    closeTab() {
+    closeTab(): void {
       this.$store.commit('updateTabState', false);
     },
   },

frontend/src/components/c-segment-collection.vue

@@ -24,13 +24,15 @@ export default defineComponent({
       required: true,
     },
   },
-  data() {
+  data(): {
+    isRendered: boolean,
+    } {
     return {
       isRendered: false,
     };
   },
   methods: {
-    visibilityChanged(isVisible: boolean) {
+    visibilityChanged(isVisible: boolean): void {
       if (isVisible) {
         this.isRendered = true;
       }

frontend/src/components/c-segment.vue

@@ -49,7 +49,11 @@ export default defineComponent({
       required: true,
     },
   },
-  data() {
+  data(): {
+    isOpen: boolean,
+    canOpen: boolean,
+    transparencyValue: string,
+    } {
     return {
       isOpen: (this.segment.knownAuthor !== null) || this.segment.lines.length < 5 as boolean,
       canOpen: (this.segment.knownAuthor === null) && this.segment.lines.length > 4 as boolean,
@@ -62,7 +66,7 @@ export default defineComponent({
     }),
   },
   methods: {
-    toggleCode() {
+    toggleCode(): void {
       this.isOpen = !this.isOpen;
     },
   },