{"action":"created","issue":{"url":"https://api.github.com/repos/optimizely/nuclear-js/issues/44","labels_url":"https://api.github.com/repos/optimizely/nuclear-js/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/optimizely/nuclear-js/issues/44/comments","events_url":"https://api.github.com/repos/optimizely/nuclear-js/issues/44/events","html_url":"https://github.com/optimizely/nuclear-js/issues/44","id":74475875,"number":44,"title":"Higher order component or container component instead of mixin","user":{"login":"ksmth","id":1570868,"avatar_url":"https://avatars.githubusercontent.com/u/1570868?v=3","gravatar_id":"","url":"https://api.github.com/users/ksmth","html_url":"https://github.com/ksmth","followers_url":"https://api.github.com/users/ksmth/followers","following_url":"https://api.github.com/users/ksmth/following{/other_user}","gists_url":"https://api.github.com/users/ksmth/gists{/gist_id}","starred_url":"https://api.github.com/users/ksmth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ksmth/subscriptions","organizations_url":"https://api.github.com/users/ksmth/orgs","repos_url":"https://api.github.com/users/ksmth/repos","events_url":"https://api.github.com/users/ksmth/events{/privacy}","received_events_url":"https://api.github.com/users/ksmth/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/optimizely/nuclear-js/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":12,"created_at":"2015-05-08T19:58:06Z","updated_at":"2015-06-06T12:36:37Z","closed_at":null,"body":"As React is moving away from mixins, it might make sense to start talking about alternatives. Maybe something along the lines of:\r\n\r\n```\r\nfunction nuclearComponent(Component, dataBindings, reactor) {\r\n  return class NuclearComponent extends React.Component {\r\n    constructor() {\r\n      this.state = getState(reactor, dataBindings)\r\n    }\r\n\r\n    componentDidMount() {\r\n      var component = this\r\n      component.__unwatchFns = []\r\n      each(dataBindings, function(getter, key) {\r\n        var unwatchFn = reactor.observe(getter, function(val) {\r\n          var newState = {};\r\n          newState[key] = val;\r\n          component.setState(newState)\r\n        })\r\n\r\n        component.__unwatchFns.push(unwatchFn)\r\n      })\r\n    }\r\n\r\n    componentWillUnmount() {\r\n      while (this.__unwatchFns.length) {\r\n        this.__unwatchFns.shift()()\r\n      }\r\n    }\r\n\r\n    render () {\r\n        return <Component {...this.props} {...this.state} />;\r\n    }\r\n  }\r\n}\r\n```\r\nWhich you could then use like:\r\n\r\n```\r\n// ES7\r\n@nuclearComponent(dataBindings, reactor)\r\nclass MyComponent extend React.Component {\r\n    // ...\r\n}\r\n```\r\n```\r\n// ES6\r\nclass MyComponent extend React.Component {\r\n    // ...\r\n}\r\n\r\nMyComponent = nuclearComponent(MyComponent, dataBindings, reactor)\r\n```"},"comment":{"url":"https://api.github.com/repos/optimizely/nuclear-js/issues/comments/109572665","html_url":"https://github.com/optimizely/nuclear-js/issues/44#issuecomment-109572665","issue_url":"https://api.github.com/repos/optimizely/nuclear-js/issues/44","id":109572665,"user":{"login":"clessg","id":2166377,"avatar_url":"https://avatars.githubusercontent.com/u/2166377?v=3","gravatar_id":"","url":"https://api.github.com/users/clessg","html_url":"https://github.com/clessg","followers_url":"https://api.github.com/users/clessg/followers","following_url":"https://api.github.com/users/clessg/following{/other_user}","gists_url":"https://api.github.com/users/clessg/gists{/gist_id}","starred_url":"https://api.github.com/users/clessg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clessg/subscriptions","organizations_url":"https://api.github.com/users/clessg/orgs","repos_url":"https://api.github.com/users/clessg/repos","events_url":"https://api.github.com/users/clessg/events{/privacy}","received_events_url":"https://api.github.com/users/clessg/received_events","type":"User","site_admin":false},"created_at":"2015-06-06T12:36:37Z","updated_at":"2015-06-06T12:36:37Z","body":"I definitely agree with having a HoC/decorator/wrapper. "}}