From d378ab2e63aca8f3bec19022714214a5455ffcdc Mon Sep 17 00:00:00 2001
From: quilicicf <quilicicf@gmail.com>
Date: Fri, 8 Nov 2019 13:31:28 +0100
Subject: [PATCH] Add bundler-friendly dependency injection

---
 README.md                 |  7 +++++++
 js/controllers/plugins.js | 33 ++++++++++++++++++++++-----------
 js/reveal.js              |  4 ++--
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 49a66fe..f45e004 100644
--- a/README.md
+++ b/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()`.
diff --git a/js/controllers/plugins.js b/js/controllers/plugins.js
index 300b0ba..94077f7 100644
--- a/js/controllers/plugins.js
+++ b/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( typeof s.callback === 'function' ) s.callback();
-
-						if( --scriptsToLoad === 0 ) {
-							this.initPlugins().then( resolve );
-						}
-
-					} );
+					if (s.id) {
+						this.registerPlugin(s.id, s.plugin);
+						scriptLoadedCallback(s);
+					} else {
+						loadScript( s.src, () => scriptLoadedCallback(s));
+					}
 				} );
 			}
 			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 );
+				}
 			} );
 		}
 
@@ -190,4 +201,4 @@ export default class Plugins {
 
 	}
 
-}
\ No newline at end of file
+}
diff --git a/js/reveal.js b/js/reveal.js
index 8cb521b..a48377b 100644
--- a/js/reveal.js
+++ b/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 ) );
 
@@ -5675,4 +5675,4 @@ export default function( revealElement, options ) {
 
 	return Reveal;
 
-};
\ No newline at end of file
+};