Build ECMAScript modules (#1479)

* Separate type import statement from module import statement

* Remove extension from import statements

* Build ECMAScript modules

* Add `cross-env` devDependency

* Use `babel-plugin-import-rename` instead of custom plugin

* Improve `.babelrc` style and add comments

* Update README.md

* Change file extension to `.mjs`

Comply with Node.js spec. Use extensionless package:main.

* Enforce only ESM compatible imports

* Dedupe packages

* Add `unicodeMake.js` to overrides:excludedFiles

* Fix .eslintrc merge conflict

* Use rollup to bundle ES module

* Remove `eslint-plugin-import`

* Change build directory to `dist`

* Change build directory to `dist`

* Change build directory

* Move docs from README.md to browser.md

* Update update-sri.js

* Revert update-sri.js

* Revert update-sri.js

* Update .eslintrc

* Remove SSH key testing

.babelrc

@@ -1,21 +1,37 @@
 {
-    "presets": [
+    "presets": ["flow"],
-        ["es2015", {
-            "modules": false,
-            "loose": true
-        }],
-        "flow"
-    ],
-    "plugins": [
-        "transform-runtime",
-        "transform-class-properties",
-        "version-inline"
-    ],
     "env": {
-        "test": {
+        // Duplications are inevitable due to strange .babelrc env merging:
+        // babel/babel#5276. This can be simplified in Babel 7 using .babelrc.js.
+        "production": {
+            "presets": [["es2015", {"modules": false, "loose": true}]],
             "plugins": [
-                "transform-es2015-modules-commonjs"
+                "transform-class-properties",
+                "transform-runtime",
+                "version-inline",
             ],
-        }
+        },
-    }
+        "development": {
+            "presets": [["es2015", {"modules": false, "loose": true}]],
+            "plugins": [
+                "transform-class-properties",
+                "transform-runtime",
+                "version-inline",
+            ],
+        },
+        "test": {
+            "presets": [["es2015", {"loose": true}]],
+            "plugins": [
+                "transform-class-properties",
+                "transform-runtime",
+                "version-inline",
+            ],
+        },
+        "esm": {
+            "plugins": [
+                "transform-class-properties",
+                "version-inline",
+            ],
+        },
+    },
 }

.circleci/config.yml

@@ -65,12 +65,6 @@ jobs:
       - add_ssh_keys:
           fingerprints:
             - "e1:ac:13:98:98:8b:fd:38:81:12:28:55:75:a1:da:73"
-      - run:
-          name: Test SSH key
-          command: |
-              if [[ $CIRCLE_BRANCH == "master" ]]; then
-                ssh -T git@github.com
-              fi
       - run:
           name: Greenkeeper - update and commit yarn.lock
           command: |

.eslintrc

@@ -71,18 +71,21 @@
         "valid-jsdoc": 0,
         "require-jsdoc": 0
     },
+    "env": {
+        "es6": true,
+        "node": true,
+        "browser": true
+    },
     "overrides": [{
         "files": ["katex.js", "src/**/*.js", "contrib/**/*.js"],
         "excludedFiles": ["*-spec.js", "unicodeMake.js"],
         "rules": {
             "no-restricted-syntax": [2, "ForOfStatement", "ClassDeclaration[superClass]", "ClassExpression[superClass]"],
             "transform-runtime-aliasing/no-transform-runtime-aliasing": 2
+        },
+        "env": {
+            "node": false
         }
     }],
-    "env": {
-        "es6": true,
-        "node": true,
-        "browser": true
-    },
     "root": true
 }

docs/browser.md

