refactor: runtime code (#412)

Author: evilebottnawi

.eslintrc.js

@@ -1,4 +1,28 @@
 module.exports = {
  root: true,
  extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
+ overrides: [
+ {
+ files: ['src/runtime/**/*.js'],
+ env: {
+ browser: true,
+ node: true,
+ },
+ globals: {
+ __webpack_nonce__: 'readonly',
+ },
+ rules: {
+ 'no-plusplus': 'off',
+ 'consistent-return': 'off',
+ 'no-param-reassign': 'off',
+ camelcase: [
+ 'error',
+ { properties: 'never', allow: ['__webpack_nonce__'] },
+ ],
+ // avoid unnecessary `babel` helpers
+ 'prefer-destructuring': 'off',
+ 'prefer-rest-params': 'off',
+ },
+ },
+ ],
 };

src/runtime/injectStylesIntoLinkTag.js

@@ -1,13 +1,10 @@
-/* eslint-env browser */
-/* eslint-disable */
-
-module.exports = function addStyleUrl(url, options) {
+module.exports = function injectStylesIntoLinkTag(url, options) {
  options = options || {};
  options.attributes =
  typeof options.attributes === 'object' ? options.attributes : {};
 
- if (options.attributes.nonce === undefined) {
- var nonce =
+ if (typeof options.attributes.nonce === 'undefined') {
+ const nonce =
  typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 
  if (nonce) {
@@ -29,9 +26,9 @@ module.exports = function addStyleUrl(url, options) {
  head.appendChild(link);
 
  if (module.hot) {
- return (url) => {
- if (typeof url === 'string') {
- link.href = url;
+ return (newUrl) => {
+ if (typeof newUrl === 'string') {
+ link.href = newUrl;
  } else {
  head.removeChild(link);
  }

src/runtime/injectStylesIntoStyleTag.js

@@ -1,41 +1,34 @@
-/* eslint-env browser */
-/* eslint-disable */
+const stylesInDom = {};
 
-var stylesInDom = {};
+const isOldIE = (function isOldIE() {
+ let memo;
 
-var memoize = function(fn) {
- var memo;
-
- return function() {
+ return function memorized() {
  if (typeof memo === 'undefined') {
- memo = fn.apply(this, arguments);
+ // Test for IE <= 9 as proposed by Browserhacks
+ // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+ // Tests for existence of standard globals is to allow style-loader
+ // to operate correctly into non-standard environments
+ // @see https://github.com/webpack-contrib/style-loader/issues/177
+ memo = Boolean(window && document && document.all && !window.atob);
  }
 
  return memo;
  };
-};
-
-var isOldIE = memoize(function() {
- // Test for IE <= 9 as proposed by Browserhacks
- // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
- // Tests for existence of standard globals is to allow style-loader
- // to operate correctly into non-standard environments
- // @see https://github.com/webpack-contrib/style-loader/issues/177
- return window && document && document.all && !window.atob;
-});
+})();
 
-var getTarget = function(target, parent) {
+function getTarget(target, parent) {
  if (parent) {
  return parent.querySelector(target);
  }
 
  return document.querySelector(target);
-};
+}
 
-var getElement = (function() {
- var memo = {};
+const getElement = (function getElement() {
+ const memo = {};
 
- return function(target, parent) {
+ return function memorized(target, parent) {
  // If passing function in options, then use it for resolve "head" element.
  // Useful for Shadow Root style i.e
  // {
@@ -46,7 +39,7 @@ var getElement = (function() {
  }
 
  if (typeof memo[target] === 'undefined') {
- var styleTarget = getTarget.call(this, target, parent);
+ let styleTarget = getTarget.call(this, target, parent);
 
  // Special case to return head of iframe instead of iframe itself
  if (
@@ -70,11 +63,11 @@ var getElement = (function() {
  };
 })();
 
-var singleton = null;
-var singletonCounter = 0;
-var stylesInsertedAtTop = [];
+let singleton = null;
+let singletonCounter = 0;
+const stylesInsertedAtTop = [];
 
-module.exports = function(list, options) {
+module.exports = (list, options) => {
  options = options || {};
 
  options.attributes =
@@ -96,16 +89,16 @@ module.exports = function(list, options) {
  options.insertAt = 'bottom';
  }
 
- var styles = listToStyles(list, options);
+ const styles = listToStyles(list, options);
 
  addStylesToDom(styles, options);
 
  return function update(newList) {
- var mayRemove = [];
+ const mayRemove = [];
 
- for (var i = 0; i < styles.length; i++) {
- var item = styles[i];
- var domStyle = stylesInDom[item.id];
+ for (let i = 0; i < styles.length; i++) {
+ const item = styles[i];
+ const domStyle = stylesInDom[item.id];
 
  if (domStyle) {
  domStyle.refs--;
@@ -114,16 +107,16 @@ module.exports = function(list, options) {
  }
 
  if (newList) {
- var newStyles = listToStyles(newList, options);
+ const newStyles = listToStyles(newList, options);
 
  addStylesToDom(newStyles, options);
  }
 
- for (var i = 0; i < mayRemove.length; i++) {
- var domStyle = mayRemove[i];
+ for (let i = 0; i < mayRemove.length; i++) {
+ const domStyle = mayRemove[i];
 
  if (domStyle.refs === 0) {
- for (var j = 0; j < domStyle.parts.length; j++) {
+ for (let j = 0; j < domStyle.parts.length; j++) {
  domStyle.parts[j]();
  }
 
@@ -134,46 +127,47 @@ module.exports = function(list, options) {
 };
 
 function addStylesToDom(styles, options) {
- for (var i = 0; i < styles.length; i++) {
- var item = styles[i];
- var domStyle = stylesInDom[item.id];
+ for (let i = 0; i < styles.length; i++) {
+ const item = styles[i];
+ const domStyle = stylesInDom[item.id];
+ let j = 0;
 
  if (domStyle) {
  domStyle.refs++;
 
- for (var j = 0; j < domStyle.parts.length; j++) {
+ for (; j < domStyle.parts.length; j++) {
  domStyle.parts[j](item.parts[j]);
  }
 
  for (; j < item.parts.length; j++) {
  domStyle.parts.push(addStyle(item.parts[j], options));
  }
  } else {
- var parts = [];
+ const parts = [];
 
- for (var j = 0; j < item.parts.length; j++) {
+ for (; j < item.parts.length; j++) {
  parts.push(addStyle(item.parts[j], options));
  }
 
- stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts };
+ stylesInDom[item.id] = { id: item.id, refs: 1, parts };
  }
  }
 }
 
 function listToStyles(list, options) {
- var styles = [];
- var newStyles = {};
+ const styles = [];
+ const newStyles = {};
 
- for (var i = 0; i < list.length; i++) {
- var item = list[i];
- var id = options.base ? item[0] + options.base : item[0];
- var css = item[1];
- var media = item[2];
- var sourceMap = item[3];
- var part = { css: css, media: media, sourceMap: sourceMap };
+ for (let i = 0; i < list.length; i++) {
+ const item = list[i];
+ const id = options.base ? item[0] + options.base : item[0];
+ const css = item[1];
+ const media = item[2];
+ const sourceMap = item[3];
+ const part = { css, media, sourceMap };
 
  if (!newStyles[id]) {
- styles.push((newStyles[id] = { id: id, parts: [part] }));
+ styles.push((newStyles[id] = { id, parts: [part] }));
  } else {
  newStyles[id].parts.push(part);
  }
@@ -183,10 +177,10 @@ function listToStyles(list, options) {
 }
 
 function insertStyleElement(options) {
- var style = document.createElement('style');
+ const style = document.createElement('style');
 
- if (options.attributes.nonce === undefined) {
- var nonce =
+ if (typeof options.attributes.nonce === 'undefined') {
+ const nonce =
  typeof __webpack_nonce__ !== 'undefined' ? __webpack_nonce__ : null;
 
  if (nonce) {
@@ -198,7 +192,7 @@ function insertStyleElement(options) {
  style.setAttribute(key, options.attributes[key]);
  });
 
- var target = getElement(options.insertInto);
+ const target = getElement(options.insertInto);
 
  if (!target) {
  throw new Error(
@@ -207,7 +201,7 @@ function insertStyleElement(options) {
  }
 
  if (options.insertAt === 'top') {
- var lastStyleElementInsertedAtTop =
+ const lastStyleElementInsertedAtTop =
  stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
 
  if (!lastStyleElementInsertedAtTop) {
@@ -222,7 +216,7 @@ function insertStyleElement(options) {
  } else if (options.insertAt === 'bottom') {
  target.appendChild(style);
  } else if (typeof options.insertAt === 'object' && options.insertAt.before) {
- var nextSibling = getElement(options.insertAt.before, target);
+ const nextSibling = getElement(options.insertAt.before, target);
 
  target.insertBefore(style, nextSibling);
  } else {
@@ -241,18 +235,20 @@ function removeStyleElement(style) {
 
  style.parentNode.removeChild(style);
 
- var idx = stylesInsertedAtTop.indexOf(style);
+ const idx = stylesInsertedAtTop.indexOf(style);
 
  if (idx >= 0) {
  stylesInsertedAtTop.splice(idx, 1);
  }
 }
 
 function addStyle(obj, options) {
- var style, update, remove, result;
+ let style;
+ let update;
+ let remove;
 
  if (options.singleton) {
- var styleIndex = singletonCounter++;
+ const styleIndex = singletonCounter++;
 
  style = singleton || (singleton = insertStyleElement(options));
 
@@ -262,7 +258,7 @@ function addStyle(obj, options) {
  style = insertStyleElement(options);
 
  update = applyToTag.bind(null, style, options);
- remove = function() {
+ remove = () => {
  removeStyleElement(style);
  };
  }
@@ -287,26 +283,26 @@ function addStyle(obj, options) {
 }
 
 /* istanbul ignore next */
-var replaceText = (function() {
- var textStore = [];
+const replaceText = (function replaceText() {
+ const textStore = [];
 
- return function(index, replacement) {
+ return function replace(index, replacement) {
  textStore[index] = replacement;
 
  return textStore.filter(Boolean).join('\n');
  };
 })();
 
 function applyToSingletonTag(style, index, remove, obj) {
- var css = remove ? '' : obj.css;
+ const css = remove ? '' : obj.css;
 
  // For old IE
  /* istanbul ignore if */
  if (style.styleSheet) {
  style.styleSheet.cssText = replaceText(index, css);
  } else {
- var cssNode = document.createTextNode(css);
- var childNodes = style.childNodes;
+ const cssNode = document.createTextNode(css);
+ const childNodes = style.childNodes;
 
  if (childNodes[index]) {
  style.removeChild(childNodes[index]);
@@ -321,20 +317,18 @@ function applyToSingletonTag(style, index, remove, obj) {
 }
 
 function applyToTag(style, options, obj) {
- var css = obj.css;
- var media = obj.media;
- var sourceMap = obj.sourceMap;
+ let css = obj.css;
+ const media = obj.media;
+ const sourceMap = obj.sourceMap;
 
  if (media) {
  style.setAttribute('media', media);
  }
 
  if (sourceMap && btoa) {
- css +=
- // http://stackoverflow.com/a/26603875
- '\n/*# sourceMappingURL=data:application/json;base64,' +
- btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
- ' */';
+ css += `\n/*# sourceMappingURL=data:application/json;base64,${btoa(
+ unescape(encodeURIComponent(JSON.stringify(sourceMap)))
+ )} */`;
  }
 
  // For old IE

test/helpers/compiler.js

@@ -53,7 +53,7 @@ const output = (config) => {
 export default function(fixture, config = {}, options = {}) {
  // webpack Config
  config = {
- mode: 'development',
+ mode: config.mode || 'development',
  devtool: config.devtool || false,
  context: path.resolve(__dirname, '..', 'fixtures'),
  entry: `./${fixture}`,