two js bundles; reveal.js (es6) and reveal.es5.js, add source maps

README.md

@@ -128,7 +128,7 @@ Here's a barebones example of a fully working reveal.js presentation:
         <section>Slide 2</section>
       </div>
     </div>
-    <script src="dist/reveal.min.js"></script>
+    <script src="dist/reveal.es5.js"></script>
     <script>
       Reveal.initialize();
     </script>
@@ -156,7 +156,7 @@ It's also possible to write presentations using [Markdown](#markdown).
 
 If you only have a single presentation on the page we recommend initializing reveal.js using the singleton API.
 ```html
-<script src="dist/reveal.min.js"></script>
+<script src="dist/reveal.es5.js"></script>
 <script>
   Reveal.initialize({ keyboard: true });
 </script>

demo.html

@@ -412,7 +412,7 @@ Reveal.on( 'customevent', function() {
 
 		<script type="module">
 
-			import Reveal from '/js/reveal.js';
+			import Reveal from '/dist/reveal.js';
 			import Zoom from '/plugin/zoom/zoom.js';
 			import Notes from '/plugin/notes/notes.js';
 			import Search from '/plugin/search/search.js';
@@ -420,7 +420,7 @@ Reveal.on( 'customevent', function() {
 			import Highlight from '/plugin/highlight/highlight.js';
 
 			// More info https://github.com/hakimel/reveal.js#configuration
-			let deck = new Reveal({
+			Reveal.initialize({
 				controls: true,
 				progress: true,
 				center: true,
@@ -432,8 +432,6 @@ Reveal.on( 'customevent', function() {
 				plugins: [ Zoom, Notes, Search, Markdown, Highlight ]
 			});
 
-			deck.initialize();
-
 		</script>
 
 	</body>

dist/reveal.css

@@ -1,5 +1,5 @@
 /*!
-* reveal.js 4.0.0-dev (Thu Apr 16 2020)
+* reveal.js 4.0.0-dev (Fri Apr 17 2020)
 * https://revealjs.com
 * MIT licensed
 *

examples/auto-animate.html

@@ -162,7 +162,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script src="../dist/plugin/highlight.js"></script>
 		<script>
 			Reveal.initialize({

examples/barebones.html

@@ -29,7 +29,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize();
 		</script>

examples/math.html

@@ -175,7 +175,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize({
 				history: true,

examples/media.html

@@ -45,7 +45,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize({
 				transition: 'linear'

examples/multiple-instances.html

@@ -30,7 +30,7 @@
 			</div>
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			let r1 = new Reveal( document.querySelector( '.deck1' ), {

examples/slide-backgrounds.html

@@ -122,7 +122,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			// Full list of configuration options available here:

examples/slide-transitions.html

@@ -81,7 +81,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize({
 				center: true,

gulpfile.js

@@ -5,10 +5,10 @@ const yargs = require('yargs')
 const colors = require('colors')
 const qunit = require('node-qunit-puppeteer')
 
-const {rollup} = require('rollup');
+const {rollup} = require('rollup')
-const {terser} = require('rollup-plugin-terser');
+const {terser} = require('rollup-plugin-terser')
-const babel = require('rollup-plugin-babel');
+const babel = require('rollup-plugin-babel')
-const resolve = require('@rollup/plugin-node-resolve');
+const resolve = require('@rollup/plugin-node-resolve')
 
 const gulp = require('gulp')
 const tap = require('gulp-tap')
@@ -58,9 +58,18 @@ gulp.task('js', () => {
         ...rollupConfig
     }).then( bundle => {
         bundle.write({
-            file: './dist/reveal.min.js',
+            file: './dist/reveal.js',
+            format: 'es',
+            banner: banner,
+            sourcemap: true
+        });
+
+        bundle.write({
+            name: 'Reveal',
+            file: './dist/reveal.es5.js',
             format: 'umd',
-            banner: banner
+            banner: banner,
+            sourcemap: true
         });
     });
 })
@@ -175,7 +184,7 @@ gulp.task('test', gulp.series( 'eslint', 'qunit' ))
 
 gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
 
-gulp.task('build', gulp.parallel('js', 'css'))
+gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
 
 gulp.task('package', gulp.series('default', () =>
 

index.html

@@ -21,7 +21,7 @@
 			</div>
 		</div>
 
-		<script src="dist/reveal.min.js"></script>
+		<script src="dist/reveal.es5.js"></script>
 		<script src="dist/plugin/markdown.js"></script>
 		<script src="dist/plugin/highlight.js"></script>
 		<script src="dist/plugin/notes.js"></script>

js/index.js

@@ -1,4 +1,4 @@
-import Presentation from './reveal.js'
+import Deck from './reveal.js'
 
 /**
  * Expose the Reveal class to the window. To create a
@@ -10,7 +10,7 @@ import Presentation from './reveal.js'
  *   // reveal.js is ready
  * });
  */
-window.Reveal = Presentation;
+var Reveal = Deck;
 
 
 /**
@@ -27,15 +27,15 @@ window.Reveal = Presentation;
 
 let enqueuedAPICalls = [];
 
-window.Reveal.initialize = options => {
+Reveal.initialize = options => {
 
 	// Create our singleton reveal.js instance
-	window.Reveal = new Presentation( document.querySelector( '.reveal' ), options );
+	Object.assign( Reveal, new Deck( document.querySelector( '.reveal' ), options ) );
 
 	// Invoke any enqueued API calls
-	enqueuedAPICalls.map( method => method( window.Reveal ) );
+	enqueuedAPICalls.map( method => method( Reveal ) );
 
-	return window.Reveal.initialize();
+	return Reveal.initialize();
 
 }
 
@@ -46,7 +46,9 @@ window.Reveal.initialize = options => {
  * when Reveal.initialize is called.
  */
 [ 'on', 'off', 'addEventListener', 'removeEventListener', 'registerPlugin' ].forEach( method => {
-	window.Reveal[method] = ( ...args ) => {
+	Reveal[method] = ( ...args ) => {
 		enqueuedAPICalls.push( deck => deck[method].call( null, ...args ) );
 	}
-} );
+} );
+
+export default Reveal;

plugin/markdown/example.html

@@ -109,7 +109,7 @@
             </div>
 		</div>
 
-		<script src="../../dist/reveal.min.js"></script>
+		<script src="../../dist/reveal.es5.js"></script>
 
 		<script>
 

test/test-auto-animate.html

@@ -62,7 +62,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {

test/test-dependencies-async.html

@@ -26,7 +26,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			var	externalScriptSequence = '';
 			var scriptCount = 0;

test/test-dependencies.html

@@ -26,7 +26,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			window.externalScriptSequence = '';
 

test/test-grid-navigation.html

@@ -38,7 +38,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize().then( () => {
 

test/test-iframe-backgrounds.html

@@ -31,7 +31,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			Reveal.initialize({ viewDistance: 3 }).then( () => {

test/test-iframes.html

@@ -31,7 +31,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			Reveal.initialize({ viewDistance: 2 }).then( () => {

test/test-multiple-instances-es5.html

@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Iframes</title>
+
+		<link rel="stylesheet" href="../dist/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+		<script src="qunit-2.5.0.js"></script>
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="deck1">
+			<div class="reveal" style="display: none;">
+				<div class="slides">
+					<section>1.1</section>
+					<section>1.2</section>
+					<section>1.3</section>
+				</div>
+			</div>
+		</div>
+
+		<div class="deck2">
+			<div class="reveal" style="display: none;">
+				<div class="slides">
+					<section>2.1</section>
+					<section>2.2</section>
+					<section>2.3</section>
+				</div>
+			</div>
+		</div>
+
+		<script src="../dist/reveal.es5.js"></script>
+		<script>
+
+			QUnit.module( 'Multiple reveal.js instances' );
+
+			let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), {
+				embedded: true,
+				keyboard: true
+			} );
+			r1.initialize();
+
+			let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), {
+				embedded: true,
+				keyboard: false
+			} );
+			r2.initialize();
+
+			QUnit.test( 'Can make independent changes', function( assert ) {
+
+				r1.slide(1);
+				r2.slide(2);
+				assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' );
+				assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' );
+
+				r2.toggleOverview( true );
+				assert.strictEqual( r1.isOverview(), false );
+				assert.strictEqual( r2.isOverview(), true );
+				r2.toggleOverview( false );
+
+				assert.strictEqual( r1.getConfig().keyboard, true );
+				assert.strictEqual( r2.getConfig().keyboard, false );
+
+			});
+
+		</script>
+
+	</body>
+</html>

test/test-multiple-instances.html

@@ -36,8 +36,9 @@
 			</div>
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script type="module">
-		<script>
+
+			import Reveal from '../dist/reveal.js';
 
 			QUnit.module( 'Multiple reveal.js instances' );
 
@@ -71,6 +72,11 @@
 			});
 
 		</script>
+		<script>
+			QUnit.test( 'Reveal does not leak to window', function( assert ) {
+				assert.strictEqual( window.Reveal, undefined );
+			});
+		</script>
 
 	</body>
 </html>

test/test-pdf.html

@@ -73,7 +73,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			Reveal.initialize({ pdf: true }).then( function() {
 

test/test-plugins.html

@@ -26,7 +26,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
 			QUnit.module( 'Plugins' );

test/test-state.html

@@ -36,11 +36,11 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 
-
 			Reveal.initialize().then( function() {
+				console.log(Reveal);
 
 				QUnit.module( 'State' );
 

test/test.html

@@ -77,7 +77,7 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script src="../dist/reveal.es5.js"></script>
 		<script>
 			// These tests expect the DOM to contain a presentation
 			// with the following slide structure: