line in the sand.

manastalukdar · manastalukdar · commit 21c5aca41829 · 2019-09-02T17:38:47.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -63,3 +63,4 @@ typings/
 dist
 .reify-cache
 src/**/mermaid.min.js
+src/temp/
diff --git a/src/index.js b/src/index.js
@@ -23,12 +23,10 @@ module.exports = function umlPlugin(md, options) {
 
     switch(langName) {
       case 'mermaid':
-        mermaidParser.functions.getMarkup(code)
-        .then(function(result) {
-          return result
-        }).catch((err) => {
-          console.log(err)
-        })
+        return mermaidParser.functions.getMarkup(code)
+        /*.then(function(result) {
+          return result;
+        })*/
         break;
       case 'plantuml':
       case 'dot':
diff --git a/src/mermaid-parser.js b/src/mermaid-parser.js
@@ -1,9 +1,12 @@
 'use strict'
 
-const puppeteer = require('puppeteer')
 const path = require('path')
+const fs = require('fs')
+const childProcess = require('child_process');
 
-// const mermaid = require('mermaid')
+const tempDir = path.join(__dirname, 'temp', 'mermaid')
+const outputFile = path.join(tempDir, 'output.data')
+const puppeteerScript = path.join(__dirname, './mermaid-puppeteer.js')
 
 const functions = {
   options: {},
@@ -21,57 +24,58 @@ const functions = {
     if (options) {
       this.options = options;
     }
-
-    // mermaid.initialize(Object.assign(this.mermaidParserDefaults, options))
+    if (!fs.existsSync(tempDir)){
+      fs.mkdirSync(tempDir);
+    }
+    const optionsFile = path.join(tempDir, 'options.data')
+    // overwrites existing file
+    fs.writeFileSync(optionsFile, JSON.stringify(this.options))
   },
 
-  async getMarkup(code) {
-    const browser = await puppeteer.launch()
-    const mermaidConfig = Object.assign(this.mermaidParserDefaults, this.options)
-    try {
-      const page = await browser.newPage()
-      const file = path.join(__dirname, 'index.html')
-      await page.goto(`file://${file}`)
-      const definition = code;
-
-      const element = (await page.$$('#container'))[1];
-      const divsCounts = await page.$$eval('#container', divs => divs.length);
-
-      await page.$eval('#container', (container, definition, mermaidConfig) => {
-        container.innerHTML = definition
-        window.mermaid.initialize(mermaidConfig)
-        window.mermaid.init(undefined, container)
-      }, definition, mermaidConfig)
-
-      const svg = await page.$eval('#container', container => container.innerHTML)
-
-      const resultSvg = svg
-
-      browser.close()
-      return resultSvg;
-    } catch ({
-      str,
-      hash
-    }) {
-      browser.close()
-      return `<pre>${str}</pre>`
+  getMarkup(code) {
+
+    const codeFile = path.join(tempDir, 'code.data')
+    if (!fs.existsSync(tempDir)){
+      fs.mkdirSync(tempDir);
     }
+     // overwrites existing file
+     fs.writeFileSync(codeFile, code)
 
-    /*try {
-      var needsUniqueId = 'render' + (Math.floor(Math.random() * 10000)).toString()
-      mermaid.mermaidAPI.render(needsUniqueId, code, sc => {
-        code = sc
-      })
-      return `<div class="mermaid">${code}</div>`
-    } catch ({
-      str,
-      hash
-    }) {
-      return `<pre>${str}</pre>`
-    }*/
+     runScript(puppeteerScript, function (err) {
+      if (err) throw err;
+      console.log('finished running mermaid-puppeteer.js');
+    });
+
+    const output = fs.readFileSync(outputFile, 'utf-8')
+    return '<div class="mermaid" data-processed="true">\n' + output + '\n</div>\n'
   }
 }
 
+// https://stackoverflow.com/a/22649812/420827
+function runScript(scriptPath, callback) {
+
+  // keep track of whether callback has been invoked to prevent multiple invocations
+  var invoked = false;
+
+  var process = childProcess.fork(scriptPath);
+
+  // listen for errors as they may prevent the exit event from firing
+  process.on('error', function (err) {
+      if (invoked) return;
+      invoked = true;
+      callback(err);
+  });
+
+  // execute the callback once the process has finished running
+  process.on('exit', function (code) {
+      if (invoked) return;
+      invoked = true;
+      var err = code === 0 ? null : new Error('exit code ' + code);
+      callback(err);
+  });
+
+}
+
 module.exports = {
   functions
 };
diff --git a/src/mermaid-puppeteer.js b/src/mermaid-puppeteer.js
@@ -1,11 +1,21 @@
 const puppeteer = require('puppeteer');
+const fs = require('fs')
 const path = require('path');
 
 (async () => {
   const browser = await puppeteer.launch()
   try {
+    const tempDir = path.join(__dirname, 'temp', 'mermaid')
+    const codeFile = path.join(tempDir, 'code.data')
+    const optionsFile = path.join(tempDir, 'options.data')
+    const outputFile = path.join(tempDir, 'output.data')
 
-    const options = {}
+    if (!fs.existsSync(tempDir)){
+      throw err;
+    }
+
+    const code = fs.readFileSync(codeFile, 'utf-8')
+    const options = JSON.parse(fs.readFileSync(optionsFile, 'utf-8'))
 
     const mermaidParserDefaults = {
       startOnLoad: false,
@@ -20,25 +30,17 @@ const path = require('path');
     const page = await browser.newPage()
     const file = path.join(__dirname, 'index.html')
     await page.goto(`file://${file}`)
-    const definition =
-      `graph TD;
-      A-->B;
-      A-->C;
-      B-->D;
-      C-->D;`;
-
-    const element = (await page.$$('#container'))[1];
-    const divsCounts = await page.$$eval('#container', divs => divs.length);
-
-    await page.$eval('#container', (container, definition, mermaidConfig) => {
-      container.innerHTML = definition
+
+    await page.$eval('#container', (container, code, mermaidConfig) => {
+      container.innerHTML = code
       window.mermaid.initialize(mermaidConfig)
       window.mermaid.init(undefined, container)
-    }, definition, mermaidConfig)
+    }, code, mermaidConfig)
 
     const svg = await page.$eval('#container', container => container.innerHTML)
 
-    console.log('svg:', svg);
+    // overwrites existing file
+    fs.writeFileSync(outputFile, svg)
 
     await browser.close()
   }
diff --git a/test/fixtures/mermaid/default.txt b/test/fixtures/mermaid/default.txt
@@ -8,9 +8,9 @@ graph TD;
     C-->D;
 ```
 .
-<div class="mermaid">graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;</div>b
+<div class="mermaid" data-processed="true">
+<svg id="mermaid-1567470580104" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 124.640625px;" viewBox="0 0 124.640625 233"><style>#mermaid-1567470580104 .label{font-family:\'trebuchet ms\', verdana, arial;color:#333}#mermaid-1567470580104 .label text{fill:#333}#mermaid-1567470580104 .node rect,#mermaid-1567470580104 .node circle,#mermaid-1567470580104 .node ellipse,#mermaid-1567470580104 .node polygon{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-1567470580104 .node.clickable{cursor:pointer}#mermaid-1567470580104 .arrowheadPath{fill:#333}#mermaid-1567470580104 .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-1567470580104 .edgeLabel{background-color:#e8e8e8}#mermaid-1567470580104 .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-1567470580104 .cluster text{fill:#333}#mermaid-1567470580104 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\'trebuchet ms\', verdana, arial;font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-1567470580104 .actor{stroke:#ccf;fill:#ECECFF}#mermaid-1567470580104 text.actor{fill:#000;stroke:none}#mermaid-1567470580104 .actor-line{stroke:grey}#mermaid-1567470580104 .messageLine0{stroke-width:1.5;stroke-dasharray:\'2 2\';stroke:#333}#mermaid-1567470580104 .messageLine1{stroke-width:1.5;stroke-dasharray:\'2 2\';stroke:#333}#mermaid-1567470580104 #arrowhead{fill:#333}#mermaid-1567470580104 .sequenceNumber{fill:#fff}#mermaid-1567470580104 #sequencenumber{fill:#333}#mermaid-1567470580104 #crosshead path{fill:#333 !important;stroke:#333 !important}#mermaid-1567470580104 .messageText{fill:#333;stroke:none}#mermaid-1567470580104 .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-1567470580104 .labelText{fill:#000;stroke:none}#mermaid-1567470580104 .loopText{fill:#000;stroke:none}#mermaid-1567470580104 .loopLine{stroke-width:2;stroke-dasharray:\'2 2\';stroke:#ccf}#mermaid-1567470580104 .note{stroke:#aa3;fill:#fff5ad}#mermaid-1567470580104 .noteText{fill:black;stroke:none;font-family:\'trebuchet ms\', verdana, arial;font-size:14px}#mermaid-1567470580104 .activation0{fill:#f4f4f4;stroke:#666}#mermaid-1567470580104 .activation1{fill:#f4f4f4;stroke:#666}#mermaid-1567470580104 .activation2{fill:#f4f4f4;stroke:#666}#mermaid-1567470580104 .section{stroke:none;opacity:0.2}#mermaid-1567470580104 .section0{fill:rgba(102,102,255,0.49)}#mermaid-1567470580104 .section2{fill:#fff400}#mermaid-1567470580104 .section1,#mermaid-1567470580104 .section3{fill:#fff;opacity:0.2}#mermaid-1567470580104 .sectionTitle0{fill:#333}#mermaid-1567470580104 .sectionTitle1{fill:#333}#mermaid-1567470580104 .sectionTitle2{fill:#333}#mermaid-1567470580104 .sectionTitle3{fill:#333}#mermaid-1567470580104 .sectionTitle{text-anchor:start;font-size:11px;text-height:14px}#mermaid-1567470580104 .grid .tick{stroke:#d3d3d3;opacity:0.3;shape-rendering:crispEdges}#mermaid-1567470580104 .grid path{stroke-width:0}#mermaid-1567470580104 .today{fill:none;stroke:red;stroke-width:2px}#mermaid-1567470580104 .task{stroke-width:2}#mermaid-1567470580104 .taskText{text-anchor:middle;font-size:11px}#mermaid-1567470580104 .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px}#mermaid-1567470580104 .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-1567470580104 .task.clickable{cursor:pointer}#mermaid-1567470580104 .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1567470580104 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1567470580104 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-1567470580104 .taskText0,#mermaid-1567470580104 .taskText1,#mermaid-1567470580104 .taskText2,#mermaid-1567470580104 .taskText3{fill:#fff}#mermaid-1567470580104 .task0,#mermaid-1567470580104 .task1,#mermaid-1567470580104 .task2,#mermaid-1567470580104 .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-1567470580104 .taskTextOutside0,#mermaid-1567470580104 .taskTextOutside2{fill:#000}#mermaid-1567470580104 .taskTextOutside1,#mermaid-1567470580104 .taskTextOutside3{fill:#000}#mermaid-1567470580104 .active0,#mermaid-1567470580104 .active1,#mermaid-1567470580104 .active2,#mermaid-1567470580104 .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-1567470580104 .activeText0,#mermaid-1567470580104 .activeText1,#mermaid-1567470580104 .activeText2,#mermaid-1567470580104 .activeText3{fill:#000 !important}#mermaid-1567470580104 .done0,#mermaid-1567470580104 .done1,#mermaid-1567470580104 .done2,#mermaid-1567470580104 .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-1567470580104 .doneText0,#mermaid-1567470580104 .doneText1,#mermaid-1567470580104 .doneText2,#mermaid-1567470580104 .doneText3{fill:#000 !important}#mermaid-1567470580104 .crit0,#mermaid-1567470580104 .crit1,#mermaid-1567470580104 .crit2,#mermaid-1567470580104 .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-1567470580104 .activeCrit0,#mermaid-1567470580104 .activeCrit1,#mermaid-1567470580104 .activeCrit2,#mermaid-1567470580104 .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-1567470580104 .doneCrit0,#mermaid-1567470580104 .doneCrit1,#mermaid-1567470580104 .doneCrit2,#mermaid-1567470580104 .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-1567470580104 .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-1567470580104 .milestoneText{font-style:italic}#mermaid-1567470580104 .doneCritText0,#mermaid-1567470580104 .doneCritText1,#mermaid-1567470580104 .doneCritText2,#mermaid-1567470580104 .doneCritText3{fill:#000 !important}#mermaid-1567470580104 .activeCritText0,#mermaid-1567470580104 .activeCritText1,#mermaid-1567470580104 .activeCritText2,#mermaid-1567470580104 .activeCritText3{fill:#000 !important}#mermaid-1567470580104 .titleText{text-anchor:middle;font-size:18px;fill:#000}#mermaid-1567470580104 g.classGroup text{fill:#9370db;stroke:none;font-family:\'trebuchet ms\', verdana, arial;font-size:10px}#mermaid-1567470580104 g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-1567470580104 g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-1567470580104 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-1567470580104 .classLabel .label{fill:#9370db;font-size:10px}#mermaid-1567470580104 .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-1567470580104 #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-1567470580104 .commit-id,#mermaid-1567470580104 .commit-msg,#mermaid-1567470580104 .branch-label{fill:lightgrey;color:lightgrey}\n</style><style>#mermaid-1567470580104 {\n    color: rgb(0, 0, 0);\n    font: normal normal 400 normal 16px / normal "Times New Roman";\n  }</style><g transform="translate(-12, -12)"><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M59.19140625,56.33049345021176L34.53125,84L34.53125,109" marker-end="url(#arrowhead14)" style="fill:none"></path><defs><marker id="arrowhead14" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M89.19140625,56.33049345021176L113.8515625,84L113.8515625,109" marker-end="url(#arrowhead15)" style="fill:none"></path><defs><marker id="arrowhead15" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M34.53125,148L34.53125,173L59.19140625,200.66950654978825" marker-end="url(#arrowhead16)" style="fill:none"></path><defs><marker id="arrowhead16" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M113.8515625,148L113.8515625,173L89.19140625,200.66950654978825" marker-end="url(#arrowhead17)" style="fill:none"></path><defs><marker id="arrowhead17" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect><text><tspan xml:space="preserve" dy="1em" x="1"></tspan></text></g></g><g
+class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect><text><tspan xml:space="preserve" dy="1em" x="1"></tspan></text></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect><text><tspan xml:space="preserve" dy="1em" x="1"></tspan></text></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><rect rx="0" ry="0" width="0" height="0" style="fill:#e8e8e8;"></rect><text><tspan xml:space="preserve" dy="1em" x="1"></tspan></text></g></g></g><g class="nodes"><g class="node" id="A" transform="translate(74.19140625,39.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-15" y="-19.5" width="30" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-5,-9.5)"><text><tspan xml:space="preserve" dy="1em" x="1">A</tspan></text></g></g></g><g class="node" id="B" transform="translate(34.53125,128.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-14.53125" y="-19.5" width="29.0625" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-4.53125,-9.5)"><text><tspan xml:space="preserve" dy="1em" x="1">B</tspan></text></g></g></g><g class="node" id="C" transform="translate(113.8515625,128.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-14.7890625" y="-19.5" width="29.578125" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-4.7890625,-9.5)"><text><tspan xml:space="preserve" dy="1em" x="1">C</tspan></text></g></g></g><g class="node" id="D" transform="translate(74.19140625,217.5)" style="opacity: 1;"><rect rx="0" ry="0" x="-15" y="-19.5" width="30" height="39"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-5,-9.5)"><text><tspan xml:space="preserve" dy="1em" x="1">D</tspan></text></g></g></g></g></g></g></svg>
+</div>
 .
+
diff --git a/test/mermaid.js b/test/mermaid.js
@@ -7,7 +7,7 @@ import md from 'markdown-it'
 import umlPlugin from '../src/index.js'
 
 describe('markdown-it-textual-uml: mermaid', function() {
-  /*it('test sanity', function () {
+  it('test sanity', function () {
     md().use(umlPlugin);
     assert(md().render('# Hello world').trim() === '<h1>Hello world</h1>', '# Hello world')
     assert(md().render('Hello world').trim() === '<p>Hello world</p>', 'Hello world')
@@ -22,8 +22,9 @@ describe('markdown-it-textual-uml: mermaid', function() {
         C -->|Two| E[iPhone]
         C -->|Three| F[Car]
     \`\`\``));
-  });*/
+  });
 
+  /*
   it('test default', function() {
     var defaultParser = md().use(umlPlugin)
 
@@ -40,46 +41,5 @@ describe('markdown-it-textual-uml: mermaid', function() {
     }
     runGenerate();
   })
+  */
 })
