bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

add tests

This commit is contained in:
ido 2014-11-10 15:51:04 +02:00
parent e7ef23971d
commit 64071ce507
7 changed files with 252 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
.eslintrc Normal file
View File

@ -0,0 +1,155 @@
{
"rules": {
"no-array-constructor": 2,
"no-catch-shadow": 2,
"no-comma-dangle": 2,
"no-cond-assign": 2,
"no-constant-condition": 2,
"no-control-regex": 2,
"no-div-regex": 1,
"no-else-return": 2,
"no-empty-class": 2,
"no-empty-label": 2,
"no-eq-null": 2,
"no-extend-native": 2,
"no-extra-boolean-cast": 2,
"no-extra-strict": 2,
"global-strict": [2, "always"],
"no-inner-declarations": [2, "functions"],
"no-iterator": 2,
"no-labels": 2,
"no-lone-blocks": 2,
"no-lonely-if": 2,
"no-loop-func": 2,
"no-mixed-requires": [0, false],
"no-negated-in-lhs": 2,
"no-nested-ternary": 2,
"no-new-require": 0,
"no-octal-escape": 2,
"no-path-concat": 1,
"no-process-exit": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-restricted-modules": 1,
"no-script-url": 2,
"no-sequences": 2,
"no-shadow": 1,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-space-before-semi": 2,
"no-sparse-arrays": 2,
"no-sync": 0,
"no-undef": 2,
"no-unused-expressions": 2,
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
"no-warning-comments": [0, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],
"no-wrap-func": 2,
"yoda": 2,
"block-scoped-var": 0,
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"consistent-return": 2,
"consistent-this": [0, "self", "TODO: add this options, remove this value in array"],
"curly": [2, "all"],
"default-case": 0,
"func-names": 0,
"func-style": [0, "declaration"],
"max-depth": [0, 4],
"max-len": [0, 80, 4],
"max-nested-callbacks": [0, 2],
"handle-callback-err": 0,
"one-var": 0,
"sort-vars": 0,
"space-after-keywords": [2, "always"],
"space-in-brackets": [0, "never"],
"space-infix-ops": 2,
"space-return-throw-case": 2,
"space-unary-word-ops": 2,
"strict": 2,
"valid-typeof": 2,
"wrap-regex": 0,
"no-alert": 2,
"no-caller": 2,
"no-bitwise": 0,
"no-console": 0,
"no-underscore-dangle": 0,
"no-debugger": 2,
"no-dupe-keys": 2,
"no-empty": 2,
"no-eval": 2,
"no-ex-assign": 2,
"no-extra-parens": 0,
"no-extra-semi": 2,
"no-floating-decimal": 1,
"no-func-assign": 2,
"no-invalid-regexp": 2,
"no-implied-eval": 2,
"no-with": 2,
"no-fallthrough": 2,
"no-unreachable": 2,
"no-undef-init": 2,
"no-octal": 2,
"no-obj-calls": 2,
"no-new-wrappers": 2,
"no-new": 2,
"no-new-func": 2,
"no-native-reassign": 2,
"no-plusplus": 0,
"no-delete-var": 2,
"no-return-assign": 2,
"no-new-object": 2,
"no-label-var": 2,
"no-ternary": 0,
"no-self-compare": 2,
"no-use-before-define": 0,
"valid-jsdoc": 0,
"eol-last": 0,
"no-trailing-spaces": 0,
"no-extra-bind": 2,
"camelcase": 0,
"dot-notation": 2,
"eqeqeq": 2,
"new-parens": 2,
"guard-for-in": 2,
"radix": 0,
"new-cap": 2,
"semi": 2,
"use-isnan": 2,
"quotes": [0, "single"],
"max-params": [0, 3],
"max-statements": [0, 10],
"complexity": [0, 11],
"wrap-iife": 2,
"no-multi-str": 2,
"quote-props": [1, "as-needed"],
"no-multi-spaces": 1,
"key-spacing": [1, { "beforeColon": false, "afterColon": true }],
"comma-spacing": 1
},
"env": {
"browser": false,
"node": true,
"amd": true
},
"globals": {
"requirejs": true,
"xdescribe": false,
"describe": false,
"it": false,
"xit": false,
"beforeEach": false,
"afterEach": false,
"jasmine": false,
"expect": false,
"waitsFor": false,
"waits": false,
"runs": false,
"any": false,
"spyOn": false,
"createSpy": false
}
}

