hotModuleReplacement.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. "use strict";
  2. /* eslint-env browser */
  3. /*
  4. eslint-disable
  5. no-console,
  6. func-names
  7. */
  8. var normalizeUrl = require('normalize-url');
  9. var srcByModuleId = Object.create(null);
  10. var noDocument = typeof document === 'undefined';
  11. var forEach = Array.prototype.forEach;
  12. function debounce(fn, time) {
  13. var timeout = 0;
  14. return function () {
  15. var self = this; // eslint-disable-next-line prefer-rest-params
  16. var args = arguments;
  17. var functionCall = function functionCall() {
  18. return fn.apply(self, args);
  19. };
  20. clearTimeout(timeout);
  21. timeout = setTimeout(functionCall, time);
  22. };
  23. }
  24. function noop() {}
  25. function getCurrentScriptUrl(moduleId) {
  26. var src = srcByModuleId[moduleId];
  27. if (!src) {
  28. if (document.currentScript) {
  29. src = document.currentScript.src;
  30. } else {
  31. var scripts = document.getElementsByTagName('script');
  32. var lastScriptTag = scripts[scripts.length - 1];
  33. if (lastScriptTag) {
  34. src = lastScriptTag.src;
  35. }
  36. }
  37. srcByModuleId[moduleId] = src;
  38. }
  39. return function (fileMap) {
  40. if (!src) {
  41. return null;
  42. }
  43. var splitResult = src.split(/([^\\/]+)\.js$/);
  44. var filename = splitResult && splitResult[1];
  45. if (!filename) {
  46. return [src.replace('.js', '.css')];
  47. }
  48. if (!fileMap) {
  49. return [src.replace('.js', '.css')];
  50. }
  51. return fileMap.split(',').map(function (mapRule) {
  52. var reg = new RegExp("".concat(filename, "\\.js$"), 'g');
  53. return normalizeUrl(src.replace(reg, "".concat(mapRule.replace(/{fileName}/g, filename), ".css")), {
  54. stripWWW: false
  55. });
  56. });
  57. };
  58. }
  59. function updateCss(el, url) {
  60. if (!url) {
  61. if (!el.href) {
  62. return;
  63. } // eslint-disable-next-line
  64. url = el.href.split('?')[0];
  65. }
  66. if (!isUrlRequest(url)) {
  67. return;
  68. }
  69. if (el.isLoaded === false) {
  70. // We seem to be about to replace a css link that hasn't loaded yet.
  71. // We're probably changing the same file more than once.
  72. return;
  73. }
  74. if (!url || !(url.indexOf('.css') > -1)) {
  75. return;
  76. } // eslint-disable-next-line no-param-reassign
  77. el.visited = true;
  78. var newEl = el.cloneNode();
  79. newEl.isLoaded = false;
  80. newEl.addEventListener('load', function () {
  81. newEl.isLoaded = true;
  82. el.parentNode.removeChild(el);
  83. });
  84. newEl.addEventListener('error', function () {
  85. newEl.isLoaded = true;
  86. el.parentNode.removeChild(el);
  87. });
  88. newEl.href = "".concat(url, "?").concat(Date.now());
  89. if (el.nextSibling) {
  90. el.parentNode.insertBefore(newEl, el.nextSibling);
  91. } else {
  92. el.parentNode.appendChild(newEl);
  93. }
  94. }
  95. function getReloadUrl(href, src) {
  96. var ret; // eslint-disable-next-line no-param-reassign
  97. href = normalizeUrl(href, {
  98. stripWWW: false
  99. }); // eslint-disable-next-line array-callback-return
  100. src.some(function (url) {
  101. if (href.indexOf(src) > -1) {
  102. ret = url;
  103. }
  104. });
  105. return ret;
  106. }
  107. function reloadStyle(src) {
  108. var elements = document.querySelectorAll('link');
  109. var loaded = false;
  110. forEach.call(elements, function (el) {
  111. if (!el.href) {
  112. return;
  113. }
  114. var url = getReloadUrl(el.href, src);
  115. if (!isUrlRequest(url)) {
  116. return;
  117. }
  118. if (el.visited === true) {
  119. return;
  120. }
  121. if (url) {
  122. updateCss(el, url);
  123. loaded = true;
  124. }
  125. });
  126. return loaded;
  127. }
  128. function reloadAll() {
  129. var elements = document.querySelectorAll('link');
  130. forEach.call(elements, function (el) {
  131. if (el.visited === true) {
  132. return;
  133. }
  134. updateCss(el);
  135. });
  136. }
  137. function isUrlRequest(url) {
  138. // An URL is not an request if
  139. // It is not http or https
  140. if (!/^https?:/i.test(url)) {
  141. return false;
  142. }
  143. return true;
  144. }
  145. module.exports = function (moduleId, options) {
  146. if (noDocument) {
  147. console.log('no window.document found, will not HMR CSS');
  148. return noop;
  149. }
  150. var getScriptSrc = getCurrentScriptUrl(moduleId);
  151. function update() {
  152. var src = getScriptSrc(options.filename);
  153. var reloaded = reloadStyle(src);
  154. if (options.locals) {
  155. console.log('[HMR] Detected local css modules. Reload all css');
  156. reloadAll();
  157. return;
  158. }
  159. if (reloaded && !options.reloadAll) {
  160. console.log('[HMR] css reload %s', src.join(' '));
  161. } else {
  162. console.log('[HMR] Reload all css');
  163. reloadAll();
  164. }
  165. }
  166. return debounce(update, 50);
  167. };