Set up initial GFM parser

Set up a Commonmark processing pipeline
using unified, remark, and rehype. This
pipeline allows providing a renderer
function that converts an AST into
a display format like HTML or a ProseMirror
document

app/assets/javascripts/lib/gfm/index.js

+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+
+const createParser = () => {
+  return unified().use(remarkParse).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw);
+};
+
+const compilerFactory = (renderer) =>
+  function compiler() {
+    Object.assign(this, {
+      Compiler(tree) {
+        return renderer(tree);
+      },
+    });
+  };
+
+/**
+ * Parses a Markdown string and provides the result Abstract
+ * Syntax Tree (AST) to a renderer function to convert the
+ * tree in any desired representation
+ *
+ * @param {String} params.markdown Markdown to parse
+ * @param {(tree: MDast -> any)} params.renderer A function that accepts mdast
+ * AST tree and returns an object of any type that represents the result of
+ * rendering the tree. See the references below to for more information
+ * about MDast.
+ *
+ * MDastTree documentation https://github.com/syntax-tree/mdast
+ * @returns {Promise<any>} Returns a promise with the result of rendering
+ * the MDast tree
+ */
+export const render = async ({ markdown, renderer }) => {
+  const { value } = await createParser().use(compilerFactory(renderer)).process(markdown);
+
+  return value;
+};

jest.config.base.js

@@ -106,6 +106,45 @@ module.exports = (path, options = {}) => {
     return '<rootDir>/coverage-frontend/';
   };
 
+  const gfmParserDependencies = [
+    'rehype-.*',
+    'remark-.*',
+    'hast*',
+    'unist.*',
+    'mdast-util-.*',
+    'micromark.*',
+    'vfile.*',
+    'bail',
+    'trough',
+    'unified',
+    'is-plain-obj',
+    'decode-named-character-reference',
+    'character-entities*',
+    'property-information',
+    'space-separated-tokens',
+    'comma-separated-tokens',
+    'web-namespaces',
+    'zwitch',
+    'html-void-elements',
+    'ccount',
+    'escape-string-regexp',
+  ];
+
+  const transformIgnoreNodeModules = [
+    '@gitlab/ui',
+    '@gitlab/favicon-overlay',
+    'bootstrap-vue',
+    'three',
+    'monaco-editor',
+    'monaco-yaml',
+    'fast-mersenne-twister',
+    'prosemirror-markdown',
+    'fault',
+    'dateformat',
+    'lowlight',
+    ...gfmParserDependencies,
+  ];
+
   return {
     clearMocks: true,
     testMatch,
@@ -130,9 +169,7 @@ module.exports = (path, options = {}) => {
       '^.+\\.yml$': './spec/frontend/__helpers__/yaml_transformer.js',
       '^.+\\.(md|zip|png)$': 'jest-raw-loader',
     },
-    transformIgnorePatterns: [
-      'node_modules/(?!(@gitlab/ui|@gitlab/favicon-overlay|bootstrap-vue|three|monaco-editor|monaco-yaml|fast-mersenne-twister|prosemirror-markdown|dateformat|lowlight|fault)/)',
-    ],
+    transformIgnorePatterns: [`node_modules/(?!(${transformIgnoreNodeModules.join('|')}))`],
     timers: 'fake',
     testEnvironment: '<rootDir>/spec/frontend/environment.js',
     testEnvironmentOptions: {

package.json

@@ -164,6 +164,9 @@
     "prosemirror-view": "^1.23.10",
     "raphael": "^2.2.7",
     "raw-loader": "^4.0.2",
+    "rehype-raw": "^6.1.1",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
     "scrollparent": "^2.0.1",
     "select2": "3.5.2-browserify",
     "smooshpack": "^0.0.62",
@@ -175,6 +178,7 @@
     "three-orbit-controls": "^82.1.0",
     "three-stl-loader": "^1.0.4",
     "timeago.js": "^4.0.2",
+    "unified": "^10.1.2",
     "url-loader": "^4.1.1",
     "uuid": "8.1.0",
     "visibilityjs": "^1.2.4",

spec/frontend/lib/gfm/index_spec.js

+import { render } from '~/lib/gfm';
+
+describe('gfm', () => {
+  describe('render', () => {
+    it('processes Commonmark and provides an ast to the renderer function', async () => {
+      let result;
+
+      await render({
+        markdown: 'This is text',
+        renderer: (tree) => {
+          result = tree;
+        },
+      });
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          type: 'root',
+        }),
+      );
+    });
+
+    it('transforms raw HTML into individual nodes in the AST', async () => {
+      let result;
+
+      await render({
+        markdown: '<strong>This is bold text</strong>',
+        renderer: (tree) => {
+          result = tree;
+        },
+      });
+
+      expect(result.children[0].children[0]).toEqual(
+        expect.objectContaining({
+          type: 'element',
+          tagName: 'strong',
+          properties: {},
+        }),
+      );
+    });
+
+    it('returns the result of executing the renderer function', async () => {
+      const result = await render({
+        markdown: '<strong>This is bold text</strong>',
+        renderer: () => {
+          return 'rendered tree';
+        },
+      });
+
+      expect(result).toBe('rendered tree');
+    });
+  });
+});