V4: Should transpile MathJax bundles with babel for unpkg users

[WizardMeow]

Is your feature request related to a problem? Please describe.
Currently, the bundles on unpkg use modern JavaScript syntax. This can cause issues for some users whose browsers or environments don't fully support the latest ECMAScript features.

Describe the solution you'd like
Add babel-loader when complie bundles.

    module: {
      rules: [
        bundle && {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env', {
                  useBuiltIns: 'usage',
                  corejs: 3
                }]
              ]
            }
          }
        }
      ]
    },

[WizardMeow]

I've found that the syntax compatibility issue isn't limited to the unpkg version; even compiling it myself doesn't solve the problem. This is because MathJax dynamically loads fonts from unpkg (via fontExtension), and these packages are not publicly available and have not been syntax-degraded.

[dpvc]

We discussed your issue in the developer meeting last week, and are considering solutions for offering a CJS/ES5 version in addition to the ES6 one. The @mathjax/src package includes a cjs directory with the code down-compiled to ES5, and there is a package script (pnpm -s make-cjs-components) to create a bundle-cjs directory with the ES5 versions, but we don't currently make an npm package from those, so they aren't available on CDNs.

You are right that the fonts also would need to be addressed in a similar way, as the packed versions do use arrow functions. The fonts are also down-compiled to a cjs version, but, as you point out, you don't currently have access to the build workflow to make the cjs bundles. If you are hosting your own version of MathJax and let me know the font you are using, I can give you a CJS/ES5 version, or you could probably use a straight-forward script to convert () => to function () in the files in the dynamic directories of the chtml and svg directories in the npm mathjax-newcm-font package, as I think that is the only ES6 feature that they use.

[dpvc]

Oh, I meant to say that changing to ES5 may not be sufficient in any case. MathJax v4 uses some modern CSS features that are probably not available in older browsers, so even if you get the javascript to run, it may not produce the output you need. The SVG output will probably be the most likely to work, so try that if the CHTML doesn't work.

Can you say what platforms you are targeting? I might be able to do some testing to see what might go wrong.

[WizardMeow]

I have resolved the compatibility issues.

For MathJax itself, I modified the build workflow and use Babel to downgrading it to my target environment as mentioned.

As you suggested, For those dynamic font libraries imported by MathJax, I created a script to download all of those assets from npm. I then built webpack script to batch apply Babel for syntax degradation on those assets, republish them, replace the font load url in mathjax.

There's no need to worry about the CSS; I think using SVG will be just fine.

After using the methods mentioned above, my MathJax copy now appears to meet the product's specific compatibility requirements.

[WizardMeow]

I must point out that the issue I'm facing isn't just a syntax degradation problem; some APIs require polyfills. Therefore, using the CJS version likely won't solve the problem.

A simple example is Object.hasOwn, which I mentioned above.

[dpvc]

Hmm, I would have thought that Typescript's down compiling to ES5 would have replaced Object.hasOwn(), but apparently not, as it does appear in the es5 compiled js files. I will have to look into that further.