mirror of
https://github.com/bobwen-dev/react-templates
synced 2025-04-12 00:56:39 +02:00
added names for generated functions makes generated code a bit eas
This commit is contained in:
parent
2b38b0ca31
commit
50eb6bff36
@ -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;
|
||||||
});
|
});
|
||||||
|
@ -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)])));
|
|
||||||
};
|
};
|
||||||
});
|
});
|
@ -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>
|
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user