added names for generated functions makes generated code a bit eas

This commit is contained in:
avim 2014-11-11 18:19:00 +02:00
parent 2b38b0ca31
commit 50eb6bff36
4 changed files with 33 additions and 22 deletions

View File

@ -10,7 +10,7 @@ var React = require('react');
var fs = require('fs'); var fs = require('fs');
var repeatTemplate = _.template('_.map(<%= collection %>,function (<%= item %>,<%= item %>Index) {\n return <%= body %>}, this)'); var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))');
var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)'); var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)');
var classSetTemplate = _.template('React.addons.classSet(<%= classSet %>)'); var classSetTemplate = _.template('React.addons.classSet(<%= classSet %>)');
var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %>].concat([<%= children %>])))'); var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %>].concat([<%= children %>])))');
@ -49,6 +49,10 @@ function convertToCamelCase(str) {
return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); }); return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
} }
function capitalize(str) {
return str[0].toUpperCase() + str.slice(1);
}
var curlyMap = {'{': 1, '}': -1}; var curlyMap = {'{': 1, '}': -1};
function convertText(txt) { function convertText(txt) {
@ -89,8 +93,8 @@ function isStringOnlyCode(txt) {
return txt.length && txt.charAt(0) === '{' && txt.charAt(txt.length - 1) === '}'; return txt.length && txt.charAt(0) === '{' && txt.charAt(txt.length - 1) === '}';
} }
function generateInjectedFunc(context,body,extraParams) { function generateInjectedFunc(context, namePrefix, body, extraParams) {
var generatedFuncName = "generated" + (context.injectedFunctions.length + 1); var generatedFuncName = namePrefix.replace(",","") + (context.injectedFunctions.length + 1);
var params = context.boundParams; var params = context.boundParams;
if (extraParams && extraParams.trim().length > 0) { if (extraParams && extraParams.trim().length > 0) {
params = params.concat(extraParams.trim()); params = params.concat(extraParams.trim());
@ -113,7 +117,7 @@ function generateProps(node, context) {
var funcParts = val.split('=>'); var funcParts = val.split('=>');
var evtParams = funcParts[0].replace('(', '').replace(')', '').trim(); var evtParams = funcParts[0].replace('(', '').replace(')', '').trim();
var funcBody = funcParts[1].trim(); var funcBody = funcParts[1].trim();
var generatedFuncName = generateInjectedFunc(context,funcBody,evtParams); var generatedFuncName = generateInjectedFunc(context, key, funcBody,evtParams);
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(";");
@ -192,13 +196,18 @@ function convertHtmlToReact(node, context) {
data.body = tagTemplate(data); data.body = tagTemplate(data);
if (node.attribs[templateProp]) { 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");
}));
console.log(data.repeatBinds);
data.body = repeatTemplate(data); data.body = repeatTemplate(data);
} }
if (node.attribs[ifProp]) { if (node.attribs[ifProp]) {
data.body = ifTemplate(data); data.body = ifTemplate(data);
} }
if (node.attribs[scopeProp]) { if (node.attribs[scopeProp]) {
var generatedFuncName = generateInjectedFunc(context,"return "+data.body); var generatedFuncName = generateInjectedFunc(context,"scope"+capitalize(data.scopeName),"return "+data.body);
var scopeParams = _.map(context.boundParams, function (param) { var scopeParams = _.map(context.boundParams, function (param) {
return param === data.scopeName?data.scopeValue:param; return param === data.scopeName?data.scopeValue:param;
}); });

View File

@ -3,19 +3,20 @@ define([
'lodash' 'lodash'
], function (React, _) { ], function (React, _) {
'use strict'; 'use strict';
function generated1(items, itemsIndex, evt) { function onClick1(items, itemsIndex, evt) {
this.happend(evt); this.happend(evt);
return false; return false;
} }
function repeatItems2(items, itemsIndex) {
return React.DOM.div.apply(this, _.flatten([{}].concat([React.DOM.span.apply(this, _.flatten([{
'style': {
width: 'auto',
lineHeight: '5px'
},
'onClick': onClick1.bind(this, items, itemsIndex)
}].concat(['Mock'])))])));
}
return function () { return function () {
return React.DOM.p.apply(this, _.flatten([{}].concat([_.map(this.props.things, function (items, itemsIndex) { return React.DOM.p.apply(this, _.flatten([{}].concat([_.map(this.props.things, repeatItems2.bind(this))])));
return React.DOM.div.apply(this, _.flatten([{}].concat([React.DOM.span.apply(this, _.flatten([{
'style': {
width: 'auto',
lineHeight: '5px'
},
'onClick': generated1.bind(this, items, itemsIndex)
}].concat(['Mock'])))])));
}, this)])));
}; };
}); });

View File

@ -1,9 +1,9 @@
<!DOCTYPE jsx> <!DOCTYPE jsx>
<div> <div>
<div rt-scope="['a','b','c'] as items"> <div rt-scope="['a','b','c'] as items">
<span rt-repeat="item in items">Item:#{itemIndex} = {item}</span> <span rt-repeat="item in items">Item:#{itemIndex} = {item}</span>
</div> </div>
<span>{typeof (items) == 'undefined'?'items not in scope':'items in scope'}</span> <span>{typeof (items) == 'undefined'?'items not in scope':'items in scope'}</span>
<span>{typeof (item) == 'undefined'?'item not in scope':'item in scope'}</span> <span>{typeof (item) == 'undefined'?'item not in scope':'item in scope'}</span>
</div> </div>

View File

@ -29,7 +29,7 @@ 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+\</g,"><");
} }
test('html tests', function (t) { test('html tests', function (t) {
@ -56,7 +56,8 @@ test('html tests', function (t) {
})); }));
var actual = React.renderToStaticMarkup(comp()); var actual = React.renderToStaticMarkup(comp());
actual = normalizeHtml(actual); actual = normalizeHtml(actual);
expected = normalizeHtml(actual); expected = normalizeHtml(expected);
console.log(actual,expected)
t.equal(actual, expected); t.equal(actual, expected);
if (actual !== expected) { if (actual !== expected) {
fs.writeFileSync(filename + '.actual.html', actual); fs.writeFileSync(filename + '.actual.html', actual);