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> </div>
<script type="module" src="js/index.js"></script>
<script type="module"> <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 // More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({ let deck = new Reveal( document.querySelector( '.reveal' ), {
controls: true, controls: true,
progress: true, progress: true,
center: true, center: true,
@ -423,16 +429,11 @@ Reveal.on( 'customevent', function() {
transition: 'slide', // none/fade/slide/convex/concave/zoom transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies // 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> </script>
</body> </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(rename('reveal.min.js'))
.pipe(gulp.dest('./dist'))) .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}']) gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
.pipe(sass()) .pipe(sass())
.pipe(gulp.dest('./dist/theme'))) .pipe(gulp.dest('./dist/theme')))

View File

@ -22,7 +22,6 @@
</div> </div>
<script src="dist/reveal.min.js"></script> <script src="dist/reveal.min.js"></script>
<script> <script>
// More info about config & dependencies: // More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration // - https://github.com/hakimel/reveal.js#configuration
@ -30,10 +29,9 @@
Reveal.initialize({ Reveal.initialize({
hash: true, hash: true,
dependencies: [ 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> </script>

View File

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

View File

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

5
package-lock.json generated
View File

@ -5205,6 +5205,11 @@
"minimalistic-assert": "^1.0.1" "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": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

View File

@ -87,5 +87,8 @@
"no-eq-null": 2, "no-eq-null": 2,
"no-unused-expressions": 0 "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,19 +1,46 @@
/** /*!
* The reveal.js markdown plugin. Handles parsing of * The reveal.js markdown plugin. Handles parsing of
* markdown inside of presentations as well as loading * markdown inside of presentations as well as loading
* of external markdown documents. * 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$', var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
DEFAULT_NOTES_SEPARATOR = 'notes?:', DEFAULT_NOTES_SEPARATOR = 'notes?:',
@ -138,7 +165,7 @@
// iterate until all blocks between separators are stacked up // iterate until all blocks between separators are stacked up
while( matches = separatorRegex.exec( markdown ) ) { while( matches = separatorRegex.exec( markdown ) ) {
notes = null; var notes = null;
// determine direction (horizontal by default) // determine direction (horizontal by default)
isHorizontal = horizontalSeparatorRegex.test( matches[0] ); isHorizontal = horizontalSeparatorRegex.test( matches[0] );
@ -195,13 +222,13 @@
* multi-slide markdown into separate sections and * multi-slide markdown into separate sections and
* handles loading of external markdown. * handles loading of external markdown.
*/ */
function processSlides() { function processSlides( scope ) {
return new Promise( function( resolve ) { return new Promise( function( resolve ) {
var externalPromises = []; 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 ) { if( section.getAttribute( 'data-markdown' ).length ) {
@ -258,7 +285,7 @@
var xhr = new XMLHttpRequest(), var xhr = new XMLHttpRequest(),
url = section.getAttribute( 'data-markdown' ); 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 // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if( datacharset != null && datacharset != '' ) { if( datacharset != null && datacharset != '' ) {
@ -287,7 +314,7 @@
xhr.send(); xhr.send();
} }
catch ( e ) { 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 ); resolve( xhr, url );
} }
@ -309,6 +336,8 @@
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' ); var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' ); var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"]+?)\"|(data-[^\"= ]+?)(?=[\" ])", 'mg' );
var nodeValue = node.nodeValue; var nodeValue = node.nodeValue;
var matches,
matchesClass;
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) { if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
var classes = matches[1]; var classes = matches[1];
@ -333,13 +362,13 @@
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) { function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) { if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
previousParentElement = element; var previousParentElement = element;
for( var i = 0; i < element.childNodes.length; i++ ) { for( var i = 0; i < element.childNodes.length; i++ ) {
childElement = element.childNodes[i]; var childElement = element.childNodes[i];
if ( i > 0 ) { if ( i > 0 ) {
j = i - 1; var j = i - 1;
while ( j >= 0 ) { while ( j >= 0 ) {
aPreviousChildElement = element.childNodes[j]; var aPreviousChildElement = element.childNodes[j];
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) { if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
previousParentElement = aPreviousChildElement; previousParentElement = aPreviousChildElement;
break; break;
@ -347,7 +376,7 @@
j = j - 1; j = j - 1;
} }
} }
parentSection = section; var parentSection = section;
if( childElement.nodeName == "section" ) { if( childElement.nodeName == "section" ) {
parentSection = childElement ; parentSection = childElement ;
previousParentElement = childElement ; previousParentElement = childElement ;
@ -399,51 +428,3 @@
return Promise.resolve(); 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 * @author Hakim El Hattab
*/ */
var RevealMath = window.RevealMath || (function(){ var RevealMath = (function(){
var options = Reveal.getConfig().math || {}; var options = Reveal.getConfig().math || {};
var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'; 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 ) { 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' ); notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
@ -156,9 +157,9 @@ var RevealNotes = (function() {
return { return {
id: 'notes', id: 'notes',
init: function( revealInstance ) { init: function( reveal ) {
deck = revealInstance; deck = reveal;
if( !/receiver/i.test( window.location.search ) ) { 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(); toggleSearch();
} }
}, false ); }, false );
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
closeSearch(); 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', id: 'zoom',
init: function( reveal ) { init: function( reveal ) {
@ -25,11 +26,8 @@ var RevealZoom = (function(){
} ); } );
} }
}
})(); };
Reveal.registerPlugin( RevealZoom );
/*! /*!
* zoom.js 0.3 (modified for use with reveal.js) * zoom.js 0.3 (modified for use with reveal.js)

View File

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

View File

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

View File

@ -24,14 +24,12 @@
</div> </div>
<script src="qunit-2.5.0.js"></script> <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({ Reveal.initialize({
dependencies: [ dependencies: [ Markdown ]
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
]
}).then( function() { }).then( function() {
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );

View File

@ -32,15 +32,13 @@
</div> </div>
<script src="qunit-2.5.0.js"></script> <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({ 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: { markdown: {
smartypants: true smartypants: true
} }
@ -49,7 +47,7 @@
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );
QUnit.test( 'Options are set', function( assert ) { 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 ) { QUnit.test( 'Smart quotes are activated', function( assert ) {

View File

@ -117,14 +117,13 @@
</div> </div>
<script src="qunit-2.5.0.js"></script> <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({ Reveal.initialize({
dependencies: [ dependencies: [ Markdown ]
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
]
}).then( function() { }).then( function() {
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );

View File

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