Improve loading of @mathjax/src by import and require

[dpvc]

This PR updates node-main.* to export not just init() but the MathJax object as the default object with the init() function added to it. This allows for more meaningful imports, particularly for ES6 modules.

Now you can do

import MathJax from '@mathjax/src';
await MathJax.init({...});
...

rather than

import {init} from '@mathjax/src';
await init({...});

(though both will work). It also allows

const MathJax = require('@mathjax/src');
MathJax.init({...}).then(() => {...});

while still supporting

require('@mathjax/src').init({...}).then(() => {...});

so this is backward compatible.

This needs to work in several settings:

import MathJax from '@mathjax/src';               // the bundled mjs version
import MathJax from '@mathjax/src/source';        // the source mjs version
const MathJax = require('@mathjax/src');          // the bundled cjs version
const MathJax = require('@mathjax/src/source');   // the source cjs version
const MathJax = (await import('@mathjax/src')).default;         // the bundled mjs version;
const MathJax = (await import('@mathjax/src/source')).default;  // the source mjs version;

with each followed by await MathJax.init({...}); or MathJax.init({...}).then(() => {...}); as appropriate. Also,

require('@mathjax/src').init({...}).then(() => {...});
require('@mathjax/src/source').init({...}).then(() => {...});
(await import('@mathjax/src')).init({...}).then(() => {...});
(await import('@mathjax/src/source')).init({...}).then(() => {...});

should work.

This gives a more natural definition for the MathJax variable to be used later on in the application.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.71%. Comparing base (4d1e195) to head (21a253a).
⚠️ Report is 66 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #1304   +/-   ##
========================================
  Coverage    86.71%   86.71%           
========================================
  Files          337      337           
  Lines        83979    83983    +4     
  Branches      4750     4750           
========================================
+ Hits         72826    72830    +4     
- Misses       11130    11153   +23     
+ Partials        23        0   -23     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[zorkow]

I can't get the import to work. Somehow node still tries to load cjs files.
This is the error I get after packaging @mathjax/src and installing it in /tmp/:

Uncaught TypeError: Cannot read properties of undefined (reading 'loader')
    at 680 (/tmp/node_modules/.pnpm/@mathjax+src@file+mathjax-src-4.0.0-rc.4.tgz/node_modules/@mathjax/src/bundle/node-main.js:1:141204)
    at __webpack_require__ (/tmp/node_modules/.pnpm/@mathjax+src@file+mathjax-src-4.0.0-rc.4.tgz/node_modules/@mathjax/src/bundle/node-main.js:1:154895)
    at /tmp/node_modules/.pnpm/@mathjax+src@file+mathjax-src-4.0.0-rc.4.tgz/node_modules/@mathjax/src/bundle/node-main.js:1:155521
    at /tmp/node_modules/.pnpm/@mathjax+src@file+mathjax-src-4.0.0-rc.4.tgz/node_modules/@mathjax/src/bundle/node-main.js:1:158014
    at Object.<anonymous> (/tmp/node_modules/.pnpm/@mathjax+src@file+mathjax-src-4.0.0-rc.4.tgz/node_modules/@mathjax/src/bundle/node-main.js:1:158062)
    at Module._compile (node:internal/modules/cjs/loader:1734:14)
    at Object..js (node:internal/modules/cjs/loader:1899:10)
    at Module.load (node:internal/modules/cjs/loader:1469:32)

[dpvc]

Hmmm.. It works for me. Can you be more explicit about what you are trying?

I did the following from the MathJax-src directory:

git checkout update/node-main
pnpm -s build-all
pnpm pack
mkdir /tmp/mjx
cd /tmp/mjx
pnpm install path-to-MathJax-src/mathjax-src-4.0.0-rc.4.tgz
pnpm install @mathjax/mathjax-newcm-font
cat > test.mjs
import MathJax from '@mathjax/src';

await MathJax.init({
  loader: {
    load: ['input/tex', 'output/chtml']
  }
})

console.log(MathJax.startup.adaptor.outerHTML(MathJax.tex2chtml('x')));
^D
node test.mjs

and got

<mjx-container class="MathJax" jax="CHTML" overflow="overflow" display="true"><mjx-math data-latex="x" display="true" style="margin-left: 0; margin-right: 0;" class=" NCM-N"><mjx-mi data-latex="x"><mjx-c class="mjx-c1D465">𝑥</mjx-c></mjx-mi></mjx-math></mjx-container>

as expected. It also worked with @mathjax/src/source. I didn't try the require() versions.

[zorkow]

It turns out we cannot bind to MathJax, but any other constant name.

[zorkow]

lgtm.

[dpvc]

It turns out we cannot bind to MathJax, but any other constant name.

That only applies to interactive use of MathJax within node. If you use a file (either .cjs or .mjs), you can use MathJax. That is because the interactive node is working in the global namespace, and so there is a conflict when you do const MathJax = (await import('@mathjax/src')) or let MathJax = require('@mathjax/src'). But if you do MathJax = (await import('@mathjax/src')) or MathJax = require('@mathjax/src') without the const or let, then it is OK.