Add bundler-friendly dependency injection

README.md

@@ -522,6 +522,13 @@ You can add your own extensions using the same syntax. The following properties
 - **callback**: [optional] Function to execute when the script has loaded
 - **condition**: [optional] Function which must return true for the script to be loaded
 
+You can additionally use the following syntax, in case you are using a bundler:
+- **id**: the id of the plugin to load
+- **plugin**: the plugin object to load. It is the plugin implementation that can contain an `init` function
+- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false
+- **callback**: [optional] Function to execute when the script has loaded
+- **condition**: [optional] Function which must return true for the script to be loaded
+
 ### Ready Event
 
 A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.

js/controllers/plugins.js

@@ -48,17 +48,22 @@ export default class Plugins {
 			if( scripts.length ) {
 				scriptsToLoad = scripts.length;
 
+				const scriptLoadedCallback = (s) => {
+					if( typeof s.callback === 'function' ) s.callback();
+
+					if( --scriptsToLoad === 0 ) {
+						this.initPlugins().then( resolve );
+					}
+				};
+
 				// Load synchronous scripts
 				scripts.forEach( s => {
-					loadScript( s.src, () => {
+					if (s.id) {
-
+						this.registerPlugin(s.id, s.plugin);
-						if( typeof s.callback === 'function' ) s.callback();
+						scriptLoadedCallback(s);
-
+					} else {
-						if( --scriptsToLoad === 0 ) {
+						loadScript( s.src, () => scriptLoadedCallback(s));
-							this.initPlugins().then( resolve );
+					}
-						}
-
-					} );
 				} );
 			}
 			else {
@@ -129,7 +134,13 @@ export default class Plugins {
 
 		if( this.asyncDependencies.length ) {
 			this.asyncDependencies.forEach( s => {
-				loadScript( s.src, s.callback );
+				if (s.id) {
+					this.registerPlugin(s.id, s.plugin);
+					if (typeof s.plugin.init === 'function') { s.plugin.init(); }
+					if (typeof s.callback === 'function') { s.callback(); }
+				} else {
+					loadScript( s.src, s.callback );
+				}
 			} );
 		}
 

js/reveal.js

@@ -180,7 +180,7 @@ export default function( revealElement, options ) {
 
 		// Flags if we should use zoom instead of transform to scale
 		// up slides. Zoom produces crisper results but has a lot of
-		// xbrowser quirks so we only use it in whitelsited browsers.
+		// xbrowser quirks so we only use it in white-listed browsers.
 		features.zoom = 'zoom' in testElement.style && !isMobileDevice &&
 						( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );