feat(hmr): adding hot module reloading

package.json

@@ -43,8 +43,9 @@
     "webpack": "^4.4.0"
   },
   "dependencies": {
-    "schema-utils": "^1.0.0",
     "loader-utils": "^1.1.0",
+    "normalize-url": "^4.1.0",
+    "schema-utils": "^1.0.0",
     "webpack-sources": "^1.1.0"
   },
   "devDependencies": {

src/hmr/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  "parserOptions": {
+    "ecmaVersion": 5,
+    "sourceType": "module",
+  },
+  globals: {
+    document: true
+  },
+  plugins: ['prettier'],
+  extends: ['@webpack-contrib/eslint-config-webpack'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {singleQuote: true, trailingComma: 'es5', arrowParens: 'avoid'},
+    ],
+    'class-methods-use-this': 'off',
+    'no-undefined': 'off',
+    'func-style': ["error", "declaration", {"allowArrowFunctions": false}],
+    'prefer-rest-params': 0,
+    'prefer-spread': 0,
+    'prefer-destructuring': 0
+  },
+};

src/hmr/hotLoader.js

@@ -0,0 +1,33 @@
+const path = require('path');
+
+const loaderUtils = require('loader-utils');
+
+const defaultOptions = {
+  fileMap: '{fileName}',
+};
+
+function hotLoader(content) {
+  this.cacheable();
+  const options = Object.assign(
+    {},
+    defaultOptions,
+    loaderUtils.getOptions(this)
+  );
+
+  const accept = options.cssModules
+    ? ''
+    : 'module.hot.accept(undefined, cssReload);';
+  return `${content}
+    if(module.hot) {
+      // ${Date.now()}
+      var cssReload = require(${loaderUtils.stringifyRequest(
+        this,
+        path.join(__dirname, 'hotModuleReplacement.js')
+      )})(module.id, ${JSON.stringify(options)});
+      module.hot.dispose(cssReload);
+      ${accept};
+    }
+  `;
+}
+
+module.exports = hotLoader;

src/hmr/hotModuleReplacement.js

