separate playground from home page
This commit is contained in:
ido
parent
82ac637683
commit
659ebc8d7c
|
|
@ -41,6 +41,11 @@ module.exports = function (grunt) {
|
|||
files: {
|
||||
'playground/main.browser.js': ['playground/main.js']
|
||||
}
|
||||
},
|
||||
home: {
|
||||
files: {
|
||||
'playground/home-main.browser.js': ['playground/home-main.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
node_tap: {
|
||||
|
|
@ -96,6 +101,7 @@ module.exports = function (grunt) {
|
|||
});
|
||||
|
||||
grunt.registerTask('build', ['rt', 'browserify:pg']);
|
||||
grunt.registerTask('home', ['rt', 'browserify:home']);
|
||||
|
||||
grunt.registerTask('all', ['default', 'test']);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,193 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>A JavaScript library for building user interfaces | React</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="A JavaScript library for building user interfaces | React">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="http://facebook.github.io/react/index.html">
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
<link rel="shortcut icon" href="https://facebook.github.io//react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="https://facebook.github.io//react/css/syntax.css">
|
||||
<link rel="stylesheet" href="https://facebook.github.io//react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="https://facebook.github.io//react/css/react.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<!--[if lte IE 8]>
|
||||
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
|
||||
<!-- Optional theme -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
|
||||
<link rel="stylesheet" href="playground/playground.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="36" height="36">
|
||||
React Templates
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/">blog</a></li>
|
||||
<li><a href="https://github.com/wix/react-templates">github</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hero">
|
||||
<div class="wrap">
|
||||
<div class="text"><strong>React Templates</strong></div>
|
||||
<div class="minitext">
|
||||
Light weight templates for React
|
||||
</div>
|
||||
|
||||
<div class="buttons-unit">
|
||||
<a href="/react/docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v0.12.1</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<section class="content wrap">
|
||||
<p><section class="light home-section">
|
||||
<div class="marketing-row">
|
||||
<div class="marketing-col">
|
||||
<h3>Just the UI</h3>
|
||||
<p>
|
||||
Lots of people use React as the V in MVC.
|
||||
Since React makes no assumptions about the rest of your technology stack,
|
||||
it's easy to try it out on a small feature in an existing project.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Virtual DOM</h3>
|
||||
<p>
|
||||
React uses a <i>virtual DOM</i> diff implementation for ultra-high performance. It can also
|
||||
render on the server using Node.js — no heavy browser DOM required.
|
||||
</p>
|
||||
</div>
|
||||
<div class="marketing-col">
|
||||
<h3>Data flow</h3>
|
||||
<p>
|
||||
React implements one-way reactive data flow which reduces boilerplate and is
|
||||
easier to reason about than traditional data binding.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="home-divider" />
|
||||
<section id="home-section" class="home-section">
|
||||
<!--<div id="examples">-->
|
||||
<!--<div class="example">-->
|
||||
<!--<h3>A Simple Component</h3>-->
|
||||
<!--<p>-->
|
||||
<!--React components implement a <code>render()</code> method that takes input data and-->
|
||||
<!--returns what to display. This example uses an XML-like syntax called-->
|
||||
<!--JSX. Input data that is passed into the component can be accessed by-->
|
||||
<!--<code>render()</code> via <code>this.props</code>.-->
|
||||
<!--</p>-->
|
||||
<!--<p>-->
|
||||
<!--<strong>JSX is optional and not required to use React.</strong> Try-->
|
||||
<!--clicking on "Compiled JS" to see the raw JavaScript code produced by-->
|
||||
<!--the JSX compiler.-->
|
||||
<!--</p>-->
|
||||
<!--<div id="helloExample"></div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="example">-->
|
||||
<!--<h3>A Stateful Component</h3>-->
|
||||
<!--<p>-->
|
||||
<!--In addition to taking input data (accessed via <code>this.props</code>), a-->
|
||||
<!--component can maintain internal state data (accessed via <code>this.state</code>).-->
|
||||
<!--When a component's state data changes, the rendered markup will be-->
|
||||
<!--updated by re-invoking <code>render()</code>.-->
|
||||
<!--</p>-->
|
||||
<!--<div id="timerExample"></div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="example">-->
|
||||
<!--<h3>An Application</h3>-->
|
||||
<!--<p>-->
|
||||
<!--Using <code>props</code> and <code>state</code>, we can put together a small Todo application.-->
|
||||
<!--This example uses <code>state</code> to track the current list of items as well as-->
|
||||
<!--the text that the user has entered. Although event handlers appear to be-->
|
||||
<!--rendered inline, they will be collected and implemented using event-->
|
||||
<!--delegation.-->
|
||||
<!--</p>-->
|
||||
<!--<div id="todoExample"></div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="example">-->
|
||||
<!--<h3>A Component Using External Plugins</h3>-->
|
||||
<!--<p>-->
|
||||
<!--React is flexible and provides hooks that allow you to interface with-->
|
||||
<!--other libraries and frameworks. This example uses Showdown, an external-->
|
||||
<!--Markdown library, to convert the textarea's value in real-time.-->
|
||||
<!--</p>-->
|
||||
<!--<div id="markdownExample"></div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<script type="text/javascript" src="js/examples/hello.js"></script>-->
|
||||
<!--<script type="text/javascript" src="js/examples/timer.js"></script>-->
|
||||
<!--<script type="text/javascript" src="js/examples/todo.js"></script>-->
|
||||
<!--<script type="text/javascript" src="js/examples/markdown.js"></script>-->
|
||||
</section>
|
||||
<hr class="home-divider" />
|
||||
<section class="home-bottom-section">
|
||||
<div class="buttons-unit">
|
||||
<a href="docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="downloads.html" class="button">Download React v0.12.1</a>
|
||||
</div>
|
||||
</section></p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–2014 Facebook Inc.<br>
|
||||
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
|
||||
<!--<script src="playground/bundle/reactTemplates.bundle.js"></script>-->
|
||||
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
|
||||
<script src="playground/home-main.browser.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
var examplesTemplate = require('./examples.rt.js');
|
||||
var React = require('react/addons');
|
||||
var _ = require('lodash');
|
||||
|
||||
var Examples = React.createClass({
|
||||
|
||||
displayName: 'Examples',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
render: function () {
|
||||
return examplesTemplate.apply(this);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Examples;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype rt playground="./playground">
|
||||
<div id="examples">
|
||||
<div class="example">
|
||||
<h3>A Simple Component</h3>
|
||||
<p>
|
||||
React components implement a <code>render()</code> method that takes input data and
|
||||
returns what to display. This example uses an XML-like syntax called
|
||||
JSX. Input data that is passed into the component can be accessed by
|
||||
<code>render()</code> via <code>this.props</code>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>JSX is optional and not required to use React.</strong> Try
|
||||
clicking on "Compiled JS" to see the raw JavaScript code produced by
|
||||
the JSX compiler.
|
||||
</p>
|
||||
<div id="helloExample"></div>
|
||||
<playground direction="horizontal" style="display: block"></playground>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Stateful Component</h3>
|
||||
<p>
|
||||
In addition to taking input data (accessed via <code>this.props</code>), a
|
||||
component can maintain internal state data (accessed via <code>this.state</code>).
|
||||
When a component's state data changes, the rendered markup will be
|
||||
updated by re-invoking <code>render()</code>.
|
||||
</p>
|
||||
<div id="timerExample"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>An Application</h3>
|
||||
<p>
|
||||
Using <code>props</code> and <code>state</code>, we can put together a small Todo application.
|
||||
This example uses <code>state</code> to track the current list of items as well as
|
||||
the text that the user has entered. Although event handlers appear to be
|
||||
rendered inline, they will be collected and implemented using event
|
||||
delegation.
|
||||
</p>
|
||||
<div id="todoExample"></div>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Component Using External Plugins</h3>
|
||||
<p>
|
||||
React is flexible and provides hooks that allow you to interface with
|
||||
other libraries and frameworks. This example uses Showdown, an external
|
||||
Markdown library, to convert the textarea's value in real-time.
|
||||
</p>
|
||||
<div id="markdownExample"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var playground = require('./playground');
|
||||
'use strict';
|
||||
module.exports = function () {
|
||||
return React.DOM.div({ 'id': 'examples' }, React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'A Simple Component'), React.DOM.p({}, '\n React components implement a ', React.DOM.code({}, 'render()'), ' method that takes input data and\n returns what to display. This example uses an XML-like syntax called\n JSX. Input data that is passed into the component can be accessed by\n ', React.DOM.code({}, 'render()'), ' via ', React.DOM.code({}, 'this.props'), '.\n '), React.DOM.p({}, React.DOM.strong({}, 'JSX is optional and not required to use React.'), ' Try\n clicking on "Compiled JS" to see the raw JavaScript code produced by\n the JSX compiler.\n '), React.DOM.div({ 'id': 'helloExample' }), playground({
|
||||
'direction': 'horizontal',
|
||||
'style': { display: 'block' }
|
||||
})), React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'A Stateful Component'), React.DOM.p({}, '\n In addition to taking input data (accessed via ', React.DOM.code({}, 'this.props'), '), a\n component can maintain internal state data (accessed via ', React.DOM.code({}, 'this.state'), ').\n When a component\'s state data changes, the rendered markup will be\n updated by re-invoking ', React.DOM.code({}, 'render()'), '.\n '), React.DOM.div({ 'id': 'timerExample' })), React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'An Application'), React.DOM.p({}, '\n Using ', React.DOM.code({}, 'props'), ' and ', React.DOM.code({}, 'state'), ', we can put together a small Todo application.\n This example uses ', React.DOM.code({}, 'state'), ' to track the current list of items as well as\n the text that the user has entered. Although event handlers appear to be\n rendered inline, they will be collected and implemented using event\n delegation.\n '), React.DOM.div({ 'id': 'todoExample' })), React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'A Component Using External Plugins'), React.DOM.p({}, '\n React is flexible and provides hooks that allow you to interface with\n other libraries and frameworks. This example uses Showdown, an external\n Markdown library, to convert the textarea\'s value in real-time.\n '), React.DOM.div({ 'id': 'markdownExample' })));
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,38 @@
|
|||
'use strict';
|
||||
/*eslint-env browser*/
|
||||
var reactTemplates = require('../src/reactTemplates');
|
||||
|
||||
var React = require('react/addons');
|
||||
|
||||
var _ = require('lodash');
|
||||
|
||||
var html = '<div>hello</div>';
|
||||
var res = reactTemplates.convertTemplateToReact(html.trim());
|
||||
//console.log(res);
|
||||
|
||||
|
||||
var Examples = require('./examples.js');
|
||||
React.render(Examples(), document.getElementById('home-section'));
|
||||
|
||||
|
||||
/*
|
||||
function generateRandomId() {
|
||||
var d = new Date().getTime();
|
||||
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = _.random(0,15);
|
||||
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
|
||||
});
|
||||
return uuid;
|
||||
};
|
||||
|
||||
|
||||
if (window.location.hash) {
|
||||
var firebase = new Firebase('https://co5qowu8b6k.firebaseio-demo.com/'+window.location.hash);
|
||||
firebase.on('value',function (snapshot) {
|
||||
window.playground.setState(snapshot.val());
|
||||
firebase.goOffline();
|
||||
});
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,124 +1,22 @@
|
|||
'use strict';
|
||||
/*eslint-env browser*/
|
||||
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 generateTemplateSource(html) {
|
||||
var code = null;
|
||||
try {
|
||||
code = reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''));
|
||||
} catch (e) {
|
||||
}
|
||||
return code;
|
||||
}
|
||||
|
||||
function generateTemplateFunction(code) {
|
||||
try {
|
||||
var defineMap = {react: React, lodash: _};
|
||||
var define = function (requirementsNames, content) {
|
||||
var requirements = _.map(requirementsNames,function (reqName) {
|
||||
return defineMap[reqName];
|
||||
});
|
||||
return content.apply(this,requirements);
|
||||
};
|
||||
/*eslint no-eval:0*/
|
||||
var res = eval(code);
|
||||
return res;
|
||||
} catch (e) {
|
||||
return emptyFunc;
|
||||
}
|
||||
}
|
||||
|
||||
function generateRenderFunc(renderFunc) {
|
||||
return function() {
|
||||
var res = null;
|
||||
try {
|
||||
res = renderFunc.apply(this);
|
||||
} catch (e) {
|
||||
res = React.DOM.div.apply(this, [{style: {color: 'red'}}, 'Exception:' + e.message]);
|
||||
}
|
||||
return React.DOM.div.apply(this, _.flatten([
|
||||
{key: 'result'},
|
||||
res
|
||||
]));
|
||||
};
|
||||
}
|
||||
var z = {getInitialState: function() {return {name: 'reactTemplates'};}};
|
||||
var templateHTML = '<div>\n' +
|
||||
'Have {_.filter(this.state.todos, {done:true}).length} todos done,\n' +
|
||||
'and {_.filter(this.state.todos, {done:false}).length} not done\n' +
|
||||
' <br/>\n' +
|
||||
' <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n' +
|
||||
' <button onClick="()=>this.remove(todo)">x</button>\n' +
|
||||
' <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>\n' +
|
||||
' <span style="text-decoration: {todo.done ? \'line-through\': \'none\'}">{todo.value}</span>\n' +
|
||||
' </div>\n' +
|
||||
' <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { e.preventDefault(); this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n' +
|
||||
' <button onClick="()=>this.add()">Add</button><br/>\n' +
|
||||
' <button onClick="()=>this.clearDone()">Clear done</button>\n' +
|
||||
'</div>';
|
||||
var templateProps = "{\n mixins: [React.addons.LinkedStateMixin],\n getInitialState: function () {\n return {edited: '', todos: [], counter: 0};\n },\n add: function () {\n if (this.state.edited.trim().length === 0) {\n return;\n }\n var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n },\n remove: function (todo) {\n this.setState({todos: _.reject(this.state.todos, todo)});\n },\n toggleChecked: function (index) {\n var todos = _.cloneDeep(this.state.todos);\n todos[index].done = !todos[index].done;\n this.setState({todos: todos});\n },\n clearDone: function () {\n this.setState({todos: _.filter(this.state.todos, {done: false})});\n }\n}";
|
||||
|
||||
var Playground = React.createClass({
|
||||
|
||||
displayName: 'Playground',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
updateSample: function (state) {
|
||||
this.templateSource = generateTemplateSource(state.templateHTML);
|
||||
this.sampleFunc = generateTemplateFunction(this.templateSource);
|
||||
this.validHTML = this.sampleFunc !== emptyFunc;
|
||||
this.sampleRender = generateRenderFunc(this.sampleFunc);
|
||||
var classBase = {};
|
||||
try {
|
||||
this.validProps = true;
|
||||
console.log(state.templateProps);
|
||||
classBase = eval('(' + state.templateProps + ')');
|
||||
if (!_.isObject(classBase)) {
|
||||
throw 'failed to eval';
|
||||
}
|
||||
} catch (e) {
|
||||
classBase = {};
|
||||
this.validProps = false;
|
||||
}
|
||||
classBase.render = this.sampleRender;
|
||||
console.log(classBase);
|
||||
this.sample = React.createFactory(React.createClass(classBase));
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
var currentState = {
|
||||
templateHTML: templateHTML,
|
||||
templateProps: templateProps
|
||||
};
|
||||
this.updateSample(currentState);
|
||||
return currentState;
|
||||
},
|
||||
componentWillUpdate: function (nextProps, nextState) {
|
||||
if (nextState.templateHTML !== this.state.templateHTML || nextState.templateProps !== this.state.templateProps) {
|
||||
this.updateSample(nextState);
|
||||
}
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return playgroundTemplate.apply(this);
|
||||
}
|
||||
});
|
||||
|
||||
var Playground = require('./playground.js');
|
||||
window.playground = React.render(Playground({"direction":'vertical'}), document.getElementById('playground'));
|
||||
|
||||
//var Examples = require('./examples.js');
|
||||
//React.render(Examples(), document.getElementById('home-section'));
|
||||
|
||||
|
||||
/*
|
||||
function generateRandomId() {
|
||||
var d = new Date().getTime();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,143 @@
|
|||
'use strict';
|
||||
/*eslint-env browser*/
|
||||
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 generateTemplateSource(html) {
|
||||
var code = null;
|
||||
try {
|
||||
code = reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''));
|
||||
} catch (e) {
|
||||
}
|
||||
return code;
|
||||
}
|
||||
|
||||
function generateTemplateFunction(code) {
|
||||
try {
|
||||
var defineMap = {react: React, lodash: _};
|
||||
var define = function (requirementsNames, content) {
|
||||
var requirements = _.map(requirementsNames,function (reqName) {
|
||||
return defineMap[reqName];
|
||||
});
|
||||
return content.apply(this,requirements);
|
||||
};
|
||||
/*eslint no-eval:0*/
|
||||
var res = eval(code);
|
||||
return res;
|
||||
} catch (e) {
|
||||
return emptyFunc;
|
||||
}
|
||||
}
|
||||
|
||||
function generateRenderFunc(renderFunc) {
|
||||
return function() {
|
||||
var res = null;
|
||||
try {
|
||||
res = renderFunc.apply(this);
|
||||
} catch (e) {
|
||||
res = React.DOM.div.apply(this, [{style: {color: 'red'}}, 'Exception:' + e.message]);
|
||||
}
|
||||
return React.DOM.div.apply(this, _.flatten([
|
||||
{key: 'result'},
|
||||
res
|
||||
]));
|
||||
};
|
||||
}
|
||||
var z = {getInitialState: function() {return {name: 'reactTemplates'};}};
|
||||
var templateHTML = '<div>\n' +
|
||||
'Have {_.filter(this.state.todos, {done:true}).length} todos done,\n' +
|
||||
'and {_.filter(this.state.todos, {done:false}).length} not done\n' +
|
||||
' <br/>\n' +
|
||||
' <div rt-repeat="todo in this.state.todos" key="{todo.key}">\n' +
|
||||
' <button onClick="()=>this.remove(todo)">x</button>\n' +
|
||||
' <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>\n' +
|
||||
' <span style="text-decoration: {todo.done ? \'line-through\': \'none\'}">{todo.value}</span>\n' +
|
||||
' </div>\n' +
|
||||
' <input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { e.preventDefault(); this.add(); }" valueLink="{this.linkState(\'edited\')}"/>\n' +
|
||||
' <button onClick="()=>this.add()">Add</button><br/>\n' +
|
||||
' <button onClick="()=>this.clearDone()">Clear done</button>\n' +
|
||||
'</div>';
|
||||
var templateProps = "{\n mixins: [React.addons.LinkedStateMixin],\n getInitialState: function () {\n return {edited: '', todos: [], counter: 0};\n },\n add: function () {\n if (this.state.edited.trim().length === 0) {\n return;\n }\n var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n },\n remove: function (todo) {\n this.setState({todos: _.reject(this.state.todos, todo)});\n },\n toggleChecked: function (index) {\n var todos = _.cloneDeep(this.state.todos);\n todos[index].done = !todos[index].done;\n this.setState({todos: todos});\n },\n clearDone: function () {\n this.setState({todos: _.filter(this.state.todos, {done: false})});\n }\n}";
|
||||
|
||||
var Playground = React.createClass({
|
||||
|
||||
displayName: 'Playground',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
updateSample: function (state) {
|
||||
this.templateSource = generateTemplateSource(state.templateHTML);
|
||||
this.sampleFunc = generateTemplateFunction(this.templateSource);
|
||||
this.validHTML = this.sampleFunc !== emptyFunc;
|
||||
this.sampleRender = generateRenderFunc(this.sampleFunc);
|
||||
var classBase = {};
|
||||
try {
|
||||
this.validProps = true;
|
||||
console.log(state.templateProps);
|
||||
classBase = eval('(' + state.templateProps + ')');
|
||||
if (!_.isObject(classBase)) {
|
||||
throw 'failed to eval';
|
||||
}
|
||||
} catch (e) {
|
||||
classBase = {};
|
||||
this.validProps = false;
|
||||
}
|
||||
classBase.render = this.sampleRender;
|
||||
console.log(classBase);
|
||||
this.sample = React.createFactory(React.createClass(classBase));
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
var currentState = {
|
||||
templateHTML: templateHTML,
|
||||
templateProps: templateProps
|
||||
};
|
||||
this.updateSample(currentState);
|
||||
return currentState;
|
||||
},
|
||||
componentWillUpdate: function (nextProps, nextState) {
|
||||
if (nextState.templateHTML !== this.state.templateHTML || nextState.templateProps !== this.state.templateProps) {
|
||||
this.updateSample(nextState);
|
||||
}
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return playgroundTemplate.apply(this);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Playground;
|
||||
|
||||
/*
|
||||
function generateRandomId() {
|
||||
var d = new Date().getTime();
|
||||
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = _.random(0,15);
|
||||
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
|
||||
});
|
||||
return uuid;
|
||||
};
|
||||
|
||||
|
||||
if (window.location.hash) {
|
||||
var firebase = new Firebase('https://co5qowu8b6k.firebaseio-demo.com/'+window.location.hash);
|
||||
firebase.on('value',function (snapshot) {
|
||||
window.playground.setState(snapshot.val());
|
||||
firebase.goOffline();
|
||||
});
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue