v0.0.4

Author: stevenvachon

index.js

@@ -1,5 +1,17 @@
 "use strict";
+var objectAssign = require("object-assign");
 var parser = require("handlebars-html-parser");
+var React = require("react");
+var uglify = require("uglify-js");
+
+var defaultOptions = 
+{
+beautify: true,
+prefix: "",
+suffix: ""
+};
+
+var createElementFunction = 'React.createElement(';
 
 
 
@@ -40,7 +52,9 @@ var parser = require("handlebars-html-parser");
 
 function compiler(options)
 {
-this.parser = new parser(options);
+this.options = objectAssign({}, defaultOptions, options);
+
+this.parser = new parser(this.options);
 }
 
 
@@ -50,7 +64,7 @@ compiler.prototype.compile = function(str)
 var attrCount,childrenCount/*,state*/;
 //var elementStack = [];
 var nodeStack = this.parser.parse(str);
-var result = '';
+var result = [];
 
 console.log(nodeStack);
 
@@ -92,12 +106,14 @@ compiler.prototype.compile = function(str)
 }
 case parser.type.HTML_ATTR_START:
 {
-result += ',';
+append(',', result);
+
 if (attrCount++ === 0)
 {
 //state = "attrs";
-result += '{';
+append('{', result);
 }
+
 break;
 }
 
@@ -118,7 +134,7 @@ compiler.prototype.compile = function(str)
 }
 case parser.type.HTML_ATTR_VALUE_START:
 {
-result += ':';
+append(':', result);
 break;
 }
 
@@ -135,11 +151,13 @@ compiler.prototype.compile = function(str)
 
 case parser.type.HTML_TAG_END:
 {
-result += closeAttrs(nodeStack, nodeIndex);
-if (isClosingTag(nodeStack,nodeIndex,-4) === true)
+append( closeAttrs(nodeStack, nodeIndex), result );
+
+if (isClosingTag(nodeStack, nodeIndex, -4) === true)
 {
-result += ')';
+append(')', result);
 }
+
 break;
 }
 case parser.type.HTML_TAG_START:
@@ -148,9 +166,10 @@ compiler.prototype.compile = function(str)
 {
 attrCount = 0;
 childrenCount = 0;
-result += prefix(nodeStack, nodeIndex);
-result += 'React.createElement(';
+append( prefix(nodeStack, nodeIndex), result );
+append( createElementFunction, result );
 }
+
 break;
 }
 
@@ -167,11 +186,15 @@ compiler.prototype.compile = function(str)
 
 case parser.type.TEXT:
 {
-if (isClosingTag(nodeStack,nodeIndex,-2) !== true)
+if (isClosingTag(nodeStack, nodeIndex, -2) !== true)
 {
-result += prefix(nodeStack, nodeIndex);
-result += '"'+ node.value +'"';
+//if (changeTagFunction(nodeStack, nodeIndex, node.value, result) === false)
+//{
+append( prefix(nodeStack, nodeIndex), result );
+append( '"'+ node.value +'"', result );
+//}
 }
+
 break;
 }
 
@@ -183,11 +206,49 @@ compiler.prototype.compile = function(str)
 }
 });
 
-return result;
+return finalize(result, this.options);
 };
 
 
 