@@ -36,6 +36,15 @@ to `head`. (Note that only few browsers [support `rel="preload"`](https://canius
 and they all support WOFF2 so preloading WOFF2 fonts is enough.) You can use
 Chrome DevTools Network panel or similar to find out which fonts are used.
 
+ECMAScript module is also available:
+
+```html
+<script type="module" type="text/javascript">
+    import katex from 'https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.mjs';
+</script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
+```
+
 ## Download & Host Things Yourself
 Download a [KaTeX release](https://github.com/Khan/KaTeX/releases),
 copy `katex.js`, `katex.css`

package.json

@@ -2,7 +2,8 @@
   "name": "katex",
   "version": "0.11.0-pre",
   "description": "Fast math typesetting for the web.",
-  "main": "dist/katex.js",
+  "main": "dist/katex",
+  "module": "dist/katex.mjs",
   "repository": {
     "type": "git",
     "url": "git://github.com/Khan/KaTeX.git"
@@ -51,6 +52,8 @@
     "postcss-loader": "^3.0.0",
     "query-string": "^6.1.0",
     "rimraf": "^2.6.2",
+    "rollup": "^0.63.4",
+    "rollup-plugin-babel": "^3.0.7",
     "selenium-webdriver": "^3.6.0",
     "sri-toolbox": "^0.2.0",
     "style-loader": "^0.22.0",
@@ -81,7 +84,7 @@
     "prestart": "node check-node-version.js && check-dependencies && node src/unicodeMake.js > src/unicodeSymbols.js",
     "start": "webpack-dev-server --hot --config webpack.dev.js",
     "analyze": "webpack --config webpack.analyze.js",
-    "build": "yarn prestart && rimraf dist/ && mkdirp dist && cp README.md dist && webpack",
+    "build": "yarn prestart && rimraf dist/ && mkdirp dist && cp README.md dist && rollup -c && webpack",
     "watch": "yarn build --watch",
     "dist": "yarn test && yarn build && yarn dist:zip",
     "dist:zip": "cd dist && tar czf ../katex.tar.gz * && zip -rq ../katex.zip *"

rollup.config.js

@@ -0,0 +1,14 @@
+import babel from 'rollup-plugin-babel';
+
+process.env.BABEL_ENV = 'esm';
+
+export default {
+    input: 'katex.js',
+    output: {
+        file: 'dist/katex.mjs',
+        format: 'es',
+    },
+    plugins: [
+        babel(),
+    ],
+};

src/Lexer.js

@@ -14,7 +14,9 @@
 
 import ParseError from "./ParseError";
 import SourceLocation from "./SourceLocation";
-import {LexerInterface, Token} from "./Token";
+import {Token} from "./Token";
+
+import type {LexerInterface} from "./Token";
 import type Settings from "./Settings";
 
 /* The following tokenRegex

src/Parser.js

@@ -11,7 +11,7 @@ import unicodeSymbols from "./unicodeSymbols";
 import utils from "./utils";
 import {assertNodeType, checkNodeType} from "./parseNode";
 import ParseError from "./ParseError";
-import {combiningDiacriticalMarksEndRegex, urlFunctionRegex} from "./Lexer.js";
+import {combiningDiacriticalMarksEndRegex, urlFunctionRegex} from "./Lexer";
 import Settings from "./Settings";
 import SourceLocation from "./SourceLocation";
 import {Token} from "./Token";

src/Settings.js

@@ -6,7 +6,7 @@
  */
 
 import utils from "./utils";
-import ParseError from "./ParseError.js";
+import ParseError from "./ParseError";
 import {Token} from "./Token";
 
 import type {AnyParseNode} from "./parseNode";

src/environments.js

@@ -6,4 +6,4 @@ const environments = _environments;
 export default environments;
 
 // All environment definitions should be imported below
-import "./environments/array.js";
+import "./environments/array";

src/functions/arrow.js

@@ -122,4 +122,3 @@ defineFunction({
         return node;
     },
 });
-

static/module.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--To test ECMA modules, run `npm run build` and then `npm start`
+    in the root KaTeX directory and then visit with a web browser
+    which supports modules: http://localhost:7936/module.html
+  -->
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>KaTeX Test</title>
+        <link rel="stylesheet" type="text/css" href="/dist/katex.css">
+        <link rel="stylesheet" type="text/css" href="/main.css">
+        <script type="module" type="text/javascript">
+            import katex from '/dist/katex.mjs';
+
+            const input = document.getElementById("input");
+            const math = document.getElementById("math");
+
+            input.addEventListener("input", reprocess, false);
+            reprocess();
+
+            function reprocess() {
+                try {
+                    katex.render(input.value, math, {displayMode: true, throwOnError: false, macros: {}});
+                } catch (e) {
+                    if (e.__proto__ === katex.ParseError.prototype) {
+                        console.error(e);
+                    } else {
+                        throw e;
+                    }
+                }
+            }
+        </script>
+    </head>
+    <body>
+        <textarea id="input" rows="5">
+\left( x \right) \left( x^2 \right) % comment
+\left( \frac{a}{b} \right) \left( \frac{a^2}{b} \right)
+\left( \dfrac{a}{b} \right) \left( \dfrac{a^2}{b} \right)
+        </textarea>
+        <div id="math"></div>
+    </body>
+</html>

yarn.lock

@@ -103,6 +103,14 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.0.tgz#50c1e2260ac0ed9439a181de3725a0168d59c48a"
 
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+
+"@types/node@*":
+  version "10.5.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.5.tgz#8e84d24e896cd77b0d4f73df274027e3149ec2ba"
+
 "@webassemblyjs/ast@1.5.13":
   version "1.5.13"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.5.13.tgz#81155a570bd5803a30ec31436bc2c9c0ede38f25"
@@ -2508,6 +2516,10 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+
 esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -6438,6 +6450,26 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-babel@^3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.7.tgz#5b13611f1ab8922497e9d15197ae5d8a23fe3b1e"
+  dependencies:
+    rollup-pluginutils "^1.5.0"
+
+rollup-pluginutils@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
+rollup@^0.63.4:
+  version "0.63.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.63.5.tgz#5543eecac9a1b83b7e1be598b5be84c9c0a089db"
+  dependencies:
+    "@types/estree" "0.0.39"
+    "@types/node" "*"
+
 rsvp@^3.3.3:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"