Custom element is not supported.

[qdrk]

sample.coffee

class Button
  render: =>
    super <paper-button className="rui-button rui-form-control" onClick={@buttonClicked}>{text}</paper-button>

is translated to sample.js

// Generated by CoffeeScript 1.8.0
var Button,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Button = (function() {
  function Button() {
    this.render = __bind(this.render, this);
  }

  Button.prototype.render = function() {
    return Button.__super__.render.call(this, React.createElement(paper - button, {
      "className": "rui-button rui-form-control",
      "onClick": this.buttonClicked
    }, text));
  };

  return Button;

})();

Note that the React.createElement doesn't give the right output.

[jsdf]

Would I be right in assuming that the desired output is

React.createElement("paper-button", ...)

?

[briann]

Just bumped into this - looks like the issue is that adding non-alpha characters as the element name in JSX will cause the generated output to be encapsulated in quotes. For example:

example.cjsx

namespace = {}

namespace.SubView = React.createClass
  render: ->
    <div>Just a subview...</div>

FailureCaseView = React.createClass
  render: ->
    <namespace.SubView />

SuccessCaseView = React.createClass
  render: ->
    React.createElement(namespace.SubView, null)

and the output example.js (look at FailureCaseView vs SuccessCaseView):

// Generated by CoffeeScript 1.9.1
(function() {
  var FailureCaseView, SuccessCaseView, namespace;

  namespace = {};

  namespace.SubView = React.createClass({
    render: function() {
      return React.createElement("div", null, "Just a subview...");
    }
  });

  FailureCaseView = React.createClass({
    render: function() {
      return React.createElement("namespace.SubView", null);
    }
  });

  SuccessCaseView = React.createClass({
    render: function() {
      return React.createElement(namespace.SubView, null);
    }
  });

}).call(this);

In the output JS, FailureCaseView's render should read the same as SuccessCaseView.

[briann]

Ah nevermind - my hypothesis in the last comment wasn't right. It's the fact that the first character in my namespace is a lowercase character. According to the React documentation the convention is lowercase = HTML tag (and therefore the quotes) and uppercase is another React component. Since the convention is this way, it's probably not an issue.

[jsdf]

The official JSX transformer doesn't seem to require the first character to be lower case when a namespace is used. We should probably support that functionality also, to keep in line with JSX. However, the convention is certainly to use an upper case first letter.

[cganas]

It would be great if this could be mentioned somewhere in the documentation. I spent awhile trying to figure out why my element wasn't being compiled "correctly."

[jsdf]

@cganas Sure thing. In the near future however, I'll change the implementation to only require the uppercase first letter for non-namespaced tags.

[Sawtaytoes]

I don't think this works right now. I took the example from the website with the <Vehicle> tag, and it didn't work. It compiled, but Chrome's throwing an error saying Vehicle isn't defined because it's not a string.