Merge branch 'fix-mermaid-import' into 'master'

Fixed import of render mermaid & render math methods

See merge request gitlab-org/gitlab-ce!15550

app/assets/javascripts/main.js

@@ -69,8 +69,6 @@ import './project_import';
 import './projects_dropdown';
 import './projects_list';
 import './syntax_highlight';
-import './render_math';
-import './render_mermaid';
 import './render_gfm';
 import './right_sidebar';
 import './search';

app/assets/javascripts/render_gfm.js

-/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len */
+import renderMath from './render_math';
+import renderMermaid from './render_mermaid';
 
 // Render Gitlab flavoured Markdown
 //
 // Delegates to syntax highlight and render math & mermaid diagrams.
 //
-(function() {
-  $.fn.renderGFM = function() {
-    this.find('.js-syntax-highlight').syntaxHighlight();
-    this.find('.js-render-math').renderMath();
-    this.find('.js-render-mermaid').renderMermaid();
-    return this;
-  };
+$.fn.renderGFM = function renderGFM() {
+  this.find('.js-syntax-highlight').syntaxHighlight();
+  renderMath(this.find('.js-render-math'));
+  renderMermaid(this.find('.js-render-mermaid'));
+  return this;
+};
 
-  $(() => $('body').renderGFM());
-}).call(window);
+$(() => $('body').renderGFM());

app/assets/javascripts/render_math.js

-/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len, no-console */
 /* global katex */
 
 // Renders math using KaTeX in any element with the
@@ -8,49 +7,45 @@
 //
 //   <code class="js-render-math"></div>
 //
-(function() {
   // Only load once
-  var katexLoaded = false;
+let katexLoaded = false;
 
-  // Loop over all math elements and render math
-  var renderWithKaTeX = function (elements) {
-    elements.each(function () {
-      var mathNode = $('<span></span>');
-      var $this = $(this);
+// Loop over all math elements and render math
+function renderWithKaTeX(elements) {
+  elements.each(function katexElementsLoop() {
+    const mathNode = $('<span></span>');
+    const $this = $(this);
 
-      var display = $this.attr('data-math-style') === 'display';
-      try {
-        katex.render($this.text(), mathNode.get(0), { displayMode: display });
-        mathNode.insertAfter($this);
-        $this.remove();
-      } catch (err) {
-        // What can we do??
-        console.log(err.message);
-      }
-    });
-  };
+    const display = $this.attr('data-math-style') === 'display';
+    try {
+      katex.render($this.text(), mathNode.get(0), { displayMode: display });
+      mathNode.insertAfter($this);
+      $this.remove();
+    } catch (err) {
+      throw err;
+    }
+  });
+}
 
-  $.fn.renderMath = function() {
-    var $this = this;
-    if ($this.length === 0) return;
+export default function renderMath($els) {
+  if (!$els.length) return;
 
-    if (katexLoaded) renderWithKaTeX($this);
-    else {
-      // Request CSS file so it is in the cache
-      $.get(gon.katex_css_url, function() {
-        var css = $('<link>',
-          { rel: 'stylesheet',
-            type: 'text/css',
-            href: gon.katex_css_url,
-          });
-        css.appendTo('head');
+  if (katexLoaded) {
+    renderWithKaTeX($els);
+  } else {
+    $.get(gon.katex_css_url, () => {
+      const css = $('<link>', {
+        rel: 'stylesheet',
+        type: 'text/css',
+        href: gon.katex_css_url,
+      });
+      css.appendTo('head');
 
-        // Load KaTeX js
-        $.getScript(gon.katex_js_url, function() {
-          katexLoaded = true;
-          renderWithKaTeX($this); // Run KaTeX
-        });
+      // Load KaTeX js
+      $.getScript(gon.katex_js_url, () => {
+        katexLoaded = true;
+        renderWithKaTeX($els); // Run KaTeX
       });
-    }
-  };
-}).call(window);
+    });
+  }
+}

app/assets/javascripts/render_mermaid.js

@@ -14,8 +14,8 @@
 
 import Flash from './flash';
 
-$.fn.renderMermaid = function renderMermaid() {
-  if (this.length === 0) return;
+export default function renderMermaid($els) {
+  if (!$els.length) return;
 
   import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => {
     mermaid.initialize({
@@ -23,8 +23,10 @@ $.fn.renderMermaid = function renderMermaid() {
       theme: 'neutral',
     });
 
-    mermaid.init(undefined, this);
+    $els.each((i, el) => {
+      mermaid.init(undefined, el);
+    });
   }).catch((err) => {
     Flash(`Can't load mermaid module: ${err}`);
   });
-};
+}

spec/javascripts/notes_spec.js

@@ -4,8 +4,6 @@
 import 'autosize';
 import '~/gl_form';
 import '~/lib/utils/text_utility';
-import '~/render_math';
-import '~/render_mermaid';
 import '~/render_gfm';
 import '~/notes';