patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-04 18:58:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable hot module replacement(HMR) (#1100)

Browse Source 
* Use ES6 in static/main.js

+ Lint static/main.js

* Enable hot module replacement(HMR) in webpack-dev-server

* Disable no-console in static/main.js

* Use seperate entry point/bundle for the test page(/static/main.js)
This commit is contained in:
ylemkimon
2018-02-02 03:33:49 +09:00
committed by Kevin Barabash
parent 603f12df8d
commit 30854eb866
5 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -55,7 +55,7 @@
}, },
"bin": "cli.js", "bin": "cli.js",
"scripts": { "scripts": {
"lint": "eslint katex.js katex.webpack.js cli.js webpack.common.js webpack.config.js webpack.dev.js src test contrib dockers && stylelint src/katex.less", "lint": "eslint katex.js katex.webpack.js cli.js webpack.common.js webpack.config.js webpack.dev.js src static test contrib dockers && stylelint src/katex.less",
"flow": "flow", "flow": "flow",
"jest": "jest", "jest": "jest",
"jest-update": "jest --updateSnapshot", "jest-update": "jest --updateSnapshot",
@@ -64,7 +64,7 @@
"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",
"verify-screenshots": "check-dependencies && dockers/Screenshotter/screenshotter.sh --verify", "verify-screenshots": "check-dependencies && dockers/Screenshotter/screenshotter.sh --verify",
"start": "check-dependencies && webpack-dev-server --config webpack.dev.js", "start": "check-dependencies && webpack-dev-server --hot --config webpack.dev.js",
"build": "check-dependencies && rimraf build/* && webpack", "build": "check-dependencies && rimraf build/* && webpack",
"watch": "npm run build -- --watch", "watch": "npm run build -- --watch",
"perf-test": "check-dependencies && NODE_ENV=test node test/perf-test.js", "perf-test": "check-dependencies && NODE_ENV=test node test/perf-test.js",

4
static/index.html
View File

@@ -3,8 +3,7 @@
<head> <head>
<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 defer src="/main.js" type="text/javascript"></script>
<link href="main.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<textarea id="input" rows="5"> <textarea id="input" rows="5">
@@ -14,6 +13,5 @@
</textarea> </textarea>
<div id="math"></div> <div id="math"></div>
<input id="permalink" type="button" value="permalink"> <input id="permalink" type="button" value="permalink">
<script src="main.js" type="text/javascript"></script>
</body> </body>
</html> </html>

54
static/main.js
View File

@@ -1,31 +1,29 @@
/* eslint no-console:0 */
/**
* This is the webpack entry point for the test page.
*/
import katex from '../katex.webpack.js';
import './main.css';
function init() { function init() {
var input = document.getElementById("input"); const input = document.getElementById("input");
var math = document.getElementById("math"); let math = document.getElementById("math");
var permalink = document.getElementById("permalink"); const permalink = document.getElementById("permalink");
if ("oninput" in input) { input.addEventListener("input", reprocess, false);
input.addEventListener("input", reprocess, false); permalink.addEventListener("click", setSearch);
} else if (input.attachEvent) {
input.attachEvent("onkeyup", reprocess);
}
if ("addEventListener" in permalink) { let match = (/(?:^\?|&)text=([^&]*)/).exec(window.location.search);
permalink.addEventListener("click", setSearch);
} else {
permalink.attachEvent("click", setSearch);
}
var match = (/(?:^\?|&)text=([^&]*)/).exec(window.location.search);
if (match) { if (match) {
input.value = decodeURIComponent(match[1]); input.value = decodeURIComponent(match[1]);
} }
var macros = {}; const macros = {};
// TODO: Add toggle for displayMode. // TODO: Add toggle for displayMode.
// https://github.com/Khan/KaTeX/issues/1035 // https://github.com/Khan/KaTeX/issues/1035
var options = {displayMode: true}; const options = {displayMode: true};
var macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g; const macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g;
var macroString = ""; let macroString = "";
while ((match = macroRegex.exec(window.location.search)) !== null) { while ((match = macroRegex.exec(window.location.search)) !== null) {
options.macros = macros; options.macros = macros;
macros["\\" + match[1]] = decodeURIComponent(match[2]); macros["\\" + match[1]] = decodeURIComponent(match[2]);
@@ -36,12 +34,12 @@ function init() {
// The `after` search parameter puts normal text after the math. // The `after` search parameter puts normal text after the math.
// Example use: testing baseline alignment. // Example use: testing baseline alignment.
if (/(?:^\?|&)(?:before|after)=/.test(window.location.search)) { if (/(?:^\?|&)(?:before|after)=/.test(window.location.search)) {
var mathContainer = math; const mathContainer = math;
mathContainer.id = "math-container"; mathContainer.id = "math-container";
if ((match = /(?:^\?|&)before=([^&]*)/.exec(window.location.search))) { if ((match = /(?:^\?|&)before=([^&]*)/.exec(window.location.search))) {
var child = document.createTextNode(decodeURIComponent(match[1])); const before = document.createTextNode(decodeURIComponent(match[1]));
mathContainer.appendChild(child); mathContainer.appendChild(before);
macroString += "&" + match[0].substr(1); macroString += "&" + match[0].substr(1);
} }
@@ -50,8 +48,8 @@ function init() {
mathContainer.appendChild(math); mathContainer.appendChild(math);
if ((match = /(?:^\?|&)after=([^&]*)/.exec(window.location.search))) { if ((match = /(?:^\?|&)after=([^&]*)/.exec(window.location.search))) {
var child = document.createTextNode(decodeURIComponent(match[1])); const after = document.createTextNode(decodeURIComponent(match[1]));
mathContainer.appendChild(child); mathContainer.appendChild(after);
macroString += "&" + match[0].substr(1); macroString += "&" + match[0].substr(1);
} }
} }
@@ -67,13 +65,19 @@ function init() {
try { try {
katex.render(input.value, math, options); katex.render(input.value, math, options);
} catch (e) { } catch (e) {
if (e.__proto__ == katex.ParseError.prototype) { if (e.__proto__ === katex.ParseError.prototype) {
console.error(e); console.error(e);
} else { } else {
throw e; throw e;
} }
} }
} }
if (module.hot) {
module.hot.accept('../katex.webpack.js', reprocess);
}
} }
init(); init();
export default katex;

1
webpack.common.js
View File

@@ -99,6 +99,7 @@ function createConfig(target /*: Target */, dev /*: boolean */,
new webpack.EnvironmentPlugin({ new webpack.EnvironmentPlugin({
NODE_ENV: dev ? 'development' : 'production', NODE_ENV: dev ? 'development' : 'production',
}), }),
dev && new webpack.NamedModulesPlugin(),
minimize && new UglifyJsPlugin({ minimize && new UglifyJsPlugin({
uglifyOptions: { uglifyOptions: {
output: { output: {

8
webpack.dev.js
View File

@@ -3,10 +3,14 @@ const { targets, createConfig } = require('./webpack.common');
const path = require('path'); const path = require('path');
const PORT = 7936; 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 // dev minify
const katexConfig = createConfig(targets.shift(), true, false); const katexConfig = createConfig(targets.shift(), true, false);
// add the entry point for test page
katexConfig.entry.main = './static/main.js';
// only the `devServer` options for the first configuration will be taken
// into account and used for all the configurations in the array.
katexConfig.devServer = { katexConfig.devServer = {
contentBase: [path.join(__dirname, 'static'), __dirname], contentBase: [path.join(__dirname, 'static'), __dirname],
// Allow server to be accessed from anywhere, which is useful for // Allow server to be accessed from anywhere, which is useful for