Live-reloading

[geelen]

Wondering whether it'd be possible to add live-reloading to this plugin. I've managed to get this working, but it's very restrictive, and needs some review & consideration before it'd be ready for a PR.

Here's what I've done so far:

• jspm-server — a fork of live-server that injects a SystemJS-aware snippet that looks for events from the file system and sees if the plugin that loaded that file exports a hotReload function
• jsx.js — a copy of this project which then appends a snippet to each JSX source file in development, based off an example in the react-hot-loader readme. It works, too!

The restrictions are pretty huge though:

• It has to be using ES6 syntax
• The name of the component must be PascalCase version of the filename (e.g. drop-down.js becomes class DropDown)
• It must be using a default export for the component

I want to work with @guybedford to make jspm-server a real part of jspm, and I think React hot loading would be a great thing to start with. I also want to chat with @gaearon about making better use of the hot-loader to remove some of these limitations of my version, but what do you think?

[floatdrop]

Live-reloading is super-sweet in development and hot-reload is like magic, but @gaearon have very deep article about React Hot Loader and I am fully agreed with him.

May be integrate this as babel plugin instead? We found babel is super sweet for transpiling JSX.

[gaearon]

Thanks for the mentions. Indeed as I wrote in the article you linked to above, I plan to use Babel for any JS transformations in RHL vNext (though technically it might not even be a “loader” anymore).

[geelen]

Ok cool, so until that work is done, is there anything better I could be doing than mangling the source like I do here: https://github.com/geelen/typeslab/blob/master/src/jsx.js#L13-L21

Because exports must be top-level in ES6, I can't even do a if (typeof ${className} !== 'undefined') export hotted(${className}), so I can't see much I can do to improve the brittleness of this. Mind you, there's worse things than enforcing a naming system.

Once Babel is doing the JSX transformation, do you think this plugin would cease to exist, @floatdrop? Or continue to exist but use Babel instead of reactTools.transformWithDetails?

[guybedford]

@geelen it's so great to see you pushing these features. If you're looking to generalise a hot-reloading mechanism, perhaps it would be useful to share the mechanic you've implemented to get feedback first? Then we could potentially make it a shared convention that's easier to get others on board with.

[geelen]

Ok, can you and I set up a chat (either voice or text) sometime to talk through the design? I have only a very low understanding of the internals of the loader, and I think with 30 mins chatting we could figure out if what I've got is the best way or if there's something better or simpler.

I'm on holidays in Europe, but I'd love to do this soon as it's sorta forming the basis of my Front-Trends talk in a week in a half 😁

[gaearon]

Make it a hangout :-) I'll be happy to join you.

[guybedford]

Sounds like @geelen is a little busy right now - I'd still love to have this discussion when the timing works out.

[gaearon]

Here's the new hot reloading core (with tests!) and a Babel plugin to annotate classes for it:

https://github.com/gaearon/react-hotify
https://github.com/gaearon/babel-plugin-react-hotify

Can this be of use to you?

[geelen]

Yes! Looks great! Gonna have a crack at using that now :)

On Wed, 29 Apr 2015 at 14:37 Dan Abramov notifications@github.com wrote:

Here's the new hot reloading core (with tests!) and a Babel plugin to
annotate classes for it:

https://github.com/gaearon/react-hotify
https://github.com/gaearon/babel-plugin-react-hotify

Can this be of use to you?

—
Reply to this email directly or view it on GitHub
#9 (comment).