Use dynamic imports for mathjs

This commit is contained in:
Peter Stuifzand 2021-08-15 23:52:43 +02:00
parent 5850c556c8
commit c16074cabf
2 changed files with 36 additions and 32 deletions

View File

@ -6,7 +6,6 @@ import search from "./search";
import axios from 'axios'; import axios from 'axios';
import qs from 'querystring' import qs from 'querystring'
import $ from 'jquery'; import $ from 'jquery';
import Mustache from 'mustache';
import getCaretCoordinates from './caret-position' import getCaretCoordinates from './caret-position'
import moment from 'moment' import moment from 'moment'
// import mermaid from 'mermaid' // import mermaid from 'mermaid'
@ -20,9 +19,6 @@ import moment from 'moment'
// import 'prismjs/components/prism-markup-templating' // import 'prismjs/components/prism-markup-templating'
// import 'prismjs/components/prism-jq' // import 'prismjs/components/prism-jq'
import MD from './markdown' import MD from './markdown'
import he from 'he'
import {all, create} from 'mathjs'
import formulaFunctions from './formula'
import actions from './actions' import actions from './actions'
moment.locale('nl') moment.locale('nl')
@ -319,26 +315,27 @@ function Editor(holder, input) {
}) })
} }
function transformMathExpression(converted, scope) { async function transformMathExpression(converted, scope) {
try { return Promise.all([
import(/* webpackChunkName: "mathjs" */ 'mathjs'),
import(/* webpackChunkName: "mathjs" */ './formula')
]).then((promises) => {
const mathjs = promises[0]
if (math === undefined) { if (math === undefined) {
math = create(all) math = mathjs.create(mathjs.all)
math.import(formulaFunctions) math.import(promises[1])
} }
let expr = converted.substring(1); let expr = converted.substring(1);
let parsedExpr = math.parse(expr) let parsedExpr = math.parse(expr)
let compiled = parsedExpr.compile() let compiled = parsedExpr.compile()
let evaluated = compiled.evaluate(scope); let evaluated = compiled.evaluate(scope);
if (parsedExpr.isAssignmentNode) { if (parsedExpr.isAssignmentNode) {
converted = parsedExpr.object.name + " = <i>" + evaluated.toString() + "</i>" return parsedExpr.object.name + " = <i>" + evaluated.toString() + "</i>"
} else {
converted = "<span class='expression'>" + expr + " = </span><i>" + evaluated.toString() + "</i>"
} }
} catch (e) { return "<span class='expression'>" + expr + " = </span><i>" + evaluated.toString() + "</i>"
converted = converted + ' <span style="background: red; color: white;">' + e.message + '</span>'; }).catch(e => {
} return converted + ' <span style="background: red; color: white;">' + e.message + '</span>';
return converted; })
} }
function transform(text, element, id, editor, scope) { function transform(text, element, id, editor, scope) {
@ -359,7 +356,14 @@ function Editor(holder, input) {
} else if (converted.startsWith("```", 0) || converted.startsWith("$$", 0)) { } else if (converted.startsWith("```", 0) || converted.startsWith("$$", 0)) {
converted = MD.render(converted) converted = MD.render(converted)
} else if (converted.startsWith("=", 0)) { } 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 { } else {
let re = /^([A-Z0-9 ]+)::\s*(.*)$/i; let re = /^([A-Z0-9 ]+)::\s*(.*)$/i;
let res = text.match(re) let res = text.match(re)

View File

@ -59,21 +59,21 @@ module.exports = env => {
// //
optimization: { optimization: {
usedExports: true, usedExports: true,
splitChunks: { // splitChunks: {
cacheGroups: { // cacheGroups: {
commons: { // commons: {
test: /[\\/]node_modules[\\/]/, // test: /[\\/]node_modules[\\/]/,
name: 'vendors', // name: 'vendors',
chunks: 'all' // chunks: 'all'
}, // },
styles: { // styles: {
name: 'styles', // name: 'styles',
test: /\.css$/, // test: /\.css$/,
chunks: 'all', // chunks: 'all',
enforce: true, // enforce: true,
}, // },
} // }
} // }
} }
} }
}; };