Fix a number of typescript errors

web_src/js/features/repo-branch.ts

@@ -11,7 +11,7 @@ function initRepoCreateBranchButton() {
   for (const el of document.querySelectorAll('.show-create-branch-modal')) {
     el.addEventListener('click', () => {
       const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
-      const modalForm = document.querySelector(modalFormName);
+      const modalForm = document.querySelector<HTMLFormElement>(modalFormName);
       if (!modalForm) return;
       modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
 
@@ -29,7 +29,7 @@ function initRepoRenameBranchButton() {
       const target = el.getAttribute('data-modal');
       const modal = document.querySelector(target);
       const oldBranchName = el.getAttribute('data-old-branch-name');
-      modal.querySelector('input[name=from]').value = oldBranchName;
+      modal.querySelector<HTMLInputElement>('input[name=from]').value = oldBranchName;
 
       // display the warning that the branch which is chosen is the default branch
       const warn = modal.querySelector('.default-branch-warning');

web_src/js/features/repo-code.ts

@@ -8,7 +8,7 @@ import {toAbsoluteUrl} from '../utils.ts';
 export const singleAnchorRegex = /^#(L|n)([1-9][0-9]*)$/;
 export const rangeAnchorRegex = /^#(L[1-9][0-9]*)-(L[1-9][0-9]*)$/;
 
-function changeHash(hash) {
+function changeHash(hash: string) {
   if (window.history.pushState) {
     window.history.pushState(null, null, hash);
   } else {
@@ -24,7 +24,7 @@ function getLineEls() {
   return document.querySelectorAll(`.code-view td.lines-code${isBlame() ? '.blame-code' : ''}`);
 }
 
-function selectRange($linesEls, $selectionEndEl, $selectionStartEls) {
+function selectRange($linesEls, $selectionEndEl, $selectionStartEls?) {
   for (const el of $linesEls) {
     el.closest('tr').classList.remove('active');
   }
@@ -34,15 +34,15 @@ function selectRange($linesEls, $selectionEndEl, $selectionStartEls) {
   const copyPermalink = document.querySelector('a.copy-line-permalink');
   const viewGitBlame = document.querySelector('a.view_git_blame');
 
-  const updateIssueHref = function (anchor) {
+  const updateIssueHref = function (anchor: string) {
     if (!refInNewIssue) return;
     const urlIssueNew = refInNewIssue.getAttribute('data-url-issue-new');
     const urlParamBodyLink = refInNewIssue.getAttribute('data-url-param-body-link');
     const issueContent = `${toAbsoluteUrl(urlParamBodyLink)}#${anchor}`; // the default content for issue body
     refInNewIssue.setAttribute('href', `${urlIssueNew}?body=${encodeURIComponent(issueContent)}`);
   };
 
-  const updateViewGitBlameFragment = function (anchor) {
+  const updateViewGitBlameFragment = function (anchor: string) {
     if (!viewGitBlame) return;
     let href = viewGitBlame.getAttribute('href');
     href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`;
@@ -52,7 +52,7 @@ function selectRange($linesEls, $selectionEndEl, $selectionStartEls) {
     viewGitBlame.setAttribute('href', href);
   };
 
-  const updateCopyPermalinkUrl = function (anchor) {
+  const updateCopyPermalinkUrl = function (anchor: string) {
     if (!copyPermalink) return;
     let link = copyPermalink.getAttribute('data-url');
     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
@@ -142,13 +142,7 @@ export function initRepoCodeView() {
         });
       }
       selectRange($(linesEls), $(selectedEls), from ? $(from) : null);
-
-      if (window.getSelection) {
-        window.getSelection().removeAllRanges();
-      } else {
-        document.selection.empty();
-      }
-
+      window.getSelection().removeAllRanges();
       showLineButton();
     });
 

web_src/js/features/repo-common.ts

@@ -64,7 +64,7 @@ export function initRepoCloneLink() {
   });
 }
 
-export function initRepoCommonBranchOrTagDropdown(selector) {
+export function initRepoCommonBranchOrTagDropdown(selector: string) {
   $(selector).each(function () {
     const $dropdown = $(this);
     $dropdown.find('.reference.column').on('click', function () {
@@ -75,7 +75,7 @@ export function initRepoCommonBranchOrTagDropdown(selector) {
   });
 }
 
-export function initRepoCommonFilterSearchDropdown(selector) {
+export function initRepoCommonFilterSearchDropdown(selector: string) {
   const $dropdown = $(selector);
   if (!$dropdown.length) return;
 

web_src/js/features/repo-diff-commit.ts

@@ -1,7 +1,7 @@
 import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
 
-async function loadBranchesAndTags(area, loadingButton) {
+async function loadBranchesAndTags(area: Element, loadingButton: Element) {
   loadingButton.classList.add('disabled');
   try {
     const res = await GET(loadingButton.getAttribute('data-fetch-url'));
@@ -15,15 +15,15 @@ async function loadBranchesAndTags(area, loadingButton) {
   }
 }
 
-function addTags(area, tags) {
+function addTags(area: Element, tags: Array<Record<string, any>>) {
   const tagArea = area.querySelector('.tag-area');
   toggleElem(tagArea.parentElement, tags.length > 0);
   for (const tag of tags) {
     addLink(tagArea, tag.web_link, tag.name);
   }
 }
 
-function addBranches(area, branches, defaultBranch) {
+function addBranches(area: Element, branches: Array<Record<string, any>>, defaultBranch: string) {
   const defaultBranchTooltip = area.getAttribute('data-text-default-branch-tooltip');
   const branchArea = area.querySelector('.branch-area');
   toggleElem(branchArea.parentElement, branches.length > 0);
@@ -33,7 +33,7 @@ function addBranches(area, branches, defaultBranch) {
   }
 }
 
-function addLink(parent, href, text, tooltip) {
+function addLink(parent: Element, href: string, text: string, tooltip?: string) {
   const link = document.createElement('a');
   link.classList.add('muted', 'tw-px-1');
   link.href = href;

web_src/js/features/repo-graph.ts

@@ -22,7 +22,7 @@ export function initRepoGraphGit() {
     for (const link of document.querySelectorAll('.pagination a')) {
       const href = link.getAttribute('href');
       if (!href) continue;
-      const url = new URL(href, window.location);
+      const url = new URL(href, window.location.href);
       const params = url.searchParams;
       params.set('mode', 'monochrome');
       url.search = `?${params.toString()}`;
@@ -38,7 +38,7 @@ export function initRepoGraphGit() {
     for (const link of document.querySelectorAll('.pagination a')) {
       const href = link.getAttribute('href');
       if (!href) continue;
-      const url = new URL(href, window.location);
+      const url = new URL(href, window.location.href);
       const params = url.searchParams;
       params.delete('mode');
       url.search = `?${params.toString()}`;
@@ -53,7 +53,7 @@ export function initRepoGraphGit() {
       window.history.replaceState({}, '', window.location.pathname);
     }
   });
-  const url = new URL(window.location);
+  const url = new URL(window.location.href);
   const params = url.searchParams;
   const updateGraph = () => {
     const queryString = params.toString();
@@ -103,15 +103,15 @@ export function initRepoGraphGit() {
     },
     onAdd(toAdd) {
       if (toAdd === '...flow-hide-pr-refs') {
-        params.set('hide-pr-refs', true);
+        params.set('hide-pr-refs', 'true');
       } else {
         params.append('branch', toAdd);
       }
       updateGraph();
     },
   });
 
-  graphContainer.addEventListener('mouseenter', (e) => {
+  graphContainer.addEventListener('mouseenter', (e: MouseEvent & {target: HTMLElement}) => {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
@@ -132,7 +132,7 @@ export function initRepoGraphGit() {
     }
   });
 
-  graphContainer.addEventListener('mouseleave', (e) => {
+  graphContainer.addEventListener('mouseleave', (e: MouseEvent & {target: HTMLElement}) => {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;

web_src/js/features/repo-home.ts

@@ -1,7 +1,7 @@
 import {stripTags} from '../utils.ts';
 import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
-import {showErrorToast} from '../modules/toast.ts';
+import {showErrorToast, type Toast} from '../modules/toast.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
@@ -13,7 +13,7 @@ export function initRepoTopicBar() {
   const editDiv = document.querySelector('#topic_edit');
   const viewDiv = document.querySelector('#repo-topics');
   const topicDropdown = editDiv.querySelector('.ui.dropdown');
-  let lastErrorToast;
+  let lastErrorToast: Toast;
 
   mgrBtn.addEventListener('click', () => {
     hideElem(viewDiv);

web_src/js/features/repo-issue-pr-status.ts

@@ -1,7 +1,7 @@
 export function initRepoPullRequestCommitStatus() {
   for (const btn of document.querySelectorAll('.commit-status-hide-checks')) {
     const panel = btn.closest('.commit-status-panel');
-    const list = panel.querySelector('.commit-status-list');
+    const list = panel.querySelector<HTMLElement>('.commit-status-list');
     btn.addEventListener('click', () => {
       list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle
       btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');

web_src/js/features/repo-issue.ts

@@ -15,7 +15,7 @@ const {appSubUrl} = window.config;
 /**
  * @param {HTMLElement} item
  */
-function excludeLabel(item) {
+function excludeLabel(item: Element) {
   const href = item.getAttribute('href');
   const id = item.getAttribute('data-label-id');
 
@@ -80,7 +80,7 @@ export function initRepoIssueLabelFilter() {
 
 export function initRepoIssueCommentDelete() {
   // Delete comment
-  document.addEventListener('click', async (e) => {
+  document.addEventListener('click', async (e: MouseEvent & {target: HTMLElement}) => {
     if (!e.target.matches('.delete-comment')) return;
     e.preventDefault();
 
@@ -155,7 +155,7 @@ export function initRepoIssueDependencyDelete() {
 
 export function initRepoIssueCodeCommentCancel() {
   // Cancel inline code comment
-  document.addEventListener('click', (e) => {
+  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
     if (!e.target.matches('.cancel-code-comment')) return;
 
     const form = e.target.closest('form');
@@ -294,7 +294,7 @@ export function initRepoIssueWipTitle() {
 export function initRepoIssueComments() {
   if (!$('.repository.view.issue .timeline').length) return;
 
-  document.addEventListener('click', (e) => {
+  document.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
     const urlTarget = document.querySelector(':target');
     if (!urlTarget) return;
 
@@ -446,7 +446,7 @@ export function initRepoPullRequestReview() {
 
 export function initRepoIssueReferenceIssue() {
   // Reference issue
-  $(document).on('click', '.reference-issue', function (event) {
+  $(document).on('click', '.reference-issue', function (e) {
     const target = this.getAttribute('data-target');
     const content = document.querySelector(`#${target}`)?.textContent ?? '';
     const poster = this.getAttribute('data-poster-username');
@@ -456,7 +456,7 @@ export function initRepoIssueReferenceIssue() {
     const textarea = modal.querySelector('textarea[name="content"]');
     textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
     $(modal).modal('show');
-    event.preventDefault();
+    e.preventDefault();
   });
 }
 
@@ -540,7 +540,7 @@ export function initRepoIssueTitleEdit() {
 }
 
 export function initRepoIssueBranchSelect() {
-  document.querySelector('#branch-select')?.addEventListener('click', (e) => {
+  document.querySelector('#branch-select')?.addEventListener('click', (e: MouseEvent & {target: HTMLElement}) => {
     const el = e.target.closest('.item[data-branch]');
     if (!el) return;
     const pullTargetBranch = document.querySelector('#pull-target-branch');

web_src/js/features/repo-migration.ts

@@ -1,14 +1,14 @@
 import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
 
-const service = document.querySelector('#service_type');
-const user = document.querySelector('#auth_username');
-const pass = document.querySelector('#auth_password');
-const token = document.querySelector('#auth_token');
-const mirror = document.querySelector('#mirror');
-const lfs = document.querySelector('#lfs');
-const lfsSettings = document.querySelector('#lfs_settings');
-const lfsEndpoint = document.querySelector('#lfs_endpoint');
-const items = document.querySelectorAll('#migrate_items input[type=checkbox]');
+const service = document.querySelector<HTMLInputElement>('#service_type');
+const user = document.querySelector<HTMLInputElement>('#auth_username');
+const pass = document.querySelector<HTMLInputElement>('#auth_password');
+const token = document.querySelector<HTMLInputElement>('#auth_token');
+const mirror = document.querySelector<HTMLInputElement>('#mirror');
+const lfs = document.querySelector<HTMLInputElement>('#lfs');
+const lfsSettings = document.querySelector<HTMLElement>('#lfs_settings');
+const lfsEndpoint = document.querySelector<HTMLElement>('#lfs_endpoint');
+const items = document.querySelectorAll<HTMLInputElement>('#migrate_items input[type=checkbox]');
 
 export function initRepoMigration() {
   checkAuth();
@@ -25,11 +25,11 @@ export function initRepoMigration() {
   });
   lfs?.addEventListener('change', setLFSSettingsVisibility);
 
-  const cloneAddr = document.querySelector('#clone_addr');
+  const cloneAddr = document.querySelector<HTMLInputElement>('#clone_addr');
   cloneAddr?.addEventListener('change', () => {
-    const repoName = document.querySelector('#repo_name');
+    const repoName = document.querySelector<HTMLInputElement>('#repo_name');
     if (cloneAddr.value && !repoName?.value) { // Only modify if repo_name input is blank
-      repoName.value = cloneAddr.value.match(/^(.*\/)?((.+?)(\.git)?)$/)[3];
+      repoName.value = /^(.*\/)?((.+?)(\.git)?)$/.exec(cloneAddr.value)[3];
     }
   });
 }
@@ -41,8 +41,8 @@ function checkAuth() {
   checkItems(serviceType !== 1);
 }
 
-function checkItems(tokenAuth) {
-  let enableItems;
+function checkItems(tokenAuth: boolean) {
+  let enableItems = false;
   if (tokenAuth) {
     enableItems = token?.value !== '';
   } else {

web_src/js/features/repo-new.ts

@@ -7,7 +7,7 @@ export function initRepoNew() {
       const gitignores = $('input[name="gitignores"]').val();
       const license = $('input[name="license"]').val();
       if (gitignores || license) {
-        document.querySelector('input[name="auto_init"]').checked = true;
+        document.querySelector<HTMLInputElement>('input[name="auto_init"]').checked = true;
       }
     });
   }

web_src/js/features/repo-projects.ts

@@ -25,7 +25,7 @@ async function createNewColumn(url, columnTitle, projectColorInput) {
   }
 }
 
-async function moveIssue({item, from, to, oldIndex}) {
+async function moveIssue({item, from, to, oldIndex}: {item: HTMLElement, from: HTMLElement, to: HTMLElement, oldIndex: number}) {
   const columnCards = to.querySelectorAll('.issue-card');
   updateIssueCount(from);
   updateIssueCount(to);
@@ -97,14 +97,14 @@ export function initRepoProject() {
     return;
   }
 
-  const _promise = initRepoProjectSortable();
+  initRepoProjectSortable(); // no await
 
   for (const modal of document.querySelectorAll('.edit-project-column-modal')) {
-    const projectHeader = modal.closest('.project-column-header');
-    const projectTitleLabel = projectHeader?.querySelector('.project-column-title-label');
-    const projectTitleInput = modal.querySelector('.project-column-title-input');
-    const projectColorInput = modal.querySelector('#new_project_column_color');
-    const boardColumn = modal.closest('.project-column');
+    const projectHeader = modal.closest<HTMLElement>('.project-column-header');
+    const projectTitleLabel = projectHeader?.querySelector<HTMLElement>('.project-column-title-label');
+    const projectTitleInput = modal.querySelector<HTMLInputElement>('.project-column-title-input');
+    const projectColorInput = modal.querySelector<HTMLInputElement>('#new_project_column_color');
+    const boardColumn = modal.closest<HTMLElement>('.project-column');
     modal.querySelector('.edit-project-column-button')?.addEventListener('click', async function (e) {
       e.preventDefault();
       try {
@@ -119,7 +119,7 @@ export function initRepoProject() {
       } finally {
         projectTitleLabel.textContent = projectTitleInput?.value;
         projectTitleInput.closest('form')?.classList.remove('dirty');
-        const dividers = boardColumn.querySelectorAll(':scope > .divider');
+        const dividers = boardColumn.querySelectorAll<HTMLElement>(':scope > .divider');
         if (projectColorInput.value) {
           const color = contrastColor(projectColorInput.value);
           boardColumn.style.setProperty('background', projectColorInput.value, 'important');