Merge branch 'mermaid' into gulp

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";
 import imagemin from "gulp-imagemin";
+import rollup from "./lib/rollup";
 import sass from "gulp-sass";
 import sass_compiler from "node-sass";
 import sourcemaps from "gulp-sourcemaps";
@@ -88,7 +89,7 @@ export const highlightjs_themes = () =>
     .pipe(dest(`${DEST}/lib/css`));
 
 export const code = () =>
-  src([`${SRC}/**/*.js`])
+  src([`${SRC}/**/*.js`, `!${SRC}/plugin/**/*.js`])
     .pipe(
       upstream([
         `${UPSTREAM}/**/*.js`,
@@ -101,9 +102,30 @@ export const code = () =>
     .pipe(sourcemaps.write("."))
     .pipe(dest(DEST));
 
+const plugin_code = () =>
+  src(`${SRC}/plugin/*/index.js`)
+    .pipe(sourcemaps.init())
+    .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, stylesheets, themes, highlightjs_themes)
+  parallel(misc, images, code, plugins, stylesheets, themes, highlightjs_themes)
 );
 
 const archive = () =>
@@ -113,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

+import applySourceMap from "vinyl-sourcemaps-apply";
+import { callbackify } from "util";
+import commonJS from "@rollup/plugin-commonjs";
+import File from "vinyl";
+import logger from "gulplog";
+import nodeResolver from "@rollup/plugin-node-resolve";
+import { obj } from "through2";
+import PluginError from "plugin-error";
+import { rollup } from "rollup";
+
+const PLUGIN_NAME = "rollup";
+
+const DEFAULT_INPUT_OPTIONS = {
+  plugins: [nodeResolver(), commonJS()],
+};
+
+const DEFAULT_OUTPUT_OPTIONS = {
+  format: "iife",
+};
+
+const onwarn = (input) => {
+  const path = input.relative;
+  return ({ loc, code, message }) =>
+    logger.warn(
+      "%s: [%s] %s: %s",
+      PLUGIN_NAME,
+      code,
+      loc ? `${path} (${loc.file}:${loc.line}:${loc.column})` : path,
+      message
+    );
+};
+
+export default function (inputOptions = {}, outputOptions) {
+  const inOpts = { ...DEFAULT_INPUT_OPTIONS, ...inputOptions };
+  const outOpts = { ...DEFAULT_OUTPUT_OPTIONS, ...outputOptions };
+
+  return obj(
+    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),
+          });
+
+          const { output } = await bundle.generate({
+            ...outOpts,
+            sourcemap: !!input.sourceMap,
+          });
+
+          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);
+          }
+        } catch (error) {
+          throw new PluginError(PLUGIN_NAME, error);
+        }
+      }
+    )
+  );
+}

package.json

@@ -21,20 +21,26 @@
   "author": "Guillaume Perréal <guillaume.perreal@inrae.fr>",
   "license": "MIT",
   "dependencies": {
+    "@rollup/plugin-commonjs": "^11.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "del": "^5.1.0",
     "esm": "^3.2.25",
     "gulp": "^4.0.2",
     "gulp-csso": "^4.0.1",
-    "gulp-debug": "^4.0.0",
     "gulp-imagemin": "^7.1.0",
-    "gulp-rename": "^2.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
     "gulp-zip": "^5.0.1",
+    "gulplog": "^1.0.0",
     "highlight.js": "^9.18.1",
+    "mermaid": "^8.5.0",
     "node-sass": "^4.14.0",
-    "reveal.js": "^3.9.2"
+    "plugin-error": "^1.0.1",
+    "reveal.js": "^3.9.2",
+    "rollup": "^2.8.2",
+    "through2": "^3.0.1",
+    "vinyl-sourcemaps-apply": "^0.2.1"
   },
   "devDependencies": {
     "depcheck": "^0.9.2",
@@ -77,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";
+
+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;
+  }
+}