Replace Webpack with Vite for client build

.github/workflows/build_client.yaml

@@ -38,5 +38,6 @@ jobs:
         if: steps.cache.outputs.cache-hit != 'true'
         env:
           GALAXY_PLUGIN_BUILD_FAIL_ON_ERROR: 1
+          NODE_OPTIONS: --max-old-space-size=4096
         run: make client
         working-directory: 'galaxy root'

Makefile

@@ -17,7 +17,7 @@ YARN_INSTALL_OPTS=--network-timeout 300000 --check-files
 GALAXY_PLUGIN_BUILD_FAIL_ON_ERROR?=0
 # Respect predefined NODE_OPTIONS, otherwise set maximum heap size low for
 # compatibility with smaller machines.
-NODE_OPTIONS ?= --max-old-space-size=3072
+NODE_OPTIONS ?= --max-old-space-size=4096
 NODE_ENV = env NODE_OPTIONS=$(NODE_OPTIONS) GALAXY_PLUGIN_BUILD_FAIL_ON_ERROR=$(GALAXY_PLUGIN_BUILD_FAIL_ON_ERROR)
 CWL_TARGETS := test/functional/tools/cwl_tools/v1.0/conformance_tests.yaml \
 	test/functional/tools/cwl_tools/v1.1/conformance_tests.yaml \
@@ -235,7 +235,7 @@ client-lint-autofix: client-node-deps ## Automatically fix linting errors in cli
 client-format: client-node-deps client-lint-autofix ## Reformat client code, ensures autofixes are applied first
 	$(IN_VENV) cd client && yarn run format
 
-client-dev-server: client-node-deps ## Starts a webpack dev server for client development (HMR enabled)
+client-dev-server: client-node-deps ## Starts a Vite dev server for client development (HMR enabled)
 	$(IN_VENV) cd client && $(NODE_ENV) yarn run develop
 
 client-test: client-node-deps  ## Run JS unit tests

client/README.md

@@ -59,8 +59,8 @@ Or, with the package scripts from this `client` directory:
 
     yarn run develop
 
