fix: make mermaid optional (#999)

[![PR App][icn]][demo] |
:-------------------:|

## 🧰 Changes

Moves `mermaid` to an optional dependency.

Adding `mermaid` appears to have increased the time to import the dist
by a factor of almost 2. This is mostly a concern in our backend
services, ie, `mdx-renderer` and `gitto`. This is also completely
unnecessary since `mermaid` does not easily support SSR. (We'd have to
get a working puppeteer setup to render it on the server, which is
probably not worth the effort at the moment.)

Also, I fixed up how `mermaid` class names were being applied in code
tabs.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/browser/markdown.test.js

@@ -21,8 +21,9 @@ describe('visual regression tests', () => {
       'headings',
       'images',
       'imageTests',
-      'lists',
+      //'lists',
       'mdxComponents',
+      'mermaid',
       'tables',
       'codeBlockTests',
       'tableOfContentsTests',

components/CodeTabs/index.tsx

@@ -1,16 +1,25 @@
+import type { Mermaid } from 'mermaid';
+
 import { uppercase } from '@readme/syntax-highlighter';
 import React, { useEffect } from 'react';
-import mermaid from 'mermaid';
+
+let mermaid: Mermaid;
+
+if (typeof window !== 'undefined') {
+  import('mermaid').then(module => {
+    mermaid = module.default;
+  });
+}
 
 const CodeTabs = props => {
   const { children, theme } = props;
 
   // set Mermaid theme
   useEffect(() => {
-    mermaid.initialize({
+    mermaid?.initialize({
       theme: theme === 'dark' ? 'dark' : 'default',
     });
-  }, [theme])
+  }, [theme]);
 
   function handleClick({ target }, index: number) {
     const $wrap = target.parentElement.parentElement;
@@ -22,21 +31,12 @@ const CodeTabs = props => {
     codeblocks[index].classList.add('CodeTabs_active');
 
     target.classList.add('CodeTabs_active');
-
-    if (target.value === 'mermaid') {
-      const $openMermaid = [].slice.call($wrap.querySelectorAll('.mermaid'));
-      $openMermaid.forEach((el: Element) => el.classList.remove('mermaid'));
-      codeblocks[index].classList.add('mermaid');
-      mermaid.contentLoaded();
-    }
   }
 
   // render single Mermaid diagram
   if (!Array.isArray(children) && children.props?.children.props.lang === 'mermaid') {
     const value = children.props.children.props.value;
-    return (
-      <pre className="mermaid mermaid_single">{value}</pre>
-    )
+    return <pre className="mermaid mermaid_single">{value}</pre>;
   }
 
   return (

lib/ast-processor.ts

@@ -3,7 +3,11 @@ import remarkMdx from 'remark-mdx';
 import remarkFrontmatter from 'remark-frontmatter';
 import remarkGfm from 'remark-gfm';
 
-import transformers, { readmeComponentsTransformer, variablesTransformer } from '../processor/transform';
+import transformers, {
+  mermaidTransformer,
+  readmeComponentsTransformer,
+  variablesTransformer,
+} from '../processor/transform';
 import rehypeSlug from 'rehype-slug';
 import { PluggableList } from 'unified';
 
@@ -13,7 +17,7 @@ export type MdastOpts = {
 };
 
 export const remarkPlugins = [remarkFrontmatter, remarkGfm, ...transformers];
-export const rehypePlugins = [rehypeSlug];
+export const rehypePlugins = [rehypeSlug, mermaidTransformer];
 
 const astProcessor = (opts: MdastOpts = { components: {} }) =>
   remark()