Add DLL modules to the global scope

docs/builds/guides/development/dll-builds.md

@@ -367,11 +367,11 @@ The code bundled in the DLL can be used directly in a `<script>` tag:
 
 <script>
 	// Import Bold, Italic from the CKEditor 5 global.
-	const { ClassicEditor, BasicStyles } = CKEditor5;
-	const { Bold, Italic } = BasicStyles;
+	const { ClassicEditor, basicStyles, core, ui } = CKEditor5;
+	const { Bold, Italic } = basicStyles;
 
-	const { Plugin, Command } = CKEditor5.DLL( './src/core.js' );
-	const { ButtonView } = CKEditor5.DLL( './src/core.js' );
+	const { Plugin, Command } = core;
+	const { ButtonView } = ui;
 
 	class ExampleCommand extends Command {
 		execute() {

sample/index.html

@@ -119,6 +119,31 @@ <h3>The editable</h3>
 	const { TableToolbar, TableCellProperties, TableProperties } = table;
 	const { Bold, Italic } = basicStyles;
 
+	// Create ad-hoc plugin.
+	const { core, ui } = CKEditor5;
+	const { Plugin } = core;
+	const { ButtonView } = ui;
+
+	class AdHocPlugin extends Plugin {
+		constructor( editor ) {
+			super( editor );
+
+			editor.ui.componentFactory.add( 'ad-hoc-button', locale => {
+				const button = new ButtonView( locale );
+
+				button.set( {
+					icon: false,
+					withText: true,
+					label: 'Ad-hoc'
+				} );
+
+				button.on( 'execute', () => console.log( 'It Works!' ) );
+
+				return button;
+			} );
+		}
+	}
+
 	const config = {
 		extraPlugins: [
 			Bold,
@@ -129,7 +154,8 @@ <h3>The editable</h3>
 			TableToolbar,
 			TableCellProperties,
 			TableProperties,
-			DLLConsumerPlugin // exposed by the dll-consumer-plugin.js
+			DLLConsumerPlugin, // exposed by the dll-consumer-plugin.js
+			AdHocPlugin
 		],
 		toolbar: [
 			'bold',
@@ -139,6 +165,7 @@ <h3>The editable</h3>
 			'htmlEmbed',
 			'|',
 			'a-button',
+			'ad-hoc-button',
 			'|',
 			'undo',
 			'redo'

scripts/dll/dll-loader.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* eslint-env node */
+
+/**
+ * This loader attaches exported modules to the global (`window`) scope.
+ *
+ * It touches the "main" (`package/src/index.js`) files that re-export the public API.
+ *
+ * Files that will be modified (re-exports):
+ *   - packages/ckeditor5-enter/src/index.js
+ *   - packages/ckeditor5-ui/src/index.js
+ *   - packages/ckeditor5-core/src/index.js
+ *   - etc.
+ *
+ * Files that will not be touched:
+ *   - packages/ckeditor5-ui/src/focuscycler.js
+ *   - packages/ckeditor5-enter/src/shiftenter.js
+ *   - etc.
+ *
+ * The loader assumes that `window.CKEditor5_DLL` is a webpack require function.
+ *
+ * @param {String} source
+ * @param {*} map
+ */
+module.exports = function dllLoader( source, map ) {
+	// Touch only the ckeditor5-* files...
+	if ( this.resourcePath.match( /ckeditor5?-/ ) ) {
+		// ...that re-export the public API.
+		if ( this.resourcePath.match( /index.js$/ ) ) {
+			const scope = this.resourcePath.match( /ckeditor5?-([^/\\]+)/ )[ 1 ];
+			const windowScope = scope.replace( /-([a-z])/g, ( match, p1 ) => p1.toUpperCase() );
+
+			const attachModuleToGlobalScope = [
+				// Define the global scope.
+				'window.CKEditor5 = window.CKEditor5 || {};',
+				// Load modules into the global scope using webpack loader.
+				`window.CKEditor5.${ windowScope } = window.CKEditor5_DLL( './src/${ scope }.js' );`
+			].join( '' );
+
+			source += attachModuleToGlobalScope;
+		}
+	}
+
+	this.callback( null, source, map );
+};

webpack.config.dll.js

@@ -80,6 +80,10 @@ module.exports = {
 						} )
 					}
 				]
+			},
+			{
+				test: /\.js$/,
+				loader: require.resolve( './scripts/dll/dll-loader' )
 			}
 		]
 	}