@@ -0,0 +1,142 @@
+const normalizeUrl = require('normalize-url');
+
+const srcByModuleId = Object.create(null);
+
+const noDocument = typeof document === 'undefined';
+
+function debounce(fn, time) {
+  let timeout;
+
+  // eslint-disable-next-line func-names
+  return function() {
+    const functionCall = () => fn.apply(this, arguments);
+
+    clearTimeout(timeout);
+    timeout = setTimeout(functionCall, time);
+  };
+}
+
+const forEach = Array.prototype.forEach;
+
+function noop() {}
+
+function getCurrentScriptUrl(moduleId) {
+  let src = srcByModuleId[moduleId];
+
+  if (!src) {
+    if (document.currentScript) {
+      src = document.currentScript.src;
+    } else {
+      const scripts = document.getElementsByTagName('script');
+      const lastScriptTag = scripts[scripts.length - 1];
+
+      if (lastScriptTag) {
+        src = lastScriptTag.src;
+      }
+    }
+    srcByModuleId[moduleId] = src;
+  }
+
+  return function(fileMap) {
+    const splitResult = /([^\\/]+)\.js$/.exec(src);
+    const filename = splitResult && splitResult[1];
+    if (!filename) {
+      return [src.replace('.js', '.css')];
+    }
+    return fileMap.split(',').map(mapRule => {
+      const 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;
+  const newEl = el.cloneNode();
+
+  newEl.isLoaded = false;
+
+  newEl.addEventListener('load', () => {
+    newEl.isLoaded = true;
+    el.parentNode.removeChild(el);
+  });
+
+  newEl.addEventListener('error', () => {
+    newEl.isLoaded = true;
+    el.parentNode.removeChild(el);
+  });
+
+  newEl.href = `${url}?${Date.now()}`;
+  el.parentNode.appendChild(newEl);
+}
+
+function getReloadUrl(href, src) {
+  href = normalizeUrl(href, { stripWWW: false });
+  let ret;
+  // eslint-disable-next-line array-callback-return
+  src.some(url => {
+    if (href.indexOf(src) > -1) {
+      ret = url;
+    }
+  });
+  return ret;
+}
+
+function reloadStyle(src) {
+  const elements = document.querySelectorAll('link');
+  let loaded = false;
+
+  forEach.call(elements, el => {
+    if (el.visited === true) return;
+
+    const url = getReloadUrl(el.href, src);
+    if (url) {
+      updateCss(el, url);
+      loaded = true;
+    }
+  });
+
+  return loaded;
+}
+
+function reloadAll() {
+  const elements = document.querySelectorAll('link');
+  forEach.call(elements, el => {
+    if (el.visited === true) return;
+    updateCss(el);
+  });
+}
+
+module.exports = function(moduleId, options) {
+  if (noDocument) {
+    return noop;
+  }
+
+  const getScriptSrc = getCurrentScriptUrl(moduleId);
+
+  function update() {
+    const src = getScriptSrc(options.fileMap);
+    const 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

@@ -1,6 +1,10 @@
+import path from 'path';
+
 import webpack from 'webpack';
 import sources from 'webpack-sources';
 
+const hotLoader = path.resolve(__dirname, './hmr/hotLoader.js');
+
 const { ConcatSource, SourceMapSource, OriginalSource } = sources;
 const {
   Template,
@@ -15,6 +19,24 @@ const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
 
+const isHMR = (compiler) => {
+  if (compiler && compiler.options) {
+    if (compiler.options.devServer && compiler.options.devServer.hot) {
+      return true;
+    }
+
+    if (compiler.options.entry) {
+      const entry =
+        typeof compiler.options.entry === 'function'
+          ? compiler.options.entry()
+          : compiler.options.entry;
+      const entryString = JSON.stringify(entry);
+      return entryString.includes('hot') || entryString.includes('hmr');
+    }
+  }
+  return false;
+};
+
 class CssDependency extends webpack.Dependency {
   constructor(
     { identifier, content, media, sourceMap },
@@ -116,6 +138,8 @@ class MiniCssExtractPlugin {
       },
       options
     );
+    const { cssModules, reloadAll } = this.options;
+
     if (!this.options.chunkFilename) {
       const { filename } = this.options;
       const hasName = filename.includes('[name]');
@@ -132,9 +156,36 @@ class MiniCssExtractPlugin {
         );
       }
     }
+
+    this.hotLoaderObject = Object.assign(
+      {
+        loader: hotLoader,
+        options: {
+          cssModules: false,
+          reloadAll: false,
+        },
+      },
+      {
+        options: {
+          cssModules,
+          reloadAll,
+        },
+      }
+    );
   }
 
   apply(compiler) {
+    try {
+      const isHOT = this.options.hot ? true : isHMR(compiler);
+
+      if (isHOT && compiler.options.module && compiler.options.module.rules) {
+        compiler.options.module.rules = this.updateWebpackConfig(
+          compiler.options.module.rules
+        );
+      }
+    } catch (e) {
+      throw new Error(`unknown config cannot inject HMR: ${e.stack || e}`);
+    }
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
       compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => {
         const loaderContext = lc;
@@ -393,6 +444,56 @@ 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);
+    }
+  }
+
+  updateWebpackConfig(initialRules) {
+    return initialRules.reduce((rules, rule) => {
+      this.traverseDepthFirst(rule, (node) => {
+        if (node && node.use && Array.isArray(node.use)) {
+          const isExtractCss = node.use.some((l) => {
+            const needle = l.loader || l;
+            if (typeof l === 'function') {
+              return false;
+            }
+            return needle.includes(pluginName);
+          });
+          if (isExtractCss) {
+            node.use.unshift(this.hotLoaderObject);
+          }
+        }
+        if (node && node.loader && Array.isArray(node.loader)) {
+          const isExtractCss = node.loader.some((l) => {
+            const needle = l.loader || l;
+            if (typeof l === 'function') {
+              return false;
+            }
+            return needle.includes(pluginName);
+          });
+          if (isExtractCss) {
+            node.loader.unshift(this.hotLoaderObject);
+          }
+        }
+      });
+
+      rules.push(rule);
+
+      return rules;
+    }, []);
+  }
+
   getCssChunkObject(mainChunk) {
     const obj = {};
     for (const chunk of mainChunk.getAllAsyncChunks()) {
@@ -546,5 +647,6 @@ class MiniCssExtractPlugin {
 }
 
 MiniCssExtractPlugin.loader = require.resolve('./loader');
+MiniCssExtractPlugin.hotLoader = require.resolve('./hmr/hotLoader');
 
 export default MiniCssExtractPlugin;