feat(hmr): adding hot module reloading

.gitignore

@@ -14,3 +14,4 @@ Thumbs.db
 .vscode
 *.sublime-project
 *.sublime-workspace
+.idea

package.json

@@ -43,8 +43,10 @@
     "webpack": "^4.4.0"
   },
   "dependencies": {
-    "schema-utils": "^1.0.0",
+    "es-check": "^5.0.0",
     "loader-utils": "^1.1.0",
+    "normalize-url": "^3.0.0",
+    "schema-utils": "^1.0.0",
     "webpack-sources": "^1.1.0"
   },
   "devDependencies": {
@@ -75,7 +77,7 @@
     "webpack": "^4.14.0",
     "webpack-cli": "^2.0.13",
     "webpack-defaults": "^2.3.0",
-    "webpack-dev-server": "^3.1.1"
+    "webpack-dev-server": "^3.1.14"
   },
   "keywords": [
     "webpack"

src/hmr/hotModuleReplacement.js

@@ -0,0 +1,165 @@
+/* global document, window */
+/* eslint func-names: 0 */
+/* eslint no-var: 0 */
+/* eslint vars-on-top: 0 */
+/* eslint prefer-arrow-func: 0 */
+/* eslint prefer-rest-params: 0 */
+/* eslint prefer-arrow-callback: 0 */
+/* eslint prefer-template: 0 */
+
+var normalizeUrl = require('normalize-url');
+
+var srcByModuleId = Object.create(null);
+
+var noDocument = typeof document === 'undefined';
+
+var forEach = Array.prototype.forEach;
+
+function debounce(fn, time) {
+  var timeout = 0;
+
+  // eslint-disable-next-line func-names
+  return function() {
+    var self = this;
+    var args = arguments;
+
+    // eslint-disable-next-line prefer-rest-params
+    var functionCall = function functionCall() {
+      return fn.apply(self, args);
+    };
+
+    clearTimeout(timeout);
+    timeout = setTimeout(functionCall, time);
+  };
+}
+
+function noop() {}
+
+function getCurrentScriptUrl(moduleId) {
+  var src = srcByModuleId[moduleId];
+
+  if (!src) {
+    if (document.currentScript) {
+      src = document.currentScript.src;
+    } else {
+      var scripts = document.getElementsByTagName('script');
+      var lastScriptTag = scripts[scripts.length - 1];
+
+      if (lastScriptTag) {
+        src = lastScriptTag.src;
+      }
+    }
+    srcByModuleId[moduleId] = src;
+  }
+
+  return function(fileMap) {
+    if (!src) {
+      return null;
+    }
+    var splitResult = src.split(/([^\\/]+)\.js$/);
+    var filename = splitResult && splitResult[1];
+    if (!filename) {
+      return [src.replace('.js', '.css')];
+    }
+    if (!fileMap) {
+      return [src.replace('.js', '.css')];
+    }
+    return fileMap.split(',').map(function(mapRule) {
+      var reg = new RegExp(filename + '\\.js$', 'g');
+      return normalizeUrl(
+        src.replace(reg, mapRule.replace(/{fileName}/g, filename) + '.css'),
+        { stripWWW: false }
+      );
+    });
+  };
+}
+
+function updateCss(el, url) {
+  if (!url) {
+    url = el.href.split('?')[0];
+  }
+  if (el.isLoaded === false) {
+    // We seem to be about to replace a css link that hasn't loaded yet.
+    // We're probably changing the same file more than once.
+    return;
+  }
+  if (!url || !(url.indexOf('.css') > -1)) return;
+
+  el.visited = true;
+  var newEl = el.cloneNode(); // eslint-disable-line vars-on-top
+
+  newEl.isLoaded = false;
+
+  newEl.addEventListener('load', function() {
+    newEl.isLoaded = true;
+    el.parentNode.removeChild(el);
+  });
+
+  newEl.addEventListener('error', function() {
+    newEl.isLoaded = true;
+    el.parentNode.removeChild(el);
+  });
+
+  newEl.href = url + '?' + Date.now();
+  el.parentNode.appendChild(newEl);
+}
+
+function getReloadUrl(href, src) {
+  var ret;
+  href = normalizeUrl(href, { stripWWW: false });
+  // eslint-disable-next-line array-callback-return
+  src.some(function(url) {
+    if (href.indexOf(src) > -1) {
+      ret = url;
+    }
+  });
+  return ret;
+}
+
+function reloadStyle(src) {
+  var elements = document.querySelectorAll('link');
+  var loaded = false;
+
+  forEach.call(elements, function(el) {
+    var url = getReloadUrl(el.href, src);
+
+    if (el.visited === true) return;
+
+    if (url) {
+      updateCss(el, url);
+      loaded = true;
+    }
+  });
+
+  return loaded;
+}
+
+function reloadAll() {
+  var elements = document.querySelectorAll('link');
+  forEach.call(elements, function(el) {
+    if (el.visited === true) return;
+    updateCss(el);
+  });
+}
+
+module.exports = function(moduleId, options) {
+  if (noDocument) {
+    return noop;
+  }
+
+  // eslint-disable-next-line vars-on-top
+  var getScriptSrc = getCurrentScriptUrl(moduleId);
+
+  function update() {
+    var src = getScriptSrc(options.filename);
+    var reloaded = reloadStyle(src);
+    if (reloaded && !options.reloadAll) {
+      console.log('[HMR] css reload %s', src.join(' '));
+    } else {
+      console.log('[HMR] Reload all css');
+      reloadAll();
+    }
+  }
+
+  return debounce(update, 10);
+};

src/index.js

@@ -116,6 +116,7 @@ class MiniCssExtractPlugin {
       },
       options
     );
