From 50eb6bff3624c6f4d28ba92aa7a4b84bf447eccf Mon Sep 17 00:00:00 2001 From: avim Date: Tue, 11 Nov 2014 18:19:00 +0200 Subject: [PATCH] added names for generated functions makes generated code a bit eas --- src/reactTemplates.js | 19 ++++++++++++++----- test/data/repeat.rt.js | 21 +++++++++++---------- test/data/scope.rt | 10 +++++----- test/src/test.js | 5 +++-- 4 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/reactTemplates.js b/src/reactTemplates.js index 6a4b5b1..a7de380 100644 --- a/src/reactTemplates.js +++ b/src/reactTemplates.js @@ -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; }); diff --git a/test/data/repeat.rt.js b/test/data/repeat.rt.js index df6b031..ec5272e 100644 --- a/test/data/repeat.rt.js +++ b/test/data/repeat.rt.js @@ -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))]))); }; }); \ No newline at end of file diff --git a/test/data/scope.rt b/test/data/scope.rt index e834dec..e2382ee 100644 --- a/test/data/scope.rt +++ b/test/data/scope.rt @@ -1,9 +1,9 @@
-
- Item:#{itemIndex} = {item} -
-{typeof (items) == 'undefined'?'items not in scope':'items in scope'} -{typeof (item) == 'undefined'?'item not in scope':'item in scope'} +
+ Item:#{itemIndex} = {item} +
+ {typeof (items) == 'undefined'?'items not in scope':'items in scope'} + {typeof (item) == 'undefined'?'item not in scope':'item in scope'}
\ No newline at end of file diff --git a/test/src/test.js b/test/src/test.js index d0f800e..3d6772e 100644 --- a/test/src/test.js +++ b/test/src/test.js @@ -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+\<"); } 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);