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.tags/v1.21.0-rc0
@@ -2,9 +2,9 @@ import $ from 'jquery'; | |||
import {updateIssuesMeta} from './repo-issue.js'; | |||
import {toggleElem} from '../utils/dom.js'; | |||
import {htmlEscape} from 'escape-goat'; | |||
import {Sortable} from 'sortablejs'; | |||
import {confirmModal} from './comp/ConfirmModal.js'; | |||
import {showErrorToast} from '../modules/toast.js'; | |||
import {createSortable} from '../modules/sortable.js'; | |||
function initRepoIssueListCheckboxes() { | |||
const $issueSelectAll = $('.issue-checkbox-all'); | |||
@@ -176,7 +176,7 @@ async function pinMoveEnd(e) { | |||
}); | |||
} | |||
function initIssuePinSort() { | |||
async function initIssuePinSort() { | |||
const pinDiv = document.getElementById('issue-pins'); | |||
if (pinDiv === null) return; | |||
@@ -189,7 +189,7 @@ function initIssuePinSort() { | |||
// If only one issue pinned, we don't need to make this Sortable | |||
if (pinDiv.children.length < 2) return; | |||
new Sortable(pinDiv, { | |||
createSortable(pinDiv, { | |||
group: 'shared', | |||
animation: 150, | |||
ghostClass: 'card-ghost', |
@@ -1,6 +1,7 @@ | |||
import $ from 'jquery'; | |||
import {useLightTextOnBackground} from '../utils/color.js'; | |||
import tinycolor from 'tinycolor2'; | |||
import {createSortable} from '../modules/sortable.js'; | |||
const {csrfToken} = window.config; | |||
@@ -55,12 +56,10 @@ async function initRepoProjectSortable() { | |||
const els = document.querySelectorAll('#project-board > .board.sortable'); | |||
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 | |||
const mainBoard = els[0]; | |||
let boardColumns = mainBoard.getElementsByClassName('board-column'); | |||
new Sortable(mainBoard, { | |||
createSortable(mainBoard, { | |||
group: 'board-column', | |||
draggable: '.board-column', | |||
filter: '[data-id="0"]', | |||
@@ -89,7 +88,7 @@ async function initRepoProjectSortable() { | |||
for (const boardColumn of boardColumns) { | |||
const boardCardList = boardColumn.getElementsByClassName('board')[0]; | |||
new Sortable(boardCardList, { | |||
createSortable(boardCardList, { | |||
group: 'shared', | |||
animation: 150, | |||
ghostClass: 'card-ghost', |
@@ -0,0 +1,4 @@ | |||
export async function createSortable(...args) { | |||
const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs'); | |||
return new Sortable(...args); | |||
} |