From 2a6fed4da10c2a6fa9ed0b62b9be8a00fcc2bbd3 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 5 Jan 2018 15:17:51 -0500 Subject: [PATCH] transpile client bundles with babel --- client/.eslintrc | 7 ------- client/index.js | 42 ++++++++++++++++++++-------------------- client/live.js | 22 ++++++++++----------- client/overlay.js | 11 ++++++----- client/socket.js | 2 +- client/webpack.config.js | 12 ++++++++++++ package.json | 3 +++ 7 files changed, 54 insertions(+), 45 deletions(-) delete mode 100644 client/.eslintrc diff --git a/client/.eslintrc b/client/.eslintrc deleted file mode 100644 index a5425c909e..0000000000 --- a/client/.eslintrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "rules": { - "object-shorthand": ["error", "never"], - "prefer-arrow-callback": ["off"], - "prefer-template": ["off"] - } -} diff --git a/client/index.js b/client/index.js index ccc7ce62d5..23c8e2fd8f 100644 --- a/client/index.js +++ b/client/index.js @@ -65,24 +65,24 @@ function sendMsg(type, data) { !(self instanceof WorkerGlobalScope)) ) { self.postMessage({ - type: 'webpack' + type, - data: data + type: `webpack${type}`, + data }, '*'); } } const onSocketMsg = { - hot: function msgHot() { + hot() { hot = true; log.info('[WDS] Hot Module Replacement enabled.'); }, - invalid: function msgInvalid() { + invalid() { log.info('[WDS] App updated. Recompiling...'); // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain. if (useWarningOverlay || useErrorOverlay) overlay.clear(); sendMsg('Invalid'); }, - hash: function msgHash(hash) { + hash(hash) { currentHash = hash; }, 'still-ok': function stillOk() { @@ -108,10 +108,10 @@ const onSocketMsg = { log.disableAll(); break; default: - log.error('[WDS] Unknown clientLogLevel \'' + level + '\''); + log.error(`[WDS] Unknown clientLogLevel '${level}'`); } }, - overlay: function msgOverlay(value) { + overlay(value) { if (typeof document !== 'undefined') { if (typeof (value) === 'boolean') { useWarningOverlay = false; @@ -122,15 +122,15 @@ const onSocketMsg = { } } }, - progress: function msgProgress(progress) { + progress(progress) { if (typeof document !== 'undefined') { useProgress = progress; } }, 'progress-update': function progressUpdate(data) { - if (useProgress) log.info('[WDS] ' + data.percent + '% - ' + data.msg + '.'); + if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`); }, - ok: function msgOk() { + ok() { sendMsg('Ok'); if (useWarningOverlay || useErrorOverlay) overlay.clear(); if (initial) return initial = false; // eslint-disable-line no-return-assign @@ -140,9 +140,9 @@ const onSocketMsg = { log.info('[WDS] Content base changed. Reloading...'); self.location.reload(); }, - warnings: function msgWarnings(warnings) { + warnings(warnings) { log.warn('[WDS] Warnings while compiling.'); - const strippedWarnings = warnings.map(function map(warning) { return stripAnsi(warning); }); + const strippedWarnings = warnings.map(warning => stripAnsi(warning)); sendMsg('Warnings', strippedWarnings); for (let i = 0; i < strippedWarnings.length; i++) { log.warn(strippedWarnings[i]); } if (useWarningOverlay) overlay.showMessage(warnings); @@ -150,17 +150,17 @@ const onSocketMsg = { if (initial) return initial = false; // eslint-disable-line no-return-assign reloadApp(); }, - errors: function msgErrors(errors) { + errors(errors) { log.error('[WDS] Errors while compiling. Reload prevented.'); - const strippedErrors = errors.map(function map(error) { return stripAnsi(error); }); + const strippedErrors = errors.map(error => stripAnsi(error)); sendMsg('Errors', strippedErrors); for (let i = 0; i < strippedErrors.length; i++) { log.error(strippedErrors[i]); } if (useErrorOverlay) overlay.showMessage(errors); }, - error: function msgError(error) { + error(error) { log.error(error); }, - close: function msgClose() { + close() { log.error('[WDS] Disconnected!'); sendMsg('Close'); } @@ -190,9 +190,9 @@ if (hostname && (self.location.protocol === 'https:' || urlParts.hostname === '0 } const socketUrl = url.format({ - protocol: protocol, + protocol, auth: urlParts.auth, - hostname: hostname, + hostname, port: urlParts.port, pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path }); @@ -200,7 +200,7 @@ const socketUrl = url.format({ socket(socketUrl, onSocketMsg); let isUnloading = false; -self.addEventListener('beforeunload', function beforeUnload() { +self.addEventListener('beforeunload', () => { isUnloading = true; }); @@ -215,12 +215,12 @@ function reloadApp() { hotEmitter.emit('webpackHotUpdate', currentHash); if (typeof self !== 'undefined' && self.window) { // broadcast update to window - self.postMessage('webpackHotUpdate' + currentHash, '*'); + self.postMessage(`webpackHotUpdate${currentHash}`, '*'); } } else { let rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src) - const intervalId = self.setInterval(function findRootWindow() { + const intervalId = self.setInterval(() => { if (rootWindow.location.protocol !== 'about:') { // reload immediately if protocol is valid applyReload(rootWindow, intervalId); diff --git a/client/live.js b/client/live.js index caa6345a94..75aeafc3e1 100644 --- a/client/live.js +++ b/client/live.js @@ -10,7 +10,7 @@ require('./style.css'); let hot = false; let currentHash = ''; -$(function ready() { +$(() => { $('body').html(require('./page.pug')()); const status = $('#status'); const okness = $('#okness'); @@ -28,11 +28,11 @@ $(function ready() { }); const onSocketMsg = { - hot: function msgHot() { + hot() { hot = true; iframe.attr('src', contentPage + window.location.hash); }, - invalid: function msgInvalid() { + invalid() { okness.text(''); status.text('App updated. Recompiling...'); header.css({ @@ -41,7 +41,7 @@ $(function ready() { $errors.hide(); if (!hot) iframe.hide(); }, - hash: function msgHash(hash) { + hash(hash) { currentHash = hash; }, 'still-ok': function stillOk() { @@ -53,12 +53,12 @@ $(function ready() { $errors.hide(); if (!hot) iframe.show(); }, - ok: function msgOk() { + ok() { okness.text(''); $errors.hide(); reloadApp(); }, - warnings: function msgWarnings() { + warnings() { okness.text('Warnings while compiling.'); $errors.hide(); reloadApp(); @@ -66,14 +66,14 @@ $(function ready() { errors: function msgErrors(errors) { status.text('App updated with errors. No reload!'); okness.text('Errors while compiling.'); - $errors.text('\n' + stripAnsi(errors.join('\n\n\n')) + '\n\n'); + $errors.text(`\n${stripAnsi(errors.join('\n\n\n'))}\n\n`); header.css({ borderColor: '#ebcb8b' }); $errors.show(); iframe.hide(); }, - close: function msgClose() { + close() { status.text(''); okness.text('Disconnected.'); $errors.text('\n\n\n Lost connection to webpack-dev-server.\n Please restart the server to reestablish connection...\n\n\n\n'); @@ -87,7 +87,7 @@ $(function ready() { socket('/sockjs-node', onSocketMsg); - iframe.on('load', function load() { + iframe.on('load', () => { status.text('App ready.'); header.css({ borderColor: '' @@ -99,7 +99,7 @@ $(function ready() { if (hot) { status.text('App hot update.'); try { - iframe[0].contentWindow.postMessage('webpackHotUpdate' + currentHash, '*'); + iframe[0].contentWindow.postMessage(`webpackHotUpdate${currentHash}`, '*'); } catch (e) { console.warn(e); // eslint-disable-line } @@ -110,7 +110,7 @@ $(function ready() { borderColor: '#96b5b4' }); try { - let old = iframe[0].contentWindow.location + ''; + let old = `${iframe[0].contentWindow.location}`; if (old.indexOf('about') === 0) old = null; iframe.attr('src', old || (contentPage + window.location.hash)); if (old) { diff --git a/client/overlay.js b/client/overlay.js index 7c6de6f83c..f286aefb60 100644 --- a/client/overlay.js +++ b/client/overlay.js @@ -83,7 +83,7 @@ function ensureOverlayDivExists(onOverlayDivReady) { } // Create iframe and, when it is ready, a div inside it. - overlayIframe = createOverlayIframe(function cb() { + overlayIframe = createOverlayIframe(() => { overlayDiv = addOverlayDivTo(overlayIframe); // Now we can talk! lastOnOverlayDivReady(overlayDiv); @@ -96,11 +96,12 @@ function ensureOverlayDivExists(onOverlayDivReady) { } function showMessageOverlay(message) { - ensureOverlayDivExists(function cb(div) { + ensureOverlayDivExists((div) => { // Make it look similar to our terminal. - div.innerHTML = 'Failed to compile.

' + - ansiHTML(entities.encode(message)); + div.innerHTML = `Failed to compile.

${ + ansiHTML(entities.encode(message))}`; }); } diff --git a/client/socket.js b/client/socket.js index 38e3cd5b38..e298a8d594 100644 --- a/client/socket.js +++ b/client/socket.js @@ -26,7 +26,7 @@ function socket(url, handlers) { const retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100; retries += 1; - setTimeout(function cb() { + setTimeout(() => { socket(url, handlers); }, retryInMs); } diff --git a/client/webpack.config.js b/client/webpack.config.js index 8d26d1e417..7627fc05a5 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -5,6 +5,18 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { module: { rules: [ + { + test: /\.js$/, + exclude: /node_modules|web_modules/, + use: [ + { + loader: 'babel-loader', + options: { + presets: ['env'] + } + } + ] + }, { test: /\.pug$/, use: [ diff --git a/package.json b/package.json index ef012590f2..50f04ca6fe 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,9 @@ "yargs": "^6.6.0" }, "devDependencies": { + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-preset-env": "^1.6.1", "codecov.io": "^0.1.6", "css-loader": "^0.28.5", "eslint": "^4.5.0",