Webpack dev server

contrib/auto-render/auto-render.js

@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 /* global katex */
 
-const splitAtDelimiters = require("./splitAtDelimiters");
+import splitAtDelimiters from "./splitAtDelimiters";
 
 const splitWithDelimiters = function(text, delimiters) {
     let data = [{type: "text", data: text}];
@@ -99,4 +99,5 @@ const renderMathInElement = function(elem, options) {
     renderElem(elem, optionsCopy);
 };
 
-module.exports = renderMathInElement;
+
+export default renderMathInElement;

contrib/auto-render/splitAtDelimiters.js

@@ -99,4 +99,4 @@ const splitAtDelimiters = function(startData, leftDelim, rightDelim, display) {
     return finalData;
 };
 
-module.exports = splitAtDelimiters;
+export default splitAtDelimiters;

contrib/copy-tex/copy-tex.js

@@ -1,4 +1,4 @@
-const katexReplaceWithTex = require('./katex2tex');
+import katexReplaceWithTex from './katex2tex';
 
 // Global copy handler to modify behavior on .katex elements.
 document.addEventListener('copy', function(event) {

contrib/copy-tex/katex2tex.js

@@ -49,4 +49,4 @@ export const katexReplaceWithTex = function(fragment,
     return fragment;
 };
 
-module.exports = katexReplaceWithTex;
+export default katexReplaceWithTex;

katex.js

@@ -43,6 +43,7 @@ if (typeof document !== "undefined") {
     }
 }
 
+
 /**
  * Parse and build an expression, and return the markup for that.
  */
@@ -61,7 +62,8 @@ const generateParseTree = function(expression, options) {
     return parseTree(expression, settings);
 };
 
-module.exports = {
+
+const katex = {
     render: render,
     renderToString: renderToString,
     /**
@@ -72,3 +74,5 @@ module.exports = {
     __parse: generateParseTree,
     ParseError: ParseError,
 };
+
+export default katex;

package.json

@@ -18,6 +18,8 @@
   "devDependencies": {
     "babel-eslint": "^7.2.0",
     "babel-jest": "^20.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.18.0",
@@ -37,23 +39,31 @@
     "js-yaml": "^3.3.1",
     "jspngopt": "^0.2.0",
     "less": "~2.7.1",
+    "less-plugin-clean-css": "^1.5.1",
     "morgan": "^1.7.0",
     "nomnom": "^1.8.1",
     "object-assign": "^4.1.0",
     "pako": "1.0.4",
     "pre-commit": "^1.2.2",
     "selenium-webdriver": "^2.48.2",
     "sri-toolbox": "^0.2.0",
-    "uglify-js": "~2.7.5"
+    "uglify-js": "~2.7.5",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "bin": "cli.js",
   "scripts": {
     "lint": "eslint katex.js server.js cli.js src test contrib dockers",
     "flow": "flow",
     "jest": "jest",
     "coverage": "jest --coverage",
+    "copy": "cp -a static/. build/ && cp -a contrib build/",
+    "clean": "rm -rf build/* node_modules/",
+    "clean-install": "npm run clean && npm i",
     "test": "check-dependencies && npm run lint && npm run flow && npm run jest",
-    "start": "check-dependencies && node server.js",
+    "build-css": "lessc --clean-css static/katex.less build/katex.css",
+    "prestart": "npm run build-css && npm run copy",
+    "start": "check-dependencies && node webpackDevServer.js",
     "prepublishOnly": "make NIS= dist"
   },
   "pre-commit": [

server.js

@@ -27,7 +27,14 @@ function serveBrowserified(file, standaloneName) {
         }
 
         const options = {
-            transform: [babelify],
+            transform: [babelify.configure({
+                presets: ["es2015", "flow"],
+                plugins: [
+                    "transform-runtime",
+                    "transform-class-properties",
+                    "add-module-exports",
+                ],
+            })],
         };
         if (standaloneName) {
             options.standalone = standaloneName;

src/Options.js

@@ -304,4 +304,4 @@ class Options {
     }
 }
 
-module.exports = Options;
+export default Options;

src/ParseError.js

@@ -72,4 +72,4 @@ class ParseError {
 // $FlowFixMe More hackery
 ParseError.prototype.__proto__ = Error.prototype;
 
-module.exports = ParseError;
+export default ParseError;

src/Parser.js

@@ -928,7 +928,7 @@ export default class Parser {
             // Lexer's tokenRegex is constructed to always have matching
             // first/last characters.
             if (arg.length < 2 || arg.charAt(0) !== arg.slice(-1)) {
-                throw new ParseError(`\\verb assertion failed -- 
+                throw new ParseError(`\\verb assertion failed --
                     please report what input caused this bug`);
             }
             arg = arg.slice(1, -1);  // remove first and last char

src/Settings.js

@@ -45,4 +45,4 @@ class Settings {
     }
 }
 
-module.exports = Settings;
+export default Settings;

src/Style.js

@@ -122,7 +122,7 @@ const cramp = [Dc, Dc, Tc, Tc, Sc, Sc, SSc, SSc];
 const text = [D, Dc, T, Tc, T, Tc, T, Tc];
 
 // We only export some of the styles.
-module.exports = {
+export default {
     DISPLAY: styles[D],
     TEXT: styles[T],
     SCRIPT: styles[S],

src/buildCommon.js

@@ -505,7 +505,7 @@ const fontMap = {
     },
 };
 
-module.exports = {
+export default {
     fontMap: fontMap,
     makeSymbol: makeSymbol,
     mathsym: mathsym,

src/buildHTML.js

@@ -10,13 +10,15 @@
 import ParseError from "./ParseError";
 import Style from "./Style";
 
-import buildCommon, { makeSpan } from "./buildCommon";
+import buildCommon from "./buildCommon";
 import delimiter from "./delimiter";
 import domTree from "./domTree";
 import { calculateSize } from "./units";
 import utils from "./utils";
 import stretchy from "./stretchy";
 
+const makeSpan = buildCommon.makeSpan;
+
 const isSpace = function(node) {
     return node instanceof domTree.span && node.classes[0] === "mspace";
 };

src/buildMathML.js

@@ -6,7 +6,7 @@
  * parser.
  */
 
-import buildCommon, { makeSpan, fontMap } from "./buildCommon";
+import buildCommon from "./buildCommon";
 import fontMetrics from "./fontMetrics";
 import mathMLTree from "./mathMLTree";
 import ParseError from "./ParseError";
@@ -50,9 +50,9 @@ const getVariant = function(group, options) {
         value = symbols[mode][value].replace;
     }
 
-    const fontName = fontMap[font].fontName;
+    const fontName = buildCommon.fontMap[font].fontName;
     if (fontMetrics.getCharacterMetrics(value, fontName)) {
-        return fontMap[options.font].variant;
+        return buildCommon.fontMap[options.font].variant;
     }
 
     return null;
@@ -458,7 +458,7 @@ groupTypes.sizing = function(group, options) {
 groupTypes.verb = function(group, options) {
     const text = new mathMLTree.TextNode(buildCommon.makeVerb(group, options));
     const node = new mathMLTree.MathNode("mtext", [text]);
-    node.setAttribute("mathvariant", fontMap["mathtt"].variant);
+    node.setAttribute("mathvariant", buildCommon.fontMap["mathtt"].variant);
     return node;
 };
 
@@ -690,5 +690,5 @@ export default function buildMathML(tree, texExpression, options) {
     const math = new mathMLTree.MathNode("math", [semantics]);
 
     // You can't style <math> nodes, so we wrap the node in a span.
-    return makeSpan(["katex-mathml"], [math]);
+    return buildCommon.makeSpan(["katex-mathml"], [math]);
 }

src/buildTree.js

@@ -1,6 +1,6 @@
 import buildHTML from "./buildHTML";
 import buildMathML from "./buildMathML";
-import { makeSpan } from "./buildCommon";
+import buildCommon from "./buildCommon";
 import Options from "./Options";
 import Settings from "./Settings";
 import Style from "./Style";
@@ -24,15 +24,15 @@ const buildTree = function(tree, expression, settings) {
     const mathMLNode = buildMathML(tree, expression, options);
     const htmlNode = buildHTML(tree, options);
 
-    const katexNode = makeSpan(["katex"], [
+    const katexNode = buildCommon.makeSpan(["katex"], [
         mathMLNode, htmlNode,
     ]);
 
     if (settings.displayMode) {
-        return makeSpan(["katex-display"], [katexNode]);
+        return buildCommon.makeSpan(["katex-display"], [katexNode]);
     } else {
         return katexNode;
     }
 };
 
-module.exports = buildTree;
+export default buildTree;

src/delimiter.js

@@ -24,7 +24,7 @@ import ParseError from "./ParseError";
 import Style from "./Style";
 
 import domTree from "./domTree";
-import buildCommon, { makeSpan } from "./buildCommon";
+import buildCommon from "./buildCommon";
 import fontMetrics from "./fontMetrics";
 import symbols from "./symbols";
 import utils from "./utils";
@@ -50,7 +50,7 @@ const getMetrics = function(symbol, font) {
 const styleWrap = function(delim, toStyle, options, classes) {
     const newOptions = options.havingBaseStyle(toStyle);
 
-    const span = makeSpan(
+    const span = buildCommon.makeSpan(
         (classes || []).concat(newOptions.sizingClasses(options)),
         [delim], options);
 
@@ -103,7 +103,7 @@ const mathrmSize = function(value, size, mode, options) {
 const makeLargeDelim = function(delim, size, center, options, mode, classes) {
     const inner = mathrmSize(delim, size, mode, options);
     const span = styleWrap(
-        makeSpan(["delimsizing", "size" + size], [inner], options),
+        buildCommon.makeSpan(["delimsizing", "size" + size], [inner], options),
         Style.TEXT, options, classes);
     if (center) {
         centerSpan(span, options, Style.TEXT);
@@ -124,9 +124,9 @@ const makeInner = function(symbol, font, mode) {
         sizeClass = "delim-size4";
     }
 
-    const inner = makeSpan(
+    const inner = buildCommon.makeSpan(
         ["delimsizinginner", sizeClass],
-        [makeSpan([], [buildCommon.makeSymbol(symbol, font, mode)])]);
+        [buildCommon.makeSpan([], [buildCommon.makeSymbol(symbol, font, mode)])]);
 
     // Since this will be passed into `makeVList` in the end, wrap the element
     // in the appropriate tag that VList uses.
@@ -310,7 +310,7 @@ const makeStackedDelim = function(delim, heightTotal, center, options, mode,
     const inner = buildCommon.makeVList(inners, "bottom", depth, newOptions);
 
     return styleWrap(
-        makeSpan(["delimsizing", "mult"], [inner], newOptions),
+        buildCommon.makeSpan(["delimsizing", "mult"], [inner], newOptions),
         Style.TEXT, options, classes);
 };
 
@@ -606,7 +606,7 @@ const makeLeftRightDelim = function(delim, height, depth, options, mode,
                                 classes);
 };
 
-module.exports = {
+export default {
     sizedDelim: makeSizedDelim,
     customSizedDelim: makeCustomSizedDelim,
     leftRightDelim: makeLeftRightDelim,

src/domTree.js

@@ -443,7 +443,7 @@ class lineNode {
     }
 }
 
-module.exports = {
+export default {
     span: span,
     documentFragment: documentFragment,
     symbolNode: symbolNode,

src/environments.js

@@ -10,7 +10,7 @@ const environments = {
     },
 };
 
-export {environments as default};
+export default environments;
 
 // All environment definitions should be imported below
 import "./environments/array.js";

src/environments/array.js

@@ -1,5 +1,5 @@
 // @flow
-import buildCommon, {makeSpan} from "../buildCommon";
+import buildCommon from "../buildCommon";
 import defineEnvironment from "../defineEnvironment";
 import mathMLTree from "../mathMLTree";
 import ParseError from "../ParseError";
@@ -191,14 +191,14 @@ const htmlBuilder = function(group, options) {
             // If there is more than one separator in a row, add a space
             // between them.
             if (!firstSeparator) {
-                colSep = makeSpan(["arraycolsep"], []);
+                colSep = buildCommon.makeSpan(["arraycolsep"], []);
                 colSep.style.width =
                     options.fontMetrics().doubleRuleSep + "em";
                 cols.push(colSep);
             }
 
             if (colDescr.separator === "|") {
-                const separator = makeSpan(
+                const separator = buildCommon.makeSpan(
                     ["vertical-separator"],
                     []);
                 separator.style.height = totalHeight + "em";
@@ -224,7 +224,7 @@ const htmlBuilder = function(group, options) {
         if (c > 0 || group.value.hskipBeforeAndAfter) {
             sepwidth = utils.deflt(colDescr.pregap, arraycolsep);
             if (sepwidth !== 0) {
-                colSep = makeSpan(["arraycolsep"], []);
+                colSep = buildCommon.makeSpan(["arraycolsep"], []);
                 colSep.style.width = sepwidth + "em";
                 cols.push(colSep);
             }
@@ -244,22 +244,22 @@ const htmlBuilder = function(group, options) {
         }
 
         col = buildCommon.makeVList(col, "individualShift", null, options);
-        col = makeSpan(
+        col = buildCommon.makeSpan(
             ["col-align-" + (colDescr.align || "c")],
             [col]);
         cols.push(col);
 
         if (c < nc - 1 || group.value.hskipBeforeAndAfter) {
             sepwidth = utils.deflt(colDescr.postgap, arraycolsep);
             if (sepwidth !== 0) {
-                colSep = makeSpan(["arraycolsep"], []);
+                colSep = buildCommon.makeSpan(["arraycolsep"], []);
                 colSep.style.width = sepwidth + "em";
                 cols.push(colSep);
             }
         }
     }
-    body = makeSpan(["mtable"], cols);
-    return makeSpan(["mord"], [body], options);
+    body = buildCommon.makeSpan(["mtable"], cols);
+    return buildCommon.makeSpan(["mord"], [body], options);
 };
 
 const mathmlBuilder = function(group, options) {

src/fontMetrics.js

@@ -297,7 +297,7 @@ const getFontMetrics = function(size: number): FontMetrics {
     return fontMetricsBySizeIndex[sizeIndex];
 };
 
-module.exports = {
+export default {
     getFontMetrics: getFontMetrics,
     getCharacterMetrics: getCharacterMetrics,
 };

src/fontMetricsData.js

@@ -1755,4 +1755,4 @@ const fontMetricsData = {
     },
 };
 
-module.exports = fontMetricsData;
+export default fontMetricsData;