mathlive: `import.meta` causes issues

mathlive@0.55.0 no longer uses import.meta.

Some more detailed instructions on how to integrate mathlive with Webpack can be found here http://cortexjs.io/guides/mathfield-getting-started/

Note that the default name of the distribution library has changed from “mathlive.js” and “mathlive.mjs” to “mathlive.min.js” and “mathlive.min.mjs”

I have some ideas on how to address this. I need to do some more testing, but I’ll give an update soon.

I feel this whole “dynamic loading” of styles / fonts is not playing well with bundlers. Many people are using bundlers. All those will have a hard time with the latest version to use mathlive. I appreciate that people without bundler, who maybe just use a <script>-tag in their index.html are probably happy about this change. I am not sure about the best practices here; to be honest, I never worked like that. Our project uses create-react-app, a popular and straightforward framework that takes care of (amongst other things) all the bundling-magic, and preferably we just import modules that have been installed via npm. We created the react-mathlive-lib because that makes it even easier to use mathlive in a react-environment, because it wraps it all into one neat component. With this dynamic-loading feature this premise doesn’t work anymore. This also doesn’t feel like something that can be solved and “hidden away” in the library, but it will always require changes to the bundlers all the way up to the actual application. I don’t want to tinker with our setup since it works just fine with every other library and usecase, and I suspect many other users don’t want to, either.

Actually for 1, instead of doing import MathLive from 'mathlive' we can do import MathLive from 'mathlive/dist/mathlive.js' that will silence babel as we are deliberately requiring commonjs module instead of mjs, which has import.meta.url already transpiled.

When fonts are imported in css, tooling automatically detects those fonts files, adds hashes to filename moves them to appropriate folder and adjusts font urls everywhere in the css. All happens while building. For example this:

head {
  content: url("mathlive/dist/fonts/KaTeX_Caligraphic-Regular.woff");
}

will become:

head {
  content: url("https://mywebsite.com/_nuxt/fonts/KaTeX_Caligraphic-Regular.7e72555.woff");
}

The KaTeX_Caligraphic-Regular.woff font file will be copied to a different folder with different name.

We need to instruct mathlive to load fonts from https://mywebsite.com/_nuxt/fonts/ url, fontsDirectory option works for that. But the font name is different now and mathlive won’t load fonts correctly.

Before dynamic css, the build process were happy with all because it was detecting font urls in the imported css files (mathlive.css and mathlive.core.css) and adjusting the urls in the output css file to whereever fonts were put.