ESM Distribution

[brettz9]

I'm looking to upgrade our MathJax 2.0 into svgedit. Our source is also ESM based (using Rollup), with a working ESM-in-the-browser version for easier live debugging as well as a compiled version.

While I was able to get a basic ESM import of MathJax working (after making a fix to a TS file), the module that was returned had some properties like handlers but was bare of the startup property that I understand it is supposed to have. (And without specific guidance in the docs about startup for ESM, I wasn't sure what may be the issue there.)

When I tried importing from the components source (since the components, such as tex-mml-svg that we were using previously, wouldn't seem to be able to give ESM output if using webpack as it doesn't natively support ESM output), I got an error because two files are trying to import components/src/dependencies.js which is a CJS file.

I am guessing that these files should really be in ESM format, and that perhaps webpack may overlook this inconsistency, but Rollup will not (unless using a CJS plugin, and I wouldn't think going that route should really be necessary since you've already gone through the trouble of converting most of source source with resolvable paths anyways, and I'd expect webpack should still work in processing ESM as it does the rest of your codebase).

Anyways, I haven't dug in too deeply, but just wondering if I can report these as bugs (or better yet, if I can ask for an already-built ESM distribution for mathjax-full), or if you are settled on the formats of the files as is.

[dpvc]

Can you tell me a little bit more about how you are using and importing MathJax in you project (as there are several ways that can be done)? The startup module is very closely tied to MathJax's dynamic loading mechanism, and if you are trying to package MathJax into a single-file build, you may not want the dynamic loading. The components/src/dependencies.js provides information about that loading process, and would not be needed if you are going to preload everything that is needed. For example, you could probably take components/src/tex-mml-svg/tex-mml-svg.js as a template and replace the final import '../startup/startup.js'; with just a portion of that file that doesn't do any loading. Something like

import '../startup/lib/startup.js';
import './preload.js';
import '../core/core.js';
import '../input/tex/tex.js';
import '../input/mml/mml.js';
import '../output/svg/svg.js';
import '../output/svg/fonts/tex/tex.js';
import '../ui/menu/menu.js';
import {CONFIG} from '../../../js/components/loader.js';
CONFIG.ready();

should do it (I haven't actually tried it). You will need to copy the components/src/tex-mml-svg/preload.js file to the directory where you are doing this.

Note: you are loading both the TeX and MathML input formats, here; are you really using both? If not, you can get a smaller result by only using the one you need. If you are using TeX input, you might want to load tex-full rather than just tex, as the tex component is set up to dynamically load extends as needed, whereas tex-full includes pretty much everything. If you do change that, edit the preload.js file refer to tex-full as well.

[dpvc]

I will also look into whether dependencies.js can be put into another form.

[brettz9]

Thanks so much for the helpfully detailed explanation. I think I've gotten some progress, though I need some more time to figure out why the SVG I'm getting has no content.

FWIW, I'm working on my "mathjax" branch of svgedit. The main code is within ext-mathjax.js.

Instead of copying files like preload, I just adjusted all of the import paths like this in an "entry.js" file (which ext-mathjax.js imports):

import '../../../../node_modules/mathjax-full/components/src/startup/lib/startup.js';
import '../../../../node_modules/mathjax-full/components/src/tex-mml-svg/preload.js';
import '../../../../node_modules/mathjax-full/components/src/core/core.js';
import '../../../../node_modules/mathjax-full/components/src/input/tex/tex.js';
import '../../../../node_modules/mathjax-full/components/src/input/mml/mml.js';
import '../../../../node_modules/mathjax-full/components/src/output/svg/svg.js';
import '../../../../node_modules/mathjax-full/components/src/output/svg/fonts/tex/tex.js';
import '../../../../node_modules/mathjax-full/components/src/ui/menu/menu.js';
import {CONFIG} from '../../../../node_modules/mathjax-full/js/components/loader.js';
CONFIG.ready();

In my main file, I import mathjax and the entry file, currently like this:

(async () => {
window.global = window; // Got errors about `global` not being defined (also tried setting to `{}`)
window.global.__dirname = ''; // Got errors about `__dirname` not being defined; should probably see which dir this should be set to!
await import(
  '/node_modules/mathjax-full/js/mathjax.js'
);
await import(
  './mathjax/entry.js'
);
})();

I was able to suppress errors about global with the above (FWIW, there is an emerging globalThis standard to avoid the Node/browser disconnect here.)

I also had to suppress errors about __dirname not being defined. By the way, the ESM way to handle this would be to instead use import.meta.url, though it seems Webpack doesn't support this natively. It looks like there is a package for this though: https://github.com/open-wc/open-wc/tree/master/packages/webpack-import-meta-loader .

I am not deeply familiar with how the preexisting code I've attempted to update for Mathjax 3.0 was working; all I know is that it takes TeX code to convert into Math SVG; I have just tried to piece together from searches how to replace the old 2.* code with for the 3.0 API with the intent of ensuring the old extension works as it used to, allowing users to add Math SVG within our web-based SVG editor.

[dpvc]

I have made a PR to convert the source.js and dependencies.js into ESM modules that use 'export'. (#429). I hope that resolves your rollup issues.

[dpvc]

I am not deeply familiar with how the preexisting code I've attempted to update for Mathjax 3.0 was working; all I know is that it takes TeX code to convert into Math SVG; I have just tried to piece together from searches how to replace the old 2.* code with for the 3.0 API with the intent of ensuring the old extension works as it used to, allowing users to add Math SVG within our web-based SVG editor.

I haven't looked through your code, but you might check out the v2 compatibility examples to see if they help. These implement some of the old MathJax.Hub commands, and that might be enough to cover your needs.

[brettz9]

Thank you, much appreciated. I've seen those examples and also benefited from some code of yours I found posted on a mailing list. Things are moving along!