7
package.json
View File

@ -19,6 +19,11 @@
"dependencies": {
"cheerio": "^0.18.0",
"escodegen": "^1.4.1",
"esprima": "^1.2.2"
"esprima": "^1.2.2",
"lodash": "^2.4.1",
"react": "^0.12.0"
},
"devDependencies": {
"tape": "^3.0.2"
}
}

28
src/cli.js Normal file
View File

@ -0,0 +1,28 @@
/**
* Created by idok on 11/10/14.
*/
'use strict';
var fs = require('fs');
var _ = require('lodash');
var path = require('path');
var reactTemplates = require('./reactTemplates');
if (process.argv.length > 2) {
_.forEach(process.argv.slice(2), handleSingleFile);
} else {
console.log("Usage:node reactTemplates.js <filename>");
}
function handleSingleFile(filename) {
if (path.extname(filename) !== ".html") {
console.log('invalid file, only handle html files');
return;// only handle html files
}
var html = fs.readFileSync(filename).toString();
if (!html.match(/\<\!doctype jsx/)) {
console.log('invalid file, missing header');
return;
}
var js = reactTemplates.convertTemplateToReact(html);
fs.writeFileSync(filename.replace(".html", ".js"), js);
}

88
reactTemplates.js → src/reactTemplates.js
View File

