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

added names for generated functions makes generated code a bit eas

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/reactTemplates.js
View File

@ -10,7 +10,7 @@ var React = require('react');
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 classSetTemplate = _.template('React.addons.classSet(<%= classSet %>)');
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(); });
}
function capitalize(str) {
return str[0].toUpperCase() + str.slice(1);
}
var curlyMap = {'{': 1, '}': -1};
function convertText(txt) {
@ -89,8 +93,8 @@ function isStringOnlyCode(txt) {
return txt.length && txt.charAt(0) === '{' && txt.charAt(txt.length - 1) === '}';
}
function generateInjectedFunc(context,body,extraParams) {
var generatedFuncName = "generated" + (context.injectedFunctions.length + 1);
function generateInjectedFunc(context, namePrefix, body, extraParams) {
var generatedFuncName = namePrefix.replace(",","") + (context.injectedFunctions.length + 1);
var params = context.boundParams;
if (extraParams && extraParams.trim().length > 0) {
params = params.concat(extraParams.trim());
@ -113,7 +117,7 @@ function generateProps(node, context) {
var funcParts = val.split('=>');
var evtParams = funcParts[0].replace('(', '').replace(')', '').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(",") + ")";
} else if (key === "style" && !isStringOnlyCode(val)) {
var styleParts = val.trim().split(";");
@ -192,13 +196,18 @@ function convertHtmlToReact(node, context) {
data.body = tagTemplate(data);
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);
}
if (node.attribs[ifProp]) {
data.body = ifTemplate(data);
}
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) {
return param === data.scopeName?data.scopeValue:param;
});

21
test/data/repeat.rt.js
View File

@ -3,19 +3,20 @@ define([
'lodash'
], function (React, _) {
'use strict';
function generated1(items, itemsIndex, evt) {
function onClick1(items, itemsIndex, evt) {
this.happend(evt);
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 React.DOM.p.apply(this, _.flatten([{}].concat([_.map(this.props.things, function (items, itemsIndex) {
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)])));
return React.DOM.p.apply(this, _.flatten([{}].concat([_.map(this.props.things, repeatItems2.bind(this))])));
};
});

10
test/data/scope.rt
View File

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

5
test/src/test.js
View File

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