fix: add gfm format for remark fixed #1374 (#1375)

Plugins for remark was reworks because @link should be catch by first then autolink
documentationjs · Apr 24, 2021 · 6b5bc25 · 6b5bc25
1 parent 00d434f
commit 6b5bc25
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 33 deletions.
diff --git a/__tests__/__snapshots__/test.js.snap b/__tests__/__snapshots__/test.js.snap
@@ -1212,6 +1212,16 @@ exports[`html nested.input.js 1`] = `
 
                 </li>
 
+
+                <li><a
+                  href='#tableobj'
+                  class=\\"\\">
+                  tableObj
+
+                </a>
+
+                </li>
+
             </ul>
           </div>
           <div class='mt1 h6 quiet'>
@@ -2451,6 +2461,76 @@ like a <a href=\\"#klass\\">klass</a>. This needs a <a href=\\"https://developer
     </div>
 
 </div>
+
+
+
+
+
+
+
+
+</section>
+
+
+
+
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+
+    <h3 class='fl m0' id='tableobj'>
+      tableObj
+    </h3>
+
+
+  </div>
+
+
+  <table>
+<thead>
+<tr>
+<th>Col 1</th>
+<th>Col 2</th>
+<th>Col 3</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Dat 1</td>
+<td>Dat 2</td>
+<td>Dat 3</td>
+</tr>
+<tr>
+<td>Dat 4</td>
+<td>Dat 5</td>
+<td>Dat 6</td>
+</tr>
+</tbody>
+</table>
+
+    <div class='pre p1 fill-light mt0'>tableObj</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

diff --git a/__tests__/fixture/html/nested.input.js b/__tests__/fixture/html/nested.input.js
@@ -158,3 +158,11 @@ var customStreams = {};
 customStreams.passthrough = function() {
   this.custom = true;
 };
+
+/**
+ * | Col 1 | Col 2 | Col 3 |
+ * |-------|-------|-------|
+ * | Dat 1 | Dat 2 | Dat 3 |
+ * | Dat 4 | Dat 5 | Dat 6 |
+ */
+ var tableObj = {};
diff --git a/__tests__/lib/parse.js b/__tests__/lib/parse.js
@@ -1,10 +1,7 @@
 const parse = require('../../src/parsers/javascript');
-const remarkP = require('remark')().parse;
-const removePosition = require('../../src/remark-remove-position')();
+const removePosition = require('../../src/remark-remove-position');
+const remarkParse = require('remark')().use(removePosition).parse;
 const visit = require('unist-util-visit');
-const remarkParse = function (str) {
-  return removePosition(remarkP(str));
-};
 
 function pick(obj, props) {
   if (Array.isArray(props)) {

diff --git a/__tests__/lib/parsers/javascript.js b/__tests__/lib/parsers/javascript.js
@@ -1,9 +1,6 @@
-const remarkP = require('remark')().parse;
-const removePosition = require('../../../src/remark-remove-position')();
+const removePosition = require('../../../src/remark-remove-position');
+const remarkParse = require('remark')().use(removePosition).parse;
 const parse = require('../../../src/parsers/javascript');
-const remarkParse = function (str) {
-  return removePosition(remarkP(str));
-};
 
 function toComments(source, filename, opts) {
   source = typeof source === 'string' ? source : '(' + source.toString() + ')';

diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "pify": "^5.0.0",
     "read-pkg-up": "^4.0.0",
     "remark": "^13.0.0",
+    "remark-gfm": "^1.0.0",
     "remark-html": "^13.0.1",
     "remark-reference-links": "^5.0.0",
     "remark-toc": "^7.2.0",
@@ -55,8 +56,8 @@
     "yargs": "^15.3.1"
   },
   "optionalDependencies": {
-    "vue-template-compiler": "^2.6.12",
-    "@vue/compiler-sfc": "^3.0.11"
+    "@vue/compiler-sfc": "^3.0.11",
+    "vue-template-compiler": "^2.6.12"
   },
   "devDependencies": {
     "chdir": "0.0.0",

diff --git a/src/remark-jsDoc-link.js b/src/remark-jsDoc-link.js
@@ -1,4 +1,55 @@
 const findAndReplace = require('mdast-util-find-and-replace');
+const markdownLineEnding = require('micromark/dist/character/markdown-line-ending');
+
+const link = '@link';
+const tutorial = '@tutorial';
+
+function tokenizeJsDoclink(effects, ok, nok) {
+  let index = 0;
+  let focus = link;
+
+  function atext(code) {
+    if (index !== link.length) {
+      if (focus.charCodeAt(index) === code) {
+        effects.consume(code);
+        index++;
+        return atext;
+      } else if (tutorial.charCodeAt(index) === code) {
+        focus = tutorial;
+      }
+      return nok(code);
+    }
+    if (code === 125) {
+      effects.consume(code);
+      effects.exit('literalJsDoclink');
+      return ok(code);
+    }
+
+    if (markdownLineEnding(code)) {
+      return nok(code);
+    }
+
+    effects.consume(code);
+    return atext;
+  }
+
+  return function (code) {
+    effects.enter('literalJsDoclink');
+    effects.consume(code);
+    return atext;
+  };
+}
+
+const text = {};
+text[123] = {
+  tokenize: tokenizeJsDoclink,
+  previous(code) {
+    return code === null || code === 32 || markdownLineEnding(code);
+  }
+};
+
+const linkRegExp = /\{@link\s+(.+?)(?:[\s|](.*?))?\}/;
+const tutorialRegExp = /\{@tutorial\s+(.+?)(?:[\s|](.*?))?\}/;
 
 /**
  * A remark plugin that installs
@@ -10,6 +61,7 @@ const findAndReplace = require('mdast-util-find-and-replace');
  * @returns {Function}
  */
 module.exports = function () {
+  const data = this.data();
   function replace(type) {
     return (match, matchUrl, matchValue) => {
       return {
@@ -27,10 +79,37 @@ module.exports = function () {
     };
   }
 
-  return function transform(markdownAST) {
-    return findAndReplace(markdownAST, [
-      [/\{@link\s+(.+?)(?:[\s|](.*?))?\}/g, replace('link')],
-      [/\{@tutorial\s+(.+?)(?:[\s|](.*?))?\}/g, replace('tutorial')]
-    ]);
-  };
+  add('micromarkExtensions', { text });
+  add('fromMarkdownExtensions', {
+    transforms: [
+      function (markdownAST) {
+        return findAndReplace(markdownAST, [
+          [new RegExp(linkRegExp.source, 'g'), replace('link')],
+          [new RegExp(tutorialRegExp.source, 'g'), replace('tutorial')]
+        ]);
+      }
+    ],
+    enter: {
+      literalJsDoclink(token) {
+        const str = this.sliceSerialize(token);
+        let match = null;
+        if (str.startsWith('{@link')) {
+          match = linkRegExp.exec(str);
+        } else {
+          match = tutorialRegExp.exec(str);
+        }
+
+        this.enter(replace('link')(...match), token);
+      }
+    },
+    exit: {
+      literalJsDoclink(token) {
+        this.exit(token);
+      }
+    }
+  });
+  function add(field, value) {
+    if (data[field]) data[field].push(value);
+    else data[field] = [value];
+  }
 };
diff --git a/src/remark-parse.js b/src/remark-parse.js
@@ -1,6 +1,7 @@
 const remark = require('remark');
-const removePosition = require('./remark-remove-position')();
-const jsDocLink = require('./remark-jsDoc-link')();
+const gfm = require('remark-gfm');
+const removePosition = require('./remark-remove-position');
+const jsDocLink = require('./remark-jsDoc-link');
 
 /**
  * Parse a string of Markdown into a Remark
@@ -10,9 +11,4 @@ const jsDocLink = require('./remark-jsDoc-link')();
  * @returns {Object} abstract syntax tree
  * @private
  */
-module.exports = function (string) {
-  const treeAst = remark().parse(string);
-  removePosition(treeAst);
-  jsDocLink(treeAst);
-  return treeAst;
-};
+module.exports = remark().use([jsDocLink, gfm, removePosition]).parse;
diff --git a/src/remark-remove-position.js b/src/remark-remove-position.js
@@ -1,8 +1,16 @@
 const visit = require('unist-util-visit');
 
 module.exports = function () {
-  return function transform(markdownAST) {
-    visit(markdownAST, node => delete node.position);
-    return markdownAST;
-  };
+  const data = this.data();
+  add('fromMarkdownExtensions', {
+    transforms: [
+      function (markdownAST) {
+        visit(markdownAST, node => delete node.position);
+      }
+    ]
+  });
+  function add(field, value) {
+    if (data[field]) data[field].push(value);
+    else data[field] = [value];
+  }
 };