From 30854eb866a49b989915acc36bd45327126d559a Mon Sep 17 00:00:00 2001 From: ylemkimon Date: Fri, 2 Feb 2018 03:33:49 +0900 Subject: [PATCH] Enable hot module replacement(HMR) (#1100) * 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) --- package.json | 4 ++-- static/index.html | 4 +--- static/main.js | 54 +++++++++++++++++++++++++---------------------- webpack.common.js | 1 + webpack.dev.js | 8 +++++-- 5 files changed, 39 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index b508200c..07f30336 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ }, "bin": "cli.js", "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", "jest": "jest", "jest-update": "jest --updateSnapshot", @@ -64,7 +64,7 @@ "clean-install": "npm run clean && npm i", "test": "check-dependencies && npm run lint && npm run flow && npm run jest", "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", "watch": "npm run build -- --watch", "perf-test": "check-dependencies && NODE_ENV=test node test/perf-test.js", diff --git a/static/index.html b/static/index.html index 4a1383cc..cfb7b4da 100644 --- a/static/index.html +++ b/static/index.html @@ -3,8 +3,7 @@ KaTeX Test - - +
- diff --git a/static/main.js b/static/main.js index 45a07e2a..214f2d94 100644 --- a/static/main.js +++ b/static/main.js @@ -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() { - var input = document.getElementById("input"); - var math = document.getElementById("math"); - var permalink = document.getElementById("permalink"); + const input = document.getElementById("input"); + let math = document.getElementById("math"); + const permalink = document.getElementById("permalink"); - if ("oninput" in input) { - input.addEventListener("input", reprocess, false); - } else if (input.attachEvent) { - input.attachEvent("onkeyup", reprocess); - } + input.addEventListener("input", reprocess, false); + permalink.addEventListener("click", setSearch); - if ("addEventListener" in permalink) { - permalink.addEventListener("click", setSearch); - } else { - permalink.attachEvent("click", setSearch); - } - - var match = (/(?:^\?|&)text=([^&]*)/).exec(window.location.search); + let match = (/(?:^\?|&)text=([^&]*)/).exec(window.location.search); if (match) { input.value = decodeURIComponent(match[1]); } - var macros = {}; + const macros = {}; // TODO: Add toggle for displayMode. // https://github.com/Khan/KaTeX/issues/1035 - var options = {displayMode: true}; - var macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g; - var macroString = ""; + const options = {displayMode: true}; + const macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g; + let macroString = ""; while ((match = macroRegex.exec(window.location.search)) !== null) { options.macros = macros; macros["\\" + match[1]] = decodeURIComponent(match[2]); @@ -36,12 +34,12 @@ function init() { // The `after` search parameter puts normal text after the math. // Example use: testing baseline alignment. if (/(?:^\?|&)(?:before|after)=/.test(window.location.search)) { - var mathContainer = math; + const mathContainer = math; mathContainer.id = "math-container"; if ((match = /(?:^\?|&)before=([^&]*)/.exec(window.location.search))) { - var child = document.createTextNode(decodeURIComponent(match[1])); - mathContainer.appendChild(child); + const before = document.createTextNode(decodeURIComponent(match[1])); + mathContainer.appendChild(before); macroString += "&" + match[0].substr(1); } @@ -50,8 +48,8 @@ function init() { mathContainer.appendChild(math); if ((match = /(?:^\?|&)after=([^&]*)/.exec(window.location.search))) { - var child = document.createTextNode(decodeURIComponent(match[1])); - mathContainer.appendChild(child); + const after = document.createTextNode(decodeURIComponent(match[1])); + mathContainer.appendChild(after); macroString += "&" + match[0].substr(1); } } @@ -67,13 +65,19 @@ function init() { try { katex.render(input.value, math, options); } catch (e) { - if (e.__proto__ == katex.ParseError.prototype) { + if (e.__proto__ === katex.ParseError.prototype) { console.error(e); } else { throw e; } } } + + if (module.hot) { + module.hot.accept('../katex.webpack.js', reprocess); + } } init(); + +export default katex; diff --git a/webpack.common.js b/webpack.common.js index 2a486aed..ca72467b 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -99,6 +99,7 @@ function createConfig(target /*: Target */, dev /*: boolean */, new webpack.EnvironmentPlugin({ NODE_ENV: dev ? 'development' : 'production', }), + dev && new webpack.NamedModulesPlugin(), minimize && new UglifyJsPlugin({ uglifyOptions: { output: { diff --git a/webpack.dev.js b/webpack.dev.js index b3b8b7d4..715f97cf 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -3,10 +3,14 @@ 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); + +// 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 = { contentBase: [path.join(__dirname, 'static'), __dirname], // Allow server to be accessed from anywhere, which is useful for