Remove jQuery import from some files (#32512)

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';
```
This commit is contained in:
wxiaoguang 2024-11-15 02:48:41 +08:00 committed by GitHub
parent 98d9a71ffe
commit 249e67672a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 27 additions and 24 deletions

View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import {createApp, nextTick} from 'vue'; import {createApp, nextTick} from 'vue';
import $ from 'jquery';
import {SvgIcon} from '../svg.ts'; import {SvgIcon} from '../svg.ts';
import {GET} from '../modules/fetch.ts'; import {GET} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
const {appSubUrl, assetUrlPrefix, pageData} = window.config; const {appSubUrl, assetUrlPrefix, pageData} = window.config;
@ -102,7 +102,7 @@ const sfc = {
mounted() { mounted() {
const el = document.querySelector('#dashboard-repo-list'); const el = document.querySelector('#dashboard-repo-list');
this.changeReposFilter(this.reposFilter); this.changeReposFilter(this.reposFilter);
$(el).find('.dropdown').dropdown(); fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
nextTick(() => { nextTick(() => {
this.$refs.search.focus(); this.$refs.search.focus();
}); });

View File

@ -21,7 +21,7 @@ import {
import {chartJsColors} from '../utils/color.ts'; import {chartJsColors} from '../utils/color.ts';
import {sleep} from '../utils.ts'; import {sleep} from '../utils.ts';
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm'; import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
import $ from 'jquery'; import {fomanticQuery} from '../modules/fomantic/base.ts';
const customEventListener = { const customEventListener = {
id: 'customEventListener', id: 'customEventListener',
@ -77,7 +77,7 @@ export default {
mounted() { mounted() {
this.fetchGraphData(); this.fetchGraphData();
$('#repo-contributors').dropdown({ fomanticQuery('#repo-contributors').dropdown({
onChange: (val) => { onChange: (val) => {
this.xAxisMin = this.xAxisStart; this.xAxisMin = this.xAxisStart;
this.xAxisMax = this.xAxisEnd; this.xAxisMax = this.xAxisEnd;

View File

@ -1,5 +1,5 @@
import $ from 'jquery';
import {getCurrentLocale} from '../utils.ts'; import {getCurrentLocale} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
const {pageData} = window.config; const {pageData} = window.config;
@ -71,6 +71,6 @@ export async function initCitationFileCopyContent() {
dropdownBtn.classList.remove('is-loading'); dropdownBtn.classList.remove('is-loading');
} }
$('#cite-repo-modal').modal('show'); fomanticQuery('#cite-repo-modal').modal('show');
}); });
} }

View File

@ -1,13 +1,12 @@
import $ from 'jquery'; import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
export function initGlobalFormDirtyLeaveConfirm() { export function initGlobalFormDirtyLeaveConfirm() {
initAreYouSure(window.jQuery); initAreYouSure(window.jQuery);
// Warn users that try to leave a page after entering data into a form. // 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'. // Except on sign-in pages, and for forms marked as 'ignore-dirty'.
if (!$('.user.signin').length) { if (!document.querySelector('.page-content.user.signin')) {
$('form:not(.ignore-dirty)').areYouSure(); applyAreYouSure('form:not(.ignore-dirty)');
} }
} }

View File

@ -1,7 +1,7 @@
import $ from 'jquery';
import {svg} from '../../svg.ts'; import {svg} from '../../svg.ts';
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import {createElementFromHTML} from '../../utils/dom.ts'; import {createElementFromHTML} from '../../utils/dom.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
const {i18n} = window.config; const {i18n} = window.config;
@ -17,7 +17,7 @@ export function confirmModal(content, {confirmButtonColor = 'primary'} = {}) {
</div> </div>
`); `);
document.body.append(modal); document.body.append(modal);
const $modal = $(modal); const $modal = fomanticQuery(modal);
$modal.modal({ $modal.modal({
onApprove() { onApprove() {
resolve(true); resolve(true);

View File

@ -1,5 +1,5 @@
import $ from 'jquery';
import {POST} from '../../modules/fetch.ts'; import {POST} from '../../modules/fetch.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
export function initCompReactionSelector() { export function initCompReactionSelector() {
for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) { for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
@ -29,7 +29,7 @@ export function initCompReactionSelector() {
if (data.html) { if (data.html) {
commentContainer.insertAdjacentHTML('beforeend', data.html); commentContainer.insertAdjacentHTML('beforeend', data.html);
const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction'); const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
$(bottomReactionsDropdowns).dropdown(); // re-init the dropdown fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
} }
}); });
} }

View File

@ -1,5 +1,5 @@
import $ from 'jquery';
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
const {appSubUrl} = window.config; const {appSubUrl} = window.config;
const looksLikeEmailAddressCheck = /^\S+@\S+$/; const looksLikeEmailAddressCheck = /^\S+@\S+$/;
@ -10,7 +10,7 @@ export function initCompSearchUserBox() {
const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true'; const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined; const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
$(searchUserBox).search({ fomanticQuery(searchUserBox).search({
minCharacters: 2, minCharacters: 2,
apiSettings: { apiSettings: {
url: `${appSubUrl}/user/search_candidates?q={query}`, url: `${appSubUrl}/user/search_candidates?q={query}`,

View File

@ -1,5 +1,5 @@
import $ from 'jquery';
import {toggleElem} from '../utils/dom.ts'; import {toggleElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
export function initRepoBranchButton() { export function initRepoBranchButton() {
initRepoCreateBranchButton(); initRepoCreateBranchButton();
@ -18,7 +18,7 @@ function initRepoCreateBranchButton() {
const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span'; const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from'); document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
$(el.getAttribute('data-modal')).modal('show'); fomanticQuery(el.getAttribute('data-modal')).modal('show');
}); });
} }
} }

View File

@ -1,6 +1,6 @@
import $ from 'jquery';
import {hideElem, showElem} from '../utils/dom.ts'; import {hideElem, showElem} from '../utils/dom.ts';
import {GET} from '../modules/fetch.ts'; import {GET} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
export function initRepoGraphGit() { export function initRepoGraphGit() {
const graphContainer = document.querySelector('#git-graph-container'); const graphContainer = document.querySelector('#git-graph-container');
@ -83,8 +83,8 @@ export function initRepoGraphGit() {
} }
const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown'); const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
$(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected); fomanticQuery(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
$(flowSelectRefsDropdown).dropdown({ fomanticQuery(flowSelectRefsDropdown).dropdown({
clearable: true, clearable: true,
fullTextSeach: 'exact', fullTextSeach: 'exact',
onRemove(toRemove) { onRemove(toRemove) {

View File

@ -1,8 +1,8 @@
import $ from 'jquery';
import {stripTags} from '../utils.ts'; import {stripTags} from '../utils.ts';
import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts'; import {hideElem, queryElemChildren, showElem} from '../utils/dom.ts';
import {POST} from '../modules/fetch.ts'; import {POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts'; import {showErrorToast} from '../modules/toast.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
const {appSubUrl} = window.config; const {appSubUrl} = window.config;
@ -73,7 +73,7 @@ export function initRepoTopicBar() {
} }
}); });
$(topicDropdown).dropdown({ fomanticQuery(topicDropdown).dropdown({
allowAdditions: true, allowAdditions: true,
forceSelection: false, forceSelection: false,
fullTextSearch: 'exact', fullTextSearch: 'exact',
@ -136,7 +136,7 @@ export function initRepoTopicBar() {
onLabelCreate(value) { onLabelCreate(value) {
value = value.toLowerCase().trim(); value = value.toLowerCase().trim();
this.attr('data-value', value).contents().first().replaceWith(value); this.attr('data-value', value).contents().first().replaceWith(value);
return $(this); return fomanticQuery(this);
}, },
onAdd(addedValue, _addedText, $addedChoice) { onAdd(addedValue, _addedText, $addedChoice) {
addedValue = addedValue.toLowerCase().trim(); addedValue = addedValue.toLowerCase().trim();

View File

@ -195,3 +195,7 @@ export function initAreYouSure($) {
}); });
}; };
} }
export function applyAreYouSure(selector: string) {
$(selector).areYouSure();
}