-
-// console.log(mdi.render(`\`\`\`
-// graph TD
-//     A[Christmas] -->|Get money| B(Go shopping)
-//     B --> C{Let me think}
-//     C -->|One| D[Laptop]
-//     C -->|Two| E[iPhone]
-//     C -->|Three| F[Car]
-// \`\`\``))
-// console.log(mdi.render(`\`\`\`
-// graph TD
-//     A[Christmas] -->|Get money| B(Go shopping)
-//     B ----> C{Let me think}
-//     C -->|One| D[Laptop]
-//     C -->|Two| E[iPhone]
-//     C -->|Three| F[Car]
-// \`\`\``))
-
-// assert(mdi.render(`\`\`\`mermaid
-// graph TD
-//     A[Christmas] -->|Get money| B(Go shopping)
-//     B --> C{Let me think}
-//     C -->|One| D[Laptop]
-//     C -->|Two| E[iPhone]
-//     C -->|Three| F[Car]
-// \`\`\``).indexOf('class="mermaid"') > -1)
-// assert(mdi.render(`\`\`\`
-// graph TD
-//     A[Christmas] -->|Get money| B(Go shopping)
-//     B --> C{Let me think}
-//     C -->|One| D[Laptop]
-//     C -->|Two| E[iPhone]
-//     C -->|Three| F[Car]
-// \`\`\``).indexOf('class="mermaid"') > -1)
-// assert(mdi.render(`\`\`\`
-// graph TD
-//     A[Christmas] -->|Get money| B(Go shopping)
-//     B ----> C{Let me think}
-//     C -->|One| D[Laptop]
-//     C -->|Two| E[iPhone]
-//     C -->|Three| F[Car]
-// \`\`\``).indexOf('<pre>Parse error') > -1)
diff --git a/test/tests.js b/test/tests.js
@@ -1,3 +1,3 @@
-//require('./plantuml.js')
-//require('./ditaa.js')
+require('./plantuml.js')
+require('./ditaa.js')
 require('./mermaid.js')
