patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-05 03:08:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use webpack to build files and webpack-dev-server for testing (#1068)

Browse Source 
* Create a separate entry point for webpack

Created a webpack entry point for KaTeX, which imports katex.less. As
flow[1] and jest[2] doesn't support CSS modules natively, a separate
entry point is used and it is not flowtyped.

[1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
[2] https://facebook.github.io/jest/docs/en/webpack.html

* Use webpack to build files

* Made webpack.config.js export valid webpack configuration
* Use:
browserify -> webpack
babelify -> babel-loader
UglifyJS CLI -> UglifyJsPlugin
Less CLI -> less-loader
cleancss -> cssnano in css-loader
build/fonts -> file-loader
* Inline CSS(Less) using style-loader and export them using
ExtractTextPlugin
* Add `watch` npm script calling `webpack --watch`

* Improve local testing(webpack-dev-server)

* Made webpackDevServer export a valid webpack configuration
* Compile Less and inline CSS using less-loader and style-loader
* Instead of copying files serve files from /static and use file-loader
* Remove old server.js and its dependencies

* Use webpack-dev-server in Screenshotter

* Include contrib in webpack-dev-server

+ Moved common configurations to webpack.common.js

* Rename webpackDevServer.js to webpack.dev...

to be consistent, avoid confusion with webpack-dev-server and follow
webpack configuration naming convention.

* Remove unnecessary conditional output.path

* Use map instead of reduce

+ Add comments regarding function arguments

* Remove unnecessary mkdir and clean build/* before build

* Use katex as external dependency instead of global variable in contrib

Fixes #692.

* Unblock codes as they are built as a module

* Update package-lock.json

* Add comments regarding devServer option

* Lint renamed webpack.dev.js

a0d8b33

* Export ES6 module and expose its default export

* Revert "Browserify hotfix (#1057)"

This reverts commit f6b509123b.

* Enables colors on the console when running the dev server in Screenshotter

* Add context to webpack configuration

Allows webpack to be run from other directories

* Move `rm -rf build/*` to npm scripts

* Check dependencies before build

* Move UglifyJsPlugin into config creation

* Let webpack handle ES6 modules

Do not transform modules to commonjs in Babel. However Jest doesn't not
support ES6 modules, so transfrom modules to commonjs when NODE_ENV is
`test`.

* Add documentation on testing in IE 9 and 10 using webpack-dev-server

Changed version range to include IE-compatible version
This commit is contained in:
ylemkimon
2018-01-22 09:48:25 +09:00
committed by Kevin Barabash
parent 4a11c3166d
commit 5f32b71c85
25 changed files with 2298 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.babelrc
View File

@@ -1,7 +1,19 @@
{ {
"presets": ["es2015", "flow"], "presets": [
["es2015", {
"modules": false
}],
"flow"
],
"plugins": [ "plugins": [
"transform-runtime", "transform-runtime",
"transform-class-properties" "transform-class-properties"
] ],
"env": {
"test": {
"plugins": [
"transform-es2015-modules-commonjs"
],
}
}
} }

10
CONTRIBUTING.md
View File

@@ -57,13 +57,19 @@ single file. The goal is to have all functions use this new system.
## Testing ## Testing
Local testing can be done by running the node server in `server.js`. Run Local testing can be done by running the webpack-dev-server using configuration
`npm install` to install dependencies, and then `npm start` to start the server. `webpack.dev.js`. Run `npm install` to install dependencies, and then `npm start`
to start the server.
This will host an interactive editor at This will host an interactive editor at
[http://localhost:7936/](http://localhost:7936/) to play around with and test [http://localhost:7936/](http://localhost:7936/) to play around with and test
changes. changes.
webpack-dev-server 2.8.0 introduced a change which included ES6 keywords `const`
and `let` within the scripts being served to the browser, and therefore doesn't
support IE 9 and 10. If you want to test in IE 9 and 10, install version 2.7.1
by running `npm install webpack-dev-server@2.7.1`.
#### Jest tests #### Jest tests
The JavaScript parser and some of the HTML and MathML tree The JavaScript parser and some of the HTML and MathML tree

51
Makefile
View File

@@ -1,5 +1,5 @@
.PHONY: build dist lint setup copy serve clean metrics test coverage zip contrib flow .PHONY: build dist lint setup webpack serve clean metrics test coverage zip flow
build: test build/katex.min.js build/katex.min.css contrib zip compress build: test build/katex zip compress
ifeq ($(KATEX_DIST),skip) ifeq ($(KATEX_DIST),skip)
@@ -20,15 +20,6 @@ ifneq ($(NODECHK),OK)
$(error "Node not found or wrong version") $(error "Node not found or wrong version")
endif endif
# Export these variables for use in contrib Makefiles
export BUILDDIR = $(realpath build)
export BROWSERIFY = $(realpath ./node_modules/.bin/browserify)
export UGLIFYJS = $(realpath ./node_modules/.bin/uglifyjs) \
--mangle \
--beautify \
ascii_only=true,beautify=false
export CLEANCSS = $(realpath ./node_modules/.bin/cleancss)
# The prepublish script in package.json will override the following variable, # The prepublish script in package.json will override the following variable,
# setting it to the empty string and thereby avoiding an infinite recursion # setting it to the empty string and thereby avoiding an infinite recursion
NIS = .npm-install.stamp NIS = .npm-install.stamp
@@ -40,29 +31,11 @@ $(NIS) setup: package.json
lint: $(NIS) lint: $(NIS)
$(NPM) run lint $(NPM) run lint
build/katex.js: katex.js $(wildcard src/*.js) $(NIS) webpack: katex.js $(wildcard src/*.js) $(wildcard static/*.less) $(NIS)
mkdir -p build $(NPM) run build
$(BROWSERIFY) -t [ babelify ] $< --standalone katex > $@
build/katex.min.js: build/katex.js .PHONY: build/fonts build/contrib
mkdir -p build build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/katex.css build/fonts build/contrib: webpack
$(UGLIFYJS) < $< > $@
build/katex.css: static/katex.less $(wildcard static/*.less) $(NIS)
mkdir -p build
./node_modules/.bin/lessc $< $@
build/katex.min.css: build/katex.css
mkdir -p build
$(CLEANCSS) -o $@ $<
.PHONY: build/fonts
build/fonts:
rm -rf $@
mkdir $@
for font in $(shell grep "font" static/katex.less | grep -o "KaTeX_\w\+" | cut -d" " -f 2 | sort | uniq); do \
cp submodules/katex-fonts/fonts/$$font* $@; \
done
test/screenshotter/unicode-fonts: test/screenshotter/unicode-fonts:
git clone https://github.com/Khan/KaTeX-test-fonts test/screenshotter/unicode-fonts git clone https://github.com/Khan/KaTeX-test-fonts test/screenshotter/unicode-fonts
@@ -70,18 +43,6 @@ test/screenshotter/unicode-fonts:
git checkout 99fa66a2da643218754c8236b9f9151cac71ba7c && \ git checkout 99fa66a2da643218754c8236b9f9151cac71ba7c && \
cd ../../../ cd ../../../
contrib: build/contrib
.PHONY: build/contrib
build/contrib:
mkdir -p build/contrib
@# Since everything in build/contrib is put in the built files, make sure
@# there's nothing in there we don't want.
rm -rf build/contrib/*
$(MAKE) -C contrib/auto-render
$(MAKE) -C contrib/copy-tex
$(MAKE) -C contrib/mathtex-script-type
.PHONY: build/katex .PHONY: build/katex
build/katex: build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/fonts README.md build/contrib build/katex: build/katex.js build/katex.min.js build/katex.css build/katex.min.css build/fonts README.md build/contrib
mkdir -p build/katex mkdir -p build/katex

9
contrib/auto-render/Makefile
View File

@@ -1,9 +0,0 @@
.PHONY: build
build: $(BUILDDIR)/contrib/auto-render.min.js
$(BUILDDIR)/contrib/auto-render.min.js: $(BUILDDIR)/contrib/auto-render.js
$(UGLIFYJS) < $< > $@
$(BUILDDIR)/contrib/auto-render.js: auto-render.js
$(BROWSERIFY) -t [ babelify ] $< --standalone renderMathInElement > $@

4
contrib/auto-render/README.md
View File

@@ -29,9 +29,9 @@ before the close body tag:
``` ```
See [index.html](index.html) for an example. See [index.html](index.html) for an example.
(To run this example from a clone of the repository, run `make serve` (To run this example from a clone of the repository, run `npm start`
in the root KaTeX directory, and then visit in the root KaTeX directory, and then visit
http://0.0.0.0:7936/contrib/auto-render/index.html http://localhost:7936/contrib/auto-render/index.html
with your web browser.) with your web browser.)
If you prefer to have all your setup inside the html `<head>`, If you prefer to have all your setup inside the html `<head>`,

4
contrib/auto-render/auto-render.js
View File

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

7
contrib/auto-render/index.html
View File

@@ -1,15 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--To run this example from a clone of the repository, run `make serve` <!--To run this example from a clone of the repository, run `npm start`
in the root KaTeX directory and then visit with your web browser: in the root KaTeX directory and then visit with your web browser:
http://0.0.0.0:7936/contrib/auto-render/index.html http://localhost:7936/contrib/auto-render/index.html
--> -->
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Auto-render test</title> <title>Auto-render test</title>
<script src="/katex.js" type="text/javascript"></script> <script src="/katex.js" type="text/javascript"></script>
<link href="/katex.css" rel="stylesheet" type="text/css"> <script src="/contrib/auto-render.js" type="text/javascript"></script>
<script src="./auto-render.js" type="text/javascript"></script>
<style type="text/css"> <style type="text/css">
body { body {
margin: 0px; margin: 0px;

15
contrib/copy-tex/Makefile
View File

@@ -1,15 +0,0 @@
.PHONY: build
build: $(BUILDDIR)/contrib/copy-tex.min.js $(BUILDDIR)/contrib/copy-tex.css $(BUILDDIR)/contrib/copy-tex.min.css
$(BUILDDIR)/contrib/copy-tex.min.js: $(BUILDDIR)/contrib/copy-tex.js
$(UGLIFYJS) < $< > $@
$(BUILDDIR)/contrib/copy-tex.js: copy-tex.js
$(BROWSERIFY) -t [ babelify ] $< --standalone renderMathInElement > $@
$(BUILDDIR)/contrib/copy-tex.css: copy-tex.css
cp $< $@
$(BUILDDIR)/contrib/copy-tex.min.css: $(BUILDDIR)/contrib/copy-tex.css
$(CLEANCSS) -o $@ $<

4
contrib/copy-tex/README.md
View File

@@ -26,9 +26,9 @@ will just get the usual HTML copy/paste behavior.
``` ```
See [index.html](index.html) for an example. See [index.html](index.html) for an example.
(To run this example from a clone of the repository, run `make serve` (To run this example from a clone of the repository, run `npm start`
in the root KaTeX directory, and then visit in the root KaTeX directory, and then visit
http://0.0.0.0:7936/contrib/copy-tex/index.html http://localhost:7936/contrib/copy-tex/index.html
with your web browser.) with your web browser.)
If you want to build your own custom copy handler based on this one, If you want to build your own custom copy handler based on this one,

1
contrib/copy-tex/copy-tex.js
View File

@@ -1,3 +1,4 @@
import './copy-tex.css';
import katexReplaceWithTex from './katex2tex'; import katexReplaceWithTex from './katex2tex';
// Global copy handler to modify behavior on .katex elements. // Global copy handler to modify behavior on .katex elements.

10
contrib/copy-tex/index.html
View File

@@ -1,17 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--To run this example from a clone of the repository, run `make serve` <!--To run this example from a clone of the repository, run `npm start`
in the root KaTeX directory and then visit with your web browser: in the root KaTeX directory and then visit with your web browser:
http://0.0.0.0:7936/contrib/copy-tex/index.html http://localhost:7936/contrib/copy-tex/index.html
--> -->
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Copy-tex test</title> <title>Copy-tex test</title>
<script src="/katex.js" type="text/javascript"></script> <script src="/katex.js" type="text/javascript"></script>
<link href="/katex.css" rel="stylesheet" type="text/css"> <script src="/contrib/auto-render.js" type="text/javascript"></script>
<link href="./copy-tex.css" rel="stylesheet" type="text/css"> <script src="/contrib/copy-tex.js" type="text/javascript"></script>
<script src="../auto-render/auto-render.js" type="text/javascript"></script>
<script src="./copy-tex.js" type="text/javascript"></script>
<style type="text/css"> <style type="text/css">
body { body {
margin: 0px; margin: 0px;

9
contrib/mathtex-script-type/Makefile
View File

@@ -1,9 +0,0 @@
.PHONY: build integrity
build: $(BUILDDIR)/contrib/mathtex-script-type.min.js
$(BUILDDIR)/contrib/mathtex-script-type.min.js: $(BUILDDIR)/mathtex-script-type.js
$(UGLIFYJS) < $< > $@
$(BUILDDIR)/mathtex-script-type.js: mathtex-script-type.js
$(BROWSERIFY) -t [ babelify ] $< > $@

42
contrib/mathtex-script-type/mathtex-script-type.js
View File

@@ -1,24 +1,22 @@
/* global katex */ import katex from "katex";
{ let scripts = document.body.getElementsByTagName("script");
let scripts = document.body.getElementsByTagName("script"); scripts = Array.prototype.slice.call(scripts);
scripts = Array.prototype.slice.call(scripts); scripts.forEach(function(script) {
scripts.forEach(function(script) { if (!script.type || !script.type.match(/math\/tex/i)) {
if (!script.type || !script.type.match(/math\/tex/i)) { return -1;
return -1; }
} const display =
const display = (script.type.match(/mode\s*=\s*display(;|\s|\n|$)/) != null);
(script.type.match(/mode\s*=\s*display(;|\s|\n|$)/) != null);
const katexElement = document.createElement(display ? "div" : "span"); const katexElement = document.createElement(display ? "div" : "span");
katexElement.setAttribute("class", katexElement.setAttribute("class",
display ? "equation" : "inline-equation"); display ? "equation" : "inline-equation");
try { try {
katex.render(script.text, katexElement, {displayMode: display}); katex.render(script.text, katexElement, {displayMode: display});
} catch (err) { } catch (err) {
//console.error(err); linter doesn't like this //console.error(err); linter doesn't like this
katexElement.textContent = script.text; katexElement.textContent = script.text;
} }
script.parentNode.replaceChild(katexElement, script); script.parentNode.replaceChild(katexElement, script);
}); });
}

11
dockers/Screenshotter/screenshotter.js
View File

@@ -3,7 +3,6 @@
const childProcess = require("child_process"); const childProcess = require("child_process");
const fs = require("fs"); const fs = require("fs");
const http = require("http");
const jspngopt = require("jspngopt"); const jspngopt = require("jspngopt");
const net = require("net"); const net = require("net");
const os = require("os"); const os = require("os");
@@ -12,7 +11,9 @@ const path = require("path");
const selenium = require("selenium-webdriver"); const selenium = require("selenium-webdriver");
const firefox = require("selenium-webdriver/firefox"); const firefox = require("selenium-webdriver/firefox");
const app = require("../../server"); const webpack = require('webpack');
const webpackDevServer = require("webpack-dev-server");
const webpackConfig = require("../../webpack.dev");
const data = require("../../test/screenshotter/ss_data"); const data = require("../../test/screenshotter/ss_data");
const dstDir = path.normalize( const dstDir = path.normalize(
@@ -194,7 +195,9 @@ function startServer() {
return; return;
} }
const port = Math.floor(Math.random() * (maxPort - minPort)) + minPort; const port = Math.floor(Math.random() * (maxPort - minPort)) + minPort;
const server = http.createServer(app).listen(port); const compiler = webpack(webpackConfig);
const server = new webpackDevServer(compiler,
webpackConfig[0].devServer).listen(port);
server.once("listening", function() { server.once("listening", function() {
devServer = server; devServer = server;
katexPort = port; katexPort = port;
@@ -315,7 +318,7 @@ function findHostIP() {
// Now we need to find an IP the container can connect to. // Now we need to find an IP the container can connect to.
// First, install a server component to get notified of successful connects // First, install a server component to get notified of successful connects
app.get("/ss-connect.js", function(req, res, next) { devServer.app.get("/ss-connect.js", function(req, res, next) {
if (!katexURL) { if (!katexURL) {
katexIP = req.query.ip; katexIP = req.query.ip;
katexURL = "http://" + katexIP + ":" + katexPort + "/"; katexURL = "http://" + katexIP + ":" + katexPort + "/";

2
katex.js
View File

@@ -95,7 +95,7 @@ const renderToHTMLTree = function(
return buildHTMLTree(tree, expression, settings); return buildHTMLTree(tree, expression, settings);
}; };
module.exports = { export default {
/** /**
* Renders the given LaTeX into an HTML+MathML combination, and adds * Renders the given LaTeX into an HTML+MathML combination, and adds
* it as a child to the specified DOM node. * it as a child to the specified DOM node.

11
katex.webpack.js Normal file
View File

@@ -0,0 +1,11 @@
/**
* This is the webpack entry point for KaTeX. As flow[1] and jest[2] doesn't support
* CSS modules natively, a separate entry point is used and it is not flowtyped.
*
* [1] https://gist.github.com/lambdahands/d19e0da96285b749f0ef
* [2] https://facebook.github.io/jest/docs/en/webpack.html
*/
import './static/katex.less';
import katex from './katex.js';
export default katex;

2514
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -3,7 +3,6 @@
"version": "0.10.0-pre", "version": "0.10.0-pre",
"description": "Fast math typesetting for the web.", "description": "Fast math typesetting for the web.",
"main": "dist/katex.js", "main": "dist/katex.js",
"browser": "dist/katex.min.js",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/Khan/KaTeX.git" "url": "git://github.com/Khan/KaTeX.git"
@@ -25,23 +24,20 @@
"babel-preset-es2015": "^6.18.0", "babel-preset-es2015": "^6.18.0",
"babel-preset-flow": "^6.23.0", "babel-preset-flow": "^6.23.0",
"babel-register": "^6.26.0", "babel-register": "^6.26.0",
"babelify": "^7.3.0",
"browserify": "^13.3.0",
"check-dependencies": "^1.1.0", "check-dependencies": "^1.1.0",
"clean-css": "^3.4.23", "css-loader": "^0.28.8",
"eslint": "^4.14.0", "eslint": "^4.14.0",
"eslint-plugin-flowtype": "^2.40.1", "eslint-plugin-flowtype": "^2.40.1",
"express": "^4.14.0", "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"flow-bin": "^0.62.0", "flow-bin": "^0.62.0",
"glob": "^7.1.1",
"jest": "^22.0.4", "jest": "^22.0.4",
"jest-serializer-html": "^4.0.1", "jest-serializer-html": "^4.0.1",
"js-yaml": "^3.3.1", "js-yaml": "^3.3.1",
"json-stable-stringify": "^1.0.1", "json-stable-stringify": "^1.0.1",
"jspngopt": "^0.2.0", "jspngopt": "^0.2.0",
"less": "~2.7.1", "less": "~2.7.1",
"less-plugin-clean-css": "^1.5.1", "less-loader": "^4.0.5",
"morgan": "^1.7.0",
"nomnom": "^1.8.1", "nomnom": "^1.8.1",
"object-assign": "^4.1.0", "object-assign": "^4.1.0",
"pako": "1.0.4", "pako": "1.0.4",
@@ -49,26 +45,26 @@
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"selenium-webdriver": "^2.48.2", "selenium-webdriver": "^2.48.2",
"sri-toolbox": "^0.2.0", "sri-toolbox": "^0.2.0",
"style-loader": "^0.19.1",
"stylelint": "^8.4.0", "stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0", "stylelint-config-standard": "^18.0.0",
"uglify-js": "~2.7.5", "uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.6.0", "webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2" "webpack-dev-server": "^2.7.1"
}, },
"bin": "cli.js", "bin": "cli.js",
"scripts": { "scripts": {
"lint": "eslint katex.js server.js cli.js webpack.config.js webpackDevServer.js src test contrib dockers && stylelint static/fonts.less static/katex.less", "lint": "eslint katex.js katex.webpack.js cli.js webpack.common.js webpack.config.js webpack.dev.js src test contrib dockers && stylelint static/fonts.less static/katex.less",
"flow": "flow", "flow": "flow",
"jest": "jest", "jest": "jest",
"jest-update": "jest --updateSnapshot", "jest-update": "jest --updateSnapshot",
"coverage": "jest --coverage", "coverage": "jest --coverage",
"copy": "cp -a static/. build/ && cp -a contrib build/",
"clean": "rm -rf build/* node_modules/", "clean": "rm -rf build/* node_modules/",
"clean-install": "npm run clean && npm i", "clean-install": "npm run clean && npm i",
"test": "check-dependencies && npm run lint && npm run flow && npm run jest", "test": "check-dependencies && npm run lint && npm run flow && npm run jest",
"build-css": "lessc --clean-css static/katex.less build/katex.css", "start": "check-dependencies && webpack-dev-server --open --config webpack.dev.js",
"prestart": "rimraf build && npm run build-css && npm run copy", "build": "check-dependencies && rimraf build/* && webpack",
"start": "check-dependencies && node webpackDevServer.js", "watch": "npm run build -- --watch",
"prepublishOnly": "make NIS= dist" "prepublishOnly": "make NIS= dist"
}, },
"pre-commit": [ "pre-commit": [

106
server.js
View File

@@ -1,106 +0,0 @@
/* eslint no-console:0 */
const fs = require("fs");
const path = require("path");
const babelify = require("babelify");
const browserify = require("browserify");
const express = require("express");
const glob = require("glob");
const less = require("less");
const app = express();
if (require.main === module) {
app.use(require("morgan")(
":date[iso] :method :url HTTP/:http-version - :status"));
}
function serveBrowserified(file, standaloneName) {
return function(req, res, next) {
let files;
if (Array.isArray(file)) {
files = file.map(function(f) { return path.join(__dirname, f); });
} else if (file.indexOf("*") !== -1) {
files = glob.sync(file, {cwd: __dirname});
} else {
files = [path.join(__dirname, file)];
}
const options = {
transform: [babelify],
};
if (standaloneName) {
options.standalone = standaloneName;
}
const b = browserify(files, options);
const stream = b.bundle();
let body = "";
stream.on("data", function(s) { body += s; });
stream.on("error", function(e) { next(e); });
stream.on("end", function() {
res.setHeader("Content-Type", "text/javascript");
res.send(body);
});
};
}
function browserified(url, file, standaloneName) {
app.get(url, serveBrowserified(file, standaloneName));
}
function getStatic(url, file) {
app.use(url, express.static(path.join(__dirname, file)));
}
browserified("/katex.js", "katex", "katex");
browserified("/test/katex-spec.js", "test/*[Ss]pec.js");
browserified(
"/contrib/auto-render/auto-render.js",
"contrib/auto-render/auto-render",
"renderMathInElement");
browserified(
"/contrib/copy-tex/copy-tex.js",
"contrib/copy-tex/copy-tex");
app.use("/katex.css", function(req, res, next) {
const lessfile = path.join(__dirname, "static", "katex.less");
fs.readFile(lessfile, {encoding: "utf8"}, function(err, data) {
if (err) {
next(err);
return;
}
less.render(data, {
paths: [path.join(__dirname, "static")],
filename: "katex.less",
}, function(err, output) {
if (err) {
console.error(String(err));
next(err);
return;
}
res.setHeader("Content-Type", "text/css");
res.send(output.css);
});
});
});
getStatic("", "static");
getStatic("", "build");
getStatic("/test", "test");
getStatic("/contrib", "contrib");
app.use(function(err, req, res, next) {
console.error(err.stack);
res.setHeader("Content-Type", "text/plain");
res.send(500, err.stack);
});
if (require.main === module) {
app.listen(7936);
console.log("Serving on http://0.0.0.0:7936/ ...");
}
module.exports = app;

1
static/index.html
View File

@@ -4,7 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>KaTeX Test</title> <title>KaTeX Test</title>
<script src="katex.js" type="text/javascript"></script> <script src="katex.js" type="text/javascript"></script>
<link href="katex.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css"> <link href="main.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>

1
test/screenshotter/test.html
View File

@@ -3,7 +3,6 @@
<head> <head>
<title>Screenshotter test</title> <title>Screenshotter test</title>
<script src="../../katex.js" type="text/javascript"></script> <script src="../../katex.js" type="text/javascript"></script>
<link href="../../katex.css" rel="stylesheet" type="text/css">
<style type="text/css"> <style type="text/css">
#math, #pre, #post { #math, #pre, #post {
font-size: 4em; font-size: 4em;

121
webpack.common.js Normal file
View File

@@ -0,0 +1,121 @@
// @flow
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
/*::
type Target = {|
name: string, // the name of output JS/CSS
entry: string, // the path to the entry point
library?: string // the name of the exported module
|};
*/
/**
* List of targets to build
*/
const targets /*: Array<Target> */ = [
{
name: 'katex',
entry: './katex.webpack.js',
library: 'katex',
},
{
name: 'contrib/auto-render',
entry: './contrib/auto-render/auto-render.js',
library: 'renderMathInElement',
},
{
name: 'contrib/copy-tex',
entry: './contrib/copy-tex/copy-tex.js',
},
{
name: 'contrib/mathtex-script-type',
entry: './contrib/mathtex-script-type/mathtex-script-type.js',
},
];
/**
* Create a webpack config for given target
*/
function createConfig(target /*: Target */, dev /*: boolean */,
minimize /*: boolean */) /*: Object */ {
const cssLoader = {
loader: 'css-loader',
options: {
minimize, // cssnano
},
};
return {
context: __dirname,
entry: {
[target.name]: target.entry,
},
output: {
filename: minimize ? '[name].min.js' : '[name].js',
library: target.library,
libraryTarget: 'umd',
libraryExport: 'default',
path: path.resolve(__dirname, 'build'),
publicPath: dev ? '/' : '',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [cssLoader],
}),
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [cssLoader, {
loader: 'less-loader',
}],
}),
},
{
test: /\.(ttf|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
}],
},
],
},
externals: 'katex',
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: dev ? 'development' : 'production',
}),
minimize && new UglifyJsPlugin({
uglifyOptions: {
output: {
ascii_only: true,
},
},
}),
new ExtractTextPlugin({
filename: minimize ? '[name].min.css' : '[name].css',
disable: dev,
}),
].filter(Boolean),
devtool: dev && 'inline-source-map',
};
}
module.exports = {
targets,
createConfig,
};

66
webpack.config.js
View File

@@ -1,61 +1,7 @@
const path = require('path'); // @flow
const { targets, createConfig } = require('./webpack.common');
const katexConfig = { module.exports = [ // dev minify
entry: ['./katex.js'], ...targets.map(target => createConfig(target, false, false)),
output: { ...targets.map(target => createConfig(target, false, true)),
path: path.join(__dirname, 'build'), ];
filename: 'katex.js',
library: 'katex',
libraryTarget: 'umd',
},
};
const copyTexConfig = {
entry: ['./contrib/copy-tex/copy-tex.js'],
output: {
path: path.join(__dirname, 'build', 'contrib', 'copy-tex'),
filename: 'copy-tex.js',
},
};
const autoRenderConfig = {
entry: ['./contrib/auto-render/auto-render.js'],
output: {
path: path.join(__dirname, 'build', 'contrib', 'auto-render'),
filename: 'auto-render.js',
library: 'renderMathInElement',
libraryTarget: 'umd',
},
};
const commonConfig = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /\bnode_modules\b/,
},
],
},
devtool: 'eval-source-map',
};
module.exports = {
compilerConfig: [
Object.assign({}, katexConfig, commonConfig),
Object.assign({}, copyTexConfig, commonConfig),
Object.assign({}, autoRenderConfig, commonConfig),
],
devServerConfig: {
publicPath: '/',
contentBase: path.join(__dirname, 'build'),
stats: {
colors: true,
},
// Allow server to be accessed from anywhere, which is useful for
// testing. This potentially reveals the source code to the world,
// but this should not be a concern for testing open-source software.
disableHostCheck: true,
},
};

25
webpack.dev.js Normal file
View File

@@ -0,0 +1,25 @@
// @flow
const { targets, createConfig } = require('./webpack.common');
const path = require('path');
const PORT = 7936;
// only the `devServer` options for the first configuration will be taken
// into account and used for all the configurations in the array.
// dev minify
const katexConfig = createConfig(targets.shift(), true, false);
katexConfig.devServer = {
contentBase: [path.join(__dirname, 'static'), __dirname],
// Allow server to be accessed from anywhere, which is useful for
// testing. This potentially reveals the source code to the world,
// but this should not be a concern for testing open-source software.
disableHostCheck: true,
port: PORT,
stats: {
colors: true,
},
};
module.exports = [
katexConfig,
...targets.map(target => createConfig(target, true, false)),
];

15
webpackDevServer.js
View File

@@ -1,15 +0,0 @@
/* eslint no-console:0 */
const WebpackDevServer = require("webpack-dev-server");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config.js");
const PORT = 7936;
webpackConfig.compilerConfig.forEach((config) => {
config.entry.unshift(`webpack-dev-server/client?http://localhost:${PORT}/`);
});
const compiler = webpack(webpackConfig.compilerConfig);
const server = new WebpackDevServer(compiler, webpackConfig.devServerConfig);
server.listen(PORT);
console.log(`Serving on http://localhost:${PORT}/ ...`);