instead comment with annotation, using string with annotation. More tests

Author: Sergii.Kliuchnyk

README.md

@@ -110,14 +110,15 @@ var MenuExample = React.createClass({
                         style = 'focused';
                     }
 
-                    return /* @jsx-tpl item */;
+                    return "@jsx-tpl item";
                 })
             }
         };
     }
 });
 ```
-Lets call attribute with this unique id just like annotation
+Annotation not in comment because it is a value, not just some meta information.
+Lets call attribute with this unique id just like annotation.
 ```html
 <div>
     <ul>

conv.js

@@ -5,9 +5,10 @@ var htmlParser = require('htmlparser2'),
 
 module.exports = convert;
 
-var tplAnnotations = /\/\*+\s*@jsx\-tpl\s+([\w\-]+)\s*\*\//g,
+var tplAnnotations = /["']\s*@jsx\-tpl\s+([\w\-]+)\s*['"]/g,
     tplAttr = 'jsx-tpl',
-    renderAnnotations = /<!--\s*@render\s+([\w\-]+)\s*-->/g,
+    renderAnnotation = /@render\s+([\w\-]+)/,
+    renderAnnotationComments = /<!--\s*@render\s+([\w\-]+)\s*-->/g,
     spreadAttr = /jsx\-spread="([\$\w]+)"/g,
     renderReturnSelector =
         'call[callee.object.name="React"][callee.property.name="createClass"]'+
@@ -19,45 +20,55 @@ function convert(js, html, callback) {
             return callback(err);
         }
 
-        var templates = {};
-
         prepareAttr(body);
 
-        domUtils.findAll(function (node) {
-            return domUtils.hasAttrib(node, tplAttr);
-        }, body.children).forEach(function (node) {
+        removeComments(body);
+
+        var tplList = findNodesByAttr(body, tplAttr);
+
+        var templates = {};
+        tplList.forEach(function (node) {
             var name = node.attribs[tplAttr];
             delete node.attribs[tplAttr];
-
             templates[name] = clearAttrQuotes(domUtils.getOuterHTML(node));
-
-            domUtils.removeElement(node);
         });
 
+        removeNodes(tplList);
+
         var _return = search(renderReturnSelector, js),
             _props = search(renderReturnSelector + ' > obj > prop', js),
             props = {};
 
-        _props.forEach(function (prop) {
-            var name = prop.key.name,
-                body = prop.value.body,
-                value = js.slice(body.start, body.end);
+        try {
+            _props.forEach(function (prop) {
+                var name = prop.key.name,
+                    body = prop.value.body,
+                    value = js.slice(body.start, body.end);
+
+                value = value.replace(tplAnnotations, function (x, name) {
+                    if (!templates.hasOwnProperty(name)) {
+                        throw new Error('JSX template "' + name + '" not exists');
+                    }
 
-            value = value.replace(tplAnnotations, function (x, name) {
-                return format('(%s)', templates[name]);
-            });
+                    return format('(%s)', templates[name]);
+                });
 
-            props[name] = value;
-        });
+                props[name] = value;
+            });
+        }
+        catch (e) {
+            return callback(e);
+        }
 
         var template = clearAttrQuotes(domUtils.getOuterHTML(body));
 
         try {
             template = template
-                .replace(renderAnnotations, function (x, name) {
+                .replace(renderAnnotationComments, function (x, name) {
                     if (!props.hasOwnProperty(name)) {
-                        throw new Error('Template "' + name + '" not exists');
+                        throw new Error('Render template "' + name + '" not exists');
                     }
+
                     return props[name];
                 })
             ;
@@ -69,8 +80,8 @@ function convert(js, html, callback) {
         if (_return.length === 0) {
             return callback(new Error('React.createClass return: option not found'));
         }
-        else if (_return.length > 2) {
-            return callback(new Error('More then one React.createClass return: option'));
+        else if (_return.length > 1) {
+            return callback(new Error('More then one React.createClass return: option found, should be only one'));
         }
         else {
             js = insert(js, _return[0].start, _return[0].end, format('return (%s);', template));
@@ -199,4 +210,27 @@ function clearAttrQuotes(html) {
         .replace(/="~~~\{/g, '={').replace(/}~~~"/g, '}')
         .replace(spreadAttr, '{...$1}')
     ;
+}
+
+function findNodesByAttr(body, attrName) {
+    return domUtils.findAll(function (node) {
+        return domUtils.hasAttrib(node, attrName);
+    }, body.children);
+}
+
+function removeNodes(nodeArray) {
+    nodeArray.forEach(function (node) {
+        domUtils.removeElement(node);
+    });
+}
+
+function removeComments(node) {
+    if (node.type === 'comment' && !renderAnnotation.test(node.data)) {
+        domUtils.removeElement(node);
+    }
+    else if (node.type === 'tag' && node.children) {
+        for (var i = 0; i < node.children.length; i++) {
+            removeComments(node.children[i]);
+        }
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-st",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "React separate template",
   "main": "conv.js",
   "dependencies": {

test/conv.js

@@ -7,12 +7,50 @@ function file(path) {
 }
 
 describe('convert function', function () {
+    var js = file('menu.js'),
+        html = file('menu.html');
 
     it ('should convert js + html to jsx', function (done) {
-        conv(file('menu.js'), file('menu.html'), function (err, jsx) {
+        conv(js, html, function (err, jsx) {
             expect(jsx).to.equal(file('menu.jsx'));
             done();
         });
     });
 
+    it ('should throw error: "Render not found"', function (done) {
+        var badHtml = html.replace('@render list', '@render test');
+
+        conv(js, badHtml, function (err, jsx) {
+            expect(err).not.to.be.null;
+            done();
+        });
+    });
+
+    it ('should throw error: "JSX template not found"', function (done) {
+        var badJs = js.replace('@jsx-tpl item', '@jsx-tpl test');
+
+        conv(badJs, html, function (err, jsx) {
+            expect(err).not.to.be.null;
+            done();
+        });
+    });
+
+    it ('should throw error: "Too many render:"', function (done) {
+        var badJs = js + js;
+
+        conv(badJs, html, function (err, jsx) {
+            expect(err).not.to.be.null;
+            done();
+        });
+    });
+
+    it ('should throw error: "No render:"', function (done) {
+        var badJs = js.replace('render:', 'list:');
+
+        conv(badJs, html, function (err, jsx) {
+            expect(err).not.to.be.null;
+            done();
+        });
+    });
+
 });

test/menu.html

@@ -1,5 +1,6 @@
 <!-- Regular comment -->
 <ul>
     <!-- @render list -->
+    <!-- inline comment -->
     <Item jsx-tpl="item" class="item {style}" jsx-spread="attr" title="Item">{m}</Item>
 </ul>

test/menu.js

@@ -17,7 +17,7 @@ var List = React.createClass({
 
                     var attr = {name: 'value'};
 
-                    return /* @jsx-tpl item */;
+                    return "@jsx-tpl item";
                 })
             },
             foo: function () {

test/menu.jsx

@@ -21,6 +21,7 @@ var List = React.createClass({
                 })
             }
 
+    
 </ul>);
     }
 });