From 8bb0a03eaa1d3d36e231a42a9c66a22bdec8480d Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 17 Jul 2023 20:06:37 +0200 Subject: [PATCH] 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. --- web_src/js/features/repo-issue-list.js | 6 +++--- web_src/js/features/repo-projects.js | 7 +++---- web_src/js/modules/sortable.js | 4 ++++ 3 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 web_src/js/modules/sortable.js diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index a5a5bb628..3dc523e70 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -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', diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index b1f419a21..1b8807d24 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -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', diff --git a/web_src/js/modules/sortable.js b/web_src/js/modules/sortable.js new file mode 100644 index 000000000..cfe7c3bf3 --- /dev/null +++ b/web_src/js/modules/sortable.js @@ -0,0 +1,4 @@ +export async function createSortable(...args) { + const {Sortable} = await import(/* webpackChunkName: "sortablejs" */'sortablejs'); + return new Sortable(...args); +}