diff --git a/CHANGELOG.md b/CHANGELOG.md index 7350f216e9..aa40be5198 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ From version 2.6.0, the sections in this file adhere to the [keep a changelog](h * [#1807](https://github.com/Shopify/shopify-cli/pull/1807): Fix `--live` parameter, it should not imply `--allow-live` in the `theme push` command * [#1812](https://github.com/Shopify/shopify-cli/pull/1812): App creation with Rails 7 * [#1821](https://github.com/Shopify/shopify-cli/pull/1821): Fix Shopify hosted fonts to load via the local preview URL +* [#1830](https://github.com/Shopify/shopify-cli/pull/1830): Fix hot reload when users update many files "simultaneously" ## Version 2.7.2 ### Fixed diff --git a/lib/shopify_cli/theme/dev_server/hot-reload.js b/lib/shopify_cli/theme/dev_server/hot-reload.js index bd90edafbe..072ac57798 100644 --- a/lib/shopify_cli/theme/dev_server/hot-reload.js +++ b/lib/shopify_cli/theme/dev_server/hot-reload.js @@ -17,19 +17,35 @@ connect(); + function isRefreshRequired(files) { + return files.some((file) => !isCssFile(file) && !isSectionFile(file)); + } + + function refreshFile(file) { + if (isCssFile(file)) { + reloadCssFile(file); + return; + } + + if (isSectionFile(file)) { + reloadSection(file); + return; + } + } + + function refreshPage() { + console.log('[HotReload] Refreshing entire page'); + window.location.reload(); + } + function handleUpdate(message) { var data = JSON.parse(message.data); + var modifiedFiles = data.modified; - // Assume only one file is modified at a time - var modified = data.modified[0]; - - if (isCssFile(modified)) { - reloadCssFile(modified) - } else if (isSectionFile(modified)) { - reloadSection(modified); + if (isRefreshRequired(modifiedFiles)) { + refreshPage(); } else { - console.log(`[HotReload] Refreshing entire page`); - window.location.reload(); + modifiedFiles.forEach(refreshFile); } }