Add single-line comment syntax to CJSX [Fixes #40]

Before this change it was not possible to comment inside CJSX templates.

* #40
* jsdf/coffee-react#13

After this change, you can use the syntax:

     {#this is a cjsx comment}

The syntax was designed to look like a CJSX_ESCAPE that contains a
comment, but as the resulting coffee-script would be illegal this is
special-cased by the parser to return nothing.

Future work would be needed make this syntax work inside a tag:

    <Person {#comment} />

or to make multiline comments work:

    <Person>{###

    ###}</Person>

Author: ConradIrwin

src/parser.coffee

@@ -31,6 +31,7 @@ module.exports = class Parser
         ) or
         @cjsxStart() or
         @cjsxAttribute() or
+        @cjsxComment() or
         @cjsxEscape() or
         @cjsxUnescape() or
         @cjsxEnd() or
@@ -207,6 +208,13 @@ module.exports = class Parser
         "Invalid attribute #{input} in CJSX tag #{@peekActiveState(2).value}",
         first_line: @chunkLine, first_column: @chunkColumn
 
+  cjsxComment: ->
+    match = @chunk.match(/^\{#(.*)\}/)
+
+    return 0 unless match
+    @addLeafNodeToActiveBranch ParseTreeLeafNode($.CJSX_COMMENT, match[1])
+    return match[0].length
+
   cjsxEscape: ->
     return 0 unless @chunk.charAt(0) is '{' and
     @currentState() in [$.CJSX_EL, $.CJSX_ATTR_PAIR]

src/serialiser.coffee

@@ -157,6 +157,9 @@ nodeSerialisers =
       element = node.value
     "#{@reactObject}.createElement(#{element}, #{joinList(serialisedChildren)})"
 
+  CJSX_COMMENT: (node) ->
+    ""
+
   CJSX_ESC: (node) ->
     childrenSerialised = node.children
       .map((child) => @serialiseNode child)

src/symbols.coffee

@@ -26,6 +26,7 @@ module.exports =
   # they're just names for use in debugging
   CJSX_START: 'CJSX_START'
   CJSX_END: 'CJSX_END'
+  CJSX_COMMENT: 'CJSX_COMMENT'
   CJSX_ESC_START: 'CJSX_ESC_START'
   CJSX_ESC_END: 'CJSX_ESC_END'
   CJSX_PRAGMA: 'CJSX_PRAGMA'

test/output-testcases.txt

@@ -477,6 +477,52 @@ React.createElement(Person, null, """
 """)
 ##end
 
+##desc
+empty node is handled as expected
+##input
+<Person>
+</Person>
+##expected
+React.createElement(Person, null
+)
+##end
+
+##desc
+cs comment at start of cjsx escape
+##input
+<Person>
+{# i am a comment
+  "i am a string"
+}
+</Person>
+##expected
+React.createElement(Person, null,
+(# i am a comment
+  "i am a string"
+)
+)
+##end
+
+##desc
+cjsx comment is passed through
+##input
+<Person>
+{# i am a comment}
+</Person>
+##expected
+React.createElement(Person, null,
+
+)
+##end
+
+##desc
+comment syntax can be used inline
+##input
+<Person>{#comment inline}</Person>
+##expected
+React.createElement(Person, null, )
+##end
+
 ##desc
 string within cjsx is ignored by parser and escaped
 ##input