mathjax / MathJax-src

MathJax source code for version 3 and beyond

Home Page:https://www.mathjax.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ES6 class keyword used in "ES5" code due to bundled speech-rule-engine dependency

hallvors opened this issue · comments

Hi, I came across an issue that causes a syntax error if one tries to use MathJax with the PrinceXML JavaScript engine. I suppose it will also cause trouble in many other older browser that do not support ES6 class.

prince: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js:1: error: SyntaxError: unexpected token reserved("class")

It is a little confusing that a URL which contains the string "es5" uses the class keyword :) .

I checked out the repository and the TS compiler does not output class statement anywhere if I run npm run compile. However, the make-components command that uses Node.js scripts and Webpack to compile all the sub-components MathJax consists of, unfortunately outputs stuff like

class Q extends o.AbstractAudioRenderer {

or

e.Span = class {

Now, there's no MathJax component defining an AbstractAudioRenderer. This seems to come from a dependency which gets bundled into the Mathjax scripts by Webpack (but not compiled / transpiled to ES5 in the process - Webpack configurations tend to assume stuff in dependencies does not need transpiling). The dependency that ships ES6 code which gets bundled is most likely https://www.npmjs.com/package/speech-rule-engine

Is it possible to enable Babel loader or similar transpiling for this dependency? I know it works as-is with most browsers out there, but at least the URL saying es5 would be more truthful if it were possible to also transpile speech-rule-engine :)

Thanks for your attention and the amazing library.

Thanks for reporting this issue. You are correct that the speech-rule-engine is the culprit, here, and should be transpired for the es5 directory.

One work-around for now would be to edit components/webpack.common.js and change

test: new RegExp(dirRE + quoteRE(path.sep) + '.*\\.js$'),
exclude: new RegExp(quoteRE(path.join(path.dirname(__dirname), 'es5') + path.sep)),

to

      test: new RegExp(dirRE + quoteRE(path.sep) + '.*\\.js$|speech-rule-engine'),
      exclude: new RegExp(quoteRE(path.join(path.dirname(__dirname), 'es5') + path.sep) + '|.json$'),

which will cause the speech-rule-engine files to be transpired, excluding its .json files. Then repack the needed component:

components/bin/makeAll components/src/tex-svg

That seems to do the trick in my (limited) testing.

I take it back. While the resulting file doesn't include class definitions, it also doesn't work in the browser. So I'll have to look into it further.

OK, it looks like you also need to

npm install regenerator-runtime

and change

entry: path.join(dir, name + '.js'),

to

    entry: ['regenerator-runtime/runtime.js', path.join(dir, name + '.js')],

then it seems to work. It also increases the size of the resulting file by 300K or so (unfortunately).