build(vite): migrate fancyadmin assets from webpack to Vite

assets/js/_jquery-global.js

@@ -0,0 +1,12 @@
+// jQuery must be exposed as a global BEFORE any legacy jQuery plugin (jquery-ui-bundle,
+// @regru/jquery-menu-aim, nette.ajax.js, …) is evaluated. ES module imports are hoisted
+// and evaluated depth-first in source order, so importing this module FIRST guarantees
+// the globals exist before those plugin modules run.
+import jQuery from 'jquery';
+
+window.$ = jQuery;
+window.jquery = jQuery;
+window.jQuery = jQuery;
+globalThis.jQuery = jQuery;
+
+export default jQuery;

assets/js/_registerFancyadminComponents.js

@@ -0,0 +1,13 @@
+// Registers FancyAdmin's own JS components (referenced as "~UI/..." in
+// AdtJsComponents.init() calls), so each consuming project doesn't have to.
+//
+// Imported first by app.js — runs before app.js's init() calls, and merges into
+// the shared registry (see ComponentLoader.registerModules), so the consumer can
+// still register its own 'app' components and 'builtin' allowlist separately.
+//
+// The glob is relative to this file (assets/js/) → resolves to the package's src/UI.
+import AdtJsComponents from 'adt-js-components';
+
+AdtJsComponents.registerModules({
+	fancyadmin: import.meta.glob('../../src/UI/**/index.js'),
+});

assets/js/_registerStandaloneBuiltins.js

@@ -0,0 +1,10 @@
+// Built-in adt-js-components used by FancyAdmin's own standalone build (admin.js).
+// In a real consuming project this allowlist lives in the project; here it's only
+// for the package's standalone build. Separate module so it's evaluated before
+// app.js's init() calls (static imports are hoisted, so a registerModules() call in
+// admin.js's body would run too late).
+import AdtJsComponents from 'adt-js-components';
+
+AdtJsComponents.registerModules({
+	builtin: import.meta.glob('../../node_modules/adt-js-components/src/{Messaging,Notifications,Translate}/index.js'),
+});

assets/js/admin.js

@@ -0,0 +1,8 @@
+// Standalone Vite entry for the FancyAdmin package — the equivalent of the old
+// webpack 'admin' build (which bundled assets/js/app.js).
+//
+// app.js self-registers FancyAdmin's own components ('fancyadmin' scope). For the
+// standalone build we additionally register the built-ins it uses, first, so the
+// registration runs before app.js's init() calls (imports are hoisted).
+import './_registerStandaloneBuiltins';
+import './app';

assets/js/app.js

@@ -1,22 +1,25 @@
+//
+// jQuery as a global — MUST be first so it is set before the legacy plugins below
+// (and bundled deps like nette.ajax.js) are evaluated. Imports are hoisted.
+//
+import $ from './_jquery-global';
+
+//
+// Register FancyAdmin's own JS components (before the init() calls below).
+//
+import './_registerFancyadminComponents';
+
 //
 // SCSS styles
 //
 import '../scss/app.scss';
 
 //
-// Old non-modular JS vendor files
+// Legacy non-modular jQuery plugins (rely on the global set above).
 //
-// import jQuery from 'jquery';
-import $ from 'jquery';
 import 'jquery-ui-bundle';
 import '@regru/jquery-menu-aim';
 
-window.$ = $;
-window.jquery = $;
-window.jQuery = $;
-
-global.jQuery = $;
-
 // import {Chart} from "chart.js/auto";
 import Nette from 'nette-forms';
 import './dependentSelectBox'

assets/js/datagrid.js

@@ -1,4 +1,6 @@
-datagridSortable = function($el) {
+// Explicit global: ublaboo renders inline scripts that call datagridSortable().
+// ESM modules are strict, so the previous implicit global assignment threw.
+window.datagridSortable = function($el) {
     if (typeof $.fn.sortable === 'undefined') {
         return;
     }

assets/js/datagrid/datagrid.js

@@ -915,3 +915,14 @@ dataGridRegisterExtension('datagrid.reset-filter-by-column', {
 		}
 	}
 });
