From c16074cabf38a0d66de4b9a736d499da53767675 Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 15 Aug 2021 23:52:43 +0200
Subject: [PATCH] Use dynamic imports for mathjs

---
 editor/src/editor.js     | 38 +++++++++++++++++++++-----------------
 editor/webpack.config.js | 30 +++++++++++++++---------------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/editor/src/editor.js b/editor/src/editor.js
index de2ecee..b21e17b 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -6,7 +6,6 @@ import search from "./search";
 import axios from 'axios';
 import qs from 'querystring'
 import $ from 'jquery';
-import Mustache from 'mustache';
 import getCaretCoordinates from './caret-position'
 import moment from 'moment'
 // import mermaid from 'mermaid'
@@ -20,9 +19,6 @@ import moment from 'moment'
 // import 'prismjs/components/prism-markup-templating'
 // import 'prismjs/components/prism-jq'
 import MD from './markdown'
-import he from 'he'
-import {all, create} from 'mathjs'
-import formulaFunctions from './formula'
 import actions from './actions'
 
 moment.locale('nl')
@@ -319,26 +315,27 @@ function Editor(holder, input) {
             })
     }
 
-    function transformMathExpression(converted, scope) {
-        try {
+    async function transformMathExpression(converted, scope) {
+        return Promise.all([
+            import(/* webpackChunkName: "mathjs" */ 'mathjs'),
+            import(/* webpackChunkName: "mathjs" */ './formula')
+        ]).then((promises) => {
+            const mathjs = promises[0]
             if (math === undefined) {
-                math = create(all)
-                math.import(formulaFunctions)
+                math = mathjs.create(mathjs.all)
+                math.import(promises[1])
             }
-
             let expr = converted.substring(1);
             let parsedExpr = math.parse(expr)
             let compiled = parsedExpr.compile()
             let evaluated = compiled.evaluate(scope);
             if (parsedExpr.isAssignmentNode) {
-                converted = parsedExpr.object.name + " = <i>" + evaluated.toString() + "</i>"
-            } else {
-                converted = "<span class='expression'>" + expr + " = </span><i>" + evaluated.toString() + "</i>"
+                return parsedExpr.object.name + " = <i>" + evaluated.toString() + "</i>"
             }
-        } catch (e) {
-            converted = converted + ' <span style="background: red; color: white;">' + e.message + '</span>';
-        }
-        return converted;
+            return "<span class='expression'>" + expr + " = </span><i>" + evaluated.toString() + "</i>"
+        }).catch(e => {
+            return converted + ' <span style="background: red; color: white;">' + e.message + '</span>';
+        })
     }
 
     function transform(text, element, id, editor, scope) {
@@ -359,7 +356,14 @@ function Editor(holder, input) {
         } else if (converted.startsWith("```", 0) || converted.startsWith("$$", 0)) {
             converted = MD.render(converted)
         } else if (converted.startsWith("=", 0)) {
-            converted = transformMathExpression(converted, scope);
+            transformMathExpression(converted, scope)
+                .then(converted => {
+                    MD.options.html = true
+                    converted = MD.renderInline(converted)
+                    MD.options.html = false
+
+                    element.html(converted)
+                })
         } else {
             let re = /^([A-Z0-9 ]+)::\s*(.*)$/i;
             let res = text.match(re)
diff --git a/editor/webpack.config.js b/editor/webpack.config.js
index 765766d..0c790c8 100644
--- a/editor/webpack.config.js
+++ b/editor/webpack.config.js
@@ -59,21 +59,21 @@ module.exports = env => {
         //
         optimization: {
             usedExports: true,
-            splitChunks: {
-                cacheGroups: {
-                    commons: {
-                        test: /[\\/]node_modules[\\/]/,
-                        name: 'vendors',
-                        chunks: 'all'
-                    },
-                    styles: {
-                        name: 'styles',
-                        test: /\.css$/,
-                        chunks: 'all',
-                        enforce: true,
-                    },
-                }
-            }
+            // splitChunks: {
+            //     cacheGroups: {
+            //         commons: {
+            //             test: /[\\/]node_modules[\\/]/,
+            //             name: 'vendors',
+            //             chunks: 'all'
+            //         },
+            //         styles: {
+            //             name: 'styles',
+            //             test: /\.css$/,
+            //             chunks: 'all',
+            //             enforce: true,
+            //         },
+            //     }
+            // }
         }
     }
 };