React Hotloading in native Meteor is ready (i.e. no webpack)

I think you misread my question, I was asking why people are suggesting to use react-mounter (made by @arunoda) instead of react-dom.

2 Likes

Hey all. There are a few things blocking a release to Atmosphere, but if youā€™re happy running from a git checkout, Iā€™ve updated the README with some instructions on how to use this, and am ready for some early feedback :slight_smile: Itā€™s also been tested with mantra-sample-blog and thereā€™s a note about that too.

Currently the biggest missing feature is that while this works great for editing react components,
weā€™re a bit worse at figuring out when we need to force a regular reload (most obviously, if you add new imports to an existing file). We can use your help here to figure out some other common cases. Obviously, if things go wrong, just manually restart Meteor.

1 Like

Our goal: fast iterative development!

8 Likes

Is this something you can do with CSS too?

1 Like

Can use the logic used in other React hot loaders to identify a full reload. Arenā€™t they support it.

May be we can get some help from Dan. I hope he will help us.

1 Like

Yes; this is something Meteor does already since 0.9.0 :slight_smile:

Danā€™s plugins are really well focused on just the React stuffā€¦ the issue is actually in the HMR code. Webpack offers a full HMR solution, whereas Iā€™m just offering a partial one for the most common cases. The big problem is that Iā€™m working outside a part of the Meteor build process, so canā€™t do all the same things. Thatā€™s something that can be addressed in the long term, of course.

From the client side, we can actually detect a situation that we canā€™t cleanly apply. It currently just gives an error but Iā€™ll add code to force a rebuild. The code here is pretty similar (but more simplistic) than webpackā€™s HMR runtime.

On the server side, we donā€™t have the ability to get Meteor to handle any new imports (since weā€™re not passing Meteor the new code). I think itā€™s the only thing weā€™re missing though, and this is actually a comparatively easier case to handle. (Webpack would just send the new imports across, but we can quite easily force a rebuild).

Iā€™ll keep people posted :slight_smile:

3 Likes

Also re MDG, I think itā€™s appropriate to discuss with them after a 1.3 final comes out.

But it needs to be webpack faster! Lol.

Oh haha. Itā€™s possibleā€¦ rebuild times in beta.8 are looking a lot better though! And CSS is already via injection. I guess Iā€™ll decide after 1.3 final comes out :smile:

This looks really cool. Have been tearing my hair out with slow reload times on the client side. But, Iā€™m a little confused with this step of the installation:

Symlink babel-compiler-hot, ecmascript-hot, hot and modules-runtime (#6) to your appā€™s packages dir.

Can you provide a little more clarity? Should I be doing step 1 (the git clone) in the root of my project directory?

1 Like

I was praying for this today! Seriously, this is huge

Getting this error while trying to load - While loading plugin 'compile-ecmascript-hot' from package 'gadicc:ecmascript-hot': module.js:338:15: Cannot find module 'mongodb'

And weā€™re in Atmosphere!

See the README for updated installation instructions.

@jasongrishkoff, @tgoldenberg - this should solve your issues I hope :slight_smile:

2 Likes

Hi @gadicc, the ReadMe on Atmosphere says this:

Until we publish to Atmosphere:

git clone https://github.com/gadicc/meteor-react-hotloader
Symlink babel-compiler-hot, ecmascript-hot, hot and modules-runtime (#6) to your appā€™s packages dir.
and then:

Edit your .meteor/packages and replace ecmascript with gadicc:ecmascript-hot
In project root, npm install --save react-transform-hmr

Is that still the correct installation procedure or is it now just a case of doing meteor add gadicc:ecmascript-hot to get it working?

No :frowning: I realized that after I already finished publishing. See the project README. The one in Atmosphere will be updated on my next publish, I didnā€™t want to bump versions and republish just to update the README thereā€¦

So yeah no need for the git clone anymore. You can indeed do meteor remove ecmascript and then meteor add gadicc:ecmascript-hot@0.0.1-modules.7, or just reflect this in .meteor/packages.

2 Likes

Do this:

meteor publish --update

It will update just the README.

1 Like

Oh wow, lolā€¦ thanks!

3 Likes

This is really awesome! If you want to keep working on it, Iā€™m happy to share my thoughts. I would love to see something like this in 1.3.1.

Hereā€™s one thought: https://github.com/gadicc/meteor-react-hotloader/issues/3

I also see you submitted https://github.com/benjamn/install/pull/6, which I would like to avoid if thereā€™s any other way to do it, but Iā€™m sure we can figure something out.

12 Likes

Loving this where it works, but it doesnā€™t seem to hot load all of my files, what am I doing wrong?

I get this error:

Opened issue here: