{"action":"opened","issue":{"url":"https://api.github.com/repos/marko-js/marko-widgets/issues/91","labels_url":"https://api.github.com/repos/marko-js/marko-widgets/issues/91/labels{/name}","comments_url":"https://api.github.com/repos/marko-js/marko-widgets/issues/91/comments","events_url":"https://api.github.com/repos/marko-js/marko-widgets/issues/91/events","html_url":"https://github.com/marko-js/marko-widgets/issues/91","id":106201989,"number":91,"title":"Define Widgets and Tags via Classes as an option","user":{"login":"kristianmandrup","id":125005,"avatar_url":"https://avatars.githubusercontent.com/u/125005?v=3","gravatar_id":"","url":"https://api.github.com/users/kristianmandrup","html_url":"https://github.com/kristianmandrup","followers_url":"https://api.github.com/users/kristianmandrup/followers","following_url":"https://api.github.com/users/kristianmandrup/following{/other_user}","gists_url":"https://api.github.com/users/kristianmandrup/gists{/gist_id}","starred_url":"https://api.github.com/users/kristianmandrup/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kristianmandrup/subscriptions","organizations_url":"https://api.github.com/users/kristianmandrup/orgs","repos_url":"https://api.github.com/users/kristianmandrup/repos","events_url":"https://api.github.com/users/kristianmandrup/events{/privacy}","received_events_url":"https://api.github.com/users/kristianmandrup/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-09-13T06:48:33Z","updated_at":"2015-09-13T06:48:33Z","closed_at":null,"body":"Now that Node.js 4.0 is out and most other modern frameworks leverage the concept of Classes in Javascript, I think it would be very appropriate if Marko Widgets (and Marko Tags in general) supported class definitions as a (modern) alternative. You could even leverage decorators, for those using Babel.\r\n\r\n```js\r\nmodule.exports = require('marko-widgets').defineComponent({\r\n    template: require('./template.marko'),\r\n\r\n    getTemplateData: function(state, input) {\r\n        return {\r\n            name: input.name\r\n        };\r\n    },\r\n\r\n    init: function() {\r\n        var el = this.el; // The root DOM element that the widget is bound to\r\n        console.log('Initializing widget: ' + el.id);\r\n    }\r\n});\r\n```\r\n\r\nCould be defined as a class, like this.\r\n\r\n```js\r\nimport {Widget} from 'marko-widgets';\r\n// if no argument, assume this pattern as default\r\n@template('./template.marko')\r\nexport default class extends Widget {\r\n  constructor () {\r\n        var el = this.el; // The root DOM element that the widget is bound to\r\n        console.log('Initializing widget: ' + el.id);\r\n  }\r\n  getTemplateData(state, input) {\r\n        return {\r\n            name: input.name\r\n        };\r\n  } \r\n}\r\n```\r\n\r\nLooks pretty cool and concise to me :) The cool thing is that it would be easy to leverage inheritance.\r\nDecorators can be used to provide mixin like behavior if needed.\r\n"}}