refactor: code (#404)

webpack-contrib · Jul 31, 2019 · ee17a77 · ee17a77
1 parent c784f74
commit ee17a77
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 149 deletions.
diff --git a/src/index.js b/src/index.js
@@ -30,71 +30,62 @@ module.exports.pitch = function loader(request) {
     insertInto = `"${options.insertInto}"`;
   }
 
-  const hmr = [
-    // Hot Module Replacement,
-    'if(module.hot) {',
-    // When the styles change, update the <style> tags
-    `	module.hot.accept(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )}, function() {`,
-    `		var newContent = require(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )});`,
-    '',
-    "		if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
-    '',
-    '		var locals = (function(a, b) {',
-    '			var key, idx = 0;',
-    '',
-    '			for(key in a) {',
-    '				if(!b || a[key] !== b[key]) return false;',
-    '				idx++;',
-    '			}',
-    '',
-    '			for(key in b) idx--;',
-    '',
-    '			return idx === 0;',
-    '		}(content.locals, newContent.locals));',
-    '',
-    // This error is caught and not shown and causes a full reload
-    "		if(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');",
-    '',
-    '		update(newContent);',
-    '	});',
-    '',
-    // When the module is disposed, remove the <style> tags
-    '	module.hot.dispose(function() { update(); });',
-    '}',
-  ].join('\n');
-
-  return [
-    // Style Loader
-    // Adds CSS to the DOM by adding a <style> tag
-    '',
-    // Load styles
-    `var content = require(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )});`,
-    '',
-    "if(typeof content === 'string') content = [[module.id, content, '']];",
-    '',
-    'var insertInto;',
-    '',
-    `var options = ${JSON.stringify(options)}`,
-    '',
-    `options.insertInto = ${insertInto};`,
-    '',
-    // Add styles to the DOM
-    `var update = require(${loaderUtils.stringifyRequest(
-      this,
-      `!${path.join(__dirname, 'runtime/addStyles.js')}`
-    )})(content, options);`,
-    '',
-    'if(content.locals) module.exports = content.locals;',
-    '',
-    this.hot ? hmr : '',
-  ].join('\n');
+  const hmrCode = `
+if (module.hot) {
+  module.hot.accept(
+    ${loaderUtils.stringifyRequest(this, `!!${request}`)}, 
+    function() {
+      var newContent = require(${loaderUtils.stringifyRequest(
+        this,
+        `!!${request}`
+      )});
+
+      if (typeof newContent === 'string') 
+        newContent = [[module.id, newContent, '']];
+
+      var locals = (function(a, b) {
+        var key, 
+          idx = 0;
+
+        for (key in a) {
+          if(!b || a[key] !== b[key]) return false;
+          idx++;
+        }
+
+        for (key in b) idx--;
+
+        return idx === 0;
+      }(content.locals, newContent.locals));
+
+      if (!locals) 
+        throw new Error('Aborting CSS HMR due to changed css-modules locals.');
+
+      update(newContent);
+    }
+  );
+
+  module.hot.dispose(function() { 
+    update(); 
+  });
+}`;
+
+  return `
+var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
+
+if (typeof content === 'string') content = [[module.id, content, '']];
+
+var insertInto;
+
+var options = ${JSON.stringify(options)}
+
+options.insertInto = ${insertInto};
+
+var update = require(${loaderUtils.stringifyRequest(
+    this,
+    `!${path.join(__dirname, 'runtime/addStyles.js')}`
+  )})(content, options);
+
+if (content.locals) module.exports = content.locals;
+${this.hot ? hmrCode : ''}
+`;
 };
diff --git a/src/url-loader.js b/src/url-loader.js
@@ -15,31 +15,26 @@ module.exports.pitch = function loader(request) {
     baseDataPath: 'options',
   });
 
-  const hmr = [
-    // Hot Module Replacement
-    'if(module.hot) {',
-    `  module.hot.accept(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )}, function() {`,
-    `    update(require(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )}));`,
-    '  });',
-    '',
-    '  module.hot.dispose(function() { update(); });',
-    '}',
-  ].join('\n');
+  const hmrCode = `
+if (module.hot) {  
+  module.hot.accept(
+    ${loaderUtils.stringifyRequest(this, `!!${request}`)}, 
+    function() {
+      update(require(${loaderUtils.stringifyRequest(this, `!!${request}`)}));
+    }
+  );
+    
+  module.hot.dispose(function() { 
+    update(); 
+  });
+}`;
 
