umberto 10.7.1 → 10.7.2

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 Changelog
 =========
 
+## [10.7.2](https://github.com/cksource/umberto/compare/v10.7.1...v10.7.2) (July 16, 2026)
+
+### Other changes
+
+* Replaced webpack with Rolldown for building theme scripts. The theme bundles are now built as ES modules with code splitting and loaded via `<script type="module">`, keeping dynamically imported dependencies (such as the shiki grammars in the Gloria theme) in separate, lazily loaded chunks. The output targets ES2022 instead of the Babel-transpiled ES5, and `webpack`, `babel-loader`, `@babel/core`, and `@babel/preset-env` are no longer dependencies of the package.
+
+
 ## [10.7.1](https://github.com/cksource/umberto/compare/v10.7.0...v10.7.1) (July 15, 2026)
 
 ### Bug fixes
@@ -50,13 +57,6 @@ Changelog
 
 * Updated the GTM integration to use the new server-side setup in both Gloria and legacy Umberto themes.
 
-
-## [10.5.1](https://github.com/cksource/umberto/compare/v10.5.0...v10.5.1) (May 14, 2026)
-
-### Bug fixes
-
-* Changed the call for feedback title from `<h3>` to `<div>` to prevent it from appearing in the table of contents.
-
 ---
 
 To see all releases, visit the [release page](https://github.com/cksource/umberto/releases).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umberto",
-  "version": "10.7.1",
+  "version": "10.7.2",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",
@@ -15,11 +15,8 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@babel/core": "^7.29.7",
-    "@babel/preset-env": "^7.29.7",
     "@minify-html/node": "^0.17.1",
     "@vscode/markdown-it-katex": "^1.1.2",
-    "babel-loader": "^10.0.0",
     "chokidar": "^4.0.3",
     "css-select": "^6.0.0",
     "dom-serializer": "^2.0.0",
@@ -55,6 +52,7 @@
     "minimatch": "^10.0.1",
     "moment": "^2.29.4",
     "pug": "^3.0.2",
+    "rolldown": "^1.1.5",
     "sass": "^1.54.0",
     "shiki": "^3.4.0",
     "sitemap": "^8.0.0",
@@ -62,8 +60,7 @@
     "tinypool": "^2.0.0",
     "tippy.js": "^6.3.7",
     "tree-model": "^1.0.7",
-    "upath": "^2.0.1",
-    "webpack": "^5.94.0"
+    "upath": "^2.0.1"
   },
   "engines": {
     "node": ">=24.11.0"
@@ -76,6 +73,6 @@
     ]
   },
   "hexo": {
-    "version": "8.1.1"
+    "version": "8.1.2"
   }
 }

package/src/index.js

@@ -6,7 +6,7 @@
 import { styleText } from 'node:util';
 import upath from 'upath';
 import { compileSass } from './tasks/compile-sass.js';
-import { runWebpack } from './tasks/run-webpack.js';
+import { prepareLayoutScripts } from './tasks/prepare-layout-scripts.js';
 import { copyAssets } from './tasks/copy-assets.js';
 import { getMainConfig } from './tasks/get-main-config.js';
 import { createSymLinks } from './tasks/create-sym-links.js';
