fix examples
This commit is contained in:
ido
parent
4654770a10
commit
5c65f8192e
20
Gruntfile.js
20
Gruntfile.js
|
|
@ -11,7 +11,9 @@ module.exports = function (grunt) {
|
|||
src: [
|
||||
'src/**/*.js', 'playground/**/*.js',
|
||||
'!playground/main.browser.js',
|
||||
'!playground/home-main.browser.js',
|
||||
'!playground/bundle/**',
|
||||
'!playground/tmp/**',
|
||||
'!playground/**/*.rt.js'
|
||||
]
|
||||
},
|
||||
|
|
@ -79,9 +81,7 @@ module.exports = function (grunt) {
|
|||
},
|
||||
options: {
|
||||
transform: ['brfs'],
|
||||
alias: [
|
||||
'react:react/addons'
|
||||
]
|
||||
alias: ['react:react/addons']
|
||||
// exclude:['react','react/addons','../src/reactTemplates','lodash','brace','brace/mode/javascript','brace/mode/html','brace/theme/solarized_light'],
|
||||
// external: [
|
||||
// 'react/addons',
|
||||
|
|
@ -89,7 +89,15 @@ module.exports = function (grunt) {
|
|||
// 'lodash',
|
||||
// 'brace'
|
||||
// ]
|
||||
|
||||
}
|
||||
},
|
||||
home: {
|
||||
files: {
|
||||
'playground/home-main.browser.js': ['playground/home-main.js']
|
||||
},
|
||||
options: {
|
||||
transform: ['brfs'],
|
||||
alias: ['react:react/addons']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -116,9 +124,9 @@ module.exports = function (grunt) {
|
|||
},
|
||||
playground: {
|
||||
files: [
|
||||
'playground/**/*.js'
|
||||
'playground/**/*.js', '!playground/*.browser.js'
|
||||
],
|
||||
tasks: ['browserify:pg'],
|
||||
tasks: ['browserify:home'], /*'browserify:pg', */
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"brace": "^0.4.0",
|
||||
"brfs": "^1.2.0",
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-browserify": "^3.2.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.large-text-area {
|
||||
height: 400px;
|
||||
/*height: 400px;*/
|
||||
/*min-height: 100px;*/
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.code-area.horizontal {
|
||||
width: 50%;
|
||||
/*height: 620px;*/
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.code-area.vertical {
|
||||
width: 100%;
|
||||
/*height: 620px;*/
|
||||
float: none;
|
||||
}
|
||||
|
||||
.result-area.horizontal {
|
||||
width: 50%;
|
||||
width: 30%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
|
||||
.result-area {
|
||||
width: 50%;
|
||||
/*height: 620px;*/
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
|
@ -401,6 +400,9 @@ html {
|
|||
|
||||
.container {
|
||||
padding-top: 50px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
min-width: 960px
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,31 @@
|
|||
var examplesTemplate = require('./examples.rt.js');
|
||||
var React = require('react/addons');
|
||||
var _ = require('lodash');
|
||||
var fs = require('fs');
|
||||
|
||||
var helloCode = fs.readFileSync(__dirname + '/samples/hello.code').toString();
|
||||
var helloRT = fs.readFileSync(__dirname + '/samples/hello.rt').toString();
|
||||
var todoCode = fs.readFileSync(__dirname + '/samples/todo.code').toString();
|
||||
var todoRT = fs.readFileSync(__dirname + '/samples/todo.rt').toString();
|
||||
|
||||
var samples = [
|
||||
[helloCode, helloRT],
|
||||
[todoCode, todoRT]
|
||||
];
|
||||
samples = _.map(samples, function (tuple) {
|
||||
return {templateProps: tuple[0], templateHTML: tuple[1]};
|
||||
});
|
||||
|
||||
var Examples = React.createClass({
|
||||
|
||||
displayName: 'Examples',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
getInitialState: function () {
|
||||
return {
|
||||
samples: samples
|
||||
};
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return examplesTemplate.apply(this);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,11 @@
|
|||
<!doctype rt playground="./playground">
|
||||
<div id="examples">
|
||||
<div class="example">
|
||||
<h3>A Simple Component</h3>
|
||||
<h3>Hello world in react templates</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>.
|
||||
Simple hello world html transformed into react javascript 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>
|
||||
<playground id="helloExample" rt-props="this.state.samples[0]" direction="horizontal" style="display: block"></playground>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Stateful Component</h3>
|
||||
|
|
@ -25,7 +16,7 @@
|
|||
updated by re-invoking <code>render()</code>.
|
||||
</p>
|
||||
<div id="timerExample"></div>
|
||||
<playground direction="horizontal" style="display: block"></playground>
|
||||
<playground id="example2" rt-props="this.state.samples[1]" direction="horizontal" style="display: block"></playground>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>An Application</h3>
|
||||
|
|
@ -37,7 +28,7 @@
|
|||
delegation.
|
||||
</p>
|
||||
<div id="todoExample"></div>
|
||||
<playground direction="horizontal" style="display: block"></playground>
|
||||
<playground id="example3" direction="horizontal" style="display: block"></playground>
|
||||
</div>
|
||||
<div class="example">
|
||||
<h3>A Component Using External Plugins</h3>
|
||||
|
|
@ -47,6 +38,6 @@
|
|||
Markdown library, to convert the textarea's value in real-time.
|
||||
</p>
|
||||
<div id="markdownExample"></div>
|
||||
<playground direction="horizontal" style="display: block"></playground>
|
||||
<playground id="example4" direction="horizontal" style="display: block"></playground>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,16 +3,20 @@ 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({
|
||||
return React.DOM.div({ 'id': 'examples' }, React.DOM.div({ 'className': 'example' }, React.DOM.h3({}, 'Hello world in react templates'), React.DOM.p({}, '\n Simple hello world html transformed into react javascript code\n '), playground(_.merge({}, {
|
||||
'id': 'helloExample',
|
||||
'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' }), playground({
|
||||
}, this.state.samples[0]))), 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' }), playground(_.merge({}, {
|
||||
'id': 'example2',
|
||||
'direction': 'horizontal',
|
||||
'style': { display: 'block' }
|
||||
})), 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' }), playground({
|
||||
}, this.state.samples[1]))), 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' }), playground({
|
||||
'id': 'example3',
|
||||
'direction': 'horizontal',
|
||||
'style': { display: 'block' }
|
||||
})), 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' }), playground({
|
||||
'id': 'example4',
|
||||
'direction': 'horizontal',
|
||||
'style': { display: 'block' }
|
||||
})));
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -71,7 +71,14 @@ var Playground = React.createClass({
|
|||
|
||||
displayName: 'Playground',
|
||||
mixins: [React.addons.LinkedStateMixin],
|
||||
|
||||
propTypes: {
|
||||
direction: React.PropTypes.string
|
||||
},
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
direction: 'horizontal' //vertical
|
||||
};
|
||||
},
|
||||
updateSample: function (state) {
|
||||
this.templateSource = generateTemplateSource(state.templateHTML);
|
||||
this.sampleFunc = generateTemplateFunction(this.templateSource);
|
||||
|
|
@ -92,7 +99,6 @@ var Playground = React.createClass({
|
|||
classBase.render = this.sampleRender;
|
||||
this.sample = React.createFactory(React.createClass(classBase));
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
var currentState = {
|
||||
templateHTML: this.props.templateHTML || templateHTML,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
<!DOCTYPE rt CodeEditor="./aceEditor">
|
||||
<div>
|
||||
<div id="myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
|
||||
<div id="{this.props.id}-myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
|
||||
<li role="presentation"><a href="#classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
|
||||
<li role="presentation"><a href="#generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
|
||||
<li role="presentation" class="active"><a href="#{this.props.id}-template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
|
||||
<li rt-if="this.state.templateProps != '{}'" role="presentation"><a href="#{this.props.id}-classCode" aria-controls="classCode" role="tab" data-toggle="tab">Class</a></li>
|
||||
<li role="presentation"><a href="#{this.props.id}-generatedCode" aria-controls="generatedCode" role="tab" data-toggle="tab">Generated code</a></li>
|
||||
</ul>
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="template">
|
||||
<div role="tabpanel" class="tab-pane active" id="{this.props.id}-template">
|
||||
<CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
|
||||
value="{this.state.templateHTML}"
|
||||
mode="html"
|
||||
onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
|
||||
/>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="classCode">
|
||||
<div rt-if="this.state.templateProps != '{}'" role="tabpanel" class="tab-pane" id="{this.props.id}-classCode">
|
||||
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
|
||||
value="{this.state.templateProps}"
|
||||
mode="javascript"
|
||||
onChange="(evt) => this.setState({'templateProps':evt.target.value})"
|
||||
/>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane" id="generatedCode">
|
||||
<div role="tabpanel" class="tab-pane" id="{this.props.id}-generatedCode">
|
||||
<CodeEditor class="large-text-area" style="border:1px solid black;"
|
||||
value="{this.templateSource}"
|
||||
mode="javascript"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function onSubmit3(e) {
|
|||
}
|
||||
module.exports = function () {
|
||||
return React.DOM.div({}, React.DOM.div({
|
||||
'id': 'myTab',
|
||||
'id': this.props.id + '-myTab',
|
||||
'role': 'tabpanel',
|
||||
'className': 'code-area ' + (this.props.direction === 'horizontal' && 'horizontal' || 'vertical')
|
||||
} /* Nav tabs */, React.DOM.ul({
|
||||
|
|
@ -23,44 +23,44 @@ module.exports = function () {
|
|||
'role': 'presentation',
|
||||
'className': 'active'
|
||||
}, React.DOM.a({
|
||||
'href': '#template',
|
||||
'href': '#' + this.props.id + '-template',
|
||||
'aria-controls': 'template',
|
||||
'role': 'tab',
|
||||
'data-toggle': 'tab'
|
||||
}, 'Template')), React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
|
||||
'href': '#classCode',
|
||||
}, 'Template')), this.state.templateProps != '{}' ? React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
|
||||
'href': '#' + this.props.id + '-classCode',
|
||||
'aria-controls': 'classCode',
|
||||
'role': 'tab',
|
||||
'data-toggle': 'tab'
|
||||
}, 'Class')), React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
|
||||
'href': '#generatedCode',
|
||||
}, 'Class')) : null, React.DOM.li({ 'role': 'presentation' }, React.DOM.a({
|
||||
'href': '#' + this.props.id + '-generatedCode',
|
||||
'aria-controls': 'generatedCode',
|
||||
'role': 'tab',
|
||||
'data-toggle': 'tab'
|
||||
}, 'Generated code'))) /* Tab panes */, React.DOM.div({ 'className': 'tab-content' }, React.DOM.div({
|
||||
'role': 'tabpanel',
|
||||
'className': 'tab-pane active',
|
||||
'id': 'template'
|
||||
'id': this.props.id + '-template'
|
||||
}, CodeEditor({
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateHTML,
|
||||
'mode': 'html',
|
||||
'onChange': onChange1.bind(this)
|
||||
})), React.DOM.div({
|
||||
})), this.state.templateProps != '{}' ? React.DOM.div({
|
||||
'role': 'tabpanel',
|
||||
'className': 'tab-pane',
|
||||
'id': 'classCode'
|
||||
'id': this.props.id + '-classCode'
|
||||
}, CodeEditor({
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateProps,
|
||||
'mode': 'javascript',
|
||||
'onChange': onChange2.bind(this)
|
||||
})), React.DOM.div({
|
||||
})) : null, React.DOM.div({
|
||||
'role': 'tabpanel',
|
||||
'className': 'tab-pane',
|
||||
'id': 'generatedCode'
|
||||
'id': this.props.id + '-generatedCode'
|
||||
}, CodeEditor({
|
||||
'className': 'large-text-area',
|
||||
'style': { border: '1px solid black' },
|
||||
|
|
|
|||
|
|
@ -1,3 +1 @@
|
|||
{
|
||||
|
||||
}
|
||||
{}
|
||||
Loading…
Reference in New Issue