umberto 10.7.0 → 10.7.2

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 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
+
+* Fixed source links for CKEditor 5 packages in API documentation so they now point to the public repository. Links for the latest documentation point to the `master` branch, and links for LTS documentation point to the matching `release-v*` branch.
+
+### Other changes
+
+* Improved the performance of the documentation build. Pug templates of XML components used in Markdown are now compiled once and reused across pages, instead of being recompiled for every component occurrence. This shortens the page generation phase by about 20%.
+
+
 ## [10.7.0](https://github.com/cksource/umberto/compare/v10.6.1...v10.7.0) (July 2, 2026)
 
 ### Features
@@ -39,20 +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.
-
-
-## [10.5.0](https://github.com/cksource/umberto/compare/v10.4.1...v10.5.0) (April 14, 2026)
-
-### Features
-
-* Added the Call for feedback component for documentation pages.
-
 ---
 
 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.0",
+  "version": "10.7.2",
   "description": "CKSource Documentation builder",
   "main": "src/index.js",
   "type": "module",
@@ -15,11 +15,8 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.29.5",
     "@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",
@@ -41,7 +38,7 @@
     "jquery": "~3.7.1",
     "js-beautify": "^1.14.4",
     "lodash": "^4.17.21",
-    "markdown-it": "^14.1.1",
+    "markdown-it": "^14.2.0",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-deflist": "^2.1.0",
     "markdown-it-emoji": "^2.0.2",
@@ -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/scripts/utils/pug-to-xml-binding/render-xml-pug-components-in-markdown.cjs

@@ -9,6 +9,39 @@ const transformXMLTreeToPug = require( './transform-xml-tree-to-pug.cjs' );
 const XMLComponentsParser = require( './parser/xml-components-parser.cjs' );
 const { walkXMLTree, TreeWalkActions } = require( './parser/walk-xml-tree.cjs' );
 
+// Compiled Pug templates of component mixin calls, keyed by the generated template text.
+// Compiling a template is expensive because Pug lexes and parses the whole `include` tree
+// on every compilation, and the same mixin calls repeat across pages. The compiled function
+// is not bound to any locals, so it can be safely reused with per-page locals.
+//
+// The cache lives for the whole process, like the cache in `createPrerenderPugTemplate()`,
+// so changes to component Pug files require a restart in the watch mode.
+const compiledTemplateCache = new Map();
+
+/**
+ * Compiles a Pug template through the Hexo Pug renderer, reusing previously compiled templates.
+ *
+ * Falls back to `null` when the renderer does not support compilation, in which case the caller
+ * should render through `hexo.render.renderSync()`.
+ */
+function getCompiledPugTemplate( hexo, text, path ) {
+	const cacheKey = `${ path }\n${ text }`;
+	let template = compiledTemplateCache.get( cacheKey );
+
+	if ( !template ) {
+		const pugRenderer = hexo.render.renderer?.get( 'pug' );
+
+		if ( !pugRenderer?.compile ) {
+			return null;
+		}
+
+		template = pugRenderer.compile( { text, path } );
+		compiledTemplateCache.set( cacheKey, template );
+	}
+
+	return template;
+}
+
 /**
  * Slices XML components from Markdown content and transforms them to Pug format.
  *
@@ -93,14 +126,18 @@ function renderXMLPugComponentsInMarkdown( xml, options ) {
 					let finalReplacement = null;
 
 					try {
-						finalReplacement = hexo.render.renderSync(
-							{
-								engine: 'pug',
-								text: content,
-								path: basePath
-							},
-							locals
-						).trim();
+						const template = getCompiledPugTemplate( hexo, content, basePath );
+
+						finalReplacement = template ?
+							template( locals ).trim() :
+							hexo.render.renderSync(
+								{
+									engine: 'pug',
+									text: content,
+									path: basePath
+								},
+								locals
+							).trim();
 					} catch ( error ) {
 						console.error( error );
 						console.error( `Error rendering component "${ node.name }" in file ${ sourceName }` );

package/src/api-builder/api-builder.js

@@ -19,6 +19,7 @@ import { getShortModulePath } from '../helpers/get-short-module-path.js';
 import { getDocsearchConfig as getDocSearchConfig } from '../helpers/get-docsearch-config.js';
 import { splitLongname } from '../helpers/split-longname.js';
 import { getIssueUrl, getFullGithubLink } from '../helpers/github-url.js';
+import { rewritePublicSourceUrl } from '../helpers/rewrite-public-source-url.js';
 import getReportIssueWidgetUrl from '../../scripts/utils/getreportissuewidgeturl.cjs';
 import { randomId } from '../../scripts/utils/random-id.cjs';
 import parseHref from '../../scripts/utils/parse-href.cjs';
@@ -521,6 +522,7 @@ export class ApiBuilder {
 					groups,
 					seeSourceRepositoryUrl: this._projectConfig.github !== undefined ? this._projectConfig.github.url : realImportPath,
 					getLinkToSource: getFullGithubLink.bind( this ),
+					rewritePublicSourceUrl: url => rewritePublicSourceUrl( url, this._projectConfig.ckeditor5SourceLinkBranch ),
 					docSearchConfig: getDocSearchConfig( this._docSearch, {
 						groups: this._groups,
 						slug: this._projectSlug,

package/src/helpers/rewrite-public-source-url.js

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright (c) 2017-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * Rewrites CKEditor 5 public package source links generated from the commercial repository checkout.
+ *
+ * @param {String} sourceUrl
+ * @param {String} sourceBranch
+ * @returns {String}
+ */
+export function rewritePublicSourceUrl( sourceUrl, sourceBranch ) {
+	if ( !sourceUrl || !sourceBranch ) {
+		return sourceUrl;
+	}
+
+	let url;
+
+	try {
+		url = new URL( sourceUrl );
+	} catch {
+		return sourceUrl;
+	}
+
+	if ( url.hostname !== 'github.com' ) {
+		return sourceUrl;
+	}
+
+	const match = url.pathname.match( /^\/[^/]+\/ckeditor5-commercial\/blob\/[^/]+\/external\/ckeditor5\/(.+)$/ );
+
+	if ( !match ) {
+		return sourceUrl;
+	}
+
+	return [
+		'https://github.com/ckeditor/ckeditor5',
+		'blob',
+		sourceBranch,
+		match[ 1 ]
+	].join( '/' ) + url.search + url.hash;
+}

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/get-project-config.js