@@ -102,12 +102,12 @@ async function buildThemes( outputDir, options ) {
 	const layoutThemes = [ 'umberto', 'gloria' ];
 
 	for ( const theme of layoutThemes ) {
-		await runWebpack(
+		await prepareLayoutScripts(
 			upath.join( sourceDir, theme, 'js/app.js' ),
 			upath.join( outputAssetsPath, theme, 'scripts' ),
 			{
+				theme,
 				minify: !options.dev,
-				umbertoDir: themesDir,
 				version
 			}
 		);

package/src/tasks/prepare-layout-scripts.js

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2017-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import upath from 'upath';
+import { build } from 'rolldown';
+
+export const prepareLayoutScripts = async ( sourceFile, destinationDirectory, {
+	theme,
+	minify = true,
+	outputFileName = 'app.js',
+	version,
+	basePath = '/docs'
+} = {} ) => {
+	console.log( `Preparing layout scripts ("${ outputFileName }") for the "${ theme }" theme...` );
+
+	await build( {
+		input: upath.resolve( sourceFile ),
+		transform: {
+			target: 'es2022',
+			define: {
+				VERSION: JSON.stringify( version ),
+				BASE_PATH: JSON.stringify( basePath )
+			}
+		},
+		output: {
+			dir: upath.resolve( destinationDirectory ),
+			// The bundles are loaded via `<script type="module">`, so dynamically imported dependencies
+			// (e.g. the shiki grammars) are emitted as separate chunks loaded on demand instead of being
+			// inlined into the entry bundle.
+			format: 'es',
+			entryFileNames: outputFileName,
+			chunkFileNames: 'app.[hash].js',
+			minify,
+			sourcemap: !minify
+		}
+	} );
+};

package/themes/umberto/layout/gloria/404.pug

@@ -28,4 +28,4 @@ html(lang='en')
 			.l-layout__main
 				+not-found
 
-		script(src=`/docs/assets/${umbertoVersion}/gloria/scripts/app.js`)
+		script(type='module', src=`/docs/assets/${umbertoVersion}/gloria/scripts/app.js`)

package/themes/umberto/layout/gloria/_head/head-preloads.pug

@@ -12,7 +12,7 @@ mixin head-preloads()
 			{ type: 'font', path: 'fonts/Mulish/Mulish-Italic-VariableFont_wght.woff2' },
 
 			// Scripts
-			{ type: 'script', path: 'scripts/app.js' }
+			{ type: 'module', path: 'scripts/app.js' }
 		];
 
 	//- Preconnect to CDN
@@ -24,6 +24,8 @@ mixin head-preloads()
 
 		if resource.type === 'font'
 			link(rel='preload', href=url, as=resource.type, crossorigin='anonymous')
+		else if resource.type === 'module'
+			link(rel='modulepreload', href=url)
 		else
 			link(rel='preload', href=url, as=resource.type)
 

package/themes/umberto/layout/gloria/_head/head.pug

@@ -56,7 +56,16 @@ if kapa
 if sentry
 	+load-sentry-script(sentry)
 
-script(src=relative_url(page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js')))
+//- `app.js` is a module script, so it executes only after the document is parsed. This bootstrap queue lets
+//- classic scripts that run during parsing register `window.umberto.afterReady()` callbacks anyway. The full
+//- public API (`src/gloria/js/public-api.js`) merges into this object once the module executes.
+script.
+	window.umberto = {
+		afterReady( callback ) {
+			( this._afterReadyCallbacks = this._afterReadyCallbacks || [] ).push( callback );
+		}
+	};
+script(type='module', src=relative_url(page.path, pathJoin( 'assets', umbertoVersion, 'gloria/scripts/app.js')))
 
 if page.BASE_PATH
 	//- When a project does not define its own assets, let's use the default ones (from a theme).

package/themes/umberto/layout/umberto/base.pug

@@ -32,7 +32,7 @@ html( lang='en' )
 		include _partial/footer
 		include _partial/docsearch
 
-		script( src = relative_url( page.path, pathJoin( 'assets', umbertoVersion, 'umberto/scripts/app.js' ) ) )
+		script( type = 'module', src = relative_url( page.path, pathJoin( 'assets', umbertoVersion, 'umberto/scripts/app.js' ) ) )
 
 		if page.isSnippetPage
 			//UMBERTO: SNIPPET: JS

package/themes/umberto/src/gloria/js/public-api.js

@@ -19,8 +19,11 @@ import { injectStylesheet } from './helpers/inject-stylesheet.js';
 import { injectResourcePreload } from './helpers/inject-resource-preload.js';
 import { onDropdownSelection, selectDropdownItem } from './components/dropdown.js';
 
-window.umberto = {
-	// The `VERSION` value will be replaced by the `DefinePlugin` webpack plugin.
+// The `window.umberto` object may already exist: a bootstrap script in the page `<head>` creates it so that
+// classic scripts executed while the document is still being parsed (before this module runs) can queue
+// `afterReady()` callbacks. Merge into that object to preserve the queued callbacks.
+window.umberto = Object.assign( window.umberto || {}, {
+	// The `VERSION` value will be replaced at build time.
 	version: VERSION, // eslint-disable-line no-undef
 
 	// Tooltips public API
@@ -72,4 +75,4 @@ window.umberto = {
 
 		this._afterReadyCallbacks.push( callback );
 	}
-};
+} );

package/themes/umberto/src/umberto/js/app.js

@@ -31,7 +31,7 @@ if ( localStorage.getItem( 'theme' ) === 'theme-dark' ) {
 
 // Set up the global variable.
 window.umberto = {
-	// The `VERSION` value will be replaced by the `DefinePlugin` webpack plugin.
+	// The `VERSION` value will be replaced at build time.
 	version: VERSION, // eslint-disable-line no-undef
 	showWarningBanner,
 	createTooltip

package/src/tasks/run-webpack.js

@@ -1,88 +0,0 @@
-/**
- * @license Copyright (c) 2017-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */
-
-import upath from 'upath';
-import { createRequire } from 'node:module';
-import webpack from 'webpack';
-
-const require = createRequire( import.meta.url );
-
-export const runWebpack = ( sourceFile, destinationFile, {
-	minify = true,
-	outputFileName = 'app.js',
-	umbertoDir,
-	version,
-	basePath = '/docs'
-} = {} ) => {
-	const webpackConfig = {
-		context: umbertoDir,
-
-		mode: minify ? 'production' : 'development',
-
-		entry: upath.resolve( sourceFile ),
-
-		output: {
-			filename: outputFileName,
-			path: upath.resolve( destinationFile )
-		},
-
-		target: 'web',
-
-		optimization: {
-			minimize: minify
-		},
-
-		// Increased the size of the allowed assets two times to hide the warning in the console.
-		performance: {
-			hints: false,
-			maxEntrypointSize: 500000,
-			maxAssetSize: 500000
-		},
-
-		plugins: [
-			new webpack.DefinePlugin( {
-				VERSION: `"${ version }"`,
-				BASE_PATH: JSON.stringify( basePath )
-			} )
-		],
-
-		module: {
-			rules: [
-				{
-					test: /\.js$/,
-					use: {
-						loader: 'babel-loader',
-						options: {
-							presets: [
-								require.resolve( '@babel/preset-env' )
-							]
-
-						}
-					}
-				}
-			]
-		}
-	};
-
-	if ( !minify ) {
-		webpackConfig.devtool = 'source-map';
-	}
-
-	return new Promise( ( resolve, reject ) => {
-		console.log( `Running webpack for "${ outputFileName }"...` );
-
-		webpack( webpackConfig, ( err, stats ) => {
-			if ( err ) {
-				reject( err );
-			} else if ( stats.hasErrors() ) {
-				reject( new Error( stats.toString() ) );
-			} else {
-				console.log( '[Webpack]', stats.toString( 'minimal' ) );
-
-				resolve();
-			}
-		} );
-	} );
-};