+
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
       const hasName = filename.includes('[name]');
@@ -393,6 +394,21 @@ class MiniCssExtractPlugin {
     });
   }
 
+  traverseDepthFirst(root, visit) {
+    let nodesToVisit = [root];
+
+    while (nodesToVisit.length > 0) {
+      const currentNode = nodesToVisit.shift();
+
+      if (currentNode !== null && typeof currentNode === 'object') {
+        const children = Object.values(currentNode);
+        nodesToVisit = [...children, ...nodesToVisit];
+      }
+
+      visit(currentNode);
+    }
+  }
+
   getCssChunkObject(mainChunk) {
     const obj = {};
     for (const chunk of mainChunk.getAllAsyncChunks()) {

src/loader.js

@@ -1,5 +1,7 @@
 import NativeModule from 'module';
 
+import path from 'path';
+
 import loaderUtils from 'loader-utils';
 import NodeTemplatePlugin from 'webpack/lib/node/NodeTemplatePlugin';
 import NodeTargetPlugin from 'webpack/lib/node/NodeTargetPlugin';
@@ -10,6 +12,24 @@ import LimitChunkCountPlugin from 'webpack/lib/optimize/LimitChunkCountPlugin';
 const MODULE_TYPE = 'css/mini-extract';
 const pluginName = 'mini-css-extract-plugin';
 
+function hotLoader(content, context) {
+  const accept = context.modules
+    ? ''
+    : 'module.hot.accept(undefined, cssReload);';
+  const result = `${content}
+    if(module.hot) {
+      // ${Date.now()}
+      var cssReload = require(${loaderUtils.stringifyRequest(
+        context.context,
+        path.join(__dirname, 'hmr/hotModuleReplacement.js')
+      )})(module.id, ${JSON.stringify(context.query)});
+      module.hot.dispose(cssReload);
+      ${accept}
+    }
+  `;
+  return result;
+}
+
 const exec = (loaderContext, code, filename) => {
   const module = new NativeModule(filename, loaderContext);
   module.paths = NativeModule._nodeModulePaths(loaderContext.context); // eslint-disable-line no-underscore-dangle
@@ -29,6 +49,7 @@ const findModuleById = (modules, id) => {
 
 export function pitch(request) {
   const query = loaderUtils.getOptions(this) || {};
+
   const loaders = this.loaders.slice(this.loaderIndex + 1);
   this.addDependency(this.resourcePath);
   const childFilename = '*'; // eslint-disable-line no-path-concat
@@ -130,10 +151,14 @@ export function pitch(request) {
     }
     let resultSource = `// extracted by ${pluginName}`;
     if (locals && typeof resultSource !== 'undefined') {
-      resultSource += `\nmodule.exports = ${JSON.stringify(locals)};`;
+      const result = `\nmodule.exports = ${JSON.stringify(locals)};`;
+      resultSource += query.hot
+        ? hotLoader(result, { context: this.context, query })
+        : '';
     }
 
     return callback(null, resultSource);
   });
 }
+
 export default function() {}

test/TestCases.test.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { exec } from 'child_process';
 
 import webpack from 'webpack';
 
@@ -77,3 +78,24 @@ describe('TestCases', () => {
     }
   }
 });
+
+describe('HMR', () => {
+  it('matches snapshot', () => {
+    const hmr = fs
+      .readFileSync(path.join(__dirname, '../src/hmr/hotModuleReplacement.js'))
+      .toString();
+
+    expect(hmr).toMatchSnapshot();
+  });
+
+  it('is es5 only', () => {
+    exec(
+      './node_modules/.bin/es-check es5 src/hmr/hotModuleReplacement.js',
+      (error, stdout, stderr) => {
+        expect(
+          stderr.indexOf('there were no ES version matching errors!') > -1
+        ).toBe(true);
+      }
+    );
+  });
+});