Add --reload option for hard reload on non-CSS assets #443

mattdesl · 2017-12-30T22:01:50Z

With this new --reload option, parcel will trigger hard page reloads on JS and HTML assets, but should continue to inject updates with CSS assets.

See discussion here:
#289

Personally I feel this should be the default rather than opt-in (HMR is not even working currently) but to each their own. 🍻

Otherwise CSS which imports JS for example won’t get added to the JS bundle. Needed for HMR.

…ired by JS in the head

Don’t load them into memory

* patch(hmr): use hostname for WS instantiation * test(hmr): add hostname shim for testing * Move location shim somewhere common

* Add url dependency for serviceWorker.register calls * extract matchesPattern helper * sync SW regexp with matchesPattern arg

* handle app store url scheme * Update scheme regex

…fer (parcel-bundler#380)

…#340) * Fix: Error when scss file is empty parcel-bundler#327 * Return empty string when code is empty * Handling empty files * No need to load in mightHaveDependencies() * mightHaveDependencies doesn't run if this.contents is empty.

* web worker support * fix lint error

TennyZhuang · 2017-12-31T02:15:21Z

src/HMRServer.js

-    if (containsHtmlAsset) {
+    const isReload = this.options.reload;
+    const isReloadAsset = assets.some(asset => {
+      return isReload ? asset.type !== 'css' : asset.type === 'html';


It seems that the isReload condition check can move out of the some loop

devongovett · 2017-12-31T03:41:32Z

Is this option really needed? Could you just hook into the HMR system yourself to do a reload?

in your main JS file:

if (module.hot) {
  module.hot.accept(function () {
    window.location.reload();
  });
}

brandon93s · 2017-12-31T06:40:43Z

+1 on the "is this needed" front. The reload suggestion above works, and building your code to perform a DOM "upsert" (see issue suggestions) also works.

This does however, seem to be desired by quite a few.

xu3u4 · 2018-01-02T16:02:24Z

src/HMRServer.js

-    if (containsHtmlAsset) {
+    const isReload = this.options.reload;
+    const isReloadAsset = assets.some(asset => {
+      return isReload ? asset.type !== 'css' : asset.type === 'html';


Actually I hope the modification for styles can also reload the page, because it is related to DOM.
So I am thinking would it be better to be like isReload ? asset.type === 'js' : (asset.type === 'html' || asset.type === 'css')?

It sounds like you want reload to happen in any situation, so:

const isReloadAsset = isReload ? true : assets.some(a => a.type === 'html');

During the PR I assumed it was desirable to have CSS apply without page reloads, since it doesn't depend on JavaScript state and the like. But because it's using import, maybe it runs into the same problems, and it's better to just hard reload the page?

Oh yes. Maybe hot reload every time is more like what I need 😆

xu3u4 · 2018-01-02T16:23:30Z

Agree.
The HMR only appends the new content, which means the old content still exists.
So the number of times we save our js module, the same number of different old version script exists. And when the corresponding action is triggered, it runs through all the appended scripts, from the oldest to the newest.
I think it is a little bit odd.
Adding --reload might be a quicker and safer solution.

OrganicPanda · 2018-03-07T18:00:18Z

Looks like this has been approved but has fallen in to conflict. Would love to see this merged though - @mattdesl do you have any time to fix the conflicts?

filipesabella · 2018-05-14T23:41:47Z

hey @mattdesl if you feel you can't find time to see this one through, I'd be happy to take on solving the conflicts.

mattdesl · 2018-05-14T23:46:22Z

See the latest comment in the original discussion thread - it sounds like a cleaner fix than the command line flag in this PR.

#289 (comment)

filipesabella · 2018-05-15T01:39:38Z

Ah I see, thanks for the reply.

Well, to be honest, I get browser freezes with HMR on with the two apps I'm working on.
One is a vanilla typescript+react+redux and the other one is a canvas thing.
As it stands now I have to disable HMR and refresh the browser every time, which's a little unfortunate.

As much as I like the idea of HMR, I'd love to just have the option you introduced in this PR, but I understand that it doesn't match the project's vision.

mattdesl · 2018-05-15T03:24:17Z

I feel you. I personally have not had good experiences with HMR outside of very specific domains (ie: create-react-app), and this issue is the reason I’m not currently using parcel on some projects.

…

On May 14, 2018, at 9:39 PM, Filipe Sabella ***@***.***> wrote: Ah I see, thanks for the reply. Well, to be honest, I get browser freezes with HMR on with the two apps I'm working on. On is a vanilla typescript+react+redux and the other one is a canvas thing. As it stands now I have to disable HMR and refresh the browser every time, which's a a little unfortunate. As much as I like the idea of HMR, I'd love to just have the option you introduced in this PR, but I understand that it doesn't match the project's vision. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

OrganicPanda · 2018-05-15T09:09:55Z

Same here! HMR gives me limited confidence so I end up refreshing manually anyway haha

marcushellberg · 2018-10-12T17:39:29Z

I find myself needing this in projects using web components. Calling customElements.define() fails if the element has already been defined.

devongovett · 2018-10-16T03:59:49Z

Due to move to monorepo which rewrote the git history, this PR was automatically closed. Please open a new PR against master with your changes. You can do a diff against the 1.x branch to see them. Sorry about that!

devongovett added 30 commits September 7, 2017 17:50

Allow null asset types, which won’t cause a child bundle to be created

590741e

Fix minifier

5654c31

Catch errors in worker

58776aa

Changes to how raw assets work

e862ad6

Add support for bundling HTML

fc8ce69

Transform html with posthtml

4777166

Refactor postcss plugin loading

9aadfed

Minify html in production mode

b5cfd9b

Clean up

364e637

Fix accessing the global object

fc8bd76

Add test for inserting module globals

17ec2e7

Add support for inserting environment variables at build time

c746ab3

Fix moveAssetToBundle

1a5f9a8

Invalidate parent deps on rebuild

0602359

Pass options to packagers

9f74760

Implement support for hot module replacement

b6845c0

Unload orphaned assets after rebundling

65890c7

Reload CSS when it changes

ee396ce

Fix tests

6ab84af

Only change parent bundle at explicit split points

49c5517

Otherwise CSS which imports JS for example won’t get added to the JS bundle. Needed for HMR.

Docs

102198c

Don’t match absolute paths for URL dependencies

c9eddac

Add publicURL option for use in HTML

01f56a4

Rename typeBundleMap to siblingBundles

29dcc82

Add an HTML packager to automatically insert sibling CSS bundles requ…

5b9b437

…ired by JS in the head

Fix bundle url matching

d8d5552

Fix caching of raw assets

8cc282f

Don’t load them into memory

Implement a basic dev server and middleware

0e65874

Add method to stop bundling

c0941d8

Add a CLI

c0f6a57

tb and others added 11 commits December 28, 2017 00:28

Add graphql support (parcel-bundler#239)

8f1f497

Update ISSUE_TEMPLATE.md - add Code Sample section (parcel-bundler#420)

8a65676

patch(hmr): use hostname for WS instantiation (parcel-bundler#426)

06d5ffc

* patch(hmr): use hostname for WS instantiation * test(hmr): add hostname shim for testing * Move location shim somewhere common

standardize comments on empty implementation method (parcel-bundler#436)

d763a1a

Add url dependency for serviceWorker.register calls (parcel-bundler#398)

0ab0aca

* Add url dependency for serviceWorker.register calls * extract matchesPattern helper * sync SW regexp with matchesPattern arg

handle app store url scheme (parcel-bundler#438)

494fafc

* handle app store url scheme * Update scheme regex

Fix parcel bundling issues when asset parent & commonBundle types dif…

127c9b7

…fer (parcel-bundler#380)

web worker support (parcel-bundler#441)

c8a1156

* web worker support * fix lint error

Merge branch 'master' into feature/add-js-reload

a1a3ab8

fix typo in asset check for --reload option

70a34eb

mattdesl mentioned this pull request Dec 30, 2017

🙋 Regular Browser Reload on File Save #289

Closed

DeMoorJasper approved these changes Dec 30, 2017

View reviewed changes

TennyZhuang reviewed Dec 31, 2017

View reviewed changes

xu3u4 reviewed Jan 2, 2018

View reviewed changes

devongovett added the HMR Hot Module Reloading label Jul 21, 2018

devongovett force-pushed the master branch from 2d0f811 to 6ab52e8 Compare September 24, 2018 05:08

devongovett closed this Oct 16, 2018

devongovett force-pushed the master branch from d2dc7c9 to 75310e1 Compare October 16, 2018 03:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add --reload option for hard reload on non-CSS assets #443

Add --reload option for hard reload on non-CSS assets #443

mattdesl commented Dec 30, 2017

TennyZhuang Dec 31, 2017

devongovett commented Dec 31, 2017 •

edited

brandon93s commented Dec 31, 2017

xu3u4 Jan 2, 2018

mattdesl Jan 2, 2018

xu3u4 Jan 3, 2018

xu3u4 commented Jan 2, 2018

OrganicPanda commented Mar 7, 2018

filipesabella commented May 14, 2018

mattdesl commented May 14, 2018

filipesabella commented May 15, 2018 •

edited

mattdesl commented May 15, 2018 via email

OrganicPanda commented May 15, 2018

marcushellberg commented Oct 12, 2018

devongovett commented Oct 16, 2018

Add --reload option for hard reload on non-CSS assets #443

Add --reload option for hard reload on non-CSS assets #443

Conversation

mattdesl commented Dec 30, 2017

TennyZhuang Dec 31, 2017

Choose a reason for hiding this comment

devongovett commented Dec 31, 2017 • edited

brandon93s commented Dec 31, 2017

xu3u4 Jan 2, 2018

Choose a reason for hiding this comment

mattdesl Jan 2, 2018

Choose a reason for hiding this comment

xu3u4 Jan 3, 2018

Choose a reason for hiding this comment

xu3u4 commented Jan 2, 2018

OrganicPanda commented Mar 7, 2018

filipesabella commented May 14, 2018

mattdesl commented May 14, 2018

filipesabella commented May 15, 2018 • edited

mattdesl commented May 15, 2018 via email

OrganicPanda commented May 15, 2018

marcushellberg commented Oct 12, 2018

devongovett commented Oct 16, 2018

devongovett commented Dec 31, 2017 •

edited

filipesabella commented May 15, 2018 •

edited