{"action":"created","issue":{"url":"https://api.github.com/repos/babel/babel/issues/841","labels_url":"https://api.github.com/repos/babel/babel/issues/841/labels{/name}","comments_url":"https://api.github.com/repos/babel/babel/issues/841/comments","events_url":"https://api.github.com/repos/babel/babel/issues/841/events","html_url":"https://github.com/babel/babel/issues/841","id":58279940,"number":841,"title":"Make JSX transform generic","user":{"login":"anthonyshort","id":36125,"avatar_url":"https://avatars.githubusercontent.com/u/36125?v=3","gravatar_id":"","url":"https://api.github.com/users/anthonyshort","html_url":"https://github.com/anthonyshort","followers_url":"https://api.github.com/users/anthonyshort/followers","following_url":"https://api.github.com/users/anthonyshort/following{/other_user}","gists_url":"https://api.github.com/users/anthonyshort/gists{/gist_id}","starred_url":"https://api.github.com/users/anthonyshort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/anthonyshort/subscriptions","organizations_url":"https://api.github.com/users/anthonyshort/orgs","repos_url":"https://api.github.com/users/anthonyshort/repos","events_url":"https://api.github.com/users/anthonyshort/events{/privacy}","received_events_url":"https://api.github.com/users/anthonyshort/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-02-19T22:22:43Z","updated_at":"2015-02-19T22:46:31Z","closed_at":null,"body":"The JSX transform is currently coupled to React, but other libraries could potentially make use of the syntax. There are libraries like jsx-transform (https://github.com/alexmingoia/jsx-transform) that make the transform more generic and allow you to specific how the output should look:\r\n\r\n```js\r\n/** @jsx React.createElement */\r\nvar React = require('react');\r\n\r\nvar profile = <div>\r\n  <img src=\"avatar.png\" class=\"profile\" />\r\n  <h3>{[user.firstName, user.lastName].join(' ')}</h3>\r\n</div>;\r\n```\r\n\r\nTransforms it to:\r\n\r\n```js\r\nvar React = require('react');\r\n\r\nvar profile = React.createElement('div', null, [\r\n  React.createElement('img', { src: \"avatar.png\", class: \"profile\" }),\r\n  React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])\r\n]);\r\n```\r\n\r\nAlternative virtual DOM libraries can then use it:\r\n\r\n```js\r\n/** @jsx dom */\r\nvar {dom} = require('deku');\r\n\r\nvar profile = <div>\r\n  <img src=\"avatar.png\" class=\"profile\" />\r\n  <h3>{[user.firstName, user.lastName].join(' ')}</h3>\r\n</div>;\r\n```\r\n\r\nAnd get the same benefits of using JSX.\r\n\r\nYou could easily just add a setting for it rather than using the comment format too. If this is something that would be useful I can look at opening a PR for it. "},"comment":{"url":"https://api.github.com/repos/babel/babel/issues/comments/75155280","html_url":"https://github.com/babel/babel/issues/841#issuecomment-75155280","issue_url":"https://api.github.com/repos/babel/babel/issues/841","id":75155280,"user":{"login":"sebmck","id":853712,"avatar_url":"https://avatars.githubusercontent.com/u/853712?v=3","gravatar_id":"","url":"https://api.github.com/users/sebmck","html_url":"https://github.com/sebmck","followers_url":"https://api.github.com/users/sebmck/followers","following_url":"https://api.github.com/users/sebmck/following{/other_user}","gists_url":"https://api.github.com/users/sebmck/gists{/gist_id}","starred_url":"https://api.github.com/users/sebmck/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebmck/subscriptions","organizations_url":"https://api.github.com/users/sebmck/orgs","repos_url":"https://api.github.com/users/sebmck/repos","events_url":"https://api.github.com/users/sebmck/events{/privacy}","received_events_url":"https://api.github.com/users/sebmck/received_events","type":"User","site_admin":false},"created_at":"2015-02-19T22:46:31Z","updated_at":"2015-02-19T22:46:31Z","body":"This used to be available but I removed it when the `react` transformer was upgraded to React 0.12 because I wasn't sure how it's supposed to map when specifying a custom prefix. I can possibly add it to the `reactCompat` transformer since AFAIK all the alternate JSX libraries use that format.\r\n\r\nIn your example:\r\n\r\n```javascript\r\n/** @jsx dom */\r\nvar {dom} = require('deku');\r\n\r\nvar profile = <div>\r\n  <img src=\"avatar.png\" class=\"profile\" />\r\n  <h3>{[user.firstName, user.lastName].join(' ')}</h3>\r\n</div>;\r\n```\r\n\r\nwhat would that transform into?"}}