+
+// Expose datagrid helpers as globals for ublaboo's inline scripts. Under webpack these
+// top-level `var`s were implicit globals; ESM modules are scoped, so expose explicitly.
+window.datagridFitlerMultiSelect = datagridFitlerMultiSelect;
+window.datagridGroupActionMultiSelect = datagridGroupActionMultiSelect;
+window.datagridShiftGroupSelection = datagridShiftGroupSelection;
+window.datagridSortableTree = datagridSortableTree;
+window.getEventDomPath = getEventDomPath;
+if (typeof datagridSortable !== 'undefined') {
+	window.datagridSortable = datagridSortable;
+}

assets/scss/_fontawesome.scss

@@ -1,5 +1,5 @@
-$fa-font-path: '~@fortawesome/fontawesome-pro/webfonts';
-
-@import '~@fortawesome/fontawesome-pro/scss/fontawesome';
-@import '~@fortawesome/fontawesome-pro/scss/solid';
-@import '~@fortawesome/fontawesome-pro/scss/sharp-solid';
+// FontAwesome's own $fa-font-path default ("../webfonts") is used as-is; the build
+// copies the webfonts to that location relative to the emitted CSS.
+@import '@fortawesome/fontawesome-pro/scss/fontawesome';
+@import '@fortawesome/fontawesome-pro/scss/solid';
+@import '@fortawesome/fontawesome-pro/scss/sharp-solid';

assets/scss/_variables.scss