-  return [
-    // Adds some reference to a CSS file to the DOM by adding a <link> tag
-    `var update = require(${loaderUtils.stringifyRequest(
-      this,
-      `!${path.join(__dirname, 'runtime/addStyleUrl.js')}`
-    )})(`,
-    `  require(${loaderUtils.stringifyRequest(this, `!!${request}`)})`,
-    `, ${JSON.stringify(options)});`,
-    this.hot ? hmr : '',
-  ].join('\n');
+  return `var update = require(${loaderUtils.stringifyRequest(
+    this,
+    `!${path.join(__dirname, 'runtime/addStyleUrl.js')}`
+  )})(require(${loaderUtils.stringifyRequest(
+    this,
+    `!!${request}`
+  )}), ${JSON.stringify(options)});
+  ${this.hot ? hmrCode : ''}`;
 };
diff --git a/src/useable-loader.js b/src/useable-loader.js
@@ -30,63 +30,58 @@ module.exports.pitch = function loader(request) {
     insertInto = `"${options.insertInto}"`;
   }
 
-  const hmr = [
-    // Hot Module Replacement
-    'if(module.hot) {',
-    '	var lastRefs = module.hot.data && module.hot.data.refs || 0;',
-    '',
-    '	if(lastRefs) {',
-    '		exports.ref();',
-    '		if(!content.locals) {',
-    '			refs = lastRefs;',
-    '		}',
-    '	}',
-    '',
-    '	if(!content.locals) {',
-    '		module.hot.accept();',
-    '	}',
-    '',
-    '	module.hot.dispose(function(data) {',
-    '		data.refs = content.locals ? 0 : refs;',
-    '',
-    '		if(dispose) {',
-    '			dispose();',
-    '		}',
-    '	});',
-    '}',
-  ].join('\n');
+  const hmrCode = `
+if (module.hot) {
+  var lastRefs = module.hot.data && module.hot.data.refs || 0; 
+  
+  if (lastRefs) {
+    exports.ref();
+    if (!content.locals) {
+      refs = lastRefs;
+    }
+  }
+  
+  if (!content.locals) {
+    module.hot.accept();
+  } 
+  
+  module.hot.dispose(function(data) {
+    data.refs = content.locals ? 0 : refs;
+  
+    if (dispose) {
+      dispose();
+    }
+  });
+}`;
 
-  return [
-    'var refs = 0;',
-    'var dispose;',
-    `var content = require(${loaderUtils.stringifyRequest(
-      this,
-      `!!${request}`
-    )});`,
-    `var options = ${JSON.stringify(options)};`,
-    `options.insertInto = ${insertInto};`,
-    '',
-    "if(typeof content === 'string') content = [[module.id, content, '']];",
-    // Export CSS Modules
-    'if(content.locals) exports.locals = content.locals;',
-    '',
-    'exports.use = exports.ref = function() {',
-    'if(!(refs++)) {',
-    `  dispose = require(${loaderUtils.stringifyRequest(
+  return `
+var refs = 0;
+var dispose;
+var content = require(${loaderUtils.stringifyRequest(this, `!!${request}`)});
+var options = ${JSON.stringify(options)};
+
+options.insertInto = ${insertInto};
+    
+if (typeof content === 'string') content = [[module.id, content, '']];
+if (content.locals) exports.locals = content.locals;
+
+exports.use = exports.ref = function() {
+  if (!(refs++)) {
+    dispose = require(${loaderUtils.stringifyRequest(
       this,
       `!${path.join(__dirname, 'runtime/addStyles.js')}`
-    )})(content, options);`,
-    '}',
-    '',
-    ' return exports;',
-    '};',
-    '',
-    'exports.unuse = exports.unref = function() {',
-    '  if(refs > 0 && !(--refs)) {',
-    '    dispose();',
-    '    dispose = null;',
-    '  }',
-    '};',
-    this.hot ? hmr : '',
-  ].join('\n');
+    )})(content, options);
+  }
+
+ return exports;
+};
+
+exports.unuse = exports.unref = function() {
+  if (refs > 0 && !--refs) {
+    dispose();
+    dispose = null;
+  }
+};
+${this.hot ? hmrCode : ''}
+`;
 };