123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- "use strict";
- /* eslint-env browser */
- /*
- eslint-disable
- no-console,
- func-names
- */
- /** @typedef {any} TODO */
- var normalizeUrl = require("./normalize-url");
- var srcByModuleId = Object.create(null);
- var noDocument = typeof document === "undefined";
- var forEach = Array.prototype.forEach;
- /**
- * @param {function} fn
- * @param {number} time
- * @returns {(function(): void)|*}
- */
- function debounce(fn, time) {
- var timeout = 0;
- return function () {
- // @ts-ignore
- var self = this;
- // eslint-disable-next-line prefer-rest-params
- var args = arguments;
- var functionCall = function functionCall() {
- return fn.apply(self, args);
- };
- clearTimeout(timeout);
- // @ts-ignore
- timeout = setTimeout(functionCall, time);
- };
- }
- function noop() {}
- /**
- * @param {TODO} moduleId
- * @returns {TODO}
- */
- function getCurrentScriptUrl(moduleId) {
- var src = srcByModuleId[moduleId];
- if (!src) {
- if (document.currentScript) {
- src = /** @type {HTMLScriptElement} */document.currentScript.src;
- } else {
- var scripts = document.getElementsByTagName("script");
- var lastScriptTag = scripts[scripts.length - 1];
- if (lastScriptTag) {
- src = lastScriptTag.src;
- }
- }
- srcByModuleId[moduleId] = src;
- }
- /**
- * @param {string} fileMap
- * @returns {null | string[]}
- */
- 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("".concat(filename, "\\.js$"), "g");
- return normalizeUrl(src.replace(reg, "".concat(mapRule.replace(/{fileName}/g, filename), ".css")));
- });
- };
- }
- /**
- * @param {TODO} el
- * @param {string} [url]
- */
- function updateCss(el, url) {
- if (!url) {
- if (!el.href) {
- return;
- }
- // eslint-disable-next-line
- url = el.href.split("?")[0];
- }
- if (!isUrlRequest( /** @type {string} */url)) {
- return;
- }
- 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;
- }
- // eslint-disable-next-line no-param-reassign
- el.visited = true;
- var newEl = el.cloneNode();
- newEl.isLoaded = false;
- newEl.addEventListener("load", function () {
- if (newEl.isLoaded) {
- return;
- }
- newEl.isLoaded = true;
- el.parentNode.removeChild(el);
- });
- newEl.addEventListener("error", function () {
- if (newEl.isLoaded) {
- return;
- }
- newEl.isLoaded = true;
- el.parentNode.removeChild(el);
- });
- newEl.href = "".concat(url, "?").concat(Date.now());
- if (el.nextSibling) {
- el.parentNode.insertBefore(newEl, el.nextSibling);
- } else {
- el.parentNode.appendChild(newEl);
- }
- }
- /**
- * @param {string} href
- * @param {TODO} src
- * @returns {TODO}
- */
- function getReloadUrl(href, src) {
- var ret;
- // eslint-disable-next-line no-param-reassign
- href = normalizeUrl(href);
- src.some(
- /**
- * @param {string} url
- */
- // eslint-disable-next-line array-callback-return
- function (url) {
- if (href.indexOf(src) > -1) {
- ret = url;
- }
- });
- return ret;
- }
- /**
- * @param {string} [src]
- * @returns {boolean}
- */
- function reloadStyle(src) {
- if (!src) {
- return false;
- }
- var elements = document.querySelectorAll("link");
- var loaded = false;
- forEach.call(elements, function (el) {
- if (!el.href) {
- return;
- }
- var url = getReloadUrl(el.href, src);
- if (!isUrlRequest(url)) {
- return;
- }
- 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);
- });
- }
- /**
- * @param {string} url
- * @returns {boolean}
- */
- function isUrlRequest(url) {
- // An URL is not an request if
- // It is not http or https
- if (!/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(url)) {
- return false;
- }
- return true;
- }
- /**
- * @param {TODO} moduleId
- * @param {TODO} options
- * @returns {TODO}
- */
- module.exports = function (moduleId, options) {
- if (noDocument) {
- console.log("no window.document found, will not HMR CSS");
- return noop;
- }
- 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) {
- console.log("[HMR] css reload %s", src.join(" "));
- } else {
- console.log("[HMR] Reload all css");
- reloadAll();
- }
- }
- return debounce(update, 50);
- };
|