bobwen-dev/react-templates
1
0
Fork 0
mirror of https://github.com/bobwen-dev/react-templates synced 2025-04-12 00:56:39 +02:00
Code Issues Releases Wiki Activity

eslint fixes + chalk

Browse Source
This commit is contained in:
ido 2014-11-16 16:22:32 +02:00
parent 9a86394a76
commit d8d89c020f
4 changed files with 34 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -1,8 +1,11 @@
{ {
"name": "react-templates", "name": "react-templates",
"version": "0.0.0", "version": "0.0.1",
"description": "Light weight templates for react -> write html get valid react code", "description": "Light weight templates for react -> write html get valid react code",
"main": "./src/reactTemplates.js", "main": "./src/reactTemplates.js",
"bin": {
"rt": "./bin/rt.js"
},
"scripts": { "scripts": {
"test": "node test/src/test.js" "test": "node test/src/test.js"
}, },
@ -17,6 +20,7 @@
}, },
"homepage": "https://github.com/wix/react-templates", "homepage": "https://github.com/wix/react-templates",
"dependencies": { "dependencies": {
"chalk": "^0.5.1",
"cheerio": "^0.18.0", "cheerio": "^0.18.0",
"escodegen": "^1.4.1", "escodegen": "^1.4.1",
"esprima": "^1.2.2", "esprima": "^1.2.2",

36
src/reactTemplates.js
View File

@ -8,7 +8,7 @@ var esprima = require('esprima');
var escodegen = require('escodegen'); var escodegen = require('escodegen');
var React = require('react'); var React = require('react');
var fs = require('fs'); var fs = require('fs');
var chalk = require('chalk');
var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))'); var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))');
var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)'); var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)');
@ -80,8 +80,8 @@ function convertText(txt) {
if (txt) { if (txt) {
res += (first ? '' : '+') + JSON.stringify(txt); res += (first ? '' : '+') + JSON.stringify(txt);
} }
if (res === "") { if (res === '') {
res = "true"; res = 'true';
} }
return res; return res;
@ -94,9 +94,9 @@ function isStringOnlyCode(txt) {
function generateInjectedFunc(context, namePrefix, body, params) { function generateInjectedFunc(context, namePrefix, body, params) {
params = params || context.boundParams; params = params || context.boundParams;
var generatedFuncName = namePrefix.replace(",","") + (context.injectedFunctions.length + 1); var generatedFuncName = namePrefix.replace(',','') + (context.injectedFunctions.length + 1);
var funcText = "function " + generatedFuncName + "(" + params.join(","); var funcText = 'function ' + generatedFuncName + '(' + params.join(',');
funcText += ") {\n" + body + "\n}\n"; funcText += ') {\n' + body + '\n}\n';
context.injectedFunctions.push(funcText); context.injectedFunctions.push(funcText);
return generatedFuncName; return generatedFuncName;
} }
@ -120,9 +120,9 @@ function generateProps(node, context) {
params = params.concat([evtParams.trim()]); params = params.concat([evtParams.trim()]);
} }
var generatedFuncName = generateInjectedFunc(context, key, funcBody, params); var generatedFuncName = generateInjectedFunc(context, key, funcBody, params);
props[propKey] = generatedFuncName + ".bind(" + (["this"].concat(context.boundParams)).join(",") + ")"; props[propKey] = generatedFuncName + '.bind(' + (['this'].concat(context.boundParams)).join(',') + ')';
} else if (key === "style" && !isStringOnlyCode(val)) { } else if (key === 'style' && !isStringOnlyCode(val)) {
var styleParts = val.trim().split(";"); var styleParts = val.trim().split(';');
styleParts = _.compact(_.map(styleParts, function (str) { styleParts = _.compact(_.map(styleParts, function (str) {
str = str.trim(); str = str.trim();
if (!str || str.indexOf(':') === -1) { if (!str || str.indexOf(':') === -1) {
@ -183,12 +183,12 @@ function convertHtmlToReact(node, context) {
var data = {name: convertTagNameToConstructor(node.name)}; var data = {name: convertTagNameToConstructor(node.name)};
if (node.attribs[scopeProp]) { if (node.attribs[scopeProp]) {
data.scopeMapping = {}; data.scopeMapping = {};
data.scopeName = ""; data.scopeName = '';
_.each(context.boundParams,function (boundParam) { _.each(context.boundParams,function (boundParam) {
data.scopeMapping[boundParam] = boundParam; data.scopeMapping[boundParam] = boundParam;
}); });
_.each(node.attribs[scopeProp].split(";"),function (scopePart) { _.each(node.attribs[scopeProp].split(';'),function (scopePart) {
var scopeSubParts = scopePart.split(" as "); var scopeSubParts = scopePart.split(' as ');
var scopeName = scopeSubParts[1].trim(); var scopeName = scopeSubParts[1].trim();
addIfNotThere(context.boundParams, scopeName); addIfNotThere(context.boundParams, scopeName);
data.scopeName += capitalize(scopeName); data.scopeName += capitalize(scopeName);
@ -217,9 +217,9 @@ function convertHtmlToReact(node, context) {
} }
if (node.attribs[templateProp]) { if (node.attribs[templateProp]) {
data.repeatFunction = generateInjectedFunc(context,"repeat"+capitalize(data.item),"return "+data.body); data.repeatFunction = generateInjectedFunc(context,'repeat'+capitalize(data.item),'return '+data.body);
data.repeatBinds = ["this"].concat(_.reject(context.boundParams, function (param) { data.repeatBinds = ['this'].concat(_.reject(context.boundParams, function (param) {
return (param === data.item || param === data.item+"Index"); return (param === data.item || param === data.item+'Index');
})); }));
data.body = repeatTemplate(data); data.body = repeatTemplate(data);
} }
@ -227,8 +227,8 @@ function convertHtmlToReact(node, context) {
data.body = ifTemplate(data); data.body = ifTemplate(data);
} }
if (node.attribs[scopeProp]) { if (node.attribs[scopeProp]) {
var generatedFuncName = generateInjectedFunc(context,"scope"+data.scopeName,"return "+data.body,_.keys(data.scopeMapping)); var generatedFuncName = generateInjectedFunc(context,'scope'+data.scopeName,'return '+data.body,_.keys(data.scopeMapping));
data.body = generatedFuncName + ".apply(this, [" + _.values(data.scopeMapping).join(",") + "])"; data.body = generatedFuncName + '.apply(this, [' + _.values(data.scopeMapping).join(',') + '])';
} }
return data.body; return data.body;
} else if (node.type === 'comment') { } else if (node.type === 'comment') {
@ -296,7 +296,7 @@ function convertFile(source, target) {
var util = require('./util'); var util = require('./util');
if (!util.isStale(source, target)) { 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; // return;
} }

2
src/util.js
View File

@ -1,6 +1,6 @@
'use strict'; 'use strict';
var fs = require('fs'); var fs = require('fs');
var path = require('path'); //var path = require('path');
/** /**
* @param {string} source * @param {string} source

20
test/src/test.js
View File

@ -18,9 +18,9 @@ test('conversion test', function (t) {
function check(testFile) { function check(testFile) {
var filename = path.join(dataPath, testFile); var filename = path.join(dataPath, testFile);
var html = fs.readFileSync(filename).toString(); 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 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); t.equal(actual, expected);
if (actual !== expected) { if (actual !== expected) {
fs.writeFileSync(filename + '.actual.js', actual); fs.writeFileSync(filename + '.actual.js', actual);
@ -29,10 +29,10 @@ test('conversion test', function (t) {
}); });
function normalizeHtml(html) { function normalizeHtml(html) {
return cheerio.load(html,{normalizeWhitespace:true}).html() return cheerio.load(html, {normalizeWhitespace: true}).html()
.replace(/\>\s+/mg,">") .replace(/\>\s+/mg, '>')
.replace(/\s+\</mg,"<") .replace(/\s+\</mg, '<')
.replace(/\>\s+\</mg,"><"); .replace(/\>\s+\</mg, '><');
} }
test('html tests', function (t) { test('html tests', function (t) {
@ -44,11 +44,11 @@ test('html tests', function (t) {
function check(testFile) { function check(testFile) {
var filename = path.join(dataPath, testFile); var filename = path.join(dataPath, testFile);
var html = fs.readFileSync(filename).toString(); 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 expected = fs.readFileSync(filename.replace(".html", ".js")).toString();
var code = reactTemplates.convertTemplateToReact(html).replace(/\r/g,""); var code = reactTemplates.convertTemplateToReact(html).replace(/\r/g, '');
var defineMap = {"react":React,"lodash":_}; var defineMap = {react: React, lodash: _};
var define = function (requirementsNames,content) { var define = function (requirementsNames, content) {
var requirements = _.map(requirementsNames,function (reqName) { var requirements = _.map(requirementsNames,function (reqName) {
return defineMap[reqName]; return defineMap[reqName];
}); });