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.

3 files changed, 10 insertions, 7 deletions

diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index a5a5bb6286..3dc523e709 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 b1f419a21d..1b8807d243 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 0000000000..cfe7c3bf30
--- /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);
+}