-This will start up an extra client development server running on port 8081. Open
-your browser to `http://localhost:8081` (instead of the default 8080 that Galaxy
+This will start up an extra client development server running on port 5173. Open
+your browser to `http://localhost:5173` (instead of the default 8080 that Galaxy
 would run on), and you should see Galaxy like normal. Except now, when you
 change client code it'll automatically rebuild _and_ reload the relevant portion
 of the application for you. Lastly, if you are running Galaxy at a location
@@ -76,7 +76,7 @@ also possible if you set the `CHANGE_ORIGIN` environment variable:
 
 You can also specify a particular port to bind the dev server to:
 
-    WEBPACK_PORT=8083 yarn run develop
+    VITE_PORT=8083 yarn run develop
 
 ## Running a Separate Server
 
@@ -101,8 +101,8 @@ apply site-wide.
 
 On build, the compiled css bundle is served at `/static/dist/base.css`.
 
-As mentioned above, `make client` will rebuild styles as a part of the webpack
-build. For iterative development, "Watch Mode" rebuilds as described above do
+As mentioned above, `make client` will rebuild styles as a part of the build
+process. For iterative development, "Watch Mode" rebuilds as described above do
 include style changes.
 
 ## Client-Side Unit Testing

client/build-config.shared.js

@@ -0,0 +1,59 @@
+/**
+ * Build configuration for Vite
+ * Single source of truth for legacy module resolution
+ */
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const scriptsBase = path.join(__dirname, "src");
+const libsBase = path.join(scriptsBase, "libs");
+const styleBase = path.join(scriptsBase, "style");
+
+// Legacy exact-match aliases
+export const legacyAliases = {
+    // Core libraries
+    // Note: jquery is NOT aliased - it resolves to node_modules/jquery directly
+    // The global setup (window.$, window.jQuery) is done in libs.js
+    jqueryVendor: path.join(libsBase, "jquery/jquery.js"),
+    storemodern: path.join(__dirname, "node_modules/store/dist/store.modern.js"),
+
+    // Vue
+    vue: path.join(__dirname, "node_modules/vue/dist/vue.esm.js"),
+
+    // Build config
+    config: path.join(scriptsBase, "config", process.env.NODE_ENV || "development") + ".js",
+    app: path.join(scriptsBase, "app.js"),
+};
+
+// Module resolution paths
+export const modulePaths = [scriptsBase, "node_modules", styleBase];
+
+// File extensions for resolution
+export const extensions = [".ts", ".js", ".json", ".vue", ".scss"];
+
+/**
+ * Get Vite-format aliases (uses regex patterns for exact matches)
+ */
+export function getViteAliases() {
+    const viteAliases = [
+        // @ alias
+        { find: "@", replacement: scriptsBase },
+    ];
+
+    // Add exact match patterns
+    for (const [key, value] of Object.entries(legacyAliases)) {
+        viteAliases.push({
+            find: new RegExp(`^${key}$`),
+            replacement: path.isAbsolute(value) ? value : path.join(__dirname, value),
+        });
+    }
+
+    // Add prefix patterns for legacy paths
+    viteAliases.push(
+        { find: /^libs\//, replacement: libsBase + "/" },
+        { find: /^ui\//, replacement: path.join(scriptsBase, "ui") + "/" },
+    );
+
+    return viteAliases;
+}

client/gulpfile.js

@@ -7,17 +7,7 @@ const buildIcons = require("./icons/build_icons");
 const os = require("os");
 const yaml = require("yaml");
 
-const PATHS = {
-    nodeModules: "./node_modules",
-    stagedLibraries: {
-        backbone: ["backbone.js", "backbone.js"],
-        jquery: ["dist/jquery.js", "jquery/jquery.js"],
-        "jquery-migrate": ["dist/jquery-migrate.js", "jquery/jquery.migrate.js"],
-        "jquery-mousewheel": ["jquery.mousewheel.js", "jquery/jquery.mousewheel.js"],
-        requirejs: ["require.js", "require.js"],
-        underscore: ["underscore.js", "underscore.js"],
-    },
-};
+const PATHS = {};
 
 // Check if visualization steps should be skipped
 const SKIP_VIZ = process.env.SKIP_VIZ === "true" || process.env.SKIP_VIZ === "1";
@@ -44,26 +34,6 @@ try {
     VISUALIZATION_PLUGINS = {};
 }
 
-function stageLibs(callback) {
-    try {
-        Object.keys(PATHS.stagedLibraries).forEach((lib) => {
-            const p1 = path.resolve(path.join(PATHS.nodeModules, lib, PATHS.stagedLibraries[lib][0]));
-            const p2 = path.resolve(path.join("src", "libs", PATHS.stagedLibraries[lib][1]));
-            if (fs.existsSync(p1)) {
-                fs.removeSync(p2);
-                fs.createReadStream(p1).pipe(fs.createWriteStream(p2));
-            } else {
-                throw new Error(
-                    `${p1} does not exist, yet it is a required library. Check that the package in question exists in node_modules.`,
-                );
-            }
-        });
-        callback();
-    } catch (err) {
-        callback(err);
-    }
-}
-
 async function icons() {
     await buildIcons("./src/assets/icons.json");
     const generateIconsTypeScript = require("./icons/generate_ts_icons");
@@ -208,7 +178,7 @@ function forceInstallVisualizations(callback) {
     return installVisualizations(callback, true);
 }
 
-const client = parallel(stageLibs, icons);
+const client = icons;
 const plugins = series(installVisualizations, cleanPlugins, stagePlugins);
 const pluginsRebuild = series(forceInstallVisualizations, cleanPlugins, stagePlugins);
 

client/package.json

@@ -21,8 +21,7 @@
   ],
   "resolutions": {
     "chokidar": "3.5.3",
-    "vue": "2.7.16",
-    "vue-loader": "15.11.1"
+    "vue": "2.7.16"
   },
   "dependencies": {
     "@citation-js/core": "^0.7.1",
@@ -51,11 +50,9 @@
     "ag-grid-vue": "^30",
     "assert": "^2.1.0",
     "axios": "^1.6.2",
-    "babel-runtime": "^6.26.0",
     "backbone": "1.5.0",
     "bootstrap": "4.6",
     "bootstrap-vue": "^2.23.0",
-    "core-js": "^3.33.1",
     "csv-parse": "^5.5.2",
     "d3": "^7.8.5",
     "d3-zoom": "^3.0.0",
@@ -65,9 +62,9 @@
     "dexie": "^3.2.5",
     "dom-to-image": "^2.6.0",
     "dompurify": "^3.0.6",
-    "dumpmeta-webpack-plugin": "^0.2.0",
     "echarts": "^5.5.1",
     "elkjs": "^0.8.2",
+    "events": "^3.3.0",
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
     "font-awesome-6": "npm:@fortawesome/free-solid-svg-icons@6",
@@ -88,7 +85,6 @@
     "markdown-it": "^13.0.2",
     "markdown-it-regexp": "^0.4.0",
     "monaco-editor": "^0.52.2",
-    "monaco-editor-webpack-plugin": "^7.1.0",
     "monaco-yaml": "^5.4.0",
     "object-hash": "^3.0.0",
     "openapi-fetch": "^0.10.6",
@@ -97,8 +93,6 @@
     "pretty-bytes": "^6.1.1",
     "pyre-to-regexp": "^0.0.6",
     "querystring-es3": "^0.2.1",
-    "regenerator-runtime": "^0.14.0",
-    "requirejs": "2.3.7",
     "ro-crate-zip-explorer": "^0.4.1",
     "rxjs": "^7.8.1",
     "rxjs-spy": "^8.0.2",
@@ -133,16 +127,12 @@
     "yaml": "^2.6.1"
   },
   "scripts": {
-    "develop": "NODE_ENV=development gulp && webpack-dev-server",
-    "build": "NODE_ENV=development gulp && webpack && yarn run stage-build",
-    "build-production": "NODE_ENV=production gulp && yarn run webpack-production && yarn run stage-build",
-    "build-production-maps": "NODE_ENV=production gulp && yarn run webpack-production-maps && yarn run stage-build",
-    "build-stats": "NODE_ENV=production webpack --profile --json=webpack-stats.json",
-    "view-stats": "webpack-bundle-analyzer webpack-stats.json ../static/dist/",
-    "webpack-production": "NODE_ENV=production webpack",
-    "webpack-production-maps": "GXY_BUILD_SOURCEMAPS=1 NODE_ENV=production webpack",
+    "develop": "NODE_ENV=development vite",
+    "build": "NODE_ENV=development gulp && vite build && yarn run stage-build",
+    "build-production": "NODE_ENV=production gulp && vite build && yarn run stage-build",
+    "build-production-maps": "GXY_BUILD_SOURCEMAPS=1 NODE_ENV=production gulp && vite build && yarn run stage-build",
     "gulp": "gulp",
-    "stage-build": "cpy 'dist/*' '../static/dist' && (git rev-parse HEAD 2>/dev/null || echo '') >../static/client_build_hash.txt",
+    "stage-build": "cpy 'dist/**/*' '../static/dist' && (git rev-parse HEAD 2>/dev/null || echo '') >../static/client_build_hash.txt",
     "format": "prettier --write . --cache",
     "format-check": "prettier --check .",
     "prettier": "yarn run format",
@@ -155,12 +145,9 @@
     "type-check": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/helper-validator-identifier": "^7.22.20",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-typescript": "^7.23.2",
+    "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@pinia/testing": "0.1.3",
+    "@rollup/plugin-inject": "^5.0.5",
     "@testing-library/jest-dom": "^6.4.8",
     "@types/d3": "^7.4.2",
     "@types/dompurify": "^3.0.2",
@@ -172,63 +159,40 @@
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-vue2": "^2.3.4",
-    "@vitest/coverage-v8": "^4.0.13",
-    "@vitest/ui": "^4.0.13",
+    "@vitest/coverage-v8": "^4.0.14",
+    "@vitest/ui": "^4.0.14",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.4.0",
-    "amdi18n-loader": "^0.9.4",
     "autoprefixer": "10.4.16",
     "axios-mock-adapter": "^1.22.0",
-    "babel-plugin-transform-import-meta": "^2.2.1",
     "buffer": "^6.0.3",
-    "circular-dependency-plugin": "^5.2.2",
     "cpy-cli": "^5.0.0",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^5.0.1",
     "eslint": "^8.52.0",
     "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^9.17.0",
     "eslint-plugin-vuejs-accessibility": "^2.2.0",
-    "expose-loader": "^5.0.1",
     "fake-indexeddb": "^6.0.0",
-    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "gulp": "^5.0.0",
     "happy-dom": "^20.0.10",
-    "ignore-loader": "^0.1.2",
-    "imports-loader": "^5.0.0",
-    "json-loader": "^0.5.7",
-    "mini-css-extract-plugin": "^2.9.2",
     "msw": "^2.3.4",
     "openapi-msw": "^0.7.0",
     "openapi-typescript": "^7.3.0",
-    "postcss-loader": "^7.3.3",
     "prettier": "^3.6.2",
-    "process": "^0.11.10",
-    "raw-loader": "^4.0.2",
     "sass": "^1.94.2",
-    "sass-loader": "^16.0.5",
     "store": "^2.0.12",
-    "thread-loader": "^4.0.4",
-    "ts-loader": "^9.5.2",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.7.3",
     "vite": "^7.2.4",
-    "vitest": "^4.0.13",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.14",
     "vitest-fail-on-console": "^0.10.1",
     "vitest-location-mock": "^1.0.4",
-    "vue-loader": "^15.11.1",
     "vue-template-compiler": "^2.7.16",
     "vue-tsc": "2.2.12",
-    "webpack": "^5.98.0",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0",
-    "webpack-merge": "^6.0.1",
     "xml-js": "^1.6.11",
-    "xml2js": "^0.6.2",
-    "yaml-loader": "^0.8.1"
+    "xml2js": "^0.6.2"
   },
   "peerDependencies": {
     "postcss": "^8.4.6"

client/src/components/AboutGalaxy.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /* global __buildTimestamp__, __license__  */
-/* (injected by webpack) */
+/* (injected at build time) */
 
 import { computed } from "vue";
 import { RouterLink } from "vue-router";

client/src/components/Citation/services.ts

@@ -10,7 +10,7 @@ export async function getCitations(source: string, id: string): Promise<Citation
         const request = await axios.get(`${getAppRoot()}api/${source}/${id}/citations`);
         const rawCitations = request.data;
         const citations = [];
-        const { Cite } = await import(/* webpackChunkName: "cite" */ "./cite");
+        const { Cite } = await import("./cite");
         for (const rawCitation of rawCitations) {
             try {
                 const cite = new Cite(rawCitation.content);

client/src/components/Collections/ListCollectionCreator.vue

@@ -702,7 +702,7 @@ function selectionAsHdaSummary(value: any): HDASummary {
 </template>
 
 <style scoped lang="scss">
-@import "base.scss";
+@import "@/style/scss/base.scss";
 @import "@/style/scss/theme/blue.scss";
 
 .list-collection-creator {

client/src/components/Collections/RuleBasedCollectionCreatorModal.js

@@ -31,9 +31,7 @@ async function ruleBasedCollectionCreatorModal(elements, elementsType, importTyp
         };
     });
 
-    const module = await import(
-        /* webpackChunkName: "ruleCollectionBuilder" */ "@/components/RuleCollectionBuilder.vue"
-    );
+    const module = await import("@/components/RuleCollectionBuilder.vue");
     const ruleCollectionBuilderInstance = Vue.extend(module.default);
     const vm = document.createElement("div");
 

client/src/components/Collections/sheet/SampleSheetGrid.vue

@@ -643,8 +643,8 @@ defineExpose({ attemptCreate });
 </style>
 
 <style>
-// doesn't work with scoped style, newer AG Grid lets specifying style directly
-// in ColDef but this deson't seem work with this older AG Grid we're using Vue 2.
+/* doesn't work with scoped style, newer AG Grid lets specifying style directly
+   in ColDef but this doesn't seem work with this older AG Grid we're using Vue 2. */
 .ag-grid-column-has-custom-header-description {
     text-decoration-line: underline;
     text-decoration-style: dashed;

client/src/components/Common/GCard.vue

@@ -682,7 +682,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <style scoped lang="scss">
 @import "@/style/scss/theme/blue.scss";
-@import "_breakpoints.scss";
+@import "@/style/scss/_breakpoints.scss";
 
 .g-card {
     container: g-card / inline-size;