convert plugins to ES modules, transpile es5 versions backwards compatibility

This commit is contained in:
Hakim El Hattab 2020-04-15 10:23:51 +02:00
parent 9522357349
commit a55cd813be
36 changed files with 3018 additions and 886 deletions

View File

@ -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>

5
dist/plugin/highlight.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/plugin/markdown.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/plugin/math.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/plugin/notes.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/plugin/search.js vendored Normal file

File diff suppressed because one or more lines are too long

11
dist/plugin/zoom.js vendored Normal file

File diff suppressed because one or more lines are too long

4
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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')))

View File

@ -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>

View File

@ -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 {

View File

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

5
package-lock.json generated
View File

@ -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",

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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 );

File diff suppressed because one or more lines are too long

View File

@ -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 );

View File

@ -1,33 +1,60 @@
/**
/*!
* 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$',
import marked from './marked.js'
export default {
id: 'markdown',
/**
* 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;
}
});
}
// 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__';
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
/**
/**
* Retrieves the markdown contents of a slide section
* element. Normalizes leading tabs/whitespace.
*/
function getMarkdownFromSlide( section ) {
function getMarkdownFromSlide( section ) {
// look for a <script> or <textarea data-template> wrapper
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
@ -50,15 +77,15 @@
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 ) {
function getForwardedAttributes( section ) {
var attributes = section.attributes;
var result = [];
@ -80,13 +107,13 @@
return result.join( ' ' );
}
}
/**
/**
* Inspects the given options and fills out default
* values for what's not defined.
*/
function getSlidifyOptions( options ) {
function getSlidifyOptions( options ) {
options = options || {};
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
@ -95,12 +122,12 @@
return options;
}
}
/**
/**
* Helper function for constructing a markdown slide.
*/
function createMarkdownSlide( content, options ) {
function createMarkdownSlide( content, options ) {
options = getSlidifyOptions( options );
@ -116,13 +143,13 @@
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 ) {
function slidify( markdown, options ) {
options = getSlidifyOptions( options );
@ -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] );
@ -188,20 +215,20 @@
return markdownSections;
}
}
/**
/**
* Parses any current data-markdown slides, splits
* 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 ) {
@ -249,16 +276,16 @@
} );
}
}
function loadExternalMarkdown( section ) {
function loadExternalMarkdown( section ) {
return new Promise( function( resolve, reject ) {
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,15 +314,15 @@
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 );
}
} );
}
}
/**
/**
* 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.
@ -304,11 +331,13 @@
* directly on refresh (F5)
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
*/
function addAttributeInElement( node, elementTarget, separator ) {
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];
@ -324,22 +353,22 @@
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 ) {
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 ;
@ -363,13 +392,13 @@
addAttributeInElement( element, section, separatorSectionAttributes );
}
}
}
}
/**
/**
* Converts any current data-markdown slides in the
* DOM to HTML.
*/
function convertSlides() {
function convertSlides() {
var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
@ -398,52 +427,4 @@
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;
}));
}

File diff suppressed because one or more lines are too long

7
plugin/math/math.es5 Normal file
View File

@ -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 );

View File

@ -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;

7
plugin/notes/notes.es5 Normal file
View File

@ -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 );

View File

@ -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;

7
plugin/search/search.es5 Normal file
View File

@ -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 );

View File

@ -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;

7
plugin/zoom/zoom.es5 Normal file
View File

@ -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 );

View File

@ -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)

View File

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

View File

@ -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>

View File

@ -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' );

View File

@ -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' );

View File

@ -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 ) {

View File

@ -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' );

View File

@ -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' );