[#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;
  },
  },