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: [
-					{ 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 }
-				]
+				dependencies: [ Zoom, Notes, Search, Markdown, Highlight ]
 			});
 
+			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: 'plugin/markdown/markdown.js' },
-					{ src: 'plugin/highlight/highlight.js' },
-					{ src: 'plugin/notes/notes.js', async: true }
+					{ src: 'dist/plugin/markdown.js' },
+					{ src: 'dist/plugin/highlight.js' },
+					{ src: 'dist/plugin/notes.js' }
 				]
 			});
 		</script>

js/controllers/plugins.js

@@ -60,8 +60,8 @@ export default class Plugins {
 
 				// Load synchronous scripts
 				scripts.forEach( s => {
-					if( s.plugin ) {
-						this.registerPlugin( s.plugin );
+					if( typeof s.id === 'string' ) {
+						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,449 +1,430 @@
-/**
+/*!
  * 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) {
-		root.marked = require( './marked' );
-		root.RevealMarkdown = factory( root.marked );
-	} else if( typeof exports === 'object' ) {
-		module.exports = factory( require( './marked' ) );
-	} else {
-		// Browser globals (root is window)
-		root.RevealMarkdown = factory( root.marked );
-	}
-}( this, function( marked ) {
 
-	var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
-		DEFAULT_NOTES_SEPARATOR = 'notes?:',
-		DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
-		DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
+import marked from './marked.js'
 
-	var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
+export default {
 
+	id: 'markdown',
 
 	/**
-	 * Retrieves the markdown contents of a slide section
-	 * element. Normalizes leading tabs/whitespace.
+	 * Starts processing and converting Markdown within the
+	 * current reveal.js deck.
 	 */
-	function getMarkdownFromSlide( section ) {
-
-		// look for a <script> or <textarea data-template> wrapper
-		var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
-
-		// strip leading whitespace so it isn't evaluated as code
-		var text = ( template || section ).textContent;
-
-		// restore script end tags
-		text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
-
-		var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
-			leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
-
-		if( leadingTabs > 0 ) {
-			text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
-		}
-		else if( leadingWs > 1 ) {
-			text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
-		}
-
-		return text;
-
-	}
-
-	/**
-	 * Given a markdown slide section element, this will
-	 * return all arguments that aren't related to markdown
-	 * parsing. Used to forward any other user-defined arguments
-	 * to the output markdown slide.
-	 */
-	function getForwardedAttributes( section ) {
-
-		var attributes = section.attributes;
-		var result = [];
-
-		for( var i = 0, len = attributes.length; i < len; i++ ) {
-			var name = attributes[i].name,
-				value = attributes[i].value;
-
-			// disregard attributes that are used for markdown loading/parsing
-			if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
-
-			if( value ) {
-				result.push( name + '="' + value + '"' );
-			}
-			else {
-				result.push( name );
-			}
-		}
-
-		return result.join( ' ' );
-
-	}
-
-	/**
-	 * Inspects the given options and fills out default
-	 * values for what's not defined.
-	 */
-	function getSlidifyOptions( options ) {
-
-		options = options || {};
-		options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
-		options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
-		options.attributes = options.attributes || '';
-
-		return options;
-
-	}
-
-	/**
-	 * Helper function for constructing a markdown slide.
-	 */
-	function createMarkdownSlide( content, options ) {
-
-		options = getSlidifyOptions( options );
-
-		var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
-
-		if( notesMatch.length === 2 ) {
-			content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
-		}
-
-		// prevent script end tags in the content from interfering
-		// with parsing
-		content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
-
-		return '<script type="text/template">' + content + '</script>';
-
-	}
-
-	/**
-	 * Parses a data string into multiple slides based
-	 * on the passed in separator arguments.
-	 */
-	function slidify( markdown, options ) {
-
-		options = getSlidifyOptions( options );
-
-		var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
-			horizontalSeparatorRegex = new RegExp( options.separator );
-
-		var matches,
-			lastIndex = 0,
-			isHorizontal,
-			wasHorizontal = true,
-			content,
-			sectionStack = [];
-
-		// iterate until all blocks between separators are stacked up
-		while( matches = separatorRegex.exec( markdown ) ) {
-			notes = null;
-
-			// determine direction (horizontal by default)
-			isHorizontal = horizontalSeparatorRegex.test( matches[0] );
-
-			if( !isHorizontal && wasHorizontal ) {
-				// create vertical stack
-				sectionStack.push( [] );
-			}
-
-			// pluck slide content from markdown input
-			content = markdown.substring( lastIndex, matches.index );
-
-			if( isHorizontal && wasHorizontal ) {
-				// add to horizontal stack
-				sectionStack.push( content );
-			}
-			else {
-				// add to vertical stack
-				sectionStack[sectionStack.length-1].push( content );
-			}
-
-			lastIndex = separatorRegex.lastIndex;
-			wasHorizontal = isHorizontal;
-		}
-
-		// add the remaining slide
-		( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
-
-		var markdownSections = '';
-
-		// flatten the hierarchical stack, and insert <section data-markdown> tags
-		for( var i = 0, len = sectionStack.length; i < len; i++ ) {
-			// vertical
-			if( sectionStack[i] instanceof Array ) {
-				markdownSections += '<section '+ options.attributes +'>';
-
-				sectionStack[i].forEach( function( child ) {
-					markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
-				} );
-
-				markdownSections += '</section>';
-			}
-			else {
-				markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
-			}
-		}
-
-		return markdownSections;
-
-	}
-
-	/**
-	 * Parses any current data-markdown slides, splits
-	 * multi-slide markdown into separate sections and
-	 * handles loading of external markdown.
-	 */
-	function processSlides() {
-
-		return new Promise( function( resolve ) {
-
-			var externalPromises = [];
-
-			[].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {
-
-				if( section.getAttribute( 'data-markdown' ).length ) {
-
-					externalPromises.push( loadExternalMarkdown( section ).then(
-
-						// Finished loading external file
-						function( xhr, url ) {
-							section.outerHTML = slidify( xhr.responseText, {
-								separator: section.getAttribute( 'data-separator' ),
-								verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
-								notesSeparator: section.getAttribute( 'data-separator-notes' ),
-								attributes: getForwardedAttributes( section )
-							});
-						},
-
-						// Failed to load markdown
-						function( xhr, url ) {
-							section.outerHTML = '<section data-state="alert">' +
-								'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
-								'Check your browser\'s JavaScript console for more details.' +
-								'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
-								'</section>';
-						}
-
-					) );
+	init: function( deck ) {
 
+		if( typeof hljs !== 'undefined' ) {
+			marked.setOptions({
+				highlight: function( code, lang ) {
+					return hljs.highlightAuto( code, [lang] ).value;
 				}
-				else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
+			});
+		}
 
-					section.outerHTML = slidify( getMarkdownFromSlide( section ), {
-						separator: section.getAttribute( 'data-separator' ),
-						verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
-						notesSeparator: section.getAttribute( 'data-separator-notes' ),
-						attributes: getForwardedAttributes( section )
-					});
+		// 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?:',
+	DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
+	DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
+
+var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
+
+
+/**
+ * Retrieves the markdown contents of a slide section
+ * element. Normalizes leading tabs/whitespace.
+ */
+function getMarkdownFromSlide( section ) {
+
+	// look for a <script> or <textarea data-template> wrapper
+	var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
+
+	// strip leading whitespace so it isn't evaluated as code
+	var text = ( template || section ).textContent;
+
+	// restore script end tags
+	text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
+
+	var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
+		leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
+
+	if( leadingTabs > 0 ) {
+		text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
+	}
+	else if( leadingWs > 1 ) {
+		text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
+	}
+
+	return text;
+
+}
+
+/**
+ * Given a markdown slide section element, this will
+ * return all arguments that aren't related to markdown
+ * parsing. Used to forward any other user-defined arguments
+ * to the output markdown slide.
+ */
+function getForwardedAttributes( section ) {
+
+	var attributes = section.attributes;
+	var result = [];
+
+	for( var i = 0, len = attributes.length; i < len; i++ ) {
+		var name = attributes[i].name,
+			value = attributes[i].value;
+
+		// disregard attributes that are used for markdown loading/parsing
+		if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
+
+		if( value ) {
+			result.push( name + '="' + value + '"' );
+		}
+		else {
+			result.push( name );
+		}
+	}
+
+	return result.join( ' ' );
+
+}
+
+/**
+ * Inspects the given options and fills out default
+ * values for what's not defined.
+ */
+function getSlidifyOptions( options ) {
+
+	options = options || {};
+	options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
+	options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
+	options.attributes = options.attributes || '';
+
+	return options;
+
+}
+
+/**
+ * Helper function for constructing a markdown slide.
+ */
+function createMarkdownSlide( content, options ) {
+
+	options = getSlidifyOptions( options );
+
+	var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
+
+	if( notesMatch.length === 2 ) {
+		content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
+	}
+
+	// prevent script end tags in the content from interfering
+	// with parsing
+	content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
+
+	return '<script type="text/template">' + content + '</script>';
+
+}
+
+/**
+ * Parses a data string into multiple slides based
+ * on the passed in separator arguments.
+ */
+function slidify( markdown, options ) {
+
+	options = getSlidifyOptions( options );
+
+	var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
+		horizontalSeparatorRegex = new RegExp( options.separator );
+
+	var matches,
+		lastIndex = 0,
+		isHorizontal,
+		wasHorizontal = true,
+		content,
+		sectionStack = [];
+
+	// iterate until all blocks between separators are stacked up
+	while( matches = separatorRegex.exec( markdown ) ) {
+		var notes = null;
+
+		// determine direction (horizontal by default)
+		isHorizontal = horizontalSeparatorRegex.test( matches[0] );
+
+		if( !isHorizontal && wasHorizontal ) {
+			// create vertical stack
+			sectionStack.push( [] );
+		}
+
+		// pluck slide content from markdown input
+		content = markdown.substring( lastIndex, matches.index );
+
+		if( isHorizontal && wasHorizontal ) {
+			// add to horizontal stack
+			sectionStack.push( content );
+		}
+		else {
+			// add to vertical stack
+			sectionStack[sectionStack.length-1].push( content );
+		}
+
+		lastIndex = separatorRegex.lastIndex;
+		wasHorizontal = isHorizontal;
+	}
+
+	// add the remaining slide
+	( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
+
+	var markdownSections = '';
+
+	// flatten the hierarchical stack, and insert <section data-markdown> tags
+	for( var i = 0, len = sectionStack.length; i < len; i++ ) {
+		// vertical
+		if( sectionStack[i] instanceof Array ) {
+			markdownSections += '<section '+ options.attributes +'>';
+
+			sectionStack[i].forEach( function( child ) {
+				markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
+			} );
+
+			markdownSections += '</section>';
+		}
+		else {
+			markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
+		}
+	}
+
+	return markdownSections;
+
+}
+
+/**
+ * Parses any current data-markdown slides, splits
+ * multi-slide markdown into separate sections and
+ * handles loading of external markdown.
+ */
+function processSlides( scope ) {
+
+	return new Promise( function( resolve ) {
+
+		var externalPromises = [];
+
+		[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
+
+			if( section.getAttribute( 'data-markdown' ).length ) {
+
+				externalPromises.push( loadExternalMarkdown( section ).then(
+
+					// Finished loading external file
+					function( xhr, url ) {
+						section.outerHTML = slidify( xhr.responseText, {
+							separator: section.getAttribute( 'data-separator' ),
+							verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
+							notesSeparator: section.getAttribute( 'data-separator-notes' ),
+							attributes: getForwardedAttributes( section )
+						});
+					},
+
+					// Failed to load markdown
+					function( xhr, url ) {
+						section.outerHTML = '<section data-state="alert">' +
+							'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
+							'Check your browser\'s JavaScript console for more details.' +
+							'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
+							'</section>';
+					}
+
+				) );
+
+			}
+			else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
+
+				section.outerHTML = slidify( getMarkdownFromSlide( section ), {
+					separator: section.getAttribute( 'data-separator' ),
+					verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
+					notesSeparator: section.getAttribute( 'data-separator-notes' ),
+					attributes: getForwardedAttributes( section )
+				});
+
+			}
+			else {
+				section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
+			}
+
+		});
+
+		Promise.all( externalPromises ).then( resolve );
+
+	} );
+
+}
+
+function loadExternalMarkdown( section ) {
+
+	return new Promise( function( resolve, reject ) {
+
+		var xhr = new XMLHttpRequest(),
+			url = section.getAttribute( 'data-markdown' );
+
+		var datacharset = section.getAttribute( 'data-charset' );
+
+		// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
+		if( datacharset != null && datacharset != '' ) {
+			xhr.overrideMimeType( 'text/html; charset=' + datacharset );
+		}
+
+		xhr.onreadystatechange = function( section, xhr ) {
+			if( xhr.readyState === 4 ) {
+				// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
+				if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
+
+					resolve( xhr, url );
 
 				}
 				else {
-					section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
-				}
 
-			});
+					reject( xhr, url );
 
-			Promise.all( externalPromises ).then( resolve );
-
-		} );
-
-	}
-
-	function loadExternalMarkdown( section ) {
-
-		return new Promise( function( resolve, reject ) {
-
-			var xhr = new XMLHttpRequest(),
-				url = section.getAttribute( 'data-markdown' );
-
-			datacharset = section.getAttribute( 'data-charset' );
-
-			// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
-			if( datacharset != null && datacharset != '' ) {
-				xhr.overrideMimeType( 'text/html; charset=' + datacharset );
-			}
-
-			xhr.onreadystatechange = function( section, xhr ) {
-				if( xhr.readyState === 4 ) {
-					// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
-					if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
-
-						resolve( xhr, url );
-
-					}
-					else {
-
-						reject( xhr, url );
-
-					}
-				}
-			}.bind( this, section, xhr );
-
-			xhr.open( 'GET', url, true );
-
-			try {
-				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 );
-				resolve( xhr, url );
-			}
-
-		} );
-
-	}
-
-	/**
-	 * Check if a node value has the attributes pattern.
-	 * If yes, extract it and add that value as one or several attributes
-	 * to the target element.
-	 *
-	 * You need Cache Killer on Chrome to see the effect on any FOM transformation
-	 * directly on refresh (F5)
-	 * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
-	 */
-	function addAttributeInElement( node, elementTarget, separator ) {
-
-		var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
-		var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
-		var nodeValue = node.nodeValue;
-		if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
-
-			var classes = matches[1];
-			nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
-			node.nodeValue = nodeValue;
-			while( matchesClass = mardownClassRegex.exec( classes ) ) {
-				if( matchesClass[2] ) {
-					elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
-				} else {
-					elementTarget.setAttribute( matchesClass[3], "" );
 				}
 			}
-			return true;
+		}.bind( this, section, xhr );
+
+		xhr.open( 'GET', url, true );
+
+		try {
+			xhr.send();
 		}
-		return false;
-	}
-
-	/**
-	 * Add attributes to the parent element of a text node,
-	 * or the element of an attribute node.
-	 */
-	function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
-
-		if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
-			previousParentElement = element;
-			for( var i = 0; i < element.childNodes.length; i++ ) {
-				childElement = element.childNodes[i];
-				if ( i > 0 ) {
-					j = i - 1;
-					while ( j >= 0 ) {
-						aPreviousChildElement = element.childNodes[j];
-						if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
-							previousParentElement = aPreviousChildElement;
-							break;
-						}
-						j = j - 1;
-					}
-				}
-				parentSection = section;
-				if( childElement.nodeName ==  "section" ) {
-					parentSection = childElement ;
-					previousParentElement = childElement ;
-				}
-				if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
-					addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
-				}
-			}
+		catch ( 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 );
 		}
 
-		if ( element.nodeType == Node.COMMENT_NODE ) {
-			if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
-				addAttributeInElement( element, section, separatorSectionAttributes );
+	} );
+
+}
+
+/**
+ * Check if a node value has the attributes pattern.
+ * If yes, extract it and add that value as one or several attributes
+ * to the target element.
+ *
+ * You need Cache Killer on Chrome to see the effect on any FOM transformation
+ * directly on refresh (F5)
+ * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
+ */
+function addAttributeInElement( node, elementTarget, separator ) {
+
+	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];
+		nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
+		node.nodeValue = nodeValue;
+		while( matchesClass = mardownClassRegex.exec( classes ) ) {
+			if( matchesClass[2] ) {
+				elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
+			} else {
+				elementTarget.setAttribute( matchesClass[3], "" );
+			}
+		}
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Add attributes to the parent element of a text node,
+ * or the element of an attribute node.
+ */
+function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
+
+	if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
+		var previousParentElement = element;
+		for( var i = 0; i < element.childNodes.length; i++ ) {
+			var childElement = element.childNodes[i];
+			if ( i > 0 ) {
+				var j = i - 1;
+				while ( j >= 0 ) {
+					var aPreviousChildElement = element.childNodes[j];
+					if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
+						previousParentElement = aPreviousChildElement;
+						break;
+					}
+					j = j - 1;
+				}
+			}
+			var parentSection = section;
+			if( childElement.nodeName ==  "section" ) {
+				parentSection = childElement ;
+				previousParentElement = childElement ;
+			}
+			if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
+				addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
 			}
 		}
 	}
 
