diff --git a/Libraries/Core/setUpReactRefresh.js b/Libraries/Core/setUpReactRefresh.js index f68b8cfc77d..ffd698c50ab 100644 --- a/Libraries/Core/setUpReactRefresh.js +++ b/Libraries/Core/setUpReactRefresh.js @@ -17,22 +17,35 @@ if (__DEV__) { throw new Error('Could not find the reload() implementation.'); } - if ((module: any).hot) { - // This needs to run before the renderer initializes. - const ReactRefreshRuntime = require('react-refresh/runtime'); - ReactRefreshRuntime.injectIntoGlobalHook(global); + // This needs to run before the renderer initializes. + const ReactRefreshRuntime = require('react-refresh/runtime'); + ReactRefreshRuntime.injectIntoGlobalHook(global); - (require: any).Refresh = { - // Full Refresh - performFullRefresh() { + const Refresh = { + // This can be set from the app as a workaround + // if you really want a full reload on every change: + // if (__DEV__) require.Refresh.forceFullRefresh = true; + forceFullRefresh: false, + + performFullRefresh() { + NativeDevSettings.reload(); + }, + + createSignatureFunctionForTransform: + ReactRefreshRuntime.createSignatureFunctionForTransform, + + isLikelyComponentType: ReactRefreshRuntime.isLikelyComponentType, + + register: ReactRefreshRuntime.register, + + performReactRefresh() { + if (Refresh.forceFullRefresh) { NativeDevSettings.reload(); - }, - // React Refresh - createSignatureFunctionForTransform: - ReactRefreshRuntime.createSignatureFunctionForTransform, - isLikelyComponentType: ReactRefreshRuntime.isLikelyComponentType, - register: ReactRefreshRuntime.register, - performReactRefresh: ReactRefreshRuntime.performReactRefresh, - }; - } + } else { + ReactRefreshRuntime.performReactRefresh(); + } + }, + }; + + (require: any).Refresh = Refresh; } diff --git a/Libraries/Utilities/HMRClient.js b/Libraries/Utilities/HMRClient.js index fbe236402df..9e02f9bf2e0 100644 --- a/Libraries/Utilities/HMRClient.js +++ b/Libraries/Utilities/HMRClient.js @@ -130,20 +130,33 @@ Error: ${e.message}`; throw new Error(error); }); - let enableLoadingView = false; + let didFinishInitialUpdate = false; hmrClient.on('connection-done', () => { // Don't show the loading view during the initial update. - enableLoadingView = true; + didFinishInitialUpdate = true; }); + // This is intentionally called lazily, as these values change. + function shouldProvideVisualFeedback() { + return ( + // Until we get "connection-done", messages aren't real edits. + didFinishInitialUpdate && + // If HMR is disabled by the user, we're ignoring updates. + hmrClient.shouldApplyUpdates && + // If full refresh is forced, there's no need to flash the indicator. + // It will be refreshed in a few milliseconds anyway. + !(require: any).Refresh.forceFullRefresh + ); + } + hmrClient.on('update-start', () => { - if (hmrClient.shouldApplyUpdates && enableLoadingView) { + if (shouldProvideVisualFeedback()) { HMRLoadingView.showMessage('Hot Reloading...'); } }); hmrClient.on('update', () => { - if (hmrClient.shouldApplyUpdates) { + if (shouldProvideVisualFeedback()) { if ( Platform.OS === 'ios' && NativeRedBox != null && @@ -161,9 +174,7 @@ Error: ${e.message}`; }); hmrClient.on('update-done', () => { - if (hmrClient.shouldApplyUpdates && enableLoadingView) { - HMRLoadingView.hide(); - } + HMRLoadingView.hide(); }); hmrClient.on('error', data => {