{"action":"created","issue":{"url":"https://api.github.com/repos/muut/riotjs/issues/536","labels_url":"https://api.github.com/repos/muut/riotjs/issues/536/labels{/name}","comments_url":"https://api.github.com/repos/muut/riotjs/issues/536/comments","events_url":"https://api.github.com/repos/muut/riotjs/issues/536/events","html_url":"https://github.com/muut/riotjs/issues/536","id":64172179,"number":536,"title":"Mixins. This could be an easy thing to implement","user":{"login":"emehrkay","id":24242,"avatar_url":"https://avatars.githubusercontent.com/u/24242?v=3","gravatar_id":"","url":"https://api.github.com/users/emehrkay","html_url":"https://github.com/emehrkay","followers_url":"https://api.github.com/users/emehrkay/followers","following_url":"https://api.github.com/users/emehrkay/following{/other_user}","gists_url":"https://api.github.com/users/emehrkay/gists{/gist_id}","starred_url":"https://api.github.com/users/emehrkay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emehrkay/subscriptions","organizations_url":"https://api.github.com/users/emehrkay/orgs","repos_url":"https://api.github.com/users/emehrkay/repos","events_url":"https://api.github.com/users/emehrkay/events{/privacy}","received_events_url":"https://api.github.com/users/emehrkay/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-03-25T04:40:21Z","updated_at":"2015-04-24T21:11:45Z","closed_at":null,"body":"I was playing around with the idea of having mixins with the tags because I found myself need that kind of functionality. I took a look at the compiler and it would only take a few changes to make it happen.\r\n\r\nIn the compiler we simply return this in the mktag function\r\n\r\n````javascript\r\n      function mktag(name, html, css, js) {\r\n        return 'riot.tag(\\''\r\n          + name + '\\', \\''\r\n          + html + '\\''\r\n          + (css ? ', \\'' + css + '\\'' : '')\r\n          + ', function(opts) {' + js + '\\n return this \\n});'\r\n      }\r\n```\r\n\r\nThen in the Tag constructor, you'd simply set that return to a temp variable when mounting\r\n\r\n```javascript\r\n    // initialiation\r\n    //fn && fn.call(self, opts) // existing code\r\nif (fn){\r\n  var func = fn.call(self, opts)\r\n  if('mixins' in func){\r\n    each(func.mixins, function(mix){\r\n      extend(self, mix)\r\n    })\r\n    delete func['mixins']\r\n  }\r\n}\r\n\r\n```\r\n\r\nAnd finally in you define your mixin (object literal) and tag and finally mount it all\r\n\r\n```html\r\n    <test></test>\r\n    <script>\r\n    var Mixin = {\r\n        'some_member': 'some mixin value',\r\n        \r\n        alertFromMixin: function(){\r\n            alert(' alert from mixin')\r\n            console.log(this)\r\n        }\r\n    }\r\n    riot.mount('test')\r\n    </script>\r\n\r\n<test>\r\n    <div>\r\n        <a href=\"#\" onclick={ alertFromMixin }>should trigger mixin</a> \r\n        <a href=\"#\" onclick={ otherFunc }>interal</a>\r\n    </div>\r\n     \r\n    <script>\r\n        this.mixins = [Mixin]\r\n    \r\n        otherFunc(){\r\n            alert('from definition '+ this.some_member)\r\n        }\r\n    </script>\r\n</test>\r\n```\r\n\r\nThis approach allows for multiple mixins\r\n\r\n```html\r\n    <test></test>\r\n    <script>\r\n    var Mixin = {\r\n        'some_member': 'some mixin value',\r\n        \r\n        alertFromMixin: function(){\r\n            alert(' alert from mixin')\r\n            console.log(this)\r\n        }\r\n    }\r\n    \r\n    var SecondMixin = {\r\n        fromSecond: function(){\r\n            alert('alert from second mixin')\r\n        }\r\n    }\r\n    riot.mount('test')\r\n    </script>\r\n\r\n<test>\r\n    <div>\r\n        <a href=\"#\" onclick={ alertFromMixin }>should trigger mixin</a> \r\n        <a href=\"#\" onclick={ otherFunc }>interal</a> \r\n        <a href=\"#\" onclick={ fromSecond }>second mixin</a>\r\n    </div>\r\n     \r\n    <script>\r\n        this.mixins = [Mixin, SecondMixin]\r\n    \r\n        otherFunc(){\r\n            alert('from definition '+ this.some_member)\r\n        }\r\n    </script>\r\n</test>\r\n\r\n```\r\n\r\nWhat do you all think?"},"comment":{"url":"https://api.github.com/repos/muut/riotjs/issues/comments/96066753","html_url":"https://github.com/muut/riotjs/issues/536#issuecomment-96066753","issue_url":"https://api.github.com/repos/muut/riotjs/issues/536","id":96066753,"user":{"login":"emehrkay","id":24242,"avatar_url":"https://avatars.githubusercontent.com/u/24242?v=3","gravatar_id":"","url":"https://api.github.com/users/emehrkay","html_url":"https://github.com/emehrkay","followers_url":"https://api.github.com/users/emehrkay/followers","following_url":"https://api.github.com/users/emehrkay/following{/other_user}","gists_url":"https://api.github.com/users/emehrkay/gists{/gist_id}","starred_url":"https://api.github.com/users/emehrkay/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emehrkay/subscriptions","organizations_url":"https://api.github.com/users/emehrkay/orgs","repos_url":"https://api.github.com/users/emehrkay/repos","events_url":"https://api.github.com/users/emehrkay/events{/privacy}","received_events_url":"https://api.github.com/users/emehrkay/received_events","type":"User","site_admin":false},"created_at":"2015-04-24T21:11:45Z","updated_at":"2015-04-24T21:11:45Z","body":"I'll do it this weekend \n\nSent from my iPhone\n\n> On Apr 24, 2015, at 4:40 PM, Gianluca Guarini <notifications@github.com> wrote:\n> \n> @emehrkay why don't you make a pull request with some tests?\n> \n> —\n> Reply to this email directly or view it on GitHub.\n> \n"}}