reveal.js can now be instantiated with new Reveal(<htmlelement>,<options>)

gulpfile.js

@@ -26,7 +26,7 @@ const license = `/*!
 */\n`
 
 
-gulp.task('js', () => gulp.src(['./js/app.js'])
+gulp.task('js', () => gulp.src(['./js/index.js'])
         .pipe(babel({ presets: ['@babel/preset-env'] }))
         .pipe(webpack({
             mode: 'production'
@@ -90,7 +90,7 @@ gulp.task('serve', () => {
         livereload: true
     })
 
-    gulp.watch(['js/*.js'], gulp.series('js'))
+    gulp.watch(['js/**/*'], gulp.series('js'))
 
     gulp.watch([
         'css/theme/source/*.{sass,scss}',

js/app.js

@@ -1,3 +0,0 @@
-import Reveal from './reveal.js'
-
-window.Reveal = Reveal();

js/index.js

@@ -0,0 +1,12 @@
+import _reveal from './reveal.js'
+
+// The Reveal class can be instantiated to run multiple
+// presentations on the same page
+window.Reveal = _reveal;
+
+// Simplified way to create a reveal.js instance on
+// a page with only one presentation, makes us backwards
+// compatible with reveal.js pre 4.0
+window.Reveal.initialize = options => {
+	window.Reveal = new _reveal( document.querySelector( '.reveal' ), options );
+}

js/reveal.js

@@ -7,7 +7,7 @@ import Playback from './components/playback.js'
  *
  * Copyright (C) 2020 Hakim El Hattab, http://hakim.se
  */
-export default function() {
+export default function( revealElement, options ) {
 
 	'use strict';
 
@@ -306,9 +306,6 @@ export default function() {
 
 		},
 
-		// Flags if Reveal.initialize() has been called
-		initialized = false,
-
 		// Flags if reveal.js is loaded (has dispatched the 'ready' event)
 		loaded = false,
 
@@ -412,18 +409,18 @@ export default function() {
 	/**
 	 * Starts up the presentation if the client is capable.
 	 */
-	function initialize( options ) {
+	function init() {
 
-		// Make sure we only initialize once
-		if( initialized === true ) return;
-
-		initialized = true;
+		if( !revealElement ) {
+			console.warn( 'reveal.js must be instantiated with a valid .reveal element' );
+			return;
+		}
 
 		checkCapabilities();
 
 		// Cache references to key DOM elements
-		dom.wrapper = document.querySelector( '.reveal' );
-		dom.slides = document.querySelector( '.reveal .slides' );
+		dom.wrapper = revealElement;
+		dom.slides = revealElement.querySelector( '.slides' );
 
 		// Force a layout when the whole page, incl fonts, has loaded
 		window.addEventListener( 'load', layout, false );
@@ -441,6 +438,8 @@ export default function() {
 		// Loads dependencies and continues to #start() once done
 		load();
 
+		return Reveal;
+
 	}
 
 	/**
@@ -6175,7 +6174,6 @@ export default function() {
 	Reveal = {
 		VERSION: VERSION,
 
-		initialize,
 		configure,
 
 		sync,
@@ -6404,6 +6402,6 @@ export default function() {
 		}
 	};
 
-	return Reveal;
+	return init();
 
 };