Add diagrams support (#291)

* Test mermaid

* Support mermaid graphs

* More improvements and better handling of void elements

* Bump lerna and remove svg.js

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "4.0.0",
+  "lerna": "6.0.3",
   "packages": [
     "packages/*"
   ],

package.json

@@ -27,6 +27,6 @@
   },
   "homepage": "https://diffhtml.org/",
   "devDependencies": {
-    "lerna": "^4.0.0"
+    "lerna": "^6.0.3"
   }
 }

packages/diffhtml-middleware-worker/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
-    "babel-preset-diffhtml-imports": "^1.0.0-beta.23",
+    "babel-preset-diffhtml-imports": "^1.0.0-beta.29",
     "diffhtml": "^1.0.0-beta.23",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",

packages/diffhtml-static-sync/sync.js

@@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production';
 
 let interval = null;
 const domNodes = new Map();
-const { html, outerHTML } = diffhtml;
+const { outerHTML, html } = diffhtml;
 
 window.staticSyncHandlers = new Set();
 window.staticSyncSocket = undefined;
@@ -80,16 +80,7 @@ function open() {
           ext === 'md'
         )
       ) {
-        const children = html(markup);
-
-        console.log(children, markup);
-
-        if (children.childNodes.length > 1) {
-          outerHTML(document.documentElement, children.childNodes[1]);
-        }
-        else {
-          outerHTML(document.documentElement, children);
-        }
+        outerHTML(document.documentElement, html(markup));
       }
       // All other files cause a full page reload.
       else {

packages/diffhtml-website/build/generate.js

@@ -1,15 +1,53 @@
 const { readFileSync, writeFileSync, existsSync, mkdirSync } = require('fs');
 const { join, dirname } = require('path');
-const { html, toString, use } = require('diffhtml');
+const { html, toString, use, Internals } = require('diffhtml');
 const { marked } = require('marked');
+const mermaid = require('mermaid');
 const flattenPages = require('./util/flatten-pages');
-const { keys } = Object;
+const { assign, keys } = Object;
 
 // Ensure Components middleware is loaded since Layout is a class
 // component and toString will pick it up automatically.
 require('diffhtml-components');
 //use(require('diffhtml-middleware-linter')());
 
+// Create a jsdom and svgdom merged environment for Mermaid to work.
+const SVG = require('svgdom');
+const { JSDOM } = require('jsdom');
+const { window } = new JSDOM('');
+
+// Patch the Element constructor which is inherited by SVGElement to contain
+// the getBBox method to avoid runtime errors with mermaid.
+window.Element.prototype.getBBox = SVG.SVGGraphicsElement.prototype.getBBox;
+
+// Unfortunately this patching has to occur in order for the sanitize method
+// to return the input and not break under mermaid. Would be great to have
+// a fix that didn't involve this.
+Object.prototype.sanitize = x => x;
+
+assign(globalThis, {
+  document: window.document,
+  window,
+});
+
+// Mermaid parsing
+use({
+  createTreeHook({ nodeName, childNodes }) {
+    if (nodeName === 'mermaid') {
+      if (childNodes[0].nodeType === Internals.NODE_TYPE.TEXT) {
+        try {
+          mermaid.render('mermaid', childNodes[0].nodeValue.trim(), svg => {
+            // Replace with the newly rendered SVG
+            childNodes[0] = html(svg);
+          });
+        } catch (e) {
+          childNodes[0] = html`<pre>${e.stack}</pre>`;
+        }
+      }
+    }
+  },
+});
+
 const renderer = {};
 
 // Patch the renderer to allow for better anchor tags to be generated.