Skip to content

Commit fe3208c

Browse files
tbranyentbranyen
authored
Add diagrams support (tbranyen#291)
* Test mermaid * Support mermaid graphs * More improvements and better handling of void elements * Bump lerna and remove svg.js
1 parent 960c84f commit fe3208c

13 files changed

Lines changed: 8578 additions & 4667 deletions

File tree

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"lerna": "4.0.0",
2+
"lerna": "6.0.3",
33
"packages": [
44
"packages/*"
55
],

‎package-lock.json‎

Lines changed: 4689 additions & 4424 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@
2727
},
2828
"homepage": "https://diffhtml.org/",
2929
"devDependencies": {
30-
"lerna": "^4.0.0"
30+
"lerna": "^6.0.3"
3131
}
3232
}

‎packages/babel-preset-diffhtml-imports/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/diffhtml-middleware-worker/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"devDependencies": {
2626
"@babel/cli": "^7.12.10",
2727
"@babel/core": "^7.12.10",
28-
"babel-preset-diffhtml-imports": "^1.0.0-beta.23",
28+
"babel-preset-diffhtml-imports": "^1.0.0-beta.29",
2929
"diffhtml": "^1.0.0-beta.23",
3030
"rollup": "^1.21.4",
3131
"rollup-plugin-babel": "^4.3.3",

‎packages/diffhtml-static-sync/sync.js‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ process.env.NODE_ENV = 'production';
55

66
let interval = null;
77
const domNodes = new Map();
8-
const { html, outerHTML } = diffhtml;
8+
const { outerHTML, html } = diffhtml;
99

1010
window.staticSyncHandlers = new Set();
1111
window.staticSyncSocket = undefined;
@@ -80,16 +80,7 @@ function open() {
8080
ext === 'md'
8181
)
8282
) {
83-
const children = html(markup);
84-
85-
console.log(children, markup);
86-
87-
if (children.childNodes.length > 1) {
88-
outerHTML(document.documentElement, children.childNodes[1]);
89-
}
90-
else {
91-
outerHTML(document.documentElement, children);
92-
}
83+
outerHTML(document.documentElement, html(markup));
9384
}
9485
// All other files cause a full page reload.
9586
else {

‎packages/diffhtml-website/build/generate.js‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,53 @@
11
const { readFileSync, writeFileSync, existsSync, mkdirSync } = require('fs');
22
const { join, dirname } = require('path');
3-
const { html, toString, use } = require('diffhtml');
3+
const { html, toString, use, Internals } = require('diffhtml');
44
const { marked } = require('marked');
5+
const mermaid = require('mermaid');
56
const flattenPages = require('./util/flatten-pages');
6-
const { keys } = Object;
7+
const { assign, keys } = Object;
78

89
// Ensure Components middleware is loaded since Layout is a class
910
// component and toString will pick it up automatically.
1011
require('diffhtml-components');
1112
//use(require('diffhtml-middleware-linter')());
1213

14+
// Create a jsdom and svgdom merged environment for Mermaid to work.
15+
const SVG = require('svgdom');
16+
const { JSDOM } = require('jsdom');
17+
const { window } = new JSDOM('');
18+
19+
// Patch the Element constructor which is inherited by SVGElement to contain
20+
// the getBBox method to avoid runtime errors with mermaid.
21+
window.Element.prototype.getBBox = SVG.SVGGraphicsElement.prototype.getBBox;
22+
23+
// Unfortunately this patching has to occur in order for the sanitize method
24+
// to return the input and not break under mermaid. Would be great to have
25+
// a fix that didn't involve this.
26+
Object.prototype.sanitize = x => x;
27+
28+
assign(globalThis, {
29+
document: window.document,
30+
window,
31+
});
32+
33+
// Mermaid parsing
34+
use({
35+
createTreeHook({ nodeName, childNodes }) {
36+
if (nodeName === 'mermaid') {
37+
if (childNodes[0].nodeType === Internals.NODE_TYPE.TEXT) {
38+
try {
39+
mermaid.render('mermaid', childNodes[0].nodeValue.trim(), svg => {
40+
// Replace with the newly rendered SVG
41+
childNodes[0] = html(svg);
42+
});
43+
} catch (e) {
44+
childNodes[0] = html`<pre>${e.stack}</pre>`;
45+
}
46+
}
47+
}
48+
},
49+
});
50+
1351
const renderer = {};
1452

1553
// Patch the renderer to allow for better anchor tags to be generated.

0 commit comments

Comments
 (0)