Meteor 2.0 Beta with Hot Module Replacement (HMR)

Dammit just send out the newsletter few hours before this! :rofl:

Looking forward to give it a try after Meteor Impact.

6 Likes

I have been testing the beta version and I must say I love the HMR, it works pretty well. can’t wait for the final release.

5 Likes

Check out Zodern’s talk at Meteor Impact for more on HMR:

4 Likes

Does this/will this support the Vue integration? It had its own HMR solution that never worked with me

1 Like

Love this! I tested in my app, it worked perfectly when using it in a smaller Typescript component. When changing its parent (JSX) component I got this console message:

Some changes cannot be applied with HMR. Using hot code push.

And it triggered a full refresh (even though I saw the update on the screen already before the refresh). Is there a way to debug this behaviour, or documentation of conditions that block HMR?

I’m looking into this. Hope to release this with Vue 3 integration

3 Likes

So for HMR to work, do we need to have

if (module.hot) {
  module.hot.accept();
}

or does it work by default.

For files with React components, or svelte files, it will decide for you which modules accept updates. Since updates bubble up, this also applies to any files only imported by components.

For other files you will have to add that code to accept an update. You should preferably accept updates in modules that do not have exports, or that have exports you don’t want to update since we only rerun modules between the ones that were modified and the ones that accept updates. Let me know if this doesn’t make sense. I am trying to find a simple way to explain it.

1 Like

Sounds great. Is it accurate to think of this essentially as an alternative to snowpack?

For Svelte, does zodern:melte also essentially replace svelte-meteor-data with it’s $m tracker function? I guess it doesn’t have cursor support so you’d need to have a .fetch() on all cursors. Anything else I’m missing? @rdb, curious to hear your take.

Modifying Svelte to accept an $m syntax looks like a convenient alternative approach that obviates the need for rdb:svelte-meteor-data. I have thought about an approach like this but have in my library so far decided to avoid requiring modifications to Svelte.

Thank you @zodern just got HMR into Level Up Tutorials and it totally rules.

8 Likes

I’ve made the update on a fairly big project with react, and it’s just amazing !
Thanks @zodern, you’ll save us ton of time.

3 Likes

So far my experience has been a mix. Some time it works as intended, other time I have seen the HMR happen only to be followed by Hot Code Push. But I’m sure that is going go improve as things go forward.

Really worked fine at first. The only problem was React Dev Tools not working while hot-module-replacement package was active. Yesterday I noticed it was doing Hot Code Push instead of HMR and now it even breaks the Hot Code Push.

This is seriously awesome!!!

Is Vue HMR also going to be supported?

I don’t understand this feature, however I’m worried for the future of Meteor if it incorporates a non-standard api with module. Based on the article you provided it is for development only, however I don’t think I would like to write source code that is only for development builds – in this case I would presumably delete the source code that was HMR-related in order to produce a production build?

Could you belay my fears, or else point me towards a tool that I should work with?

Ok, as you don’t bundle your code editor into your production code bundle, so you don’t bundle anything related to HMR into your production code. This is a development tool, nothing related to your production code content.
Your source (development) code is not the same as your production code. Example: if you add an NPM library with 1GB of readme files, that will not go into your production. I don’t think there is anything to be worried about.

1 Like

Yep, I’m loving it too. I was trying it on a branch for a few days, and when I went back to a branch without it, I couldn’t believe how slow it was waiting for the full cycle. I’m sold and sitting on 2.0 Beta now, for better or worse :slight_smile:

6 Likes

I haven’t read the standard. Does EcmaScript say that you can extend on module?

This is common feature in many platforms that allows for a replacement of a single module rather than a rebuild for each change. Your app will not function differently because of this, it is only for speeding up development speed.

1 Like