codemix / babel-plugin-typecheck

Static and runtime type checking for JavaScript in the form of a Babel plugin.
MIT License
886 stars 44 forks source link

#125 introduce bug with decorators #130

Open iam4x opened 8 years ago

iam4x commented 8 years ago
function foobar(DecoratedComponent) {
  return class Parent extends Component {

   state = { isActive: true } 

    render() {
      const { isActive }  = this.state; 
      return <DecoratedComponent isActive={ isActive } />; 
    }

  }
}

@foobar()
class Child {
  props: { isActive: boolean; };

  render() {
    ....
  }
}

In this case, propTypes will be applied to Wrapper instead of Parent it will log in dev-console:

Warning: Failed propType: Invalid prop `isActive` supplied to `Parent`.

Expected:
bool

Got:
void

My .babelrc for help:

{
  "presets": ["save"],
  "plugins": [],
  "env": {
    "browser": {
      "plugins": [
        "typecheck",
        ["react-transform", {
          "transforms": [
            {
              "transform": "react-transform-hmr",
              "imports": [ "react" ],
              "locals": [ "module" ]
            },
            {
              "transform": "react-transform-catch-errors",
              "imports": [ "react", "redbox-react" ]
            }
          ]
        }]
      ]
    },
    "production": {
      "plugins": ["react-remove-prop-types"]
    }
  }
}

My workaround for now, which is painful is to call the decorator as a function in the export.

ntkoopman commented 8 years ago

Yes, the propTypes are assigned to the wrong class in this case. I have a fix ready, but it still needs to be tested.