Fix HMR bugs #7514

devongovett · 2022-01-01T22:48:01Z

Fixes Neither HMR nor page reload is working for helper functions imported in more than one component #7386. Fixes Hot reload only reload one line of parents #3112. Previously, we stopped traversing if any parent accepted the update. We also collect a list of assets that need to be re-executed during this process, and if there were multiple parents of an asset, only one path may be added. Now, we traverse breadth first rather than depth first, and ensure that all ancestries of an asset accept an update, and otherwise reload the whole page.
Fixes HMR only updates first component type when shared local dependency is saved #4801
Fixes Parcel does not reload when module is not accepted #7307. Fixes Regression: HMR issue with SolidJS and Parcel 2.0.0 release #7171. Fixes Parcel 2.0.0 not reloading page on change anymore (Parcel 2.0.0-rc.0 still works fine) #7241. Fixes Parcel 2: Browser is not updated when the source changes #7409. This was a regression from 7468864, where we assumed that if an asset has no parents then it is new and we should not perform a full page reload since the dependent asset may accept the update. This logic is incorrect, because entry assets also have no parents. Therefore, changing the entry asset caused the page not to be reloaded properly. Now, we instead check if the module exists in the cache already. However, this requires properly deleting orphaned assets when a dependency is removed so that when adding an asset back that was previously removed we also don't trigger a full page reload.

Possibly also fixes #6685, but I couldn't find a reproduction in that issue that didn't already work...

height · 2022-01-01T22:48:02Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

parcel-benchmark · 2022-01-01T23:23:44Z

Benchmark Results

Kitchen Sink ✅

Timings

Description	Time	Difference
Cold	2.56s	+146.00ms ⚠️
Cached	414.00ms	+35.00ms ⚠️

Cold Bundles

Bundle	Size	Difference	Time	Difference
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	738.00ms	+41.00ms ⚠️
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	746.00ms	+48.00ms ⚠️
dist/modern/parcel.7cdb0fad.webp	102.94kb	+0.00b	746.00ms	+48.00ms ⚠️
dist/legacy/index.0a5c751e.js	1.59kb	+0.00b	1.08s	+75.00ms ⚠️
dist/legacy/index.8aaa89c9.js	1.20kb	+0.00b	1.08s	+75.00ms ⚠️
dist/modern/index.6be20f01.js	1.13kb	+0.00b	1.08s	+75.00ms ⚠️
dist/legacy/index.html	826.00b	+0.00b	1.25s	+70.00ms ⚠️
dist/modern/index.html	749.00b	+0.00b	1.25s	+70.00ms ⚠️
dist/legacy/index.c1bc86aa.css	94.00b	+0.00b	1.42s	+86.00ms ⚠️
dist/modern/index.57a95cbe.css	94.00b	+0.00b	1.41s	+83.00ms ⚠️

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	767.00ms	+84.00ms ⚠️
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	769.00ms	+83.00ms ⚠️
dist/modern/parcel.7cdb0fad.webp	102.94kb	+0.00b	768.00ms	+81.00ms ⚠️
dist/legacy/index.0a5c751e.js	1.59kb	+0.00b	1.12s	+95.00ms ⚠️
dist/legacy/index.8aaa89c9.js	1.20kb	+0.00b	1.12s	+96.00ms ⚠️
dist/modern/index.6be20f01.js	1.13kb	+0.00b	1.12s	+97.00ms ⚠️
dist/legacy/index.html	826.00b	+0.00b	1.31s	+115.00ms ⚠️
dist/modern/index.html	749.00b	+0.00b	1.31s	+115.00ms ⚠️
dist/legacy/index.c1bc86aa.css	94.00b	+0.00b	1.50s	+156.00ms ⚠️
dist/modern/index.57a95cbe.css	94.00b	+0.00b	1.50s	+157.00ms ⚠️

React HackerNews ✅

Timings

Description	Time	Difference
Cold	12.02s	-170.00ms
Cached	507.00ms	-37.00ms 🚀

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

AtlasKit Editor ✅

Timings

Description	Time	Difference
Cold	1.29m	-595.00ms
Cached	1.73s	+211.00ms ⚠️

Cold Bundles

