Remove jQuery import from some files (#32512)

wxiaoguang · web-flow · commit 249e67672aea · 2024-11-15T02:48:41.000+08:00
Many files do not directly depend on jQuery now.

To clarify the usage: use `fomanticQuery` to operate Fomantic
components.

Then developers could focus on removing the remaining jQuery usages by
searching `import $` globally.

21 files now:

```
./components/RepoBranchTagSelector.vue:3:import $ from 'jquery';
./features/admin/common.ts:1:import $ from 'jquery';
./features/admin/emails.ts:1:import $ from 'jquery';
./features/common-button.ts:1:import $ from 'jquery';
./features/comp/ComboMarkdownEditor.ts:3:import $ from 'jquery'; (I am working on it, there will be a new PR)
./features/comp/LabelEdit.ts:1:import $ from 'jquery';
./features/notification.ts:1:import $ from 'jquery';
./features/org-team.ts:1:import $ from 'jquery';
./features/repo-code.ts:1:import $ from 'jquery';
./features/repo-common.ts:1:import $ from 'jquery';
./features/repo-diff.ts:1:import $ from 'jquery';
./features/repo-editor.ts:1:import $ from 'jquery';
./features/repo-issue-content.ts:1:import $ from 'jquery';
./features/repo-issue-list.ts:1:import $ from 'jquery';
./features/repo-issue-sidebar.ts:1:import $ from 'jquery';
./features/repo-issue.ts:1:import $ from 'jquery';
./features/repo-legacy.ts:1:import $ from 'jquery';
./features/repo-new.ts:1:import $ from 'jquery';
./features/repo-projects.ts:1:import $ from 'jquery';
./features/repo-settings.ts:1:import $ from 'jquery';
./features/repo-template.ts:1:import $ from 'jquery';
```
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import {createApp, nextTick} from 'vue';
-import $ from 'jquery';
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
@@ -102,7 +102,7 @@ const sfc = {
   mounted() {
     const el = document.querySelector('#dashboard-repo-list');
     this.changeReposFilter(this.reposFilter);
-    $(el).find('.dropdown').dropdown();
+    fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
     nextTick(() => {
       this.$refs.search.focus();
     });
diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue
@@ -21,7 +21,7 @@ import {
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
-import $ from 'jquery';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const customEventListener = {
   id: 'customEventListener',
@@ -77,7 +77,7 @@ export default {
   mounted() {
     this.fetchGraphData();
 
-    $('#repo-contributors').dropdown({
+    fomanticQuery('#repo-contributors').dropdown({
       onChange: (val) => {
         this.xAxisMin = this.xAxisStart;
         this.xAxisMax = this.xAxisEnd;
diff --git a/web_src/js/features/citation.ts b/web_src/js/features/citation.ts
@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import {getCurrentLocale} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {pageData} = window.config;
 
@@ -71,6 +71,6 @@ export async function initCitationFileCopyContent() {
       dropdownBtn.classList.remove('is-loading');
     }
 
-    $('#cite-repo-modal').modal('show');
+    fomanticQuery('#cite-repo-modal').modal('show');
   });
 }
diff --git a/web_src/js/features/common-form.ts b/web_src/js/features/common-form.ts
@@ -1,13 +1,12 @@
-import $ from 'jquery';
-import {initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
 
 export function initGlobalFormDirtyLeaveConfirm() {
   initAreYouSure(window.jQuery);
   // Warn users that try to leave a page after entering data into a form.
   // Except on sign-in pages, and for forms marked as 'ignore-dirty'.
-  if (!$('.user.signin').length) {
-    $('form:not(.ignore-dirty)').areYouSure();
+  if (!document.querySelector('.page-content.user.signin')) {
+    applyAreYouSure('form:not(.ignore-dirty)');
   }
 }
 
diff --git a/web_src/js/features/comp/ConfirmModal.ts b/web_src/js/features/comp/ConfirmModal.ts
@@ -1,7 +1,7 @@
-import $ from 'jquery';
 import {svg} from '../../svg.ts';
 import {htmlEscape} from 'escape-goat';
 import {createElementFromHTML} from '../../utils/dom.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 const {i18n} = window.config;
 
@@ -17,7 +17,7 @@ export function confirmModal(content, {confirmButtonColor = 'primary'} = {}) {
       </div>
     `);
     document.body.append(modal);
-    const $modal = $(modal);
+    const $modal = fomanticQuery(modal);
     $modal.modal({
       onApprove() {
         resolve(true);
diff --git a/web_src/js/features/comp/ReactionSelector.ts b/web_src/js/features/comp/ReactionSelector.ts
@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import {POST} from '../../modules/fetch.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 export function initCompReactionSelector() {
   for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
@@ -29,7 +29,7 @@ export function initCompReactionSelector() {
       if (data.html) {
         commentContainer.insertAdjacentHTML('beforeend', data.html);
         const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
-        $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
+        fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
       }
     });
   }
diff --git a/web_src/js/features/comp/SearchUserBox.ts b/web_src/js/features/comp/SearchUserBox.ts
@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
@@ -10,7 +10,7 @@ export function initCompSearchUserBox() {
 
   const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
   const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
-  $(searchUserBox).search({
+  fomanticQuery(searchUserBox).search({
     minCharacters: 2,
     apiSettings: {
       url: `${appSubUrl}/user/search_candidates?q={query}`,
diff --git a/web_src/js/features/repo-branch.ts b/web_src/js/features/repo-branch.ts
@@ -1,5 +1,5 @@
-import $ from 'jquery';
 import {toggleElem} from '../utils/dom.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 export function initRepoBranchButton() {
   initRepoCreateBranchButton();
@@ -18,7 +18,7 @@ function initRepoCreateBranchButton() {
       const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
       document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
 
-      $(el.getAttribute('data-modal')).modal('show');
+      fomanticQuery(el.getAttribute('data-modal')).modal('show');
     });
   }
 }
diff --git a/web_src/js/features/repo-graph.ts b/web_src/js/features/repo-graph.ts
@@ -1,6 +1,6 @@
-import $ from 'jquery';
 import {hideElem, showElem} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 export function initRepoGraphGit() {
   const graphContainer = document.querySelector('#git-graph-container');
@@ -83,8 +83,8 @@ export function initRepoGraphGit() {
   }
 
   const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
-  $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
-  $(flowSelectRefsDropdown).dropdown({
+  fomanticQuery(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
+  fomanticQuery(flowSelectRefsDropdown).dropdown({
     clearable: true,
     fullTextSeach: 'exact',
     onRemove(toRemove) {
diff --git a/web_src/js/features/repo-home.ts b/web_src/js/features/repo-home.ts
@@ -1,8 +1,8 @@
-import $ from 'jquery';
 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 {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 
@@ -73,7 +73,7 @@ export function initRepoTopicBar() {
     }
   });
 
-  $(topicDropdown).dropdown({
+  fomanticQuery(topicDropdown).dropdown({
     allowAdditions: true,
     forceSelection: false,
     fullTextSearch: 'exact',
@@ -136,7 +136,7 @@ export function initRepoTopicBar() {
     onLabelCreate(value) {
       value = value.toLowerCase().trim();
       this.attr('data-value', value).contents().first().replaceWith(value);
-      return $(this);
+      return fomanticQuery(this);
     },
     onAdd(addedValue, _addedText, $addedChoice) {
       addedValue = addedValue.toLowerCase().trim();
diff --git a/web_src/js/vendor/jquery.are-you-sure.ts b/web_src/js/vendor/jquery.are-you-sure.ts
@@ -195,3 +195,7 @@ export function initAreYouSure($) {
     });
   };
 }
+
+export function applyAreYouSure(selector: string) {
+  $(selector).areYouSure();
+}

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import $ from 'jquery';`
`2`	`1`	`import {getCurrentLocale} from '../utils.ts';`
	`2`	`+import {fomanticQuery} from '../modules/fomantic/base.ts';`
`3`	`3`
`4`	`4`	`const {pageData} = window.config;`
`5`	`5`
`@@ -71,6 +71,6 @@ export async function initCitationFileCopyContent() {`
`71`	`71`	`dropdownBtn.classList.remove('is-loading');`
`72`	`72`	`}`
`73`	`73`
`74`		`- $('#cite-repo-modal').modal('show');`
	`74`	`+ fomanticQuery('#cite-repo-modal').modal('show');`
`75`	`75`	`});`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import $ from 'jquery';`
`2`	`1`	`import {POST} from '../../modules/fetch.ts';`
	`2`	`+import {fomanticQuery} from '../../modules/fomantic/base.ts';`
`3`	`3`
`4`	`4`	`export function initCompReactionSelector() {`
`5`	`5`	`for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {`
`@@ -29,7 +29,7 @@ export function initCompReactionSelector() {`
`29`	`29`	`if (data.html) {`
`30`	`30`	`commentContainer.insertAdjacentHTML('beforeend', data.html);`
`31`	`31`	`const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');`
`32`		`- $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown`
	`32`	`+ fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown`
`33`	`33`	`}`
`34`	`34`	`});`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import $ from 'jquery';`
`2`	`1`	`import {toggleElem} from '../utils/dom.ts';`
	`2`	`+import {fomanticQuery} from '../modules/fomantic/base.ts';`
`3`	`3`
`4`	`4`	`export function initRepoBranchButton() {`
`5`	`5`	`initRepoCreateBranchButton();`
`@@ -18,7 +18,7 @@ function initRepoCreateBranchButton() {`
`18`	`18`	`const fromSpanName = el.getAttribute('data-modal-from-span') \|\| '#modal-create-branch-from-span';`
`19`	`19`	`document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');`
`20`	`20`
`21`		`- $(el.getAttribute('data-modal')).modal('show');`
	`21`	`+ fomanticQuery(el.getAttribute('data-modal')).modal('show');`
`22`	`22`	`});`
`23`	`23`	`}`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -195,3 +195,7 @@ export function initAreYouSure($) {`
`195`	`195`	`});`
`196`	`196`	`};`
`197`	`197`	`}`
	`198`	`+`
	`199`	`+export function applyAreYouSure(selector: string) {`
	`200`	`+ $(selector).areYouSure();`
	`201`	`+}`