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

This commit is contained in:
Hakim El Hattab 2020-04-17 10:59:55 +02:00
parent d9690462e0
commit 4f6bdf1420
31 changed files with 155 additions and 52 deletions

View file

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

View file

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

2
dist/reveal.css vendored
View file

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

9
dist/reveal.es5.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/reveal.es5.js.map vendored Normal file

File diff suppressed because one or more lines are too long

9
dist/reveal.js vendored Normal file

File diff suppressed because one or more lines are too long

1
dist/reveal.js.map vendored Normal file

File diff suppressed because one or more lines are too long

8
dist/reveal.min.js vendored

File diff suppressed because one or more lines are too long

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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