Import sortablejs only once (#25936)

Previously, `sortablejs` was imported twice, once synchronously and once
asynchronously, leading to webpack creating duplicate output code (once
in the index bundle, and once in a separate chunk). Fix this by always
asynchronously importing it. This was one of the build warnings observed
when trying to build with vite.
This commit is contained in:
silverwind 2023-07-17 20:06:37 +02:00 committed by GitHub
parent d0a9456c4f
commit 8bb0a03eaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 7 deletions

View File

@ -2,9 +2,9 @@ import $ from 'jquery';
import {updateIssuesMeta} from './repo-issue.js'; import {updateIssuesMeta} from './repo-issue.js';
import {toggleElem} from '../utils/dom.js'; import {toggleElem} from '../utils/dom.js';
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import {Sortable} from 'sortablejs';
import {confirmModal} from './comp/ConfirmModal.js'; import {confirmModal} from './comp/ConfirmModal.js';
import {showErrorToast} from '../modules/toast.js'; import {showErrorToast} from '../modules/toast.js';
import {createSortable} from '../modules/sortable.js';
function initRepoIssueListCheckboxes() { function initRepoIssueListCheckboxes() {
const $issueSelectAll = $('.issue-checkbox-all'); const $issueSelectAll = $('.issue-checkbox-all');
@ -176,7 +176,7 @@ async function pinMoveEnd(e) {
}); });
} }
function initIssuePinSort() { async function initIssuePinSort() {
const pinDiv = document.getElementById('issue-pins'); const pinDiv = document.getElementById('issue-pins');
if (pinDiv === null) return; if (pinDiv === null) return;
@ -189,7 +189,7 @@ function initIssuePinSort() {
// If only one issue pinned, we don't need to make this Sortable // If only one issue pinned, we don't need to make this Sortable
if (pinDiv.children.length < 2) return; if (pinDiv.children.length < 2) return;
new Sortable(pinDiv, { createSortable(pinDiv, {
group: 'shared', group: 'shared',
animation: 150, animation: 150,
ghostClass: 'card-ghost', ghostClass: 'card-ghost',

View File

@ -1,6 +1,7 @@
import $ from 'jquery'; import $ from 'jquery';
import {useLightTextOnBackground} from '../utils/color.js'; import {useLightTextOnBackground} from '../utils/color.js';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import {createSortable} from '../modules/sortable.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
@ -55,12 +56,10 @@ async function initRepoProjectSortable() {
const els = document.querySelectorAll('#project-board > .board.sortable'); const els = document.querySelectorAll('#project-board > .board.sortable');
if (!els.length) return; if (!els.length) return;
const {Sortable} = await import(/* webpackChunkName: "sortable" */'sortablejs');
// the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content // the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content
const mainBoard = els[0]; const mainBoard = els[0];
let boardColumns = mainBoard.getElementsByClassName('board-column'); let boardColumns = mainBoard.getElementsByClassName('board-column');
new Sortable(mainBoard, { createSortable(mainBoard, {
group: 'board-column', group: 'board-column',
draggable: '.board-column', draggable: '.board-column',
filter: '[data-id="0"]', filter: '[data-id="0"]',
@ -89,7 +88,7 @@ async function initRepoProjectSortable() {
for (const boardColumn of boardColumns) { for (const boardColumn of boardColumns) {
const boardCardList = boardColumn.getElementsByClassName('board')[0]; const boardCardList = boardColumn.getElementsByClassName('board')[0];
new Sortable(boardCardList, { createSortable(boardCardList, {
group: 'shared', group: 'shared',
animation: 150, animation: 150,
ghostClass: 'card-ghost', ghostClass: 'card-ghost',

View File

@ -0,0 +1,4 @@
export async function createSortable(...args) {
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs');
return new Sortable(...args);
}