Component inheritance hot reload

[BenoitZugmeyer]

Now that components are plain JS classes, it can inherit from other components.

This fix ensure the actual component prototype is patched for hot reload, and not one of its parent.

[gaearon]

It's been a few years and I'm still dumb and don't understand prototypes fully.
Can you please explain to me why this helps?

[BenoitZugmeyer]

Okay. Let's assume you have a Page component as a base and a Login component inheriting from Page.

In es3 we could write something like this (this is a basic example, things are a little more complex than that in reality but it illustrates how it works):

function Page() {}
Page.prototype = new Component(); // the React.Component class

function Login() {}
Login.prototype = new Page();

If I set a property on Page.prototype, the Login.prototype (which is a Page instance, see) will inherit the property.

Page.prototype.foo = 42;
console.log(Login.prototype.foo); // 42

So when you set the __isAssimilatedByReactHotAPI property on Page.prototype, Login.prototype will have it too, by inheritance.

Thus, we need to check if this property is the own property of the prototype (= not an inherited property).

console.log(Page.prototype.hasOwnProperty('foo')) // true
console.log(Login.prototype.hasOwnProperty('foo')) // false

Finally, to be a little paranoid, I didn't use hasOwnProperty directly because it could be overriden by another method defined by the class. So I used the Object.prototype.hasOwnProperty directly, which should always be what we want.

[gaearon]

Oh. I get it now, thanks!
Will release in a couple of days.

[gaearon]

On a related note, you might want to check if react-hot-loader@1.2.0 works better with inheritance chains. Hot-reloading changes in base class should work now.

[BenoitZugmeyer]

Thanks, I'll give it a try. FYI, I am using react-hot-api directly (without the -loader), to reload react components in an atom-shell application. You might be interested by this use case. See https://github.com/BenoitZugmeyer/chwitt-react/blob/master/bootstrap-jsx.js

[gaearon]

Wow, that's pretty impressive. I didn't know that! Thanks for sharing.