reveal.js 4.0.0

[hakimel]

I've been hard at work on reveal.js 4.0.0 for a while now and wanted to share the progress so far. It's not ready to merge just yet, but it's getting close.

The main changes in this release are:

• New website, docs and logo https://revealjs.com
• Modernized reveal.js core. The old reveal.js file with 6.2k lines of code (!) was refactored and split into ES modules.
• You can now run multiple reveal.js presentations on the same page.

  import Reveal from 'reveal.js'
  let deck1 = new Reveal( document.querySelector( '.deck1' ) );
  let deck2 = new Reveal( document.querySelector( '.deck2' ) );
  deck1.initialize({ embedded: true });
  deck2.initialize({ embedded: true });

• Converted all plugins to ES modules so that they can be bundled with reveal.js.
• All plugins and reveal.js core are transpiled to ES5 for situations where you need to support older browsers.
• Switched build systems from grunt to gulp (using rollup for bundling).
• Added a major new Auto-Animate feature.
• Added a new slidetransitionend event.
• Reveal.add/removeEventListener -> Reveal.on/off.
• Added support for code line numbers and highlights using Markdown
• The initialize method now returns a promise that resolves when reveal.js has started Reveal.initialize().then( () => console.log( 'ready' ) ).
• The highlight.js and marked libraries are now installed from npm. They were previously hard coded inside their corresponding plugins in this repository.

There are a few breaking changes in this release:

• All compiled assets (reveal.js, reveal.css, themes) have moved to /dist.
• Print stylesheets are now baked into the reveal.css file so there is no need to separately include them in the presentation HTML.
• The multiplex and server side speakers notes plugins have moved out to separate repos and can be installed via npm:
  https://github.com/reveal/multiplex
  https://github.com/reveal/notes-server

Docs, upgrade instructions and a new revealjs.com will follow when it's ready to merge but hopefully this gives you an idea of what's to come! ✌️

[Martinomagnifico]

Hi Hakim, cool progress you're making! Love the auto-animate :-) Also, the slidetransitionend is something that my Appearance plugin can use.

Could you also emit an event for fragmenttransitionend? For example, if a user has set a slow css transition for a fragment, and there is a chart in there, then it can hold off to start building the chart columns when the fragment transition is complete.

Having a built-in fragmenttransitionend would then make my Transit plugin, currently needed for Appearance, completely obsolete, which is something we talked about earlier. I would prefer that to asking people to keep using it for fragment transitions.

[hakimel]

Thanks @Martinomagnifico! An event for fragment transitions could be useful too. It's not something I'm going to add to 4.0 since I'm trying to wrap that up for release but will consider it for another update.

[hakimel]

I've moved the built plugins from /dist/plugin/math.js to /plugin/math/math.js. Been going back and forth on this for ages, but I think it's better to isolate everything plugin related to one directory. Also, as @McShelby pointed out, it makes it more obvious where to place additional plugins (/plugin) when copy-pasting them into a reveal.js directory.

Also the notes plugin is now 100% bundled in a single notes.js file. It used to require loading of an external notes.html HTML file, which led to issues with changing relative paths etc.

[hakimel]

4.0.0 is now merged into master 🚀 If anyone wants to try it out and give feedback I'd really appreciate it: https://github.com/hakimel/reveal.js/releases/tag/4.0.0-rc.1

Release notes are underway and upgrade instructions can be found here https://revealjs.app/upgrading/

[McShelby]

So far everything works fine for me.

Just another small wish: At the end of index.js you are providing a pre 4.x compatiblity layer. Could you add the VERSION attribute so a plugin is not required to do duck typing if it needs special logic for certain versions during its loading time?

[RealCyGuy]

@hakimel this upgrading link works: https://revealjs.com/upgrading/

[hakimel]

Thanks for testing!

@McShelby Great suggestion, Reveal.VERSION is now immediately available.

@RealCyGuy I switched revealjs.com over the new website today. DNS might still be propagating depending on where you're located though.

If anyone wants to contribute to the docs, the repo for is https://github.com/reveal/revealjs.com.

[Martinomagnifico]

Hi Hakim, there is something I noticed regarding Themes:

The white and black theme react to section(data-background="some other color") when this color is dark or light compared to the main slide background. It's a CSS rule that in those cases sets the font color to a contrasting color.

The other Reveal themes do not have such a rule. So if a user sets a very contrasting background in any of the other themes (compared to the main background), the fonts become almost unreadable. The good thing is that the controls do change to a contrasting color.

Also, the colors set in the rules in Black and White directly use a Hex color, not a variable. I would suggest adding exposed variable colors like --main-color-opposite, --heading-color-opposite etc., or at least add rules in those themes for dark/light backgrounds.

[hakimel]

@Martinomagnifico Thanks for the feedback! I've made a note to add inverse text colors to the rest of the themes as well and expose them as CSS variables. This isn't something that has changed in version 4.0 so we'll save it for next version.

[hakimel]

reveal.js 4.0.0 is now shipped and available from npm 🚀

Release notes: https://github.com/hakimel/reveal.js/releases/tag/4.0.0

[zxq08]

想请问一下，关于4.0的npm版本，支持的最低node版本有介绍吗，抱歉实在没有找到...