@@ -92,6 +92,7 @@ export const getProjectConfig = async ( rootPath, options = {} ) => {
 	validateConfiguration( config );
 
 	config.version = getProjectVersion( rootPath );
+	config.ckeditor5SourceLinkBranch = getCKEditor5SourceLinkBranch( rootPath, config );
 
 	parseGitHubUrls( config, rootPath );
 
@@ -304,6 +305,44 @@ function getProjectVersion( rootPath ) {
 	return version || 'latest';
 }
 
+/**
+ * Returns CKEditor 5 source link branch based on LTS metadata from `package.json`.
+ *
+ * @param {String} rootPath
+ * @param {Object} config
+ * @param {String} config.slug
+ * @param {String} config.version
+ * @return {String|undefined}
+ */
+function getCKEditor5SourceLinkBranch( rootPath, config ) {
+	if ( config.slug !== 'ckeditor5' ) {
+		return;
+	}
+
+	const packageJson = getPackageJson( rootPath );
+	const ltsVersions = packageJson ? packageJson[ 'ck-lts-versions' ] : null;
+	const releaseLine = getReleaseLine( config.version );
+	const ltsReleaseLines = Array.isArray( ltsVersions ) ? ltsVersions.map( Number ) : null;
+
+	if ( !ltsReleaseLines || releaseLine === null ) {
+		return;
+	}
+
+	const isLtsVersion = ltsReleaseLines.includes( releaseLine );
+
+	return isLtsVersion ? `release-v${ releaseLine }` : 'master';
+}
+
+/**
+ * @param {String} version
+ * @return {Number|null}
+ */
+function getReleaseLine( version ) {
+	const match = version.match( /^(\d+)\./ );
+
+	return match ? Number( match[ 1 ] ) : null;
+}
+
 /**
  * Tries to find a URL to the repository based on the value in `package.json`, under the "repository" object.
  *

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/_api-docs/_mixin/_api-see-source.pug

@@ -1,7 +1,8 @@
 mixin seeSource( item )
 	//- Do not render "See source" button if the module or the parsed item (e.g. a function) has the `@skipsource` annotation
 	if ( projectLocals.seeSourceRepositoryUrl && item.file && !( data.skipSource || item.skipSource ) )
-		- const link = item.file.url || projectLocals.getLinkToSource( projectLocals.seeSourceRepositoryUrl, item.file );
+		- const sourceLink = item.file.url || projectLocals.getLinkToSource( projectLocals.seeSourceRepositoryUrl, item.file );
+		- const link = projectLocals.rewritePublicSourceUrl( sourceLink );
 
 		if link
 			.see-source

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();
-			}
-		} );
-	} );
-};