[WIP] Add a Vite-based manual test server

packages/ckeditor5-dev-manual-server/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in the main repository. See: https://github.com/ckeditor/ckeditor5-dev/blob/master/CHANGELOG.md.

packages/ckeditor5-dev-manual-server/LICENSE.md

@@ -0,0 +1,16 @@
+Software License Agreement
+==========================
+
+Copyright (c) 2003-2026, [CKSource](http://cksource.com) Holding sp. z o.o. All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource](http://cksource.com) Holding sp. z o.o. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

packages/ckeditor5-dev-manual-server/README.md

@@ -0,0 +1,17 @@
+CKEditor 5 manual server
+=======================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-dev-manual-server.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-manual-server)
+[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5-dev.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-dev?branch=master)
+
+Used to extend Vite to create a manual test server for CKEditor 5.
+
+More information about development tools packages can be found at the following URL: <https://github.com/ckeditor/ckeditor5-dev>.
+
+## Changelog
+
+See the [`CHANGELOG.md`](https://github.com/ckeditor/ckeditor5-dev/blob/master/packages/ckeditor5-dev-manual-server/CHANGELOG.md) file.
+
+## License
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file.

packages/ckeditor5-dev-manual-server/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@ckeditor/ckeditor5-dev-manual-server",
+  "version": "0.1.0",
+  "description": "Used to extend Vite to create a manual test server for CKEditor 5.",
+  "keywords": [],
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
+  "homepage": "https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-manual-server",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ckeditor/ckeditor5-dev.git",
+    "directory": "packages/ckeditor5-dev-manual-server"
+  },
+  "engines": {
+    "node": ">=24.11.0",
+    "npm": ">=5.7.1"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "theme"
+  ],
+  "bin": {
+    "ckeditor5-dev-manual-server": "dist/index.js"
+  },
+  "scripts": {
+    "build": "rolldown -c rolldown.config.ts",
+    "dev": "rolldown -c rolldown.config.ts --watch",
+    "test": "vitest run --config vitest.config.ts",
+    "coverage": "vitest run --config vitest.config.ts --coverage",
+    "test:dev": "vitest dev"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-inspector": "^5.0.1",
+    "@parse5/tools": "^0.7.0",
+    "hast-util-to-html": "^9.0.5",
+    "parse5": "^8.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "unified": "^11.0.5",
+    "vite": "^8.0.13",
+    "vite-svg-loader": "^5.1.1"
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^4.1.2",
+    "rolldown": "^1.0.3",
+    "upath": "^2.0.1",
+    "vitest": "^4.1.2"
+  }
+}

packages/ckeditor5-dev-manual-server/rolldown.config.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { defineConfig } from 'rolldown';
+import { declarationFiles } from '../ckeditor5-dev-build-tools/src/plugins/declarations.js';
+import pkg from './package.json' with { type: 'json' };
+
+const packageJson = pkg as {
+	dependencies?: Record<string, string>;
+	peerDependencies?: Record<string, string>;
+};
+
+const externals = [
+	...Object.keys( packageJson.dependencies || {} ),
+	...Object.keys( packageJson.peerDependencies || {} )
+];
+
+export default defineConfig( {
+	input: 'src/index.ts',
+	platform: 'node',
+	output: {
+		cleanDir: true,
+		format: 'esm',
+		dir: 'dist',
+		assetFileNames: '[name][extname]'
+	},
+	plugins: [
+		declarationFiles( {
+			sourceDirectory: 'src'
+		} )
+	],
+	external: id => externals.some( name => id.startsWith( name ) )
+} );

packages/ckeditor5-dev-manual-server/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+export { createManualTestsPlugin } from './manual-test-plugin/plugin.js';
+export type { ManualData } from './manual-test-plugin/plugin.js';
+
+export { createManualRefreshPlugin } from './manual-refresh-plugin/plugin.js';
+
+export { stringifyValues } from './utils.js';

packages/ckeditor5-dev-manual-server/src/manual-refresh-plugin/plugin.ts

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import type { HotPayload, Plugin } from 'vite';
+
+const MANUAL_REFRESH_EVENT_NAME = 'ckeditor5-manual:refresh-available';
+
+type HotSendArguments = [ payload: HotPayload ];
+
+interface BundledDevClientEnvironment {
+	initialBuildCompleted: boolean;
+}
+
+export function createManualRefreshPlugin(): Plugin {
+	return {
+		name: 'ckeditor5-manual-refresh',
+		apply: 'serve',
+
+		configureServer( server ) {
+			const clientEnvironment = server.environments.client as typeof server.environments.client & BundledDevClientEnvironment;
+			const hot = clientEnvironment.hot;
+			const send = hot.send.bind( hot );
+
+			hot.send = ( ( ...args: HotSendArguments ) => {
+				const { type } = args[ 0 ];
+
+				if ( type == 'update' || ( type == 'full-reload' && clientEnvironment.initialBuildCompleted ) ) {
+					return send( {
+						type: 'custom',
+						event: MANUAL_REFRESH_EVENT_NAME
+					} );
+				}
+
+				send( ...args );
+			} );
+		}
+	};
+}

