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() {
+$.fn.renderGFM = function renderGFM() {
   this.find('.js-syntax-highlight').syntaxHighlight();
-    this.find('.js-render-math').renderMath();
-    this.find('.js-render-mermaid').renderMermaid();
+  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';
+    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) {
-        // What can we do??
-        console.log(err.message);
+      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',
+  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() {
+      $.getScript(gon.katex_js_url, () => {
         katexLoaded = true;
-          renderWithKaTeX($this); // Run KaTeX
+        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';