-	/**
-	 * Converts any current data-markdown slides in the
-	 * DOM to HTML.
-	 */
-	function convertSlides() {
-
-		var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
-
-		[].slice.call( sections ).forEach( function( section ) {
-
-			section.setAttribute( 'data-markdown-parsed', true )
-
-			var notes = section.querySelector( 'aside.notes' );
-			var markdown = getMarkdownFromSlide( section );
-
-			section.innerHTML = marked( markdown );
-			addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
-							section.parentNode.getAttribute( 'data-element-attributes' ) ||
-							DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
-							section.getAttribute( 'data-attributes' ) ||
-							section.parentNode.getAttribute( 'data-attributes' ) ||
-							DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
-
-			// If there were notes, we need to re-add them after
-			// having overwritten the section's HTML
-			if( notes ) {
-				section.appendChild( notes );
-			}
-
-		} );
-
-		return Promise.resolve();
-
+	if ( element.nodeType == Node.COMMENT_NODE ) {
+		if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
+			addAttributeInElement( element, section, separatorSectionAttributes );
+		}
 	}
+}
 
-	// API
-	var RevealMarkdown = {
+/**
+ * Converts any current data-markdown slides in the
+ * DOM to HTML.
+ */
+function convertSlides() {
 
-		id: 'markdown',
+	var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
 
-		/**
-		 * Starts processing and converting Markdown within the
-		 * current reveal.js deck.
-		 */
-		init: function( deck ) {
+	[].slice.call( sections ).forEach( function( section ) {
 
-			if( typeof marked === 'undefined' ) {
-				throw 'The reveal.js Markdown plugin requires marked to be loaded';
-			}
+		section.setAttribute( 'data-markdown-parsed', true )
 
-			if( typeof hljs !== 'undefined' ) {
-				marked.setOptions({
-					highlight: function( code, lang ) {
-						return hljs.highlightAuto( code, [lang] ).value;
-					}
-				});
-			}
+		var notes = section.querySelector( 'aside.notes' );
+		var markdown = getMarkdownFromSlide( section );
 
-			// marked can be configured via reveal.js config options
-			var options = deck.getConfig().markdown;
-			if( options ) {
-				marked.setOptions( options );
-			}
+		section.innerHTML = marked( markdown );
+		addAttributes( 	section, section, null, section.getAttribute( 'data-element-attributes' ) ||
+						section.parentNode.getAttribute( 'data-element-attributes' ) ||
+						DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
+						section.getAttribute( 'data-attributes' ) ||
+						section.parentNode.getAttribute( 'data-attributes' ) ||
+						DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
 
-			return processSlides().then( convertSlides );
+		// If there were notes, we need to re-add them after
+		// having overwritten the section's HTML
+		if( notes ) {
+			section.appendChild( notes );
+		}
 
-		},
+	} );
 
-		// TODO: Do these belong in the API?
-		processSlides: processSlides,
-		convertSlides: convertSlides,
-		slidify: slidify
+	return Promise.resolve();
 
-	};
-
-	// 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
-			jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
-			notesFilePath = jsFileLocation + 'notes.html';
+			// var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
+			// jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
+			// 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,35 +1,33 @@
-// Custom reveal.js integration
-var RevealZoom = (function(){
+/*!
+ * reveal.js Zoom plugin
+ */
+export default {
 
-	return {
-		id: 'zoom',
+	id: 'zoom',
 
-		init: function( reveal ) {
+	init: function( reveal ) {
 
-			reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
-				var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
+		reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
+			var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
 
-				var modifier = ( reveal.getConfig().zoomKey ? reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
-				var zoomLevel = ( reveal.getConfig().zoomLevel ? reveal.getConfig().zoomLevel : 2 );
+			var modifier = ( reveal.getConfig().zoomKey ? reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
+			var zoomLevel = ( reveal.getConfig().zoomLevel ? reveal.getConfig().zoomLevel : 2 );
 
-				if( event[ modifier ] && !reveal.isOverview() ) {
-					event.preventDefault();
+			if( event[ modifier ] && !reveal.isOverview() ) {
+				event.preventDefault();
 
-					zoom.to({
-						x: event.clientX,
-						y: event.clientY,
-						scale: zoomLevel,
-						pan: false
-					});
-				}
-			} );
+				zoom.to({
+					x: event.clientX,
+					y: event.clientY,
+					scale: zoomLevel,
+					pan: false
+				});
+			}
+		} );
 
-		}
 	}
 
-})();
-
-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,19 +42,24 @@
 
 		<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,
+					dependencies: [{plugin: Markdown}]
+				} );
+				r2.initialize();
 
-			let r2 = new Reveal( document.querySelector( '.deck2' ), {
-				embedded: true,
-				keyboard: false
 			} );
-			r2.initialize();
 
 		</script>
 

test/test-markdown-element-attributes.html

@@ -122,13 +122,12 @@
 
 		</div>
 
-		<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: [
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
+				dependencies: [ Markdown ]
 			}).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: [
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
+				dependencies: [ Markdown ]
 			}).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: [
-					{ src: '../plugin/markdown/marked.js' },
-					// Test loading JS files with query strings
-					{ src: '../plugin/markdown/markdown.js?query=string' },
-				],
+				dependencies: [ Markdown ],
 				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: [
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
+				dependencies: [ Markdown ]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );

test/test-markdown.html

@@ -41,13 +41,12 @@
 
 		</div>
 
-		<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: [
-					{ src: '../plugin/markdown/marked.js' },
-					{ src: '../plugin/markdown/markdown.js' },
-				]
+				dependencies: [ Markdown ]
 			}).then( function() {
 
 				QUnit.module( 'Markdown' );