Skip to content

Support decorators #279

Closed
Closed
@zdavis

Description

@zdavis

(This may or may not be something you want to address with v3; if not, please just close this)

Our project uses decorators to connect components to the redux store. I think this is fairly common. For example, you see it a lot in erikras/react-redux-universal-hot-example, which uses Babel 6 and the "transform-decorators-legacy" Babel plugin, since Babel has decided to postpone decorator support until its more mature. For example:

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/containers/Chat/Chat.js#L4

This worked fine with v2, but with v3 components that are decorated like this seem to lose their internal state when they're hot-reloaded.

If you want to look at this, let me know and I'll put together a sample repo that shows the problem. Thanks so much for your work on this! It's great to see all the activity on this project right now.

best,
Zach

Activity

changed the title [-]Incompatibility with decorators[/-] [+]v3 Incompatibility with decorators[/+] on May 2, 2016
changed the title [-]v3 Incompatibility with decorators[/-] [+]v3 incompatibility with decorators[/+] on May 2, 2016
gaearon

gaearon commented on May 3, 2016

@gaearon
Owner

If you want to look at this, let me know and I'll put together a sample repo that shows the problem

Please do! Also make sure you’re using react-hot-loader/babel rather than react-hot-loader/webpack if you want “connected” classes to be found by it.

added this to the v3.0 milestone on May 3, 2016
zdavis

zdavis commented on May 3, 2016

@zdavis
Author

Ok, the "decorators" branch in zdavis/react-hot-boilerplate shows the problem pretty clearly. See zdavis/react-hot-boilerplate@7b510aa.

This commit adds a new component called "DecoratedCounter". The decorated counter is decorated with @connect, which just wraps a component around the decorated component.

The Counter component is also wrapped with connect, but without using decorator syntax.

When DecoratedCounter is hot reloaded, it loses its internal state. This is not the case for the Counter component.

Let me know if there's anything else I can do to help!

nfcampos

nfcampos commented on May 3, 2016

@nfcampos
Collaborator

I think this comes down to our babel plugin needing to be aware of decorators, otherwise it only wraps the decorated hoc, not the original component that was decorated

changed the title [-]v3 incompatibility with decorators[/-] [+]Babel plugin should recognize decorated classes[/+] on May 3, 2016
gaearon

gaearon commented on May 3, 2016

@gaearon
Owner

I wonder if a simple way to fix this would be to insert our own “registering” decorator as the innermost one if we see a decorated class.

nfcampos

nfcampos commented on May 3, 2016

@nfcampos
Collaborator

Yeah that sounds like it'd work

liady

liady commented on Jul 9, 2016

@liady

@gaearon @nfcampos Any news on that? Currently all of our classes are decorated, which prevents them from being properly hot-reloaded (the Root component just refreshes and loses all internal state).

Is there a temporary fix we can do in our code to get it working?

66 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @wmertens@nfcampos@birkir@zdavis@gregberge

      Issue actions

        Support decorators · Issue #279 · gaearon/react-hot-loader