Nested scope functions (fixes wix-incubator#139)

nippur72 · Jun 5, 2016 · 696144b · 696144b
1 parent bc9e3ff
commit 696144b
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 95 deletions.
diff --git a/src/reactSupport.js b/src/reactSupport.js
@@ -34,17 +34,12 @@ _.forEach(reactSupportedAttributes, attributeReactName => {
 
 const htmlSelfClosingTags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
 
-
-const templateAMDTemplate = _.template("define(<%= name ? '\"'+name + '\", ' : '' %>[<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(<%= statelessParams %>){ return <%= body %>};\n});");
-const templateCommonJSTemplate = _.template("'use strict';\n<%= vars %>\n\n<%= injectedFunctions %>\nmodule.exports = function(<%= statelessParams %>){ return <%= body %>};\n");
-const templateES6Template = _.template('<%= vars %>\n\n<%= injectedFunctions %>\nexport default function(<%= statelessParams %>){ return <%= body %>}\n');
-const templatePJSTemplate = _.template(`var <%= name %> = function (<%= statelessParams %>) {
-<%= injectedFunctions %>
-return <%= body %>
-};
-`);
-const templateTypescriptTemplate = _.template('<%= vars %>\n\n<%= injectedFunctions %>\nvar fn = function() { return <%= body %> };\nexport = fn\n');
-const templateJSRTTemplate = _.template('(function () {\n <%= injectedFunctions %>\n return function(){\nreturn <%= body %>}}\n)()');
+const templateAMDTemplate = _.template("define(<%= name ? '\"'+name + '\", ' : '' %>[<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\nreturn <%= renderFunction %>;\n});");
+const templateCommonJSTemplate = _.template("'use strict';\n<%= vars %>\nmodule.exports = <%= renderFunction %>;\n");
+const templateES6Template = _.template('<%= vars %>\nexport default <%= renderFunction %>\n');
+const templatePJSTemplate = _.template('var <%= name %> = <%= renderFunction %>');
+const templateTypescriptTemplate = _.template('<%= vars %>\nvar fn = <%= renderFunction %>;\nexport = fn\n');
+const templateJSRTTemplate = _.template('<%= renderFunction %>');
 
 const templates = {
     amd: templateAMDTemplate,

diff --git a/src/reactTemplates.js b/src/reactTemplates.js
@@ -565,6 +565,9 @@ function convertRT(html, reportContext, options) {
 
     const context = defaultContext(html, options, reportContext);
     const body = parseAndConvertHtmlToReact(html, context);
+    const injectedFunctions = context.injectedFunctions.join('\n');
+    const statelessParams = context.stateless ? 'props, context' : '';
+    const renderFunction = `function(${statelessParams}) { ${injectedFunctions}return ${body} }`;
 
     const requirePaths = _.map(context.defines, d => `"${d.moduleName}"`).join(',');
     const requireNames = _.map(context.defines, d => `${d.alias}`).join(',');
@@ -573,13 +576,11 @@ function convertRT(html, reportContext, options) {
     const header = options.flow ? '/* @flow */\n' : '';
     const vars = header + requires;
     const data = {
-        body,
-        injectedFunctions: context.injectedFunctions.join('\n'),
+        renderFunction,
         requireNames,
         requirePaths,
         vars,
-        name: options.name,
-        statelessParams: context.stateless ? 'props, context' : ''
+        name: options.name
     };
     let code = templates[options.modules](data);
     if (options.modules !== 'typescript' && options.modules !== 'jsrt') {

diff --git a/test/data/div.rt.typescript.ts b/test/data/div.rt.typescript.ts
@@ -1,6 +1,4 @@
 import React = require('react');
 import _ = require('lodash');
-
-
 var fn = function() { return React.createElement('div',{}) };
 export = fn
diff --git a/test/data/if-with-scope/valid-if-scope.rt.js b/test/data/if-with-scope/valid-if-scope.rt.js
@@ -3,11 +3,11 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function scopeActiveUsers1() {
-        var activeUsers = this.activeUsers;
-        return React.createElement('div', { 'key': 'active-users' }, React.createElement('span', {}, 'some text'));
-    }
     return function () {
+        function scopeActiveUsers1() {
+            var activeUsers = this.activeUsers;
+            return React.createElement('div', { 'key': 'active-users' }, React.createElement('span', {}, 'some text'));
+        }
         return this.activeUsers ? scopeActiveUsers1.apply(this, []) : null;
     };
 });
diff --git a/test/data/import.rt.typescript.ts b/test/data/import.rt.typescript.ts
@@ -4,7 +4,5 @@ import member = require('module-name').member;
 import alias2 = require('module-name').member;
 import alias3 = require('module-name');
 import alias4 = require('module-name').default;
-
-
 var fn = function() { return React.createElement('div',{}) };
 export = fn
diff --git a/test/data/native/listViewAndCustomTemplate.rt.js b/test/data/native/listViewAndCustomTemplate.rt.js
@@ -1,13 +1,13 @@
 'use strict';
 var React = require('react-native');
 var _ = require('lodash');
-function renderRow1(rowData) {
-    return React.createElement(React.Text, {}, rowData);
-}
-function renderRow2(item) {
-    return React.createElement(React.Text, {}, item);
-}
 module.exports = function () {
+    function renderRow1(rowData) {
+        return React.createElement(React.Text, {}, rowData);
+    }
+    function renderRow2(item) {
+        return React.createElement(React.Text, {}, item);
+    }
     return React.createElement(React.View, {}, React.createElement(React.ListView, {
         'dataSource': this.state.dataSource,
         'renderRow': renderRow1.bind(this)

diff --git a/test/data/native/listViewTemplate.rt.js b/test/data/native/listViewTemplate.rt.js
@@ -1,10 +1,10 @@
 'use strict';
 var React = require('react-native');
 var _ = require('lodash');
-function renderRow1(rowData) {
-    return React.createElement(React.Text, {}, rowData);
-}
 module.exports = function () {
+    function renderRow1(rowData) {
+        return React.createElement(React.Text, {}, rowData);
+    }
     return React.createElement(React.View, {}, React.createElement(React.ListView, {
         'dataSource': this.state.dataSource,
         'renderRow': renderRow1.bind(this)

diff --git a/test/data/propTemplates/implicitTemplate.rt.js b/test/data/propTemplates/implicitTemplate.rt.js
@@ -3,10 +3,10 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function renderRow1(rowData) {
-        return React.createElement('div', {}, rowData);
-    }
     return function () {
+        function renderRow1(rowData) {
+            return React.createElement('div', {}, rowData);
+        }
         return React.createElement('div', {}, React.createElement(List, {
             'data': [
                 1,

diff --git a/test/data/propTemplates/simpleTemplate.rt.js b/test/data/propTemplates/simpleTemplate.rt.js
@@ -3,10 +3,10 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function templateProp1(arg1) {
-        return React.createElement('div', {}, arg1);
-    }
     return function () {
+        function templateProp1(arg1) {
+            return React.createElement('div', {}, arg1);
+        }
         return React.createElement('div', { 'templateProp': templateProp1.bind(this) });
     };
 });
diff --git a/test/data/propTemplates/templateInScope.rt.js b/test/data/propTemplates/templateInScope.rt.js
@@ -3,14 +3,14 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function templateProp1(name, arg1) {
-        return React.createElement('div', {}, 'Name: ', name, ' ', arg1);
-    }
-    function scopeName2() {
-        var name = 'boten';
-        return React.createElement('div', { 'templateProp': templateProp1.bind(this, name) });
-    }
     return function () {
+        function templateProp1(name, arg1) {
+            return React.createElement('div', {}, 'Name: ', name, ' ', arg1);
+        }
+        function scopeName2() {
+            var name = 'boten';
+            return React.createElement('div', { 'templateProp': templateProp1.bind(this, name) });
+        }
         return scopeName2.apply(this, []);
     };
 });
diff --git a/test/data/propTemplates/twoTemplates.rt.js b/test/data/propTemplates/twoTemplates.rt.js
@@ -3,13 +3,13 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function templateProp21(arg1, inner1, inner2) {
-        return React.createElement('div', {}, arg1 + inner1 + inner2);
-    }
-    function templateProp2(arg1) {
-        return React.createElement('div', { 'templateProp2': templateProp21.bind(this, arg1) }, React.createElement('div', {}, arg1));
-    }
     return function () {
+        function templateProp21(arg1, inner1, inner2) {
+            return React.createElement('div', {}, arg1 + inner1 + inner2);
+        }
+        function templateProp2(arg1) {
+            return React.createElement('div', { 'templateProp2': templateProp21.bind(this, arg1) }, React.createElement('div', {}, arg1));
+        }
         return React.createElement('div', { 'templateProp': templateProp2.bind(this) });
     };
 });
diff --git a/test/data/repeat-with-index.rt.js b/test/data/repeat-with-index.rt.js
@@ -3,10 +3,10 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function repeatItem1(item, customIndex) {
-        return React.createElement('li', {}, item, ' is number ', customIndex);
-    }
     return function () {
+        function repeatItem1(item, customIndex) {
+            return React.createElement('li', {}, item, ' is number ', customIndex);
+        }
         return React.createElement.apply(this, [
             'ul',
             {},

diff --git a/test/data/repeat.rt.js b/test/data/repeat.rt.js
@@ -3,25 +3,25 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function onClick1(items, itemsIndex, evt) {
-        this.happend(evt);
-        return false;
-    }
-    function onMouseDown2(items, itemsIndex) {
-        this.happend();
-        return false;
-    }
-    function repeatItems3(items, itemsIndex) {
-        return React.createElement('div', {}, React.createElement('span', {
-            'style': {
-                width: 'auto',
-                lineHeight: '5px'
-            },
-            'onClick': onClick1.bind(this, items, itemsIndex),
-            'onMouseDown': onMouseDown2.bind(this, items, itemsIndex)
-        }, 'Mock'));
-    }
     return function () {
+        function onClick1(items, itemsIndex, evt) {
+            this.happend(evt);
+            return false;
+        }
+        function onMouseDown2(items, itemsIndex) {
+            this.happend();
+            return false;
+        }
+        function repeatItems3(items, itemsIndex) {
+            return React.createElement('div', {}, React.createElement('span', {
+                'style': {
+                    width: 'auto',
+                    lineHeight: '5px'
+                },
+                'onClick': onClick1.bind(this, items, itemsIndex),
+                'onMouseDown': onMouseDown2.bind(this, items, itemsIndex)
+            }, 'Mock'));
+        }
         return React.createElement.apply(this, [
             'p',
             {},

diff --git a/test/data/require.rt.typescript.ts b/test/data/require.rt.typescript.ts
@@ -2,7 +2,5 @@ import React = require('react');
 import _ = require('lodash');
 import myComp = require('comps/myComp');
 import utils = require('utils/utils');
-
-
 var fn = function() { return React.createElement(myComp,{},"\n",(utils.translate('Hello','es')),"\n") };
 export = fn
diff --git a/test/data/simple.js b/test/data/simple.js
@@ -4,10 +4,8 @@ define([
 ], function (React, _) {
     var comp = React.createClass({
         render: function () {
-            return function () {
-                return React.createElement('div', {}, 'hello world');
-            };
-        }()
+            return React.createElement('div', {}, 'hello world');
+        }
     });
     return comp;
 });
diff --git a/test/data/virtual.rt.js b/test/data/virtual.rt.js
@@ -3,24 +3,24 @@ define([
     'lodash'
 ], function (React, _) {
     'use strict';
-    function repeatN1(verb, n, nIndex) {
-        return [
-            React.createElement('div', { 'key': '2211' }, verb, ' ', n, '-a'),
-            React.createElement('div', { 'key': '2213' }, verb, ' ', n, '-b')
-        ];
-    }
-    function scopeVerb2() {
-        var verb = 'rendered';
-        return [
-            1 < 0 ? [React.createElement('div', { 'key': '551' }, 'this is not ', verb)] : null,
-            1 > 0 ? [React.createElement('div', { 'key': '1401' }, 'this is ', verb)] : null,
-            _.map([
-                1,
-                2
-            ], repeatN1.bind(this, verb))
-        ];
-    }
     return function () {
+        function repeatN1(verb, n, nIndex) {
+            return [
+                React.createElement('div', { 'key': '2211' }, verb, ' ', n, '-a'),
+                React.createElement('div', { 'key': '2213' }, verb, ' ', n, '-b')
+            ];
+        }
+        function scopeVerb2() {
+            var verb = 'rendered';
+            return [
+                1 < 0 ? [React.createElement('div', { 'key': '551' }, 'this is not ', verb)] : null,
+                1 > 0 ? [React.createElement('div', { 'key': '1401' }, 'this is ', verb)] : null,
+                _.map([
+                    1,
+                    2
+                ], repeatN1.bind(this, verb))
+            ];
+        }
         return React.createElement('div', {}, scopeVerb2.apply(this, []));
     };
 });