3

I'm using Formsy (https://github.com/christianalfoni/formsy-react) for a React form and validation. It's got this @mixin (Formsy.mixin) piece that I don't quite understand. Just hoping to find someone who can explain what the behavior is behind the scenes here:

@mixin (Formsy.Mixin)
class LabeledTextField extends React.Component {
  render() {
    return (
      //stuff here
    )
}

If I had to guess, it seems to be importing Formsy methods into the scope of the component for use within the component. Just hoping to grok this from someone who knows.

Thanks!

Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
camerow
  • 365
  • 1
  • 3
  • 12
  • 1
    Where did you find this piece of code? Searching the whole repo [gives zero results](https://github.com/christianalfoni/formsy-react/search?utf8=%E2%9C%93&q=%40mixin) for `@mixin`. – Etheryte Sep 15 '15 at 19:14
  • This is code that I wrote, and am currently using, but I have taken out the body of functions/life-cycle functions. It works, my question is more about how it works. IE What is `@mixin` doing? – camerow Sep 15 '15 at 19:15
  • Let me see if I can find the example that used the `@mixin` syntax. I know it wasn't in the Formsy repo. – camerow Sep 15 '15 at 19:17

1 Answers1

1

Ok, seems this is coming from a ES7 decorator proposal used in https://github.com/brigand/react-mixin.

We are using Babel in our webpack loader with the stage: 1 config set, allowing Babel to compile that decorator syntax. This gives the class access, via a wrapper, to the methods of the mixin.

If anyone can explain this more thoroughly, feel free!

camerow
  • 365
  • 1
  • 3
  • 12
  • 7
    But what does it DO? – TrySpace May 18 '16 at 14:07
  • 2
    @TrySpace: like you, I found that these answers didn't help me, so I dug around and kept digging until I understood. I added another answer to the original question with more details - [see it here](http://stackoverflow.com/a/37416994/2008384). – Kryten May 24 '16 at 14:52