From cd10ee8b70a152dc4a7d58a552ea15ef2f8f15f4 Mon Sep 17 00:00:00 2001 From: ido Date: Thu, 12 Nov 2015 12:26:48 +0200 Subject: [PATCH] update react to 14 cleanups --- package.json | 4 ++-- src/reactTemplates.js | 50 +++---------------------------------------- test/src/test.js | 15 +------------ test/src/util.js | 29 ++++++++++++++++++++++++- 4 files changed, 34 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index d04897d..7aee8ca 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "rt": "./bin/rt.js" }, "scripts": { - "prepublish": "npm run build", "build": "npm run lint && npm run test", "lint": "eslint .", "test": "node test/src/test.js && node test/src/styleTest.js", @@ -54,7 +53,8 @@ "grunt-eslint": "^17.3.1", "grunt-node-tap": "^0.1.61", "istanbul": "^0.4.0", - "react": "^0.12.2", + "react": "^0.14.2", + "react-dom": "^0.14.2", "react-native": "^0.11.4", "react-templates": "^0.1.22", "tape": "^4.2.1" diff --git a/src/reactTemplates.js b/src/reactTemplates.js index 5fea166..afba93b 100644 --- a/src/reactTemplates.js +++ b/src/reactTemplates.js @@ -20,10 +20,6 @@ var ifTemplate = _.template('((<%= condition %>)?(<%= body %>):null)'); var propsTemplateSimple = _.template('_.assign({}, <%= generatedProps %>, <%= rtProps %>)'); var propsTemplate = _.template('mergeProps( <%= generatedProps %>, <%= rtProps %>)'); -//var propsMergeFunction3 = 'function mergeProps(inline,external) {\n var res = _.assign({},inline,external)\nif (inline.hasOwnProperty(\'style\')) {\n res.style = _.defaults(res.style, inline.style);\n}\n' + -// ' if (inline.hasOwnProperty(\'className\') && external.hasOwnProperty(\'className\')) {\n' + -// ' res.className = external.className + \' \' + inline.className;\n} return res;\n}\n'; - var propsMergeFunction = [ 'function mergeProps(inline,external) {', ' var res = _.assign({},inline,external)', @@ -135,7 +131,6 @@ function convertText(node, context, txt) { res = 'true'; } - //validateJS(res, node, context); return res; } @@ -208,7 +203,6 @@ function generateTemplateProps(node, context) { * @return {string} */ function generateProps(node, context) { -// console.log(node); var props = {}; _.forOwn(node.attribs, function (val, key) { var propKey = reactSupport.attributesMapping[key.toLowerCase()] || key; @@ -256,7 +250,6 @@ function handleEventHandler(val, context, node, key) { } function genBind(func, args) { - //return util.format('%s.bind(%s)', generatedFuncName, (['this'].concat(context.boundParams)).join(',')); return util.format('%s.bind(%s)', func, (['this'].concat(args)).join(',')); } @@ -287,7 +280,6 @@ function convertTagNameToConstructor(tagName, context) { if (context.options.native) { return _.includes(reactNativeSupport[context.options.nativeTargetVersion], tagName) ? 'React.' + tagName : tagName; } - var isHtmlTag = _.includes(reactDOMSupport[context.options.targetVersion], tagName); if (reactSupport.shouldUseCreateElement(context)) { isHtmlTag = isHtmlTag || tagName.match(/^\w+(-\w+)$/); @@ -320,33 +312,6 @@ function hasNonSimpleChildren(node) { }); } -/* -interface NodeConversionData { - innerScopeData: InnerScopeData; - repeatChildrenData: RepeatChildrenData; - ifData: IfData; -} - -interface InnerScopeData { - scopeName: string; - // these are variables that were already in scope, unrelated to the ones declared in rt-inner-scope - innerMapping: {[alias: string]: any}; - // these are variables declared in the rt-inner-scope attribute - outerMapping: {[alias: string]: any}; -} - -interface RepeatChildrenData { - itemAlias: string; - collectionExpression: string; - binds: string[]; - fn(); -} - -interface IfData { - conditionExpression: string; -} -*/ - /** * @param node * @param {Context} context @@ -385,24 +350,15 @@ function convertHtmlToReact(node, context) { outerMapping: {} }; - //data.innerScope.outerMapping = _.zipObject(context.boundParams, context.boundParams); - _.forEach(context.boundParams, function (boundParam) { - data.innerScope.outerMapping[boundParam] = boundParam; - }); - - //_(node.attribs[scopeAttr]).split(';').invoke('trim').compact().forEach().value() - _.forEach(node.attribs[scopeAttr].split(';'), function (scopePart) { - if (scopePart.trim().length === 0) { - return; - } + data.innerScope.outerMapping = _.zipObject(context.boundParams, context.boundParams); + _(node.attribs[scopeAttr]).split(';').invoke('trim').compact().forEach( function (scopePart) { var scopeSubParts = _(scopePart).split(' as ').invoke('trim').value(); if (scopeSubParts.length < 2) { throw RTCodeError.buildFormat(context, node, "invalid scope part '%s'", scopePart); } var alias = scopeSubParts[1]; var value = scopeSubParts[0]; - validateJS(alias, node, context); // this adds both parameters to the list of parameters passed further down @@ -413,7 +369,7 @@ function convertHtmlToReact(node, context) { data.innerScope.scopeName += stringUtils.capitalize(alias); data.innerScope.innerMapping[alias] = 'var ' + alias + ' = ' + value + ';'; validateJS(data.innerScope.innerMapping[alias], node, context); - }); + }).value(); } data.props = generateProps(node, context); diff --git a/test/src/test.js b/test/src/test.js index b6e5411..7491ac1 100644 --- a/test/src/test.js +++ b/test/src/test.js @@ -8,7 +8,6 @@ var compareAndWrite = util.compareAndWrite; var fs = require('fs'); var _ = require('lodash'); var path = require('path'); -var React = require('react/addons'); var RTCodeError = reactTemplates.RTCodeError; var dataPath = path.resolve(__dirname, '..', 'data'); @@ -189,19 +188,7 @@ test('html tests', function (t) { var expected = readFileNormalized(filename + '.html'); // var expected = fs.readFileSync(filename.replace(".html", ".js")).toString(); code = reactTemplates.convertTemplateToReact(html).replace(/\r/g, ''); - var defineMap = {'react/addons': React, lodash: _}; - //noinspection JSUnusedLocalSymbols - var define = function (requirementsNames, content) { //eslint-disable-line no-unused-vars,func-style - var requirements = _.map(requirementsNames, function (reqName) { - return defineMap[reqName]; - }); - return content.apply(this, requirements); - }; - var comp = React.createFactory(React.createClass({ - displayName: 'testClass', - render: eval(code) //eslint-disable-line no-eval - })); - var actual = React.renderToStaticMarkup(comp()); + var actual = util.codeToHtml(code); actual = util.normalizeHtml(actual); expected = util.normalizeHtml(expected); var equal = compareAndWrite(t, actual, expected, filename); diff --git a/test/src/util.js b/test/src/util.js index 7d186a5..385631f 100644 --- a/test/src/util.js +++ b/test/src/util.js @@ -2,6 +2,10 @@ var cheerio = require('cheerio'); var fs = require('fs'); var path = require('path'); +var reactTemplates = require('../../src/reactTemplates'); +var React = require('react'); +var ReactDOMServer = require('react-dom/server'); +var _ = require('lodash'); /** * @param {string} html @@ -52,10 +56,33 @@ function joinDataPath(fileName) { return path.join(dataPath, fileName); } +function rtToHtml(rt) { + var code = reactTemplates.convertTemplateToReact(rt).replace(/\r/g, ''); + return codeToHtml(code); +} + +function codeToHtml(code) { + var defineMap = {'react/addons': React, lodash: _}; + //noinspection JSUnusedLocalSymbols + var define = function (requirementsNames, content) { //eslint-disable-line no-unused-vars,func-style + var requirements = _.map(requirementsNames, function (reqName) { + return defineMap[reqName]; + }); + return content.apply(this, requirements); + }; + var comp = React.createFactory(React.createClass({ + displayName: 'testClass', + render: eval(code) //eslint-disable-line no-eval + })); + return ReactDOMServer.renderToStaticMarkup(comp()); +} + module.exports = { normalizeHtml: normalizeHtml, compareAndWrite: compareAndWrite, readFileNormalized: readFileNormalized, readFile: readFile, - joinDataPath: joinDataPath + joinDataPath: joinDataPath, + rtToHtml: rtToHtml, + codeToHtml: codeToHtml };