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

removed superfluous flattens, made generated code look almost like what hand crafted code would look like

Browse Source
This commit is contained in:
Avi Marcus 2014-11-12 10:48:22 +02:00
parent 50eb6bff36
commit 979cc0ddb8
5 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/reactTemplates.js
View File

@ -13,7 +13,8 @@ var fs = require('fs');
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 %>])))');
var simpleTagTemplate = _.template('<%= name %>(<%= props %><%= children %>)');
var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %><%= children %>]))');
var commentTemplate = _.template(' /* <%= data %> */ ');
var templateTemplate = _.template("define([<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(){ return <%= body %>};\n});");
@ -33,11 +34,9 @@ _.forEach(reactSupportedAttributes,function (attributeReactName) {
function concatChildren(children) {
var res = '';
var first = true;
_.forEach(children, function (child) {
if (child.indexOf(' /*') !== 0 && child) {
res += (first ? '' : ',') + child;
first = false;
res += ',' + child;
} else {
res += child;
}
@ -165,6 +164,12 @@ function addIfNotThere(array, obj) {
}
}
function hasNonSimpleChildren(node) {
return _.any(node.children,function (child) {
return child.type === 'tag' && child.attribs[templateProp];
});
}
function convertHtmlToReact(node, context) {
if (node.type === 'tag') {
context = {
@ -193,7 +198,11 @@ function convertHtmlToReact(node, context) {
return convertHtmlToReact(child, context);
}));
data.body = tagTemplate(data);
if (hasNonSimpleChildren(node)) {
data.body = tagTemplate(data);
} else {
data.body = simpleTagTemplate(data);
}
if (node.attribs[templateProp]) {
data.repeatFunction = generateInjectedFunc(context,"repeat"+capitalize(data.item),"return "+data.body);
@ -295,4 +304,4 @@ module.exports = {
convertTemplateToReact: convertTemplateToReact,
convertFile: convertFile,
_test: {}
};
};

4
test/data/div.rt.js
View File

@ -4,6 +4,6 @@ define([
], function (React, _) {
'use strict';
return function () {
return React.DOM.div.apply(this, _.flatten([{}].concat([])));
return React.DOM.div({});
};
});
});

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

@ -8,15 +8,18 @@ define([
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 React.DOM.div({}, React.DOM.span({
'style': {
width: 'auto',
lineHeight: '5px'
},
'onClick': onClick1.bind(this, items, itemsIndex)
}, 'Mock'));
}
return function () {
return React.DOM.p.apply(this, _.flatten([{}].concat([_.map(this.props.things, repeatItems2.bind(this))])));
return React.DOM.p.apply(this, _.flatten([
{},
_.map(this.props.things, repeatItems2.bind(this))
]));
};
});

52
test/data/test.rt.js
View File

@ -4,33 +4,27 @@ define([
], function (React, _) {
'use strict';
return function () {
return React.DOM.div.apply(this, _.flatten([{}].concat([
React.DOM.div.apply(this, _.flatten([{
'style': {
position: 'relative',
textAlign: 'center',
top: this.props.config.previewTop,
height: this.props.config.previewHeight
}
}].concat([React.DOM.div.apply(this, _.flatten([{
'style': {
margin: 'auto',
height: '100%',
width: this.props.config.previewWidth || '100%'
}
}].concat([React.DOM.iframe.apply(this, _.flatten([{
'id': 'preview',
'src': 'http://localhost/sites/412?ds=true',
'style': {
width: '100%',
height: '100%',
border: '0'
}
}].concat([])))])))]))),
React.DOM.div.apply(this, _.flatten([{}].concat([
'editor',
!this.props.editorState.previewMode ? React.DOM.div.apply(this, _.flatten([{}].concat(['left bar']))) : null
])))
])));
return React.DOM.div({}, React.DOM.div({
'style': {
position: 'relative',
textAlign: 'center',
top: this.props.config.previewTop,
height: this.props.config.previewHeight
}
}, React.DOM.div({
'style': {
margin: 'auto',
height: '100%',
width: this.props.config.previewWidth || '100%'
}
}, React.DOM.iframe({
'id': 'preview',
'src': 'http://localhost/sites/412?ds=true',
'style': {
width: '100%',
height: '100%',
border: '0'
}
}))), React.DOM.div({}, 'editor', !this.props.editorState.previewMode ? React.DOM.div({}, 'left bar') : null));
};
});
});

10
test/src/test.js
View File

@ -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,"");
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,"");
var actual = reactTemplates.convertTemplateToReact(html).replace(/\r/g,"").trim();
t.equal(actual, expected);
if (actual !== expected) {
fs.writeFileSync(filename + '.actual.js', actual);
@ -29,7 +29,10 @@ test('conversion test', function (t) {
});
function normalizeHtml(html) {
return cheerio.load(html,{normalizeWhitespace:true}).html().replace(/\>\s+\</g,"><");
return cheerio.load(html,{normalizeWhitespace:true}).html()
.replace(/\>\s+/mg,">")
.replace(/\s+\</mg,"<")
.replace(/\>\s+\</mg,"><");
}
test('html tests', function (t) {
@ -88,4 +91,3 @@ test('util.isStale', function (t) {
fs.unlinkSync(a);
fs.unlinkSync(b);
});