RefreshUtils.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /* global __webpack_require__ */
  2. const Refresh = require('react-refresh/runtime');
  3. /**
  4. * Extracts exports from a webpack module object.
  5. * @param {string} moduleId A Webpack module ID.
  6. * @returns {*} An exports object from the module.
  7. */
  8. function getModuleExports(moduleId) {
  9. return __webpack_require__.c[moduleId].exports;
  10. }
  11. /**
  12. * Calculates the signature of a React refresh boundary.
  13. * If this signature changes, it's unsafe to accept the boundary.
  14. *
  15. * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L795-L816).
  16. * @param {*} moduleExports A Webpack module exports object.
  17. * @returns {string[]} A React refresh boundary signature array.
  18. */
  19. function getReactRefreshBoundarySignature(moduleExports) {
  20. const signature = [];
  21. signature.push(Refresh.getFamilyByType(moduleExports));
  22. if (moduleExports == null || typeof moduleExports !== 'object') {
  23. // Exit if we can't iterate over exports.
  24. return signature;
  25. }
  26. for (let key in moduleExports) {
  27. if (key === '__esModule') {
  28. continue;
  29. }
  30. signature.push(key);
  31. signature.push(Refresh.getFamilyByType(moduleExports[key]));
  32. }
  33. return signature;
  34. }
  35. /**
  36. * Creates a helper that performs a delayed React refresh.
  37. * @returns {enqueueUpdate} A debounced React refresh function.
  38. */
  39. function createDebounceUpdate() {
  40. /**
  41. * A cached setTimeout handler.
  42. * @type {number | undefined}
  43. */
  44. let refreshTimeout;
  45. /**
  46. * Performs react refresh on a delay and clears the error overlay.
  47. * @param {function(): void} callback
  48. * @returns {void}
  49. */
  50. function enqueueUpdate(callback) {
  51. if (typeof refreshTimeout === 'undefined') {
  52. refreshTimeout = setTimeout(function () {
  53. refreshTimeout = undefined;
  54. Refresh.performReactRefresh();
  55. callback();
  56. }, 30);
  57. }
  58. }
  59. return enqueueUpdate;
  60. }
  61. /**
  62. * Checks if all exports are likely a React component.
  63. *
  64. * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L748-L774).
  65. * @param {*} moduleExports A Webpack module exports object.
  66. * @returns {boolean} Whether the exports are React component like.
  67. */
  68. function isReactRefreshBoundary(moduleExports) {
  69. if (Refresh.isLikelyComponentType(moduleExports)) {
  70. return true;
  71. }
  72. if (moduleExports === undefined || moduleExports === null || typeof moduleExports !== 'object') {
  73. // Exit if we can't iterate over exports.
  74. return false;
  75. }
  76. let hasExports = false;
  77. let areAllExportsComponents = true;
  78. for (let key in moduleExports) {
  79. hasExports = true;
  80. // This is the ES Module indicator flag
  81. if (key === '__esModule') {
  82. continue;
  83. }
  84. // We can (and have to) safely execute getters here,
  85. // as Webpack manually assigns harmony exports to getters,
  86. // without any side-effects attached.
  87. // Ref: https://github.com/webpack/webpack/blob/b93048643fe74de2a6931755911da1212df55897/lib/MainTemplate.js#L281
  88. const exportValue = moduleExports[key];
  89. if (!Refresh.isLikelyComponentType(exportValue)) {
  90. areAllExportsComponents = false;
  91. }
  92. }
  93. return hasExports && areAllExportsComponents;
  94. }
  95. /**
  96. * Checks if exports are likely a React component and registers them.
  97. *
  98. * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/febdba2383113c88296c61e28e4ef6a7f4939fda/packages/metro/src/lib/polyfills/require.js#L818-L835).
  99. * @param {*} moduleExports A Webpack module exports object.
  100. * @param {string} moduleId A Webpack module ID.
  101. * @returns {void}
  102. */
  103. function registerExportsForReactRefresh(moduleExports, moduleId) {
  104. if (Refresh.isLikelyComponentType(moduleExports)) {
  105. // Register module.exports if it is likely a component
  106. Refresh.register(moduleExports, moduleId + ' %exports%');
  107. }
  108. if (moduleExports === undefined || moduleExports === null || typeof moduleExports !== 'object') {
  109. // Exit if we can't iterate over the exports.
  110. return;
  111. }
  112. for (let key in moduleExports) {
  113. // Skip registering the ES Module indicator
  114. if (key === '__esModule') {
  115. continue;
  116. }
  117. const exportValue = moduleExports[key];
  118. if (Refresh.isLikelyComponentType(exportValue)) {
  119. const typeID = moduleId + ' %exports% ' + key;
  120. Refresh.register(exportValue, typeID);
  121. }
  122. }
  123. }
  124. /**
  125. * Compares previous and next module objects to check for mutated boundaries.
  126. *
  127. * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L776-L792).
  128. * @param {*} prevExports The current Webpack module exports object.
  129. * @param {*} nextExports The next Webpack module exports object.
  130. * @returns {boolean} Whether the React refresh boundary should be invalidated.
  131. */
  132. function shouldInvalidateReactRefreshBoundary(prevExports, nextExports) {
  133. const prevSignature = getReactRefreshBoundarySignature(prevExports);
  134. const nextSignature = getReactRefreshBoundarySignature(nextExports);
  135. if (prevSignature.length !== nextSignature.length) {
  136. return true;
  137. }
  138. for (let i = 0; i < nextSignature.length; i += 1) {
  139. if (prevSignature[i] !== nextSignature[i]) {
  140. return true;
  141. }
  142. }
  143. return false;
  144. }
  145. module.exports = Object.freeze({
  146. enqueueUpdate: createDebounceUpdate(),
  147. getModuleExports: getModuleExports,
  148. isReactRefreshBoundary: isReactRefreshBoundary,
  149. shouldInvalidateReactRefreshBoundary: shouldInvalidateReactRefreshBoundary,
  150. registerExportsForReactRefresh: registerExportsForReactRefresh,
  151. });