@ -1,12 +1,11 @@
/**
* Created by avim on 11/9/2014.
*/
'use strict';
var cheerio = require('cheerio');
var fs = require('fs');
var _ = require('lodash');
var esprima = require('esprima');
var escodegen = require('escodegen');
var path = require('path');
var React = require('react');
@ -15,14 +14,14 @@ var ifTemplate = _.template("((<%= condition %>)?(<%= body %>):null)");
var classSetTemplate = _.template("React.addons.classSet(<%= classSet %>)");
var tagTemplate = _.template("<%= name %>.apply(this,_.flatten([<%= props %>].concat([<%= children %>])))");
var commentTemplate = _.template(" /* <%= data %> */ ");
var templateTemplate = _.template("define([<%= requirePaths %>], function (<%= requireNames %>) {\n <%= injectedFunctions %>\nreturn <%= body %>\n});")
var templateTemplate = _.template("define([<%= requirePaths %>], function (<%= requireNames %>) {\n <%= injectedFunctions %>\nreturn <%= body %>\n});");
var templateProp = "rt-repeat";
var ifProp = "rt-if";
var classSetProp = "rt-class";
var reactSupportedAttributes = ['accept', 'acceptCharset', 'accessKey', 'action', 'allowFullScreen', 'allowTransparency', 'alt', 'async', 'autoComplete', 'autoPlay', 'cellPadding', 'cellSpacing', 'charSet', 'checked', 'classID', 'className', 'cols', 'colSpan', 'content', 'contentEditable', 'contextMenu', 'controls', 'coords', 'crossOrigin', 'data', 'dateTime', 'defer', 'dir', 'disabled', 'download', 'draggable', 'encType', 'form', 'formNoValidate', 'frameBorder', 'height', 'hidden', 'href', 'hrefLang', 'htmlFor', 'httpEquiv', 'icon', 'id', 'label', 'lang', 'list', 'loop', 'manifest', 'max', 'maxLength', 'media', 'mediaGroup', 'method', 'min', 'multiple', 'muted', 'name', 'noValidate', 'open', 'pattern', 'placeholder', 'poster', 'preload', 'radioGroup', 'readOnly', 'rel', 'required', 'role', 'rows', 'rowSpan', 'sandbox', 'scope', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellCheck', 'src', 'srcDoc', 'srcSet', 'start', 'step', 'style', 'tabIndex', 'target', 'title', 'type', 'useMap', 'value', 'width', 'wmode'];
var attributesMapping = {'class':'className','rt-class':'className'};
var attributesMapping = {'class': 'className', 'rt-class': 'className'};
_.forEach(reactSupportedAttributes,function (attributeReactName) {
if (attributeReactName !== attributeReactName.toLowerCase()) {
attributesMapping[attributeReactName.toLowerCase()] = attributeReactName;
@ -35,7 +34,7 @@ function concatChildren(children) {
var first = true;
_.forEach(children, function (child) {
if (child.indexOf(" /*") !== 0 && child) {
res += (first?"":",") + child;
res += (first ? "" : ",") + child;
first = false;
} else {
res += child;
@ -44,7 +43,7 @@ function concatChildren(children) {
return res;
}
var curlyMap = {'{':1, '}': -1};
var curlyMap = {'{': 1, '}': -1};
function convertText(txt) {
txt = txt.trim();
@ -64,13 +63,13 @@ function convertText(txt) {
if (curlyCounter !== 0) {
throw "Failed to parse text";
} else {
res += (first?"":"+") + txt.substr(start+1,end-start-2);
res += (first ? "" : "+") + txt.substr(start + 1, end - start - 2);
first = false;
txt = txt.substr(end);
}
}
if (txt) {
res += (first?"":"+") + JSON.stringify(txt);
res += (first ? "" : "+") + JSON.stringify(txt);
}
return res;
@ -81,28 +80,28 @@ function isStringOnlyCode(txt) {
return txt.length && txt.charAt(0) === '{' && txt.charAt(txt.length - 1) === '}';
}
function generateProps(node,context) {
function generateProps(node, context) {
var props = {};
_.forOwn(node.attribs, function (val,key) {
_.forOwn(node.attribs, function (val, key) {
var propKey = attributesMapping[key.toLowerCase()] || key;
if (props.hasOwnProperty(propKey)) {
throw "duplicate definition of "+propKey+" "+JSON.stringify(node.attribs);
throw "duplicate definition of " + propKey + " " + JSON.stringify(node.attribs);
}
if (key.indexOf("on") === 0 && !isStringOnlyCode(val)) {
var funcParts = val.split("=>");
var evtParams = funcParts[0].replace("(","").replace(")","").trim();
var evtParams = funcParts[0].replace("(", "").replace(")", "").trim();
var funcBody = funcParts[1].trim();
var generatedFuncName = "generated"+(context.injectedFunctions.length + 1);
var generatedFuncName = "generated" + (context.injectedFunctions.length + 1);
var params = context.boundParams;
if (evtParams.trim().length > 0) {
params = params.concat(evtParams.trim());
}
var funcText = "function "+generatedFuncName+"("+ params.join(",");
funcText += ") {\n"+funcBody+"\n}\n";
var funcText = "function " + generatedFuncName + "(" + params.join(",");
funcText += ") {\n" + funcBody + "\n}\n";
context.injectedFunctions.push(funcText);
props[propKey] = generatedFuncName+".bind("+(["this"].concat(context.boundParams)).join(",")+")";
} else if (key === "style" && !isStringOnlyCode(val)) {
props[propKey] = generatedFuncName + ".bind(" + (["this"].concat(context.boundParams)).join(",") + ")";
} else if (key === "style" && !isStringOnlyCode(val)) {
var styleParts = val.trim().split(";");
styleParts = _.compact(_.map(styleParts, function (str) {
str = str.trim();
@ -121,35 +120,34 @@ function generateProps(node,context) {
});
props[propKey] = "{" + styleArray.join(",") + "}";
} else if (key === classSetProp) {
props[propKey] = classSetTemplate({classSet:val});
props[propKey] = classSetTemplate({classSet: val});
} else if (key.indexOf("rt-") !== 0) {
props[propKey] = convertText(val);
}
});
return "{"+ _.map(props, function (val,key) {
return JSON.stringify(key) + " : "+val;
}).join(",")+"}";
return "{" + _.map(props, function (val, key) {
return JSON.stringify(key) + " : " + val;
}).join(",") + "}";
}
function convertTagNameToConsstructor(tagName) {
return React.DOM.hasOwnProperty(tagName)?"React.DOM."+tagName:tagName;
function convertTagNameToConstructor(tagName) {
return React.DOM.hasOwnProperty(tagName) ? "React.DOM." + tagName : tagName;
}
function defaultContext() {
return {
boundParams: [],
injectedFunctions: []
}
};
}
function convertHtmlToReact(node,context) {
function convertHtmlToReact(node, context) {
if (node.type === "tag") {
context.boundParams = _.clone(context.boundParams);
var data = {name: convertTagNameToConsstructor(node.name)};
var data = {name: convertTagNameToConstructor(node.name)};
if (node.attribs[templateProp]) {
data.item = node.attribs[templateProp].split(" in ")[0].trim();
data.collection = node.attribs[templateProp].split(" in ")[1].trim();
@ -183,7 +181,7 @@ function convertHtmlToReact(node,context) {
}
}
function extractDefinesFromJSXTag(html,defines) {
function extractDefinesFromJSXTag(html, defines) {
html = html.replace(/\<\!doctype jsx\s*(.*?)\s*\>/, function(full, reqStr) {
var match = true;
while (match) {
@ -200,40 +198,24 @@ function extractDefinesFromJSXTag(html,defines) {
}
function convertTemplateToReact(html) {
var defines = {"react":"React","lodash":"_"};
html = extractDefinesFromJSXTag(html,defines);
var rootNode = cheerio.load(html.trim(),{lowerCaseTags:false,lowerCaseAttributeNames:false,xmlMode:true});
var defines = {react: "React", lodash: "_"};
html = extractDefinesFromJSXTag(html, defines);
var rootNode = cheerio.load(html.trim(), {lowerCaseTags: false, lowerCaseAttributeNames: false, xmlMode: true});
var context = defaultContext();
var body = convertHtmlToReact(rootNode.root()[0].children[0],context);
var requirePaths = _(defines).keys().map(function (reqName) {return '"'+reqName+'"'}).value().join(",");
var requireVars = _(defines).values().value().join(",");
var data = {"body":body,injectedFunctions:"",requireNames:requireVars,requirePaths:requirePaths};
var body = convertHtmlToReact(rootNode.root()[0].children[0], context);
var requirePaths = _(defines).keys().map(function (reqName) {return '"' + reqName + '"'}).value().join(",");
var requireVars = _(defines).values().value().join(",");
var data = {body: body, injectedFunctions: "", requireNames: requireVars, requirePaths: requirePaths};
data.injectedFunctions = context.injectedFunctions.join("\n");
var code = templateTemplate(data);
try {
var tree = esprima.parse(code, {range: true, tokens: true, comment: true});
tree = escodegen.attachComments(tree, tree.comments, tree.tokens);
code = escodegen.generate(tree,{comment:true});
code = escodegen.generate(tree, {comment: true});
} catch (e) {
}
return code;
}
function handleSingleFile(filename) {
if (path.extname(filename) !== ".html") {
return;// only handle html files
}
var html = fs.readFileSync(filename).toString();
if (!html.match(/\<\!doctype jsx/)) {
return;
}
var js = convertTemplateToReact(html);
fs.writeFileSync(filename.replace(".html",".js"),js);
}
if (process.argv.length > 2) {
_.forEach(process.argv.slice(2),handleSingleFile);
} else {
console.log("Usage:node reactTemplates.js <filename>");
}
module.exports.convertTemplateToReact = convertTemplateToReact;

4
test/data/test.html Normal file
View File

@ -0,0 +1,4 @@
<!doctype jsx>
<div>
</div>

6
test/data/test.js Normal file
View File

@ -0,0 +1,6 @@
define([
'react',
'lodash'
], function (React, _) {
return React.DOM.div.apply(this, _.flatten([{}].concat([])));
});

18
test/src/test.js Normal file
View File

@ -0,0 +1,18 @@
'use strict';
var test = require('tape');
var reactTemplates = require('../../src/reactTemplates');
var fs = require('fs');
var _ = require('lodash');
var path = require('path');
var dataPath = path.resolve(__dirname, '..', 'data');
test('timing test', function (t) {
t.plan(1);
var filename = path.join(dataPath, 'test.html');
var html = fs.readFileSync(filename).toString();
var expected = fs.readFileSync(filename.replace(".html", ".js")).toString();
var actual = reactTemplates.convertTemplateToReact(html);
t.equal(actual, expected);
});