New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decorator is not supported! #214

Closed
HatemJerbi opened this Issue Jul 26, 2016 · 20 comments

Comments

Projects
None yet
@HatemJerbi

HatemJerbi commented Jul 26, 2016

Note from maintainers

For people coming to this thread later—if you use MobX or a similar library, you don’t need decorators. They are just syntax sugar in this case.
Learn more: #214 (comment), #411 (comment).
Here is why we don’t include them: #411 (comment).

we can not use library like mobx (@Observer,@observable).
to fix this :

  • babel stage-1
  • babel "transform-decorators-legacy" plugin
@ForbesLindesay

This comment has been minimized.

Show comment
Hide comment
@ForbesLindesay

ForbesLindesay Jul 26, 2016

Contributor

Decorators are still in the very early stages of standardisation. The behaviour of them could change rapidly, without warning. Users of decorators need to be willing to adapt fast, and therefore aren't the main target for create-react-app. I don't think we should be including them in this project at this time.

I do think we should look into supporting customisation of the babel, eslint and webpack configs in some way, but that's a larger discussion.

Contributor

ForbesLindesay commented Jul 26, 2016

Decorators are still in the very early stages of standardisation. The behaviour of them could change rapidly, without warning. Users of decorators need to be willing to adapt fast, and therefore aren't the main target for create-react-app. I don't think we should be including them in this project at this time.

I do think we should look into supporting customisation of the babel, eslint and webpack configs in some way, but that's a larger discussion.

@eanplatter

This comment has been minimized.

Show comment
Hide comment
@eanplatter

eanplatter Jul 26, 2016

Contributor

We are holding off decorators until babel supports them out of the box, for more info check out #107

Contributor

eanplatter commented Jul 26, 2016

We are holding off decorators until babel supports them out of the box, for more info check out #107

@eanplatter eanplatter closed this Jul 26, 2016

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jul 26, 2016

Member

You can use MobX without decorators.

Member

gaearon commented Jul 26, 2016

You can use MobX without decorators.

@kevinejohn

This comment has been minimized.

Show comment
Hide comment
@kevinejohn

kevinejohn Jul 29, 2016

@gaearon Don't you have to use the old React.createClass method if you do not use decorators though? It changes a lot of the code structure in your components (No constructor(), commas after every method, etc...) :-/

Would be great to be able to use create-react-app without ejecting to set babel decorator support.

