Look for render method on prototype?

[legomind]

I am writing my code in livescript and chaining the output into babel-loader (evil, I know)

I am essentially transpiling es5 javascript code for the sole benefit of using this plugin.

Anyhow, livescript has its own syntactic sugar for classes:

export class Hello extends React.Component
  (@props) -> super ...
  render: ->
    div null,
      h1 null, 'Hello World!'

That compiles (pre-babel) into:

var Hello, out$ = typeof exports != 'undefined' && exports || this;
out$.Hello = Hello = (function(superclass){
  var prototype = extend$((import$(Hello, superclass).displayName = 'Hello', Hello), superclass).prototype, constructor = Hello;
  function Hello(props){
    this.props = props;
    Hello.superclass.apply(this, arguments);
  }
  prototype.render = function(){
    return div(null, h1(null, 'Hello World!'));
  };
  return Hello;
}(React.Component));
function extend$(sub, sup){
  function fun(){} fun.prototype = (sub.superclass = sup).prototype;
  (sub.prototype = new fun).constructor = sub;
  if (typeof sup.extended == 'function') sup.extended(sub);
  return sub;
}
function import$(obj, src){
  var own = {}.hasOwnProperty;
  for (var key in src) if (own.call(src, key)) obj[key] = src[key];
  return obj;
}

Now, all of the Above runs just fine, however react-tranform does not recognize the resulting node tree.

So, my question is, would it be possible to modify the filter in react-transform to identify the above example of livescript generated code?

And, yes if I use this syntax, everything works great:

export Hello = React.create-class {
  display-name: \Hello
  render: ->
    div null,
      h1 null, 'Hello World!'
}

But I really want my cake, and to eat it too. 🍰

Any suggestions would be appreciated.

[gaearon]

I don't think we plan to support this. You can either use createClass or write your own Webpack/Browserify transform which applies these transforms to module.exports keys that look like React components. Related: gaearon/react-hot-loader#216.