187 lines
4 KiB
JavaScript
187 lines
4 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
/* global document, window */
|
||
|
|
||
|
/*
|
||
|
eslint-disable
|
||
|
func-names,
|
||
|
no-var,
|
||
|
vars-on-top,
|
||
|
prefer-arrow-func,
|
||
|
prefer-rest-params,
|
||
|
prefer-arrow-callback,
|
||
|
prefer-template,
|
||
|
prefer-destructuring,
|
||
|
no-param-reassign,
|
||
|
no-console
|
||
|
*/
|
||
|
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) {
|
||
|
console.log('no window.document found, will not HMR CSS');
|
||
|
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 (options.locals) {
|
||
|
console.log('[HMR] Detected local css modules. Reload all css');
|
||
|
reloadAll();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (reloaded && !options.reloadAll) {
|
||
|
console.log('[HMR] css reload %s', src.join(' '));
|
||
|
} else {
|
||
|
console.log('[HMR] Reload all css');
|
||
|
reloadAll();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return debounce(update, 50);
|
||
|
};
|