+function append(string, resultArray)
+{
+if (string != null && string !== "")
+{
+resultArray.push(string);
+}
+}
+
+
+
+function changeTagFunction(nodeStack, nodeIndex, tagName, resultArray)
+{
+var lastResultIndex;
+
+// If we're defining a tag name
+if (previousNode(nodeStack,nodeIndex).type === parser.type.HTML_TAG_NAME_START)
+{
+lastResultIndex = resultArray.length-1;
+
+// If last result index is `React.createElement`
+if (resultArray[lastResultIndex] === createElementFunction)
+{
+tagName = tagName.toLowerCase();
+
+// If tag name has a `React.DOM` function
+if (typeof React.DOM[tagName] === "function")
+{
+resultArray[lastResultIndex] = 'React.DOM.' + tagName + '(';
+return true;
+}
+}
+}
+
+return false;
+}
+
+
+
 function closeAttrs(nodeStack, nodeIndex)
 {
 var prevNode = previousNode(nodeStack, nodeIndex);
@@ -205,6 +266,36 @@ function closeAttrs(nodeStack, nodeIndex)
 
 
 
+function finalize(resultArray, options)
+{
+var js = options.prefix + resultArray.join("") + options.suffix;
+
+// Check that the compiled JavaScript code is valid
+try
+{
+Function("", js);
+}
+catch (error)
+{
+console.log(js);
+throw error;
+}
+
+if (options.beautify === true)
+{
+js = uglify.parse(js).print_to_string(
+{
+beautify: true,
+comments: true,
+indent_level: 2
+});
+}
+
+return js;
+}
+
+
+
 function isClosingTag(nodeStack, nodeIndex, numPrev)
 {
 var twoNodesBack = previousNode(nodeStack, nodeIndex, numPrev);

package.json

@@ -1,7 +1,7 @@
 {
  "name": "handlebars-react",
  "description": "Compile Handlebars templates to React.",
- "version": "0.0.3",
+ "version": "0.0.4",
  "license": "MIT",
  "homepage": "https://github.com/stevenvachon/handlebars-react",
  "author": {
@@ -18,7 +18,10 @@
  "url": "https://github.com/stevenvachon/handlebars-react/issues"
  },
  "dependencies": {
- "handlebars-html-parser": "git://github.com/stevenvachon/handlebars-html-parser.git"
+ "handlebars-html-parser": "git://github.com/stevenvachon/handlebars-html-parser.git",
+ "object-assign": "^3.0.0",
+ "react": "^0.13.3",
+ "uglify-js": "^2.4.24"
  },
  "devDependencies": {
  "chai": "^3.2.0",
@@ -31,7 +34,8 @@
  "test": "mocha test/ --reporter spec --check-leaks --bail --no-exit"
  },
  "files": [
- "index.js"
+ "index.js",
+ "license"
  ],
  "keywords": [
  "handlebars",

test/test.js

@@ -3,28 +3,64 @@ var compiler = require("../");
 
 var expect = require("chai").expect;
 
+var options = { beautify:false };
 
 
-it("should work", function(done)
+
+describe("Basic HTML", function()
 {
-var result = new compiler().compile('<tag attr="value">text</tag>');
+it("should support a tag", function(done)
+{
+var result = new compiler(options).compile('<tag></tag>');
+var expectedResult = 'React.createElement("tag")';
+
+expect(result).to.equal(expectedResult);
+done();
+});
 
-console.log(result);
 
-//expect(result).to.equal();
 
-done();
-});
-
-
-
-it.skip("should work", function(done)
-{
-var result = new compiler().compile('<tag><tag/>text<tag/></tag>');
+it("should support a tag that has attributes", function(done)
+{
+var result = new compiler(options).compile('<tag attr="value"></tag>');
+var expectedResult = 'React.createElement("tag",{"attr":"value"})';
+
+expect(result).to.equal(expectedResult);
+done();
+});
+
+
+
+it("should support a tag that has attributes and text content", function(done)
+{
+var result = new compiler(options).compile('<tag attr="value">text</tag>');
+var expectedResult = 'React.createElement("tag",{"attr":"value"},"text")';
+
+//console.log( require("uglify-js").minify(result,{fromString:true}) );
+
+expect(result).to.equal(expectedResult);
+done();
+});
+
+
+
+it("should support a tag that has nested tags", function(done)
+{
+var result = new compiler(options).compile('<tag><tag/>text<tag/></tag>');
+var expectedResult = 'React.createElement("tag",React.createElement("tag"),"text",React.createElement("tag"))';
+
+expect(result).to.equal(expectedResult);
+done();
+});
 
-console.log(result);
 
-//expect(result).to.equal();
 
-done();
+it.skip("should support a tag with a convenience function that has nested tags", function(done)
+{
+var result = new compiler(options).compile('<div><tag/>text<tag/></div>');
+var expectedResult = 'React.DOM.div(React.createElement("tag"),"text",React.createElement("tag"))';
+
+expect(result).to.equal(expectedResult);
+done();
+});
 });