packages/ckeditor5-dev-manual-server/src/manual-test-plugin/collect-pages.ts

@@ -0,0 +1,100 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { globSync } from 'node:fs';
+import { stripLeadingSlash, toPosixPath, toPublicSpecifier } from '../utils.js';
+import type { ManualPageEntry, ManualTestAssetExtension } from './types.js';
+
+interface ParsedManualTestAssetPath {
+	extension: ManualTestAssetExtension;
+	packageName: string;
+	packageRootPath: string;
+	slug: string;
+}
+
+export function collectManualPages( patterns: Array<string>, workspaceRoot: string ): Map<string, ManualPageEntry> {
+	const groupedFiles = new Map<string, Partial<Record<ManualTestAssetExtension, string>>>();
+	const manualPages: Array<ManualPageEntry> = [];
+
+	for ( const relativeFilePath of matchFiles( patterns, workspaceRoot ) ) {
+		if ( relativeFilePath.includes( '/_utils/' ) ) {
+			continue;
+		}
+
+		const parsedPath = parseManualTestAssetPath( relativeFilePath );
+
+		if ( !parsedPath ) {
+			continue;
+		}
+
+		const entryKey = `${ parsedPath.packageRootPath }/${ parsedPath.packageName }/${ parsedPath.slug }`;
+		const matchedFiles = groupedFiles.get( entryKey ) || {};
+
+		matchedFiles[ parsedPath.extension ] = relativeFilePath;
+		groupedFiles.set( entryKey, matchedFiles );
+	}
+
+	for ( const matchedFiles of groupedFiles.values() ) {
+		if ( !matchedFiles.html ) {
+			continue;
+		}
+
+		const scriptFilePath = matchedFiles.ts || matchedFiles.js;
+
+		if ( !scriptFilePath ) {
+			continue;
+		}
+
+		const parsedPath = parseManualTestAssetPath( scriptFilePath )!;
+
+		manualPages.push( {
+			displayName: humanizeSlug( parsedPath.slug ),
+			htmlFilePath: toPublicSpecifier( matchedFiles.html ),
+			instructionsFilePath: matchedFiles.md ? toPublicSpecifier( matchedFiles.md ) : undefined,
+			packageName: parsedPath.packageName,
+			scriptFilePath: toPublicSpecifier( scriptFilePath ),
+			slug: parsedPath.slug,
+			source: parsedPath.packageRootPath == 'packages' ? 'commercial' : 'oss'
+		} );
+	}
+
+	manualPages.sort( ( a, b ) => a.packageName.localeCompare( b.packageName ) || a.slug.localeCompare( b.slug ) );
+
+	return new Map( manualPages.map( entry => [ entry.htmlFilePath, entry ] ) );
+}
+
+function parseManualTestAssetPath( filePath: string ): ParsedManualTestAssetPath | null {
+	const normalizedFilePath = stripLeadingSlash( toPosixPath( filePath ) );
+	const match = normalizedFilePath.match(
+		/^(packages|external\/ckeditor5\/packages)\/([^/]+)\/tests\/manual\/(.+)\.(html|js|md|ts)$/
+	);
+
+	if ( !match ) {
+		return null;
+	}
+
+	return {
+		extension: match[ 4 ]! as ParsedManualTestAssetPath[ 'extension' ],
+		packageName: match[ 2 ]!,
+		packageRootPath: match[ 1 ]!,
+		slug: match[ 3 ]!
+	};
+}
+
+function humanizeSlug( slug: string ): string {
+	return slug
+		.split( '/' )
+		.map( pathPart =>
+			pathPart
+				.split( '-' )
+				.map( part => part.charAt( 0 ).toUpperCase() + part.slice( 1 ) )
+				.join( ' ' )
+		)
+		.join( ' / ' );
+}
+
+function matchFiles( patterns: Array<string>, workspaceRoot: string ): Array<string> {
+	return patterns.flatMap( pattern => globSync( pattern, { cwd: workspaceRoot } ).map( match => toPosixPath( match ) ) );
+}

packages/ckeditor5-dev-manual-server/src/manual-test-plugin/parse-markdown.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { unified } from 'unified';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { toHtml } from 'hast-util-to-html';
+import type { ManualPageEntry } from './types.js';
+
+const markdownProcessor = unified()
+	.use( remarkParse )
+	.use( remarkGfm )
+	.use( remarkRehype );
+
+export function loadRenderedInstructions( entry: ManualPageEntry, workspaceRoot: string ): string {
+	if ( !entry.instructionsFilePath ) {
+		return '';
+	}
+
+	const absolutePath = resolve( workspaceRoot, entry.instructionsFilePath.slice( 1 ) );
+	const markdown = readFileSync( absolutePath, 'utf8' ).trim();
+
+	if ( !markdown ) {
+		return '';
+	}
+
+	const tree = markdownProcessor.runSync( markdownProcessor.parse( markdown ) );
+
+	return toHtml( tree );
+}
+