Updates HMR to be compatible with webpack 4

mixpanel · Dec 15, 2018 · 0702f3a · 0702f3a
1 parent c7e40e2
commit 0702f3a
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 82 deletions.
diff --git a/hot/README.md b/hot/README.md
@@ -26,7 +26,16 @@ const webpackConfig = {
         }},
       ]},
       { test: /\.styl$/, use: [
-        { loader: `panel/hot/style-loader`},
+        {
+          loader: `panel/hot/style-loader`,
+          options: {
+            // enables or disables the loader
+            hot: true,
+            // transforms a path derived element name into something else
+            // allows for more flexible naming convention
+            elementNameTransform: (name, path) => `mp-${name}`,
+          },
+        },
         { loader: `css-loader`},
         { loader: `stylus-loader`},
       ]},

diff --git a/hot/controller-loader.js b/hot/controller-loader.js
@@ -5,13 +5,14 @@ const helpers = require(`./loader-helpers`);
 // Used in non-HMR mode, do nothing
 module.exports = source => source;
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
-  }
+module.exports.pitch = function(request) {
+  const options = loaderUtils.getOptions(this) || {};
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
 
-  const moduleId = loaderUtils.stringifyRequest(this, `!!${remainingReq}`);
-  const elemName = helpers.getElemName(this.resourcePath);
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
+  }
 
   return `
     module.hot.accept(${moduleId}, () => {
@@ -24,5 +25,5 @@ module.exports.pitch = function(remainingReq) {
       });
     });
     const oldExports = module.exports = require(${moduleId});
-    `.trim().replace(/^ {4}/gm, ``);
+  `;
 };
diff --git a/hot/loader-helpers.js b/hot/loader-helpers.js
@@ -1,5 +1,16 @@
 /* eslint-env commonjs */
+const loaderUtils = require(`loader-utils`);
 const path = require(`path`);
+const validateOptions = require(`schema-utils`);
+
+const OPTIONS_SCHEMA = {
+  type: `object`,
+  properties: {
+    hot: {
+      type: `boolean`,
+    },
+  },
+};
 
 // Retrieve elemName for hot injection from path convention
 //
@@ -12,17 +23,26 @@ const path = require(`path`);
 //
 // this means multiple element definitions in a single file won't work
 
-module.exports.getElemName = function(resourcePath) {
+module.exports.getElemName = function(resourcePath, options) {
   const pathInfo = path.parse(resourcePath);
   let elemName = pathInfo.name;
   if (/^(index|template|styles?|controller)$/.test(pathInfo.name)) {
     const pathParts = resourcePath.split(`/`);
     elemName = pathParts[pathParts.length - 2];
   }
 
+  const transform = options.elementNameTransform;
+  if (typeof transform === `function`) {
+    elemName = transform(elemName, resourcePath);
+  }
+
   return elemName;
 };
 
-module.exports.isDevServerHot = function(webpackOpts) {
-  return webpackOpts.devServer && webpackOpts.devServer.hot;
+module.exports.getOptions = function(context) {
+  const options = loaderUtils.getOptions(context) || {};
+
+  validateOptions(OPTIONS_SCHEMA, options, `Panel HMR`);
+
+  return options;
 };
diff --git a/hot/style-loader.js b/hot/style-loader.js
@@ -5,43 +5,26 @@ const helpers = require(`./loader-helpers`);
 // Used in non-HMR mode, do nothing
 module.exports = source => source;
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
-  }
-
-  const moduleId = loaderUtils.stringifyRequest(this, `!!${remainingReq}`);
-  const options = loaderUtils.getOptions(this);
-  const resourcePath = this.resourcePath;
-  const elemName = helpers.getElemName(resourcePath);
+module.exports.pitch = function(request) {
+  const options = helpers.getOptions(this);
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
 
-  let updateSnippet = ``;
-  if (typeof options.cssHref === `string`) {
-    updateSnippet = `
-        const updateCssHref = require('panel/hot/update-css-href');
-        updateCssHref('${options.cssHref}');
-    `;
-  } else {
-    updateSnippet = `
-        const updateStyle = require('panel/hot/update-style');
-        updateStyle(newStyle.toString(), ${JSON.stringify(resourcePath)});
-    `;
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
   }
 
   return `
-    module.hot.accept(${moduleId}, () => {
-      const newStyle = module.exports = require(${moduleId});
+    module.hot.accept(${moduleId}, function() {
+      const newStyle = require(${moduleId});
       const updatePanelElems = require('panel/hot/update-panel-elems');
-      const updateCount = updatePanelElems('${elemName}', elem => {
+      updatePanelElems('${elemName}', elem => {
         if (elem.getConfig('useShadowDom')) {
           elem.el.querySelector('style').textContent = newStyle.toString();
           return true;
         }
       });
-      if (!updateCount) {
-        ${updateSnippet.trim()}
-      }
     });
     module.exports = require(${moduleId});
-  `.trim().replace(/^ {4}/gm, ``);
+  `;
 };
diff --git a/hot/template-loader.js b/hot/template-loader.js
@@ -5,13 +5,14 @@ const helpers = require(`./loader-helpers`);
 // Used in non-HMR mode, do nothing
 module.exports = source => source;
 
-module.exports.pitch = function(remainingReq) {
-  if (!helpers.isDevServerHot(this.options)) {
-    return;
-  }
+module.exports.pitch = function(request) {
+  const options = helpers.getOptions(this);
+  const moduleId = loaderUtils.stringifyRequest(this, `!!${request}`);
+  const elemName = helpers.getElemName(this.resourcePath, options);
 
-  const moduleId = loaderUtils.stringifyRequest(this, `!!` + remainingReq);
-  const elemName = helpers.getElemName(this.resourcePath);
+  if (!options.hot) {
+    return `module.exports = require(${moduleId});`;
+  }
 
   return `
     let template = require(${moduleId});
@@ -21,5 +22,5 @@ module.exports.pitch = function(remainingReq) {
       updatePanelElems('${elemName}', elem => true);
     });
     module.exports = function() {return template.apply(this, arguments)};
-    `.trim().replace(/^ {4}/gm, ``);
+  `;
 };
diff --git a/hot/update-css-href.js b/hot/update-css-href.js
diff --git a/hot/update-panel-elems.js b/hot/update-panel-elems.js
@@ -25,8 +25,8 @@ module.exports = function updatePanelElems(elemName, updateFn) {
 
   for (const elem of elems) {
     if (updateFn.call(null, elem)) {
-      const update = elem._update || elem.update;
-      numUpdated += update.apply(elem) ? 1 : 0;
+      numUpdated++;
+      (elem._update || elem.update).apply(elem);
     }
   }
 

diff --git a/hot/update-style.js b/hot/update-style.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "loader-utils": "1.1.0",
     "lodash.pick": "4.4.0",
     "raf": "3.2.0",
+    "schema-utils": "1.0.0",
     "snabbdom": "0.6.2",
     "snabbdom-delayed-class": "0.1.1",
     "webcomponent": "1.2.1"