var MyComponent = observer(React.createClass({ ...

https://mobxjs.github.io/mobx/best/syntax.html

kevinejohn commented Jul 29, 2016

@gaearon Don't you have to use the old React.createClass method if you do not use decorators though? It changes a lot of the code structure in your components (No constructor(), commas after every method, etc...) :-/

Would be great to be able to use create-react-app without ejecting to set babel decorator support.

var MyComponent = observer(React.createClass({ ...

https://mobxjs.github.io/mobx/best/syntax.html

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jul 29, 2016

Member

No, you can do this just fine:

const MyComponent = observer(class MyComponent extends React.Component {
    render() {
        // Warning: don't use {this.onButtonClick.bind(this)} or {() => this.onButtonClick} !
        return <button onClick={this.onButtonClick}>Hi</button>
    }

    onButtonClick = (e) => {
        // bound function
    }
})
Member

gaearon commented Jul 29, 2016

No, you can do this just fine:

const MyComponent = observer(class MyComponent extends React.Component {
    render() {
        // Warning: don't use {this.onButtonClick.bind(this)} or {() => this.onButtonClick} !
        return <button onClick={this.onButtonClick}>Hi</button>
    }

    onButtonClick = (e) => {
        // bound function
    }
})
@kevinejohn

This comment has been minimized.

Show comment
Hide comment
@kevinejohn

kevinejohn Jul 29, 2016

That works. Thank you!

I'm really surprised the mobx documentation never mentions this solution considering decorators are still experimental and not enabled by default in babel. I'll have to send them a pull request.

kevinejohn commented Jul 29, 2016

That works. Thank you!

I'm really surprised the mobx documentation never mentions this solution considering decorators are still experimental and not enabled by default in babel. I'll have to send them a pull request.

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jul 29, 2016

Contributor

cc @mweststrate, I talked to him about this when we met at RuhrJS and he said he planned to remove the decorator syntax from the docs!

Contributor

mxstbr commented Jul 29, 2016

cc @mweststrate, I talked to him about this when we met at RuhrJS and he said he planned to remove the decorator syntax from the docs!

@mweststrate

This comment has been minimized.

Show comment
Hide comment
@mweststrate

mweststrate Sep 1, 2016

For people stumbling into this in the future, here is a small create-react-app based repo with MobX, without decorators:

https://github.com/mobxjs/create-react-app-mobx

@mxstbr well, not removing, but make it very clear it is optional :)

mweststrate commented Sep 1, 2016

For people stumbling into this in the future, here is a small create-react-app based repo with MobX, without decorators:

https://github.com/mobxjs/create-react-app-mobx

@mxstbr well, not removing, but make it very clear it is optional :)

@mweststrate

This comment has been minimized.

Show comment
Hide comment
@mweststrate

mweststrate Sep 3, 2016

The MobX docs now have a dedicated section listing how to use or avoid using decorators. I hope that helps avoid confusion in the future! http://mobxjs.github.io/mobx/best/decorators.html

mweststrate commented Sep 3, 2016

The MobX docs now have a dedicated section listing how to use or avoid using decorators. I hope that helps avoid confusion in the future! http://mobxjs.github.io/mobx/best/decorators.html

@mweststrate

This comment has been minimized.

Show comment
Hide comment
@mweststrate

mweststrate Sep 26, 2016

Didn't try yet, but this should allow using decorators with create-react-app without ejecting: https://www.npmjs.com/package/custom-react-scripts. Might be interesting to check out if anybody runs into this in the future.

mweststrate commented Sep 26, 2016

Didn't try yet, but this should allow using decorators with create-react-app without ejecting: https://www.npmjs.com/package/custom-react-scripts. Might be interesting to check out if anybody runs into this in the future.

@jason-henriksen

This comment has been minimized.

Show comment
Hide comment
@jason-henriksen

jason-henriksen Dec 29, 2016

I ended up ejecting to get decorators.

I'm primarily a c#/java dev, so I just don't understand how decorators can be at all controversial.
I mean Java got annotations over a decade ago. As an industry we've got a pretty clear understanding of good syntax and how they should work. It's just one more frustration for people who are used to a mature development language coming back into the wild wild west of JavaScript.

Not your fault, but come on. How can this this still be a controversy? Coming back to JavaScript from C# has turned me into an old man who says "Back in my day we had !" all the time.

jason-henriksen commented Dec 29, 2016

I ended up ejecting to get decorators.

I'm primarily a c#/java dev, so I just don't understand how decorators can be at all controversial.
I mean Java got annotations over a decade ago. As an industry we've got a pretty clear understanding of good syntax and how they should work. It's just one more frustration for people who are used to a mature development language coming back into the wild wild west of JavaScript.

Not your fault, but come on. How can this this still be a controversy? Coming back to JavaScript from C# has turned me into an old man who says "Back in my day we had !" all the time.

@tbillington

This comment has been minimized.

Show comment
Hide comment
@tbillington

tbillington Dec 29, 2016

A better place to discuss it @jason-henriksen would be here where decorators are being discussed upstream (babel). Until they're standardised and supported officially they probably won't be in an "official"/"endorsed" project like create-react-app for obvious reasons.

tbillington commented Dec 29, 2016

A better place to discuss it @jason-henriksen would be here where decorators are being discussed upstream (babel). Until they're standardised and supported officially they probably won't be in an "official"/"endorsed" project like create-react-app for obvious reasons.

@jason-henriksen

This comment has been minimized.

Show comment
Hide comment
@jason-henriksen

jason-henriksen Dec 29, 2016

@mweststrate thanks for the comment on using custom-react-scripts. It made my eject effort unnecessary and was MUCH nicer to use than fiddling with things myself.

@tbillington thanks for the pointer to the discussion. I'm sure a noob like myself can't all that much help, but maybe there's some small way I can push that ball along. In the mean time, I'm happy with the plug-in of the legacy code that lets me get things done. Thanks again for the tip.

jason-henriksen commented Dec 29, 2016

@mweststrate thanks for the comment on using custom-react-scripts. It made my eject effort unnecessary and was MUCH nicer to use than fiddling with things myself.

@tbillington thanks for the pointer to the discussion. I'm sure a noob like myself can't all that much help, but maybe there's some small way I can push that ball along. In the mean time, I'm happy with the plug-in of the legacy code that lets me get things done. Thanks again for the tip.

mgallant23 added a commit to mgallant23/ProjectMGMTReactApp that referenced this issue May 10, 2017

Update README.md
e root of your project:

```
REACT_APP_SECRET_CODE=abcdef
```

These variables will act as the defaults if the machine does not explicitly set them.<br>
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.

>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).

## Can I Use Decorators?

Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
Create React App doesn’t support decorator syntax at the moment because:

* It is an experimental proposal and is subject to change.
* The current specification version is not officially supported by Babel.
* If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.

However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
Please refer to these two threads for reference:

* [#214](facebookincubator/create-react-app#214)
* [#411](facebookincubator/create-react-app#411)

Create React App will add decorator support when the specification advances to a stable stage.

## Integrating with an API Backend

These tutorials will help you to integrate your app with an API backend running on another port,
using `fetch()` to access it.

### Node
Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-serv
@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Aug 15, 2017

Member

For anyone reading this in the future, I would like to point out that the decorators spec has changed significantly. I'm really glad we made the decision to not support them at early stage, so users who didn't eject don't need to change their code.

I don't recommend anyone to rely on the legacy decorator transform (that is not part of CRA). See this thread for more info: https://twitter.com/dan_abramov/status/897491076537356288.

Member

gaearon commented Aug 15, 2017

For anyone reading this in the future, I would like to point out that the decorators spec has changed significantly. I'm really glad we made the decision to not support them at early stage, so users who didn't eject don't need to change their code.

I don't recommend anyone to rely on the legacy decorator transform (that is not part of CRA). See this thread for more info: https://twitter.com/dan_abramov/status/897491076537356288.

@rclai

This comment has been minimized.

Show comment
Hide comment
@rclai

rclai Aug 22, 2017

According to that table at the top, it says that there's no breaking change, just a new feature.

rclai commented Aug 22, 2017

According to that table at the top, it says that there's no breaking change, just a new feature.

@existentialism

This comment has been minimized.

Show comment
Hide comment
@existentialism

existentialism Aug 23, 2017

Contributor

@rclai it's a bit misleading: it's not breaking in Babel's context because the linked PR is adding a totally new transform that relies on a completely different parser plugin (decorators2) than the "current" one.

The two syntaxes, as @gaearon mentioned, are definitely different, namely:

@bar
export default Foo {}

now needs to be:

export default 
@bar class Foo { }

One of our "ship-Babel-7" tasks is to provide codemods for these types of changes to help ease the transition.

Contributor

existentialism commented Aug 23, 2017

@rclai it's a bit misleading: it's not breaking in Babel's context because the linked PR is adding a totally new transform that relies on a completely different parser plugin (decorators2) than the "current" one.

The two syntaxes, as @gaearon mentioned, are definitely different, namely:

@bar
export default Foo {}

now needs to be:

export default 
@bar class Foo { }

One of our "ship-Babel-7" tasks is to provide codemods for these types of changes to help ease the transition.

@reywright

This comment has been minimized.

Show comment
Hide comment
@reywright

reywright Oct 27, 2017

Just to help anyone out: if you need to use inject with observable (without decorators) you can use it like this:

class Foo extends Component {
    /* whatever view logic here */
}
Foo = inject('key')(obserable(Foo));

reywright commented Oct 27, 2017

Just to help anyone out: if you need to use inject with observable (without decorators) you can use it like this:

class Foo extends Component {
    /* whatever view logic here */
}
Foo = inject('key')(obserable(Foo));
@rclai

This comment has been minimized.

Show comment
Hide comment
@rclai

rclai Oct 29, 2017

Yes or you could use recompose's compose function to make it look nicer:

class Foo extends Component {
    /* whatever view logic here */
}
export default compose(
  inject('key'),
  observable
)(Foo);

rclai commented Oct 29, 2017

Yes or you could use recompose's compose function to make it look nicer:

class Foo extends Component {
    /* whatever view logic here */
}
export default compose(
  inject('key'),
  observable
)(Foo);
@ilyaLibin

This comment has been minimized.

Show comment
Hide comment
@ilyaLibin

ilyaLibin commented Jan 9, 2018

Use this to inject mobx decorators into config without ejecting.
https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jan 9, 2018

Member

It’s not supported and will break. If you’re okay with this, cool, but please don’t teach beginners to use something that will be broken in a year.

Furthermore, the legacy decorator plugin does not even support the latest specification and your code will likely break when you update it to the recent one (which isn’t implemented by Babel at all).

I’m locking this issue. As noted above, decorators are an unstable proposal and won’t be enabled until they both advance further and there is a Babel plugin that implements the latest spec.

Member

gaearon commented Jan 9, 2018

It’s not supported and will break. If you’re okay with this, cool, but please don’t teach beginners to use something that will be broken in a year.

Furthermore, the legacy decorator plugin does not even support the latest specification and your code will likely break when you update it to the recent one (which isn’t implemented by Babel at all).

I’m locking this issue. As noted above, decorators are an unstable proposal and won’t be enabled until they both advance further and there is a Babel plugin that implements the latest spec.

@facebook facebook locked and limited conversation to collaborators Jan 9, 2018

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