diff --git a/package.json b/package.json index 29c3f55..735c8be 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,11 @@ { "name": "react-templates", - "version": "0.0.0", + "version": "0.0.1", "description": "Light weight templates for react -> write html get valid react code", "main": "./src/reactTemplates.js", + "bin": { + "rt": "./bin/rt.js" + }, "scripts": { "test": "node test/src/test.js" }, @@ -17,6 +20,7 @@ }, "homepage": "https://github.com/wix/react-templates", "dependencies": { + "chalk": "^0.5.1", "cheerio": "^0.18.0", "escodegen": "^1.4.1", "esprima": "^1.2.2", diff --git a/src/reactTemplates.js b/src/reactTemplates.js index 5276048..2e360ea 100644 --- a/src/reactTemplates.js +++ b/src/reactTemplates.js @@ -8,7 +8,7 @@ var esprima = require('esprima'); var escodegen = require('escodegen'); var React = require('react'); var fs = require('fs'); - +var chalk = require('chalk'); var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))'); var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)'); @@ -80,8 +80,8 @@ function convertText(txt) { if (txt) { res += (first ? '' : '+') + JSON.stringify(txt); } - if (res === "") { - res = "true"; + if (res === '') { + res = 'true'; } return res; @@ -94,9 +94,9 @@ function isStringOnlyCode(txt) { function generateInjectedFunc(context, namePrefix, body, params) { params = params || context.boundParams; - var generatedFuncName = namePrefix.replace(",","") + (context.injectedFunctions.length + 1); - var funcText = "function " + generatedFuncName + "(" + params.join(","); - funcText += ") {\n" + body + "\n}\n"; + var generatedFuncName = namePrefix.replace(',','') + (context.injectedFunctions.length + 1); + var funcText = 'function ' + generatedFuncName + '(' + params.join(','); + funcText += ') {\n' + body + '\n}\n'; context.injectedFunctions.push(funcText); return generatedFuncName; } @@ -120,9 +120,9 @@ function generateProps(node, context) { params = params.concat([evtParams.trim()]); } var generatedFuncName = generateInjectedFunc(context, key, funcBody, params); - props[propKey] = generatedFuncName + ".bind(" + (["this"].concat(context.boundParams)).join(",") + ")"; - } else if (key === "style" && !isStringOnlyCode(val)) { - var styleParts = val.trim().split(";"); + props[propKey] = generatedFuncName + '.bind(' + (['this'].concat(context.boundParams)).join(',') + ')'; + } else if (key === 'style' && !isStringOnlyCode(val)) { + var styleParts = val.trim().split(';'); styleParts = _.compact(_.map(styleParts, function (str) { str = str.trim(); if (!str || str.indexOf(':') === -1) { @@ -183,12 +183,12 @@ function convertHtmlToReact(node, context) { var data = {name: convertTagNameToConstructor(node.name)}; if (node.attribs[scopeProp]) { data.scopeMapping = {}; - data.scopeName = ""; + data.scopeName = ''; _.each(context.boundParams,function (boundParam) { data.scopeMapping[boundParam] = boundParam; }); - _.each(node.attribs[scopeProp].split(";"),function (scopePart) { - var scopeSubParts = scopePart.split(" as "); + _.each(node.attribs[scopeProp].split(';'),function (scopePart) { + var scopeSubParts = scopePart.split(' as '); var scopeName = scopeSubParts[1].trim(); addIfNotThere(context.boundParams, scopeName); data.scopeName += capitalize(scopeName); @@ -217,9 +217,9 @@ function convertHtmlToReact(node, context) { } if (node.attribs[templateProp]) { - data.repeatFunction = generateInjectedFunc(context,"repeat"+capitalize(data.item),"return "+data.body); - data.repeatBinds = ["this"].concat(_.reject(context.boundParams, function (param) { - return (param === data.item || param === data.item+"Index"); + data.repeatFunction = generateInjectedFunc(context,'repeat'+capitalize(data.item),'return '+data.body); + data.repeatBinds = ['this'].concat(_.reject(context.boundParams, function (param) { + return (param === data.item || param === data.item+'Index'); })); data.body = repeatTemplate(data); } @@ -227,8 +227,8 @@ function convertHtmlToReact(node, context) { data.body = ifTemplate(data); } if (node.attribs[scopeProp]) { - var generatedFuncName = generateInjectedFunc(context,"scope"+data.scopeName,"return "+data.body,_.keys(data.scopeMapping)); - data.body = generatedFuncName + ".apply(this, [" + _.values(data.scopeMapping).join(",") + "])"; + var generatedFuncName = generateInjectedFunc(context,'scope'+data.scopeName,'return '+data.body,_.keys(data.scopeMapping)); + data.body = generatedFuncName + '.apply(this, [' + _.values(data.scopeMapping).join(',') + '])'; } return data.body; } else if (node.type === 'comment') { @@ -296,7 +296,7 @@ function convertFile(source, target) { var util = require('./util'); if (!util.isStale(source, target)) { - console.log('target file ' + target + ' is up to date, skipping'); + console.log('target file ' + chalk.cyan(target) + ' is up to date, skipping'); // return; } diff --git a/src/util.js b/src/util.js index ef05289..a681314 100644 --- a/src/util.js +++ b/src/util.js @@ -1,6 +1,6 @@ 'use strict'; var fs = require('fs'); -var path = require('path'); +//var path = require('path'); /** * @param {string} source diff --git a/test/src/test.js b/test/src/test.js index e2612a9..0a97d31 100644 --- a/test/src/test.js +++ b/test/src/test.js @@ -18,9 +18,9 @@ test('conversion test', function (t) { function check(testFile) { var filename = path.join(dataPath, testFile); var html = fs.readFileSync(filename).toString(); - var expected = fs.readFileSync(filename + '.js').toString().replace(/\r/g,"").trim(); + var expected = fs.readFileSync(filename + '.js').toString().replace(/\r/g, '').trim(); // var expected = fs.readFileSync(filename.replace(".html", ".js")).toString(); - var actual = reactTemplates.convertTemplateToReact(html).replace(/\r/g,"").trim(); + var actual = reactTemplates.convertTemplateToReact(html).replace(/\r/g, '').trim(); t.equal(actual, expected); if (actual !== expected) { fs.writeFileSync(filename + '.actual.js', actual); @@ -29,10 +29,10 @@ test('conversion test', function (t) { }); function normalizeHtml(html) { - return cheerio.load(html,{normalizeWhitespace:true}).html() - .replace(/\>\s+/mg,">") - .replace(/\s+\\s+\<"); + return cheerio.load(html, {normalizeWhitespace: true}).html() + .replace(/\>\s+/mg, '>') + .replace(/\s+\\s+\<'); } test('html tests', function (t) { @@ -44,11 +44,11 @@ test('html tests', function (t) { function check(testFile) { var filename = path.join(dataPath, testFile); var html = fs.readFileSync(filename).toString(); - var expected = fs.readFileSync(filename + '.html').toString().replace(/\r/g,""); + var expected = fs.readFileSync(filename + '.html').toString().replace(/\r/g, ''); // var expected = fs.readFileSync(filename.replace(".html", ".js")).toString(); - var code = reactTemplates.convertTemplateToReact(html).replace(/\r/g,""); - var defineMap = {"react":React,"lodash":_}; - var define = function (requirementsNames,content) { + var code = reactTemplates.convertTemplateToReact(html).replace(/\r/g, ''); + var defineMap = {react: React, lodash: _}; + var define = function (requirementsNames, content) { var requirements = _.map(requirementsNames,function (reqName) { return defineMap[reqName]; });