@@ -1,9 +1,9 @@
-@import '~bootstrap/scss/functions';
+@import 'bootstrap/scss/functions';
 
 // Default variable overrides come here
 
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
 
 
 /* ====================

assets/scss/app.scss

@@ -1,8 +1,8 @@
 @import 'variables';
-@import '~bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/bootstrap';
 
-@import '~select2/src/scss/core';
-//@import '~select2-bootstrap-5-theme/src/include-all';
+@import 'select2/src/scss/core';
+//@import 'select2-bootstrap-5-theme/src/include-all';
 @import 'fontawesome';
 //@import 'daterangepicker';
 @import 'jquery-ui/datepicker';

package.json

@@ -1,54 +1,40 @@
 {
   "dependencies": {
-    "@babel/core": "^7.25.7",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.25.7",
     "@firebase/messaging": "^0.12.11",
     "@popperjs/core": "^2.11.8",
     "@regru/jquery-menu-aim": "^1.0.0",
     "adt-js-components": "^1.7.0",
     "adt-nette-ajax": "^1.0.0",
     "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.4.4",
     "clamp-js": "^0.7.0",
-    "clean-webpack-plugin": "^4.0.0",
     "codemirror": "^5",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
     "daterangepicker": "^3.1.0",
-    "expose-loader": "^5.0.0",
     "fabric": "^6.5.3",
-    "file-loader": "^6.2.0",
     "firebase": "8.10.1",
     "forms-replicator": "github:AppsDevTeam/replicator#master",
     "jquery": "^3.7.1",
     "jquery-ui-bundle": "^1.12.1-migrate",
-    "mini-css-extract-plugin": "^2.9.1",
     "nette-forms": "^3.5.0",
     "nette.ajax.js": "github:appsdevteam/nette.ajax.js#fix-nette-32",
     "postcss": "^8.4.47",
-    "postcss-loader": "^8.1.1",
-    "postcss-modules": "^6.0.0",
-    "raw-loader": "^4.0.2",
     "sass": "^1.79.4",
-    "sass-loader": "^16.0.2",
-    "script-loader": "^0.7.2",
-    "style-loader": "^4.0.0",
     "ua-parser-js": "^1.0.39",
-    "webpack": "^5.95.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^5.1.4",
     "kreait/firebase-php": "^7.0"
   },
   "packageManager": "yarn@3.2.0",
   "devDependencies": {
+    "@rollup/plugin-inject": "^5.0.5",
+    "sass-embedded": "^1.95.1",
+    "vite": "^6.4.0",
     "yarn-upgrade-all": "^0.7.4"
   },
   "scripts": {
-    "build": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "dev": "vite",
+    "watch": "vite build --mode development --watch"
   },
   "name": "adt-fancyadmin",
   "description": "Fancy visual and useful components for administration",

src/UI/Presenters/@layout.latte

@@ -16,11 +16,8 @@
 	<link rel="manifest" href="/manifest.webmanifest"/>
 	<link n:ifset="$faviconFileNamePng" rel="icon" type="image/svg+xml" href="{$basePath}/favicon/{$faviconFileNamePng}">
 	<link n:ifset="$faviconFileNameSvg" rel="icon" type="image/png" href="{$basePath}/favicon/{$faviconFileNameSvg}">
-	{if $hmr}
-		<link rel="stylesheet" href="https://localhost:3000/dist/portal/css/portal.css">
-	{else}
-		<link rel="stylesheet" href="{$basePath}/dist/portal/css/portal.css{v}">
-	{/if}
+	{* Vite entry (portal mapping) — emits the module script + its extracted CSS (and dev-server HMR client). *}
+	{asset 'portal:js/portal.js'}
 
 	{block colors}
 		{if isset($account) && $account?->getCss()}
@@ -160,11 +157,6 @@
 		</div>
 	</div>
 </div>
-{if $hmr}
-	<script src="https://localhost:3000/dist/portal/js/portal.js"></script>
-{else}
-	<script src="{$basePath}/dist/portal/js/portal.js{v}"></script>
-{/if}
 {snippet modals}
 	{block modals}{/block}
 {/snippet}

vite.config.mjs

@@ -0,0 +1,103 @@
+// Standalone Vite build for the FancyAdmin package (replaces the old webpack.config.js).
+// Consuming projects bundle FancyAdmin's assets from source via their own Vite config;
+// this build is for developing/checking the package on its own. Output: dist/admin/.
+import { defineConfig } from 'vite';
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import autoprefixer from 'autoprefixer';
+import inject from '@rollup/plugin-inject';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Copy fonts to where the compiled CSS references them. FontAwesome's @font-face uses
+// its built-in "../webfonts" default and the Roboto faces use "../fonts" — both relative
+// to the emitted CSS in dist/admin/, i.e. dist/{webfonts,fonts}.
+const copyFonts = () => ({
+	name: 'copy-fancyadmin-fonts',
+	apply: 'build',
+	writeBundle() {
+		const copies = [
+			['node_modules/@fortawesome/fontawesome-pro/webfonts', 'dist/webfonts'],
+			['assets/fonts', 'dist/fonts'],
+		];
+		for (const [from, to] of copies) {
+			const src = path.resolve(__dirname, from);
+			const dest = path.resolve(__dirname, to);
+			if (fs.existsSync(src)) {
+				fs.cpSync(src, dest, { recursive: true });
+			}
+		}
+	},
+});
+
+export default defineConfig(({ mode }) => {
+	const isProduction = mode === 'production';
+
+	return {
+		root: path.resolve(__dirname, 'assets'),
+
+		build: {
+			outDir: path.resolve(__dirname, 'dist/admin'),
+			assetsDir: '',
+			emptyOutDir: true,
+			sourcemap: !isProduction,
+			minify: isProduction ? 'esbuild' : false,
+			cssMinify: isProduction,
+			manifest: true,
+			rollupOptions: {
+				input: path.resolve(__dirname, 'assets/js/admin.js'),
+			},
+		},
+
+		server: {
+			https: false,
+			host: 'localhost',
+			port: 3002,
+			strictPort: true,
+		},
+
+		css: {
+			devSourcemap: !isProduction,
+			preprocessorOptions: {
+				scss: {
+					quietDeps: true,
+					api: 'modern-compiler',
+					loadPaths: [
+						path.resolve(__dirname, 'node_modules'),
+					],
+				},
+			},
+			modules: {
+				generateScopedName: isProduction
+					? '[hash:base64]'
+					: '[path][local]__[hash:base64:5]',
+				localsConvention: 'camelCase',
+			},
+			postcss: {
+				plugins: [autoprefixer()],
+			},
+		},
+
+		plugins: [
+			// Inject jQuery globally (replaces webpack ProvidePlugin / expose-loader).
+			// select2's UMD self-registers on the global jQuery, so don't rewrite it there.
+			inject({
+				include: ['**/*.js'],
+				exclude: [/select2/],
+				$: 'jquery',
+				jQuery: 'jquery',
+			}),
+
+			copyFonts(),
+		],
+
+		optimizeDeps: {
+			include: ['jquery'],
+		},
+
+		define: {
+			'process.env.NODE_ENV': JSON.stringify(mode),
+		},
+	};
+});