convert plugins to ES modules, transpile es5 versions backwards compatibility

demo.html

@@ -410,11 +410,17 @@ Reveal.on( 'customevent', function() {
 
 		</div>
 
-		<script type="module" src="js/index.js"></script>
 		<script type="module">
 
+			import Reveal from '/js/reveal.js';
+			import Zoom from '/plugin/zoom/zoom.js';
+			import Notes from '/plugin/notes/notes.js';
+			import Search from '/plugin/search/search.js';
+			import Markdown from '/plugin/markdown/markdown.js';
+			import Highlight from '/plugin/highlight/highlight.js';
+
 			// More info https://github.com/hakimel/reveal.js#configuration
-			Reveal.initialize({
+			let deck = new Reveal( document.querySelector( '.reveal' ), {
 				controls: true,
 				progress: true,
 				center: true,
@@ -423,16 +429,11 @@ Reveal.on( 'customevent', function() {
 				transition: 'slide', // none/fade/slide/convex/concave/zoom
 
 				// More info https://github.com/hakimel/reveal.js#dependencies
-				dependencies: [
+				dependencies: [ Zoom, Notes, Search, Markdown, Highlight ]
-					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'plugin/highlight/highlight.js' },
-					{ src: 'plugin/search/search.js', async: true },
-					{ src: 'plugin/zoom-js/zoom.js', async: true },
-					{ src: 'plugin/notes/notes.js', async: true }
-				]
 			});
 
+			deck.initialize();
+
 		</script>
 
 	</body>

gulpfile.js

@@ -42,6 +42,24 @@ gulp.task('js', () => gulp.src(['./js/index.js'])
         .pipe(rename('reveal.min.js'))
         .pipe(gulp.dest('./dist')))
 
+gulp.task('plugins', () => gulp.src(['./js/index.js'])
+        .pipe(webpack({
+            ...require('./webpack.config.js'),
+            entry: {
+                'highlight': './plugin/highlight/highlight.es5',
+                'markdown': './plugin/markdown/markdown.es5',
+                'search': './plugin/search/search.es5',
+                'notes': './plugin/notes/notes.es5',
+                'zoom': './plugin/zoom/zoom.es5',
+                'math': './plugin/math/math.es5'
+            },
+            output: {
+                filename: '[name].js'
+            }
+        }))
+        .on('error', swallowError)
+        .pipe(gulp.dest('./dist/plugin')))
+
 gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
         .pipe(sass())
         .pipe(gulp.dest('./dist/theme')))

index.html

@@ -22,7 +22,6 @@
 		</div>
 
 		<script src="dist/reveal.min.js"></script>
-
 		<script>
 			// More info about config & dependencies:
 			// - https://github.com/hakimel/reveal.js#configuration
@@ -30,10 +29,9 @@
 			Reveal.initialize({
 				hash: true,
 				dependencies: [
-					{ src: 'plugin/markdown/marked.js' },
+					{ src: 'dist/plugin/markdown.js' },
-					{ src: 'plugin/markdown/markdown.js' },
+					{ src: 'dist/plugin/highlight.js' },
-					{ src: 'plugin/highlight/highlight.js' },
+					{ src: 'dist/plugin/notes.js' }
-					{ src: 'plugin/notes/notes.js', async: true }
 				]
 			});
 		</script>

js/controllers/plugins.js

@@ -60,8 +60,8 @@ export default class Plugins {
 
 				// Load synchronous scripts
 				scripts.forEach( s => {
-					if( s.plugin ) {
+					if( typeof s.id === 'string' ) {
-						this.registerPlugin( s.plugin );
+						this.registerPlugin( s );
 						scriptLoadedCallback( s );
 					}
 					else {

js/reveal.js

@@ -28,7 +28,6 @@ import {
 	deserialize,
 	transformElement,
 	createSingletonNode,
-	closestParent,
 	getQueryHash,
 	getRemainingHeight
 } from './utils/util.js'

package-lock.json

@@ -5205,6 +5205,11 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "highlight.js": {
+      "version": "9.18.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
+      "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -87,5 +87,8 @@
       "no-eq-null": 2,
       "no-unused-expressions": 0
     }
+  },
+  "dependencies": {
+    "highlight.js": "^9.18.1"
   }
 }

plugin/highlight/highlight.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './highlight.js'
+Reveal.registerPlugin( plugin );

plugin/markdown/markdown.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './markdown.js'
+Reveal.registerPlugin( plugin );

plugin/markdown/markdown.js

@@ -1,19 +1,46 @@
-/**
+/*!
  * The reveal.js markdown plugin. Handles parsing of
  * markdown inside of presentations as well as loading
  * of external markdown documents.
  */
-(function( root, factory ) {
+
-	if (typeof define === 'function' && define.amd) {
+import marked from './marked.js'
-		root.marked = require( './marked' );
+
-		root.RevealMarkdown = factory( root.marked );
+export default {
-	} else if( typeof exports === 'object' ) {
+
-		module.exports = factory( require( './marked' ) );
+	id: 'markdown',
-	} else {
+
-		// Browser globals (root is window)
+	/**
-		root.RevealMarkdown = factory( root.marked );
+	 * Starts processing and converting Markdown within the
+	 * current reveal.js deck.
+	 */
+	init: function( deck ) {
+
+		if( typeof hljs !== 'undefined' ) {
+			marked.setOptions({
+				highlight: function( code, lang ) {
+					return hljs.highlightAuto( code, [lang] ).value;
 				}
-}( this, function( marked ) {
+			});
+		}
+
+		// marked can be configured via reveal.js config options
+		var options = deck.getConfig().markdown;
+		if( options ) {
+			marked.setOptions( options );
+		}
+
+		return processSlides( deck.getRevealElement() ).then( convertSlides );
+
+	},
+
+	// TODO: Do these belong in the API?
+	processSlides: processSlides,
+	convertSlides: convertSlides,
+	slidify: slidify,
+	marked: marked
+
+};
 
 var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
 	DEFAULT_NOTES_SEPARATOR = 'notes?:',
@@ -138,7 +165,7 @@
 
 	// iterate until all blocks between separators are stacked up
 	while( matches = separatorRegex.exec( markdown ) ) {
-			notes = null;
+		var notes = null;
 
 		// determine direction (horizontal by default)
 		isHorizontal = horizontalSeparatorRegex.test( matches[0] );
@@ -195,13 +222,13 @@
  * multi-slide markdown into separate sections and
  * handles loading of external markdown.
  */
-	function processSlides() {
+function processSlides( scope ) {
 
 	return new Promise( function( resolve ) {
 
 		var externalPromises = [];
 
-			[].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {
+		[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
 
 			if( section.getAttribute( 'data-markdown' ).length ) {
 
@@ -258,7 +285,7 @@
 		var xhr = new XMLHttpRequest(),
 			url = section.getAttribute( 'data-markdown' );
 
-			datacharset = section.getAttribute( 'data-charset' );
+		var datacharset = section.getAttribute( 'data-charset' );
 
 		// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
 		if( datacharset != null && datacharset != '' ) {
@@ -287,7 +314,7 @@
 			xhr.send();
 		}
 		catch ( e ) {
-				alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
+			console.warn( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
 			resolve( xhr, url );
 		}
 
@@ -309,6 +336,8 @@
 	var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
 	var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
 	var nodeValue = node.nodeValue;
+	var matches,
+		matchesClass;
 	if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
 
 		var classes = matches[1];
@@ -333,13 +362,13 @@
 function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
 
 	if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
-			previousParentElement = element;
+		var previousParentElement = element;
 		for( var i = 0; i < element.childNodes.length; i++ ) {
-				childElement = element.childNodes[i];
+			var childElement = element.childNodes[i];
 			if ( i > 0 ) {
-					j = i - 1;
+				var j = i - 1;
 				while ( j >= 0 ) {
-						aPreviousChildElement = element.childNodes[j];
+					var aPreviousChildElement = element.childNodes[j];
 					if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
 						previousParentElement = aPreviousChildElement;
 						break;
@@ -347,7 +376,7 @@
 					j = j - 1;
 				}
 			}
-				parentSection = section;
+			var parentSection = section;
 			if( childElement.nodeName ==  "section" ) {
 				parentSection = childElement ;
 				previousParentElement = childElement ;
@@ -399,51 +428,3 @@
 	return Promise.resolve();
 
 }
-
-	// API
-	var RevealMarkdown = {
-
-		id: 'markdown',
-
-		/**
-		 * Starts processing and converting Markdown within the
-		 * current reveal.js deck.
-		 */
-		init: function( deck ) {
-
-			if( typeof marked === 'undefined' ) {
-				throw 'The reveal.js Markdown plugin requires marked to be loaded';
-			}
-
-			if( typeof hljs !== 'undefined' ) {
-				marked.setOptions({
-					highlight: function( code, lang ) {
-						return hljs.highlightAuto( code, [lang] ).value;
-					}
-				});
-			}
-
-			// marked can be configured via reveal.js config options
-			var options = deck.getConfig().markdown;
-			if( options ) {
-				marked.setOptions( options );
-			}
-
-			return processSlides().then( convertSlides );
-
-		},
-
-		// TODO: Do these belong in the API?
-		processSlides: processSlides,
-		convertSlides: convertSlides,
-		slidify: slidify
-
-	};
-
-	// Register our plugin so that reveal.js will call our
-	// plugin 'init' method as part of the initialization
-	Reveal.registerPlugin( RevealMarkdown );
-
-	return RevealMarkdown;
-
-}));

plugin/math/math.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './math.js'
+Reveal.registerPlugin( plugin );

plugin/math/math.js

@@ -4,7 +4,7 @@
  *
  * @author Hakim El Hattab
  */
-var RevealMath = window.RevealMath || (function(){
+var RevealMath = (function(){
 
 	var options = Reveal.getConfig().math || {};
 	var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
@@ -91,4 +91,4 @@ var RevealMath = window.RevealMath || (function(){
 
 })();
 
-Reveal.registerPlugin( RevealMath );
+export default RevealMath;

plugin/notes/notes.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './notes.js'
+Reveal.registerPlugin( plugin );

plugin/notes/notes.js

@@ -23,9 +23,10 @@ var RevealNotes = (function() {
         }
 
 		if( !notesFilePath ) {
-			var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
+			// var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
-			jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
+			// jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
-			notesFilePath = jsFileLocation + 'notes.html';
+			// notesFilePath = jsFileLocation + 'notes.html';
+			notesFilePath = 'plugin/notes/notes.html'
 		}
 
 		notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
@@ -156,9 +157,9 @@ var RevealNotes = (function() {
 	return {
 		id: 'notes',
 
-		init: function( revealInstance ) {
+		init: function( reveal ) {
 
-			deck = revealInstance;
+			deck = reveal;
 
 			if( !/receiver/i.test( window.location.search ) ) {
 
@@ -181,4 +182,4 @@ var RevealNotes = (function() {
 
 })();
 
-Reveal.registerPlugin( RevealNotes );
+export default RevealNotes;

plugin/search/search.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './search.js'
+Reveal.registerPlugin( plugin );

plugin/search/search.js

@@ -200,7 +200,22 @@ function Hilitor(id, tag)
 			toggleSearch();
 		}
 	}, false );
-	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
+
 	closeSearch();
-	return { open: openSearch };
+
+	return {
+
+		id: 'search',
+
+		init: reveal => {
+
+			reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
+
+		},
+
+		open: openSearch
+
+	}
 })();
+
+export default RevealSearch;

plugin/zoom/zoom.es5

@@ -0,0 +1,7 @@
+/**
+ * This is used to compile a self-registering
+ * es5 compatible version of the plugin.
+ */
+
+import plugin from './zoom.js'
+Reveal.registerPlugin( plugin );

plugin/zoom/zoom.js

@@ -1,7 +1,8 @@
-// Custom reveal.js integration
+/*!
-var RevealZoom = (function(){
+ * reveal.js Zoom plugin
+ */
+export default {
 
-	return {
 	id: 'zoom',
 
 	init: function( reveal ) {
@@ -25,11 +26,8 @@ var RevealZoom = (function(){
 		} );
 
 	}
-	}
 
-})();
+};
-
-Reveal.registerPlugin( RevealZoom );
 
 /*!
  * zoom.js 0.3 (modified for use with reveal.js)

test/examples/math.html

@@ -195,7 +195,7 @@
 				},
 
 				dependencies: [
-					{ src: '../../plugin/math/math.js', async: true }
+					{ src: '../../dist/plugin/math.js', async: true }
 				]
 			});
 

test/examples/multiple-instances.html

@@ -17,7 +17,11 @@
 		<div style="display: flex; flex-direction: row;">
 			<div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;">
 				<div class="slides">
-					<section>1.1</section>
+					<section data-markdown>
+	                    <script type="text/template">
+	                        ## Slide attributes
+	                    </script>
+	                </section>
 					<section>1.2</section>
 					<section>1.3</section>
 				</div>
@@ -25,7 +29,11 @@
 
 			<div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;">
 				<div class="slides">
-					<section>2.1</section>
+					<section data-markdown>
+	                    <script type="text/template">
+	                        ## Slide attributes
+	                    </script>
+	                </section>
 					<section>2.2</section>
 					<section>2.3</section>
 				</div>
@@ -34,20 +42,25 @@
 
 		<script src="../../dist/reveal.min.js"></script>
 
-		<script>
+		<script type="module">
+
+			import Markdown from '../../plugin/markdown/markdown.js';
 
 			let r1 = new Reveal( document.querySelector( '.deck1' ), {
 				embedded: true,
 				keyboard: false
 			} );
-			r1.initialize();
+			r1.initialize().then( () => {
 
 				let r2 = new Reveal( document.querySelector( '.deck2' ), {
 					embedded: true,
-				keyboard: false
+					keyboard: false,
+					dependencies: [{plugin: Markdown}]
 				} );
 				r2.initialize();
 
+			} );
+
 		</script>
 
 	</body>

test/test-markdown-element-attributes.html

@@ -122,13 +122,12 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script type="module">
-		<script>
+			import '../js/index.js'
+			import Markdown from '../plugin/markdown/markdown.js'
+
 			Reveal.initialize({
-				dependencies: [
+				dependencies: [ Markdown ]
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );

test/test-markdown-external.html

@@ -24,14 +24,12 @@
 		</div>
 
 		<script src="qunit-2.5.0.js"></script>
-		<script src="../dist/reveal.min.js"></script>
 
-		<script>
+		<script type="module">
+			import '../js/index.js'
+			import Markdown from '../plugin/markdown/markdown.js'
 			Reveal.initialize({
-				dependencies: [
+				dependencies: [ Markdown ]
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );

test/test-markdown-options.html

@@ -32,15 +32,13 @@
 		</div>
 
 		<script src="qunit-2.5.0.js"></script>
-		<script src="../dist/reveal.min.js"></script>
 
-		<script>
+		<script type="module">
+			import '../js/index.js'
+			import Markdown from '../plugin/markdown/markdown.js'
+
 			Reveal.initialize({
-				dependencies: [
+				dependencies: [ Markdown ],
-					{ src: '../plugin/markdown/marked.js' },
-					// Test loading JS files with query strings
-					{ src: '../plugin/markdown/markdown.js?query=string' },
-				],
 				markdown: {
 					smartypants: true
 				}
@@ -49,7 +47,7 @@
 				QUnit.module( 'Markdown' );
 
 				QUnit.test( 'Options are set', function( assert ) {
-					assert.strictEqual( marked.defaults.smartypants, true );
+					assert.strictEqual( Reveal.getPlugin( 'markdown' ).marked.defaults.smartypants, true );
 				});
 
 				QUnit.test( 'Smart quotes are activated', function( assert ) {

test/test-markdown-slide-attributes.html

@@ -117,14 +117,13 @@
 		</div>
 
 		<script src="qunit-2.5.0.js"></script>
-		<script src="../dist/reveal.min.js"></script>
 
-		<script>
+		<script type="module">
+			import '../js/index.js'
+			import Markdown from '../plugin/markdown/markdown.js'
+
 			Reveal.initialize({
-				dependencies: [
+				dependencies: [ Markdown ]
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );

test/test-markdown.html

@@ -41,13 +41,12 @@
 
 		</div>
 
-		<script src="../dist/reveal.min.js"></script>
+		<script type="module">
-		<script>
+			import '../js/index.js'
+			import Markdown from '../plugin/markdown/markdown.js'
+
 			Reveal.initialize({
-				dependencies: [
+				dependencies: [ Markdown ]
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );