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

playground version 0.0001

Browse Source
This commit is contained in:
avim 2014-11-16 17:20:04 +02:00
parent 4fe2addc17
commit 44703b6600
9 changed files with 47835 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
playground/index.html Normal file
View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React templates - Image Search Sample</title>
<link rel="stylesheet" href="playground.css"/>
</head>
<body>
<div id="preloader" style="text-align: center;">Loading...</div>
<div id="playground">
</div>
<script src="main.browser.js"></script>
</body>
</html>

47675
playground/main.browser.js Normal file
View File

File diff suppressed because one or more lines are too long

58
playground/main.js Normal file
View File

@ -0,0 +1,58 @@
var reactTemplates = require('../src/reactTemplates');
var playgroundTemplate = require('./playground.rt.js');
var React = require('react/addons');
var _ = require('lodash');
var html = "<div>hello</div>";
var res = reactTemplates.convertTemplateToReact(html.trim());
console.log(res);
function emptyFunc() {
return null;
}
function generateTemplateFunction(html) {
try {
var code = reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g,""));
var defineMap = {"react":React,"lodash":_};
var define = function (requirementsNames,content) {
var requirements = _.map(requirementsNames,function (reqName) {
return defineMap[reqName];
});
return content.apply(this,requirements);
};
var res = eval(code);
return res;
} catch (e) {
return emptyFunc
}
}
var Playground = React.createClass({
displayName: 'Playground',
mixins: [React.addons.LinkedStateMixin],
getInitialState: function () {
var currentState = {
templateHTML: '<div>\n hello {this.state.name}\n</div>',
templateProps: JSON.stringify({name:"reactTemplates"})
};
this.templateFunc = generateTemplateFunction(currentState.templateHTML);
console.log(this.templateFunc);
return currentState;
},
componentWillUpdate: function (nextProps,nextState) {
if (nextState.templateHTML !== this.state.templateHTML) {
this.templateFunc = generateTemplateFunction(nextState.templateHTML)
}
},
render: function () {
return playgroundTemplate.apply(this);
}
});
React.render(Playground(),document.getElementById('playground'));

8
playground/playground.css Normal file
View File

@ -0,0 +1,8 @@
.hidden {
display:none;
}
.large-text-area {
width:800px;
height:300px;
}

11
playground/playground.rt Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE rt PlaygroundSample="./playgroundSample">
<div>
<form>
<textarea valueLink="{this.linkState('templateHTML')}" class="large-text-area"></textarea>
<br/>
<textarea valueLink="{this.linkState('templateProps')}" class="large-text-area"></textarea>
</form>
<PlaygroundSample renderFunc="{this.templateFunc}" stateString="{this.state.templateProps}">
</PlaygroundSample>
</div>

16
playground/playground.rt.js Normal file
View File

@ -0,0 +1,16 @@
var React = require('react');
var _ = require('lodash');
var PlaygroundSample = require('./playgroundSample');
'use strict';
module.exports = function () {
return React.DOM.div({}, React.DOM.form({}, React.DOM.textarea({
'valueLink': this.linkState('templateHTML'),
'className': 'large-text-area'
}), React.DOM.br({}), React.DOM.textarea({
'valueLink': this.linkState('templateProps'),
'className': 'large-text-area'
})), PlaygroundSample({
'renderFunc': this.templateFunc,
'stateString': this.state.templateProps
}));
};

27
playground/playgroundSample.js Normal file
View File

@ -0,0 +1,27 @@
var React = require('react/addons');
var _ = require('lodash');
var playgroundSample = React.createClass({
componentWillReceiveProps: function (nextProps) {
if (nextProps.stateString) {
try {
this.setState(JSON.parse(nextProps.stateString));
} catch (e) {
}
}
},
render: function () {
var res = null;
try {
res = this.props.renderFunc.apply(this)
} catch (e) {
}
return React.DOM.div.apply(this, _.flatten([
{},
res
]));
}
});
module.exports = playgroundSample;

24
src/cli.js
View File

@ -8,15 +8,23 @@ var _ = require('lodash');
var path = require('path'); var path = require('path');
var reactTemplates = require('./reactTemplates'); var reactTemplates = require('./reactTemplates');
var pkg = require('../package.json'); var pkg = require('../package.json');
var options = {commonJS: false};
if (process.argv.length > 2) { if (process.argv.length > 2) {
if (process.argv.indexOf('-v') !== -1 || process.argv.indexOf('--version') !== -1) { var files = [];
console.log(pkg.version); _.forEach(process.argv.slice(2),function (param) {
} else if (process.argv.indexOf('-h') !== -1 || process.argv.indexOf('--help') !== -1) { if (param === '-v' || param === '--version') {
printHelp(); console.log(pkg.version);
} else { } else if (param === '-h' || param === '--help') {
_.forEach(process.argv.slice(2), handleSingleFile); printHelp();
} } else if (param === '--common') {
options.commonJS = true;
} else {
files.push(param);
}
});
_.forEach(files,handleSingleFile);
} else { } else {
printHelp(); printHelp();
} }
@ -41,7 +49,7 @@ function handleSingleFile(filename) {
// var js = reactTemplates.convertTemplateToReact(html); // var js = reactTemplates.convertTemplateToReact(html);
// fs.writeFileSync(filename + '.js', js); // fs.writeFileSync(filename + '.js', js);
try { try {
reactTemplates.convertFile(filename, filename + '.js'); reactTemplates.convertFile(filename, filename + '.js', options);
} catch (e) { } catch (e) {
console.log('Error processing file: ' + filename + ', ' + e.description); console.log('Error processing file: ' + filename + ', ' + e.description);
} }

16
src/reactTemplates.js
View File

@ -16,8 +16,8 @@ var classSetTemplate = _.template('React.addons.classSet(<%= classSet %>)');
var simpleTagTemplate = _.template('<%= name %>(<%= props %><%= children %>)'); var simpleTagTemplate = _.template('<%= name %>(<%= props %><%= children %>)');
var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %><%= children %>]))'); var tagTemplate = _.template('<%= name %>.apply(this,_.flatten([<%= props %><%= children %>]))');
var commentTemplate = _.template(' /* <%= data %> */ '); var commentTemplate = _.template(' /* <%= data %> */ ');
var templateTemplate = _.template("define([<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(){ return <%= body %>};\n});"); var templateAMDTemplate = _.template("define([<%= requirePaths %>], function (<%= requireNames %>) {\n'use strict';\n <%= injectedFunctions %>\nreturn function(){ return <%= body %>};\n});");
var templateCommonJSTemplate = _.template("<%= vars %>\n\n'use strict';\n <%= injectedFunctions %>\nmodule.exports = function(){ return <%= body %>};\n");
var templateProp = 'rt-repeat'; var templateProp = 'rt-repeat';
var ifProp = 'rt-if'; var ifProp = 'rt-if';
var classSetProp = 'rt-class'; var classSetProp = 'rt-class';
@ -261,8 +261,9 @@ function extractDefinesFromJSXTag(html, defines) {
* @param {string} html * @param {string} html
* @return {string} * @return {string}
*/ */
function convertTemplateToReact(html) { function convertTemplateToReact(html,options) {
// var x = cheerio.load(html); // var x = cheerio.load(html);
options = options || {};
var defines = {react: 'React', lodash: '_'}; var defines = {react: 'React', lodash: '_'};
html = extractDefinesFromJSXTag(html, defines); html = extractDefinesFromJSXTag(html, defines);
var rootNode = cheerio.load(html.trim(), {lowerCaseTags: false, lowerCaseAttributeNames: false, xmlMode: true}); var rootNode = cheerio.load(html.trim(), {lowerCaseTags: false, lowerCaseAttributeNames: false, xmlMode: true});
@ -270,9 +271,10 @@ function convertTemplateToReact(html) {
var body = convertHtmlToReact(rootNode.root()[0].children[0], context); var body = convertHtmlToReact(rootNode.root()[0].children[0], context);
var requirePaths = _(defines).keys().map(function (reqName) { return '"' + reqName + '"'; }).value().join(','); var requirePaths = _(defines).keys().map(function (reqName) { return '"' + reqName + '"'; }).value().join(',');
var requireVars = _(defines).values().value().join(','); var requireVars = _(defines).values().value().join(',');
var data = {body: body, injectedFunctions: '', requireNames: requireVars, requirePaths: requirePaths}; var vars = _(defines).map(function (reqVar,reqPath) {return "var "+reqVar+" = require('"+reqPath+"');"}).join("\n");
var data = {body: body, injectedFunctions: '', requireNames: requireVars, requirePaths: requirePaths, vars:vars};
data.injectedFunctions = context.injectedFunctions.join('\n'); data.injectedFunctions = context.injectedFunctions.join('\n');
var code = templateTemplate(data); var code = options.commonJS ? templateCommonJSTemplate(data) : templateAMDTemplate(data);
try { try {
var tree = esprima.parse(code, {range: true, tokens: true, comment: true}); var tree = esprima.parse(code, {range: true, tokens: true, comment: true});
tree = escodegen.attachComments(tree, tree.comments, tree.tokens); tree = escodegen.attachComments(tree, tree.comments, tree.tokens);
@ -288,7 +290,7 @@ function convertTemplateToReact(html) {
* @param {string} source * @param {string} source
* @param {string} target * @param {string} target
*/ */
function convertFile(source, target) { function convertFile(source, target, options) {
// if (path.extname(filename) !== ".html") { // if (path.extname(filename) !== ".html") {
// console.log('invalid file, only handle html files'); // console.log('invalid file, only handle html files');
// return;// only handle html files // return;// only handle html files
@ -304,7 +306,7 @@ function convertFile(source, target) {
if (!html.match(/\<\!doctype rt/i)) { if (!html.match(/\<\!doctype rt/i)) {
throw new Error('invalid file, missing header'); throw new Error('invalid file, missing header');
} }
var js = convertTemplateToReact(html); var js = convertTemplateToReact(html, options);
fs.writeFileSync(target, js); fs.writeFileSync(target, js);
} }