Bundle	Size	Difference	Time	Difference
dist/editorView.124f5fc0.js	594.92kb	+0.00b	57.96s	+13.71s ⚠️
dist/popup.64bc9a82.js	209.67kb	+0.00b	57.97s	+13.73s ⚠️
dist/Toolbar.1af0e801.js	107.23kb	+0.00b	57.96s	+13.71s ⚠️
dist/Modal.cd71eaf3.js	45.33kb	+0.00b	57.97s	+13.73s ⚠️
dist/ui.5d3f7adc.js	14.94kb	+0.00b	57.97s	+13.72s ⚠️
dist/smartMediaEditor.48c8cf63.js	13.25kb	+0.00b	57.96s	+13.71s ⚠️
dist/dropzone.39132d0c.js	12.16kb	+0.00b	57.95s	+13.71s ⚠️
dist/EmojiPickerComponent.0482d6c0.js	3.73kb	+0.00b	57.97s	+13.72s ⚠️
dist/dropzone.55bef257.js	3.29kb	+0.00b	57.97s	+13.73s ⚠️
dist/clipboard.df70240c.js	2.93kb	+0.00b	57.95s	+13.71s ⚠️
dist/ResourcedEmojiComponent.667554b4.js	2.12kb	+0.00b	57.97s	+13.72s ⚠️
dist/browser.4e039ed7.js	1.69kb	+0.00b	57.96s	+13.71s ⚠️
dist/media-card-analytics-error-boundary.c718a9a7.js	1.12kb	+0.00b	57.95s	+13.71s ⚠️
dist/media-picker-analytics-error-boundary.8b2547e5.js	966.00b	+0.00b	57.95s	+13.71s ⚠️
dist/simpleHasher.fc0d6100.js	643.00b	+0.00b	57.97s	+13.72s ⚠️

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/editorView.af442747.js	594.92kb	+0.00b	43.49s	-16.10s 🚀
dist/popup.64bc9a82.js	209.67kb	+0.00b	43.49s	-16.10s 🚀
dist/Toolbar.1af0e801.js	107.23kb	+0.00b	43.49s	-16.10s 🚀
dist/Modal.cd71eaf3.js	45.33kb	+0.00b	43.49s	-16.10s 🚀
dist/ui.5d3f7adc.js	14.94kb	+0.00b	43.50s	-16.08s 🚀
dist/smartMediaEditor.48c8cf63.js	13.25kb	+0.00b	43.49s	-16.10s 🚀
dist/dropzone.39132d0c.js	12.16kb	+0.00b	43.49s	-16.10s 🚀
dist/EmojiPickerComponent.0482d6c0.js	3.73kb	+0.00b	43.50s	-16.08s 🚀
dist/dropzone.55bef257.js	3.29kb	+0.00b	43.49s	-16.10s 🚀
dist/clipboard.df70240c.js	2.93kb	+0.00b	43.49s	-16.10s 🚀
dist/ResourcedEmojiComponent.667554b4.js	2.12kb	+0.00b	43.50s	-16.08s 🚀
dist/browser.4e039ed7.js	1.69kb	+0.00b	43.49s	-16.10s 🚀
dist/media-card-analytics-error-boundary.c718a9a7.js	1.12kb	+0.00b	43.49s	-16.10s 🚀
dist/media-picker-analytics-error-boundary.8b2547e5.js	966.00b	+0.00b	43.49s	-16.10s 🚀
dist/simpleHasher.fc0d6100.js	643.00b	+0.00b	43.50s	-16.08s 🚀

Three.js ✅

Timings

Description	Time	Difference
Cold	8.56s	+201.00ms
Cached	451.00ms	+10.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/Three.js	579.68kb	+0.00b	5.88s	-399.00ms 🚀

Click here to view a detailed benchmark overview.

mischnic · 2022-01-02T10:13:33Z

packages/runtimes/hmr/src/loaders/hmr-runtime.js

+  return accepted;
+}
+
+function hmrAcceptCheckOne(


So I guess the idea was that hmrAcceptCheck does the parent traversal and hmrAcceptCheckOne just checks if the single asset accepts, without the ancestry? But hmrAcceptCheckOne still calls hmrAcceptCheck, is that intentional?

I think it should be ok because it only happens for the initial bundle, not when finding parents (because depsByBundle is null then).

Systemcluster · 2022-01-03T19:09:48Z

Is this PR included in parcel 2.0.0-nightly.961 / @parcel/runtime-browser-hmr 2.0.0-nightly.963?

mischnic · 2022-01-03T19:14:31Z

Yes

Nikruto · 2022-01-03T20:49:20Z

import React from "react";
import { render } from "react-dom";
import "./index.css";

render(<div>Heyyo</div>, document.getElementById("root"));

using 2.0.0-nightly.961 and hmr still not working for css

devongovett · 2022-01-03T22:10:57Z

@Nikruto your example works fine for me

devongovett added 2 commits January 1, 2022 17:29

Fix HMR bugs

ccdb688

Merge branch 'v2' of github.com:parcel-bundler/parcel into hmr-fix

ef9acee

devongovett added 2 commits January 1, 2022 17:48

Remove .only

353d8e0

cleanup

3017e3a

Fix test

ed983a9

mischnic reviewed Jan 2, 2022

View reviewed changes

mischnic approved these changes Jan 2, 2022

View reviewed changes

devongovett merged commit 6956600 into v2 Jan 2, 2022

devongovett deleted the hmr-fix branch January 2, 2022 23:05

lucaseverett mentioned this pull request Jan 3, 2022

HMR Issue with Parcel 2.0.0 release solidjs/solid#693

Closed

andreafdaf mentioned this pull request Jan 26, 2022

Parcel 2: HMR Broken? #6685

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix HMR bugs #7514

Fix HMR bugs #7514

devongovett commented Jan 1, 2022 •

edited by mischnic

height bot commented Jan 1, 2022

parcel-benchmark commented Jan 1, 2022 •

edited

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

mischnic Jan 2, 2022

devongovett Jan 2, 2022

Systemcluster commented Jan 3, 2022

mischnic commented Jan 3, 2022

Nikruto commented Jan 3, 2022 •

edited

devongovett commented Jan 3, 2022

Fix HMR bugs #7514

Fix HMR bugs #7514

Conversation

devongovett commented Jan 1, 2022 • edited by mischnic

height bot commented Jan 1, 2022

parcel-benchmark commented Jan 1, 2022 • edited

Benchmark Results

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

mischnic Jan 2, 2022

Choose a reason for hiding this comment

devongovett Jan 2, 2022

Choose a reason for hiding this comment

Systemcluster commented Jan 3, 2022

mischnic commented Jan 3, 2022

Nikruto commented Jan 3, 2022 • edited

devongovett commented Jan 3, 2022

devongovett commented Jan 1, 2022 •

edited by mischnic

parcel-benchmark commented Jan 1, 2022 •

edited

Nikruto commented Jan 3, 2022 •

edited