Termine le plugin "mermaid".

gulpfile.esm.js

-import { dest as _dest, src as _src, parallel, series } from "gulp";
+import { dest as _dest, src as _src, parallel, series, watch } from "gulp";
 import csso from "gulp-csso";
 import del from "del";
 import doZip from "gulp-zip";
@@ -102,14 +102,27 @@ export const code = () =>
     .pipe(sourcemaps.write("."))
     .pipe(dest(DEST));
 
-export const plugins = () =>
+const plugin_code = () =>
   src(`${SRC}/plugin/*/index.js`)
     .pipe(sourcemaps.init())
-    .pipe(rollup())
-    //.pipe(terser())
+    .pipe(rollup({}, { globals: { "reveal.js": "Reveal" } }))
+    .pipe(terser())
     .pipe(sourcemaps.write("."))
     .pipe(dest(DEST));
 
+const plugin_stylesheets = () =>
+  src(`${SRC}/plugin/*/*.{css,scss}`)
+    .pipe(sourcemaps.init())
+    .pipe(
+      sass({
+        outputStyle: "compressed",
+      })
+    )
+    .pipe(sourcemaps.write("."))
+    .pipe(dest(DEST));
+
+export const plugins = parallel(plugin_code, plugin_stylesheets);
+
 export const build = series(
   clean,
   parallel(misc, images, code, plugins, stylesheets, themes, highlightjs_themes)
@@ -122,4 +135,9 @@ const archive = () =>
 
 export const zip = series(build, archive);
 
+const watch_themes = () => watch(`${SRC}/css/theme/source/**/*.scss`, themes);
+const watch_plugins = () => watch(`${SRC}/plugin/**`, plugins);
+
+export const dev = parallel(watch_themes, watch_plugins);
+
 export default build;

lib/rollup.js

@@ -15,7 +15,7 @@ const DEFAULT_INPUT_OPTIONS = {
 };
 
 const DEFAULT_OUTPUT_OPTIONS = {
-  format: "umd",
+  format: "iife",
 };
 
 const onwarn = (input) => {
@@ -35,43 +35,52 @@ export default function (inputOptions = {}, outputOptions) {
   const outOpts = { ...DEFAULT_OUTPUT_OPTIONS, ...outputOptions };
 
   return obj(
-    callbackify(async function (input) {
-      try {
-        const bundle = await rollup({
-          ...inOpts,
-          input: input.path,
-          onwarn: onwarn(input),
-        });
-
-        const { output } = await bundle.generate({
-          ...outOpts,
-          sourcemap: !!input.sourceMap,
-        });
+    callbackify(
+      /**
+       * @param {File} input
+       */
+      async function (input) {
+        if (input.extname !== ".js") {
+          this.push(input);
+          return;
+        }
+        try {
+          const bundle = await rollup({
+            ...inOpts,
+            input: input.path,
+            onwarn: onwarn(input),
+          });
 
-        for (const chunk of output) {
-          const fileChunk = new File({
-            base: input.base,
-            path: input.path,
-            history: input.history,
+          const { output } = await bundle.generate({
+            ...outOpts,
+            sourcemap: !!input.sourceMap,
           });
-          fileChunk.sourceMap = input.sourceMap;
-          fileChunk.basename = chunk.fileName;
-          if (input.sourceMap && chunk.map) {
-            applySourceMap(fileChunk, chunk.map);
-          }
-          switch (chunk.type) {
-            case "chunk":
-              fileChunk.contents = Buffer.from(chunk.code);
-              break;
-            case "asset":
-              fileChunk.contents = Buffer.from(chunk.source);
-              break;
+
+          for (const chunk of output) {
+            const fileChunk = new File({
+              base: input.base,
+              path: input.path,
+              history: input.history,
+            });
+            fileChunk.sourceMap = input.sourceMap;
+            fileChunk.basename = chunk.fileName;
+            if (input.sourceMap && chunk.map) {
+              applySourceMap(fileChunk, chunk.map);
+            }
+            switch (chunk.type) {
+              case "chunk":
+                fileChunk.contents = Buffer.from(chunk.code);
+                break;
+              case "asset":
+                fileChunk.contents = Buffer.from(chunk.source);
+                break;
+            }
+            this.push(fileChunk);
           }
-          this.push(fileChunk);
+        } catch (error) {
+          throw new PluginError(PLUGIN_NAME, error);
         }
-      } catch (error) {
-        throw new PluginError(PLUGIN_NAME, error);
       }
-    })
+    )
   );
 }

package.json

@@ -83,7 +83,17 @@
           "ignoreCase": true
         }
       ]
-    }
+    },
+    "overrides": [
+      {
+        "files": [
+          "src/plugin/**/*.js"
+        ],
+        "globals": {
+          "Reveal": "readonly"
+        }
+      }
+    ]
   },
   "pretiter:": {
     "printWidth": 80

src/plugin/mermaid/index.js

 import mermaid from "mermaid/dist/mermaid";
 
-mermaid;
+class MermaidPlugin {
+  init() {
+    Reveal.addEventListener("slidechanged", (event) =>
+      this.onSlideChanged(event)
+    );
+    this.serial = 0;
+    mermaid.initialize({ startOnLoad: false, theme: "neutral" });
+
+    this.processSlide(Reveal.getCurrentSlide());
+  }
+
+  /**
+   *
+   * @param {{ currentSlide: HTMLElement }} param0
+   */
+  onSlideChanged({ currentSlide }) {
+    this.processSlide(currentSlide);
+  }
+
+  /**
+   *
+   * @param {HTMLElement} slide
+   */
+  async processSlide(slide) {
+    const graphs = [];
+    for (const graph of slide.querySelectorAll("pre.mermaid")) {
+      const prom = this.renderGraph(graph);
+      if (prom) {
+        graphs.push(prom);
+      }
+    }
+    await Promise.all(graphs);
+    Reveal.layout();
+  }
+
+  /**
+   * @param {HTMLElement} element
+   * @return {Promise<boolean>|null}
+   */
+  renderGraph(element) {
+    if (element.hasAttribute("data-processed")) {
+      return null;
+    }
+    return new Promise((resolve, reject) => {
+      try {
+        mermaid.render(
+          `__mermaid${+this.serial}`,
+          element.textContent,
+          (svgCode) => {
+            element.innerHTML = svgCode;
+            element.setAttribute("data-processed", true);
+            resolve(true);
+          }
+        );
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}
+
+Reveal.registerPlugin("mermaid", new MermaidPlugin());

src/plugin/mermaid/theme.scss

+
+pre.mermaid {
+  background: none;
+  border: none;
+
+  * {
+    font-family: "Avenir Next LT Pro Condensed", Helvetica, sans-serif;
+    font-size: 13pt;
+    line-height: 1em;
+  }
+}