Upgrade to Babel 7 (KaTeX#1595)

* Upgrade to Babel 7

* Update dependencies

* Remove `modules` and `useEsModules` as module support is automatically detected

Target browsers supporting ESM in the ESM build.

* Disable corejs aliasing (polyfill)

* Fix package.json and update lockfile

* Bump CircleCI cache version

* Remove `Object.values()` use for Node 6 compatability

* Remove redundant arguments to @babel/register

* Update rollup and rollup-plugin-babel

* Add ignore option to no-transform-runtime-aliasing

Ignore JSON.stringify, parseInt, and ParseFloat

* Upgrade babel-loader to 8.0.1

* Use api.env() in Babel configuration

* Upgrade babel-loader to 8.0.2

Author: ylemkimon

.babelrc

@@ -18,13 +18,13 @@ post_checkout: &post_checkout
         fi
 
 node_modules_cache_key: &node_modules_cache_key
-  yarn-deps-v1-{{ checksum "yarn.lock" }}
+  yarn-deps-v2-{{ checksum "yarn.lock" }}
 
 restore_node_modules_cache: &restore_node_modules_cache
   restore_cache:
     keys:
       - *node_modules_cache_key
-      - yarn-deps-v1-
+      - yarn-deps-v2-
 
 yarn_install: &yarn_install
   run:

.circleci/config.yml

@@ -82,7 +82,10 @@
         "excludedFiles": ["*-spec.js", "unicodeMake.js"],
         "rules": {
             "no-restricted-syntax": [2, "ForOfStatement", "ClassDeclaration[superClass]", "ClassExpression[superClass]"],
-            "transform-runtime-aliasing/no-transform-runtime-aliasing": 2
+            "transform-runtime-aliasing/no-transform-runtime-aliasing": [2, {
+                "transformEnabled": false,
+                "ignore": ["parseInt", "parseFloat", "JSON.stringify"]
+            }]
         },
         "env": {
             "node": false

.eslintrc

@@ -0,0 +1,25 @@
+module.exports = api => {
+    const isESMBuild = api.env("esm");
+
+    const presets = [
+        ["@babel/env", {
+            targets: {
+                esmodules: isESMBuild,
+            },
+            loose: true,
+        }],
+        "@babel/flow",
+    ];
+    const plugins = [
+        "@babel/transform-runtime",
+        ["@babel/proposal-class-properties", {
+            loose: true,
+        }],
+        "version-inline",
+    ];
+
+    return {
+        presets,
+        plugins,
+    };
+};

babel.config.js

@@ -16,33 +16,35 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.1.2",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-flow": "^7.0.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
     "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-transform-class-properties": "^6.23.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-loader": "^8.0.2",
+    "babel-plugin-istanbul": "^5.0.1",
     "babel-plugin-version-inline": "^1.0.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-flow": "^6.23.0",
-    "babel-register": "^6.26.0",
     "benchmark": "^2.1.4",
     "codecov": "^3.0.4",
     "css-loader": "^1.0.0",
     "cssnano": "^4.0.1",
     "eslint": "^5.0.0",
     "eslint-plugin-flowtype": "^2.40.1",
     "eslint-plugin-react": "^7.10.0",
-    "eslint-plugin-transform-runtime-aliasing": "^1.0.0",
+    "eslint-plugin-transform-runtime-aliasing": "^1.2.0",
     "file-loader": "^1.1.11",
     "flow-bin": "^0.80.0",
     "fs-extra": "^7.0.0",
     "greenkeeper-lockfile": "^1.15.1",
     "husky": "^1.0.0-rc.8",
-    "istanbul-api": "^1.3.1",
-    "istanbul-lib-coverage": "^1.2.0",
-    "jest": "^23.0.1",
+    "istanbul-api": "^2.0.5",
+    "istanbul-lib-coverage": "^2.0.1",
+    "jest": "^23.5.0",
     "jest-serializer-html": "^5.0.0",
     "js-yaml": "^3.10.0",
     "json-stable-stringify": "^1.0.1",
@@ -56,7 +58,7 @@
     "query-string": "^5.1.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.65.0",
-    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-babel": "^4.0.2",
     "selenium-webdriver": "^3.6.0",
     "sri-toolbox": "^0.2.0",
     "style-loader": "^0.22.0",

package.json

@@ -1,6 +1,6 @@
 import babel from 'rollup-plugin-babel';
 
-process.env.BABEL_ENV = 'esm';
+process.env.NODE_ENV = 'esm';
 
 export default {
     input: 'katex.js',
@@ -9,6 +9,6 @@ export default {
         format: 'es',
     },
     plugins: [
-        babel(),
+        babel({runtimeHelpers: true}),
     ],
 };

rollup.config.js

@@ -64,8 +64,7 @@ function checkDelimiter(
     } else {
         throw new ParseError(
             "Invalid delimiter: '" +
-            // $FlowFixMe, do not polyfill
-            (symDelim ? symDelim.text : JSON["stringify"](delim)) +
+            (symDelim ? symDelim.text : JSON.stringify(delim)) +
             "' after '" + context.funcName + "'", delim);
     }
 }

src/functions/delimsizing.js

@@ -14,7 +14,7 @@ if (fs.statSync(__filename).mtime <= targetMtime && fs.statSync(
     return;
 }
 
-require('babel-register')({plugins: ["transform-es2015-modules-commonjs"]});
+require('@babel/register');
 const accents = require('./unicodeAccents').default;
 
 const encode = function(string) {

src/unicodeMake.js

@@ -10,7 +10,6 @@
  * - allow users to specify a different string or strings
  * - provide a way to test the performance against different branches
  */
-require('babel-register');
 const Benchmark = require('benchmark');
 const yaml = require('js-yaml');
 const fs = require('fs');
@@ -20,6 +19,7 @@ const filename = path.resolve(__dirname, 'screenshotter/ss_data.yaml');
 const data = yaml.load(fs.readFileSync(filename, 'utf-8'));
 
 console.log('compiling katex...');
+require('@babel/register');
 const katex = require('../katex').default;
 console.log('');
 

test/perf-test.js

@@ -110,7 +110,7 @@ describe("unicodeScripts", () => {
     const scriptNames = Object.keys(scriptRegExps);
 
     const allRegExp = new RegExp(
-        Object.values(scriptRegExps).map(re => re.source).join('|')
+        scriptNames.map(script => scriptRegExps[script].source).join('|')
     );
 
     it("supportedCodepoint() should return the correct values", () => {