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

add amd, minor ui fixes

Browse Source
This commit is contained in:
ido 2014-12-30 17:33:28 +02:00
parent e258d88a2b
commit 33b5443e25
14 changed files with 378 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/icons-footer-sab5af31545.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

74
index.html
View File

@ -1,6 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<!--[if IE]><![endif]-->
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -11,27 +9,6 @@
<link rel="shortcut icon" href="https://facebook.github.io/react/favicon.ico"> <link rel="shortcut icon" href="https://facebook.github.io/react/favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,700' rel='stylesheet' type='text/css'>
<!--<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]&ndash;&gt;-->
<!--<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 --> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
@ -58,78 +35,49 @@
</a> </a>
<ul class="nav-site"> <ul class="nav-site">
<li><a href="fiddle.html">Playground</a></li> <li><a href="fiddle.html">Playground</a></li>
<li><a href="https://github.com/wix/react-templates">docs</a></li> <li><a href="https://github.com/wix/react-templates#template-directives-and-syntax">docs</a></li>
<!--<li><a href="https://github.com/wix/react-templates">support</a></li>--> <li><a href="https://github.com/wix/react-templates#installation">download</a></li>
<li><a href="https://github.com/wix/react-templates">download</a></li>
<!--<li><a href="https://github.com/wix/react-templates/">blog</a></li>-->
<li><a href="https://github.com/wix/react-templates">github</a> <li><a href="https://github.com/wix/react-templates">github</a>
</ul> </ul>
</div> </div>
</div> </div>
<div class="hero"> <div class="hero">
<div class="wrap"> <div class="wrap">
<div class="text">React Templates</div> <div class="text">React Templates</div>
<div class="minitext"> <div class="minitext">
Light weight templates for React Lightweight Templates for React
</div> </div>
<div class="buttons-unit"> <div class="buttons-unit">
<a href="fiddle.html" class="button">Checkout the Playground</a> <a href="fiddle.html" class="button">Check Out the Playground</a>
<!--<a href="/react/downloads.html" class="button">Download React v0.12.1</a>--> </div>
</div>
</div> </div>
</div> </div>
<section class="content wrap"> <section class="content wrap">
<section class="love-list"> <section class="love-list">
<ul > <ul >
<li>No runtime libraries. No magic. Just simple pre-compilation to a clear React code</li> <li>No runtime libraries. No magic. Just simple pre-compilation to a clear React code</li>
<li>Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic</li> <li>Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic</li>
<li>Very good separation of presentation and logic. Almost no HTML within the component file</li> <li>Very good separation of presentation and logic. Almost no HTML within the component file</li>
<li>Declarative coding for presentation. HTML that you write and inspect look similar</li> <li>Declarative coding for presentation. HTML that you write and inspect look similar</li>
<li>Easy syntax. Similar to HTML. All IDEs recognize this format</li> <li>Easy syntax. Similar to HTML. All IDEs recognize this format</li>
<li>Supports <a href="#amd">AMD</a>, <a href="#commonjs">CommonJS</a> and globals</li>
</ul> </ul>
</section> </section>
<section id="home-section" class="home-section"> <section id="home-section" class="home-section">
</section> </section>
<div id="loading" style="/* padding-bottom: 40px; */ <div id="loading">Loading...</div>
margin-bottom: 100px;
font-size: 20px;
padding-top: 50px;
text-align: center;">Loading...</div>
<hr class="home-divider" /> <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>-->
</section> </section>
<footer class="footer">
<!--<footer class="wrap">--> <span>Sponsored by </span> <a href="//wix.com" class="wf-white-logo"></a>
<!--<div class="left">--> </footer>
<!--A Facebook &amp; Instagram collaboration.<br>-->
<!--<a href="/react/acknowledgements.html">Acknowledgements</a>-->
<!--</div>-->
<!--<div class="right">-->
<!--&copy; 2013&ndash;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>
<div id="fb-root"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> <!--<script src="playground/libs/ace-builds-1.1.8/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>-->
<script src="playground/dist/rt-main.browser.min.js"></script> <script src="playground/dist/rt-main.browser.min.js"></script>
<!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>--> <!--<script data-main="playground/home-main.js" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>--> <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>-->

54
playground/CodeMirrorEditor.js
View File

@ -5,10 +5,10 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
'./libs/codemirror-4.8/addon/hint/show-hint', './libs/codemirror-4.8/addon/hint/show-hint',
'./libs/codemirror-4.8/addon/hint/xml-hint', './libs/codemirror-4.8/addon/hint/xml-hint',
'./libs/codemirror-4.8/addon/hint/html-hint', './libs/codemirror-4.8/addon/hint/html-hint',
'./libs/codemirror-4.8/addon/display/panel', //'./libs/codemirror-4.8/addon/display/panel',
'./libs/codemirror-4.8/mode/xml/xml', './libs/codemirror-4.8/mode/xml/xml',
'./libs/codemirror-4.8/mode/css/css', //'./libs/codemirror-4.8/mode/css/css',
'./libs/codemirror-4.8/mode/htmlmixed/htmlmixed' './libs/codemirror-4.8/addon/runmode/runmode'
//'./libs/codemirror-4.8/addon/display/placeholder' //'./libs/codemirror-4.8/addon/display/placeholder'
], function (React, _, $, CodeMirror, CMLint) { ], function (React, _, $, CodeMirror, CMLint) {
'use strict'; 'use strict';
@ -69,13 +69,25 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
var editor = React.createClass({ var editor = React.createClass({
displayName: 'CodeMirrorEditor', displayName: 'CodeMirrorEditor',
propTypes: {
id: React.PropTypes.string,
readOnly: React.PropTypes.bool,
runMode: React.PropTypes.bool,
mode: React.PropTypes.string
},
getDefaultProps: function () {
return {
readOnly: false,
mode: 'html'
};
},
getInitialState: function () { getInitialState: function () {
return { return {
editorId: _.uniqueId() editorId: _.uniqueId()
}; };
}, },
componentWillMount: function () { //componentWillMount: function () {
}, //},
render: function () { render: function () {
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']); var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
props.id = this.props.id || this.state.editorId; props.id = this.props.id || this.state.editorId;
@ -113,11 +125,11 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
}; };
options.hintOptions = {schemaInfo: tags}; options.hintOptions = {schemaInfo: tags};
//options.gutters = ['CodeMirror-lint-markers']; //options.gutters = ['CodeMirror-lint-markers'];
options.lint = true; //options.lint = true;
} else { } else {
options.mode = 'javascript'; options.mode = 'javascript';
//options.gutters = ['CodeMirror-lint-markers']; //options.gutters = ['CodeMirror-lint-markers'];
options.lint = true; //options.lint = true;
} }
this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options); this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options);
@ -132,21 +144,21 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
}.bind(this)); }.bind(this));
} }
}, },
showMessage: function (msg) { //showMessage: function (msg) {
//var anOption = document.createElement('div'); // //var anOption = document.createElement('div');
//anOption.innerText = msg; // //anOption.innerText = msg;
//anOption.setAttribute('class', 'error-panel'); // //anOption.setAttribute('class', 'error-panel');
//if (this.panel) { // //if (this.panel) {
// // this.panel.clear();
// //}
// //this.panel = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'}
//},
//clearMessage: function () {
// if (this.panel) {
// this.panel.clear(); // this.panel.clear();
//} // this.panel = null;
//this.panel = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'} // }
}, //},
clearMessage: function () {
if (this.panel) {
this.panel.clear();
this.panel = null;
}
},
annotate: function (annot) { annotate: function (annot) {
CMLint.annotate(this.editor, annot); CMLint.annotate(this.editor, annot);
}, },

69
playground/CodeMirrorViewer.js Normal file
View File

@ -0,0 +1,69 @@
define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
'./libs/codemirror-4.8/mode/javascript/javascript',
'./libs/codemirror-4.8/addon/hint/html-hint',
'./libs/codemirror-4.8/addon/hint/show-hint',
'./libs/codemirror-4.8/addon/hint/xml-hint',
'./libs/codemirror-4.8/addon/hint/html-hint',
'./libs/codemirror-4.8/mode/xml/xml',
'./libs/codemirror-4.8/addon/runmode/runmode'
], function (React, _, $, CodeMirror) {
'use strict';
return React.createClass({
displayName: 'CodeMirrorViewer',
propTypes: {
id: React.PropTypes.string,
runMode: React.PropTypes.bool,
mode: React.PropTypes.string
},
getDefaultProps: function () {
return {
readOnly: false,
runMode: true,
mode: 'html'
};
},
getInitialState: function () {
return {
editorId: _.uniqueId()
};
},
render: function () {
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
props.id = this.props.id || this.state.editorId;
props.className = 'cm-s-default';
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
return React.DOM.pre(props, value);
},
componentWillUpdate: function (nextProps/*, nextState*/) {
var value = nextProps.valueLink ? nextProps.valueLink() : nextProps.value;
if (this.editor && this.editor.getValue() !== value) {
this.editor.setValue(value || '');
}
},
componentDidMount: function () {
var value = this.props.valueLink ? this.props.valueLink() : this.props.value;
var options = {
readOnly: this.props.readOnly,
lineWrapping: true,
smartIndent: true,
matchBrackets: true,
value: value,
lineNumbers: true,
mode: 'javascript',
gutters: ['CodeMirror-linenumbers', 'rt-annotations'],
theme: 'solarized'
};
if (this.props.mode === 'html') {
options.mode = 'text/html';
} else {
options.mode = 'javascript';
}
this.editor = CodeMirror.runMode(value, options.mode, this.getDOMNode());
},
componentWillUnmount: function () {
this.editor.toTextArea();
}
});
});

88
playground/css/fiddle.css
View File

@ -3,11 +3,9 @@ html {
} }
body { body {
/*padding: 20px;*/
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-weight: 300; font-weight: 300;
/*background: #f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;*/ overflow: hidden;
/*overflow: hidden;*/
padding: 0; padding: 0;
margin: 0; margin: 0;
/*position: relative;*/ /*position: relative;*/
@ -45,7 +43,7 @@ body {
display: inline-block; display: inline-block;
} }
.title-link{ .title-link {
float: left; float: left;
margin-top: -3px; margin-top: -3px;
margin-right: 5px; margin-right: 5px;
@ -62,8 +60,8 @@ body {
display: inline-block; display: inline-block;
} }
#buttons-bar button{ #buttons-bar button {
font-weight:400; font-weight: 400;
} }
#buttons-bar button, #buttons-bar div { #buttons-bar button, #buttons-bar div {
@ -78,17 +76,18 @@ body {
margin-right: 5px; margin-right: 5px;
} }
.nav-site{ .nav-site {
position:absolute; position: absolute;
top:0; top: 0;
right:0; right: 0;
}
.nav-site li {
margin: 0;
display:inline-block;
} }
.nav-site a { .nav-site li {
margin: 0;
display: inline-block;
}
.nav-site a {
padding: 0 8px; padding: 0 8px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@ -98,17 +97,16 @@ body {
color: #aaa color: #aaa
} }
.nav-site a:hover { .nav-site a:hover {
color: #fafafa color: #fafafa
} }
.nav-site a.active { .nav-site a.active {
color: #fafafa; color: #fafafa;
border-bottom: 3px solid #cc7a6f; border-bottom: 3px solid #cc7a6f;
background: #333 background: #333
} }
.fiddle { .fiddle {
height: 100%; height: 100%;
} }
@ -132,9 +130,8 @@ body {
/*margin: 10px;*/ /*margin: 10px;*/
} }
.sample-view { .sample-view {
height:100%; height: 100%;
border: 1px solid #ddd; border: 1px solid #ddd;
background-color: #f8f8f5; background-color: #f8f8f5;
@ -154,7 +151,7 @@ body {
} }
.CodeMirror-wrap { .CodeMirror-wrap {
border:1px solid #ddd; border: 1px solid #ddd;
/*border-radius: 4px 4px 4px 4px;*/ /*border-radius: 4px 4px 4px 4px;*/
/*height: 400px;*/ /*height: 400px;*/
/*min-height: 100px;*/ /*min-height: 100px;*/
@ -162,19 +159,20 @@ body {
/*margin: 10px;*/ /*margin: 10px;*/
} }
.fiddle-row{ .fiddle-row {
overflow:hidden; overflow: hidden;
} }
.code-area { .code-area {
width: 50%; width: 50%;
float:left; float: left;
position:relative; position: relative;
padding: 5px; padding: 5px;
} }
.result-area-form{ .result-area-form {
padding:5px; padding: 5px;
margin: 10px 20px;
} }
.error-panel { .error-panel {
@ -194,38 +192,40 @@ body {
background-color: aliceblue; background-color: aliceblue;
opacity: 0.9; opacity: 0.9;
} }
/*position: relative; min-height: 100%;*/ /*position: relative; min-height: 100%;*/
.code-area::after{ .code-area::after {
content:''; content: '';
position:absolute; position: absolute;
top:5px; top: 5px;
right:5px; right: 5px;
font-size: 11px; font-size: 11px;
padding:2px 5px; padding: 2px 5px;
border:1px solid #ddd; border: 1px solid #ddd;
color: #b4b4b4; color: #b4b4b4;
background: rgba(255,255,255,0.5); background: rgba(255, 255, 255, 0.5);
pointer-events:none; pointer-events: none;
transition: opacity 0.2s; transition: opacity 0.2s;
-webkit-transition: opacity 0.2s; -webkit-transition: opacity 0.2s;
} }
/*.code-area:hover::after{ /*.code-area:hover::after{
opacity:0.2; opacity:0.2;
}*/ }*/
#area-rt::after{ #area-rt::after {
content:'Template'; content: 'Template';
} }
#area-code::after{ #area-code::after {
content:'Class'; content: 'Class';
} }
#area-generated::after{ #area-generated::after {
content:'Generated Code'; content: 'Generated Code';
} }
#area-result::after{ #area-result::after {
content:'Result'; content: 'Result';
} }

109
playground/css/home.css
View File

@ -1,5 +1,3 @@
body { body {
font-family: 'Lato', sans-serif; font-family: 'Lato', sans-serif;
font-weight: 300; font-weight: 300;
@ -11,12 +9,12 @@ p {
margin: 0 0 10px margin: 0 0 10px
} }
.subHeader { /*.subHeader {*/
font-size: 21px; /*font-size: 21px;*/
font-weight: 200; /*font-weight: 200;*/
line-height: 30px; /*line-height: 30px;*/
margin-bottom: 10px /*margin-bottom: 10px*/
} /*}*/
em { em {
font-style: italic font-style: italic
@ -472,7 +470,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
.hero .text { .hero .text {
font-size: 110px; font-size: 110px;
text-align: center; text-align: center;
font-weight: 100; font-weight: 300;
color: #3899EC; color: #3899EC;
} }
@ -520,8 +518,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
} }
.buttons-unit .button { .buttons-unit .button {
font-size: 24px; font-size: 22px;
background: #cc7a6f; background: #FB7D33;
color: #fafafa color: #fafafa
} }
@ -714,14 +712,6 @@ h3 {
float: right float: right
} }
footer {
font-size: 13px;
font-weight: 600;
margin-top: 36px;
margin-bottom: 18px;
overflow: auto
}
section.black content { section.black content {
padding-bottom: 18px padding-bottom: 18px
} }
@ -1070,19 +1060,19 @@ h1:after {
} }
} }
.post { /*.post {*/
margin-bottom: 30px /*margin-bottom: 30px*/
} /*}*/
.pagination { /*.pagination {*/
margin-bottom: 30px; /*margin-bottom: 30px;*/
width: 100%; /*width: 100%;*/
overflow: hidden /*overflow: hidden;*/
} /*}*/
.pagination .next { /*.pagination .next {*/
float: right /*float: right*/
} /*}*/
div[data-twttr-id] iframe { div[data-twttr-id] iframe {
margin: 10px auto !important margin: 10px auto !important
@ -1104,16 +1094,33 @@ div[data-twttr-id] iframe {
margin-left: 20px margin-left: 20px
} }
.nav-tabs { #loading {
margin-left: 0; margin-bottom: 1px;border-bottom:none; margin-bottom: 100px;
font-size: 20px;
padding-top: 50px;
text-align: center;
} }
.nav-tabs>li{margin-left:0}
.preview-title{display:block; padding:10px 15px 13px; line-height: 1.42857; color: #333; margin-left:30px; } .nav-tabs {
margin-left: 0;
margin-bottom: 1px;
border-bottom: none;
}
.nav-tabs > li {
margin-left: 0
}
.preview-title {
display: block;
padding: 10px 15px 13px;
line-height: 1.42857;
color: #333;
margin-left: 30px;
}
.large-text-area { .large-text-area {
border:1px solid #ddd; border: 1px solid #ddd;
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
/*height: 400px;*/ /*height: 400px;*/
/*min-height: 100px;*/ /*min-height: 100px;*/
@ -1121,12 +1128,12 @@ div[data-twttr-id] iframe {
/*margin: 10px;*/ /*margin: 10px;*/
} }
.code-area, .result-area{ .code-area, .result-area {
box-sizing:border-box; box-sizing: border-box;
} }
.CodeMirror-wrap { .CodeMirror-wrap {
border:1px solid #ddd; border: 1px solid #ddd;
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
/*height: 400px;*/ /*height: 400px;*/
/*min-height: 100px;*/ /*min-height: 100px;*/
@ -1165,6 +1172,9 @@ div[data-twttr-id] iframe {
background-color: #f8f8f5; background-color: #f8f8f5;
padding: 20px 30px; padding: 20px 30px;
margin-left:30px; margin-left:30px;
height: 301px;
max-height:308px;
overflow: auto;
} }
.sample-view button { .sample-view button {
@ -1175,4 +1185,27 @@ div[data-twttr-id] iframe {
margin-right: 5px; margin-right: 5px;
} }
footer {
padding: 20px;
background: #666;
color: #FFF;
text-align: right;
}
footer span {
display: inline-block;
line-height:1.5;
vertical-align:text-bottom;
}
.wf-white-logo {
width: 200px;
height: 24px;
display: inline-block;
background-image: url(../../img/icons-footer-sab5af31545.png);
background-repeat: no-repeat;
background-position: 0 -188px;
}

60
playground/css/playground.css
View File

@ -1,67 +1,9 @@
/*.hidden {*/
/*display: none;*/
/*}*/
/*body {*/
/*padding: 20px;*/
/*}*/
/*.hiddenTab {*/
/*width: 0;*/
/*height: 0;*/
/*}*/
/*.large-text-area {*/
/*height: 400px;*/
/*margin: 10px;*/
/*}*/
/*.code-area.horizontal {*/
/*width: 50%;*/
/*height: 620px;*/
/*float: left;*/
/*}*/
/*.code-area.vertical {*/
/*width: 100%;*/
/*height: 620px;*/
/*float: none;*/
/*}*/
/*.result-area.horizontal {*/
/*width: 50%;*/
/*float: left;*/
/*}*/
/*.result-area.vertical {*/
/*width: 100%;*/
/*float: none;*/
/*}*/
/*.result-area {*/
/*width: 50%;*/
/*height: 620px;*/
/*float: left;*/
/*}*/
/*.sample-view {*/
/*margin: 10px;*/
/*}*/
/*.sample-view button {*/
/*margin: 5px;*/
/*}*/
/*.sample-view input[type=checkbox] {*/
/*margin-right: 5px;*/
/*}*/
.playground-error { .playground-error {
color: red; color: red;
font-weight: 500;
} }
.cm-s-solarized .editor-error { .cm-s-solarized .editor-error {
/*color: red;*/
/*text-decoration: underline;*/
background-color: #F0F079; background-color: #F0F079;
} }

6
playground/examples.js
View File

@ -25,13 +25,15 @@ define(['lodash', 'react', './examples.rt',
var Examples = React.createClass({ var Examples = React.createClass({
displayName: 'Examples', displayName: 'Examples',
mixins: [React.addons.LinkedStateMixin], mixins: [React.addons.LinkedStateMixin],
getInitialState: function () { getInitialState: function () {
var codeAmd = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'amd', name: 'template'});
var codeCJS = window.reactTemplates.convertTemplateToReact(helloRT, {modules: 'commonjs', name: 'template'});
return { return {
amd: {value: codeAmd},
cjs: {value: codeCJS},
samples: samples samples: samples
}; };
}, },
render: function () { render: function () {
return examplesTemplate.apply(this); return examplesTemplate.apply(this);
} }

15
playground/examples.rt
View File

@ -1,5 +1,6 @@
<!--suppress CheckEmptyScriptTag --> <!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./playground" as="playground"/> <rt-require dependency="./playground" as="playground"/>
<rt-require dependency="./CodeMirrorViewer" as="viewer"/>
<div id="examples"> <div id="examples">
<div class="example"> <div class="example">
<h3>Hello world in react templates</h3> <h3>Hello world in react templates</h3>
@ -43,4 +44,18 @@
</p> </p>
<playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground> <playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground>
</div> </div>
<div id="amd" class="example">
<h3>AMD</h3>
<p>
This example shows the hello sample output with AMD support.
</p>
<viewer rt-props="this.state.amd" mode="javascript" />
</div>
<div id="commonjs" class="example">
<h3>CommonJS</h3>
<p>
This example shows the hello sample output with CommonJS support.
</p>
<viewer rt-props="this.state.cjs" mode="javascript" />
</div>
</div> </div>

13
playground/examples.rt.js
View File

@ -1,8 +1,9 @@
define([ define([
'react/addons', 'react/addons',
'lodash', 'lodash',
'./playground' './playground',
], function (React, _, playground) { './CodeMirrorViewer'
], function (React, _, playground, viewer) {
'use strict'; 'use strict';
return function () { return function () {
return React.createElement('div', { 'id': 'examples' }, React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Hello world in react templates'), React.createElement('p', {}, '\n Simple hello world html transformed into react javascript code\n '), React.createElement(playground, _.merge({}, { return React.createElement('div', { 'id': 'examples' }, React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Hello world in react templates'), React.createElement('p', {}, '\n Simple hello world html transformed into react javascript code\n '), React.createElement(playground, _.merge({}, {
@ -23,6 +24,12 @@ define([
}, this.state.samples.todo))), React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Weather'), React.createElement('p', {}, '\n This example shows working with async events, usage of regular event handler function pointers instead of lambda expression, and working with 2 way binding\n '), React.createElement(playground, _.merge({}, { }, this.state.samples.todo))), React.createElement('div', { 'className': 'example' }, React.createElement('h3', {}, 'Weather'), React.createElement('p', {}, '\n This example shows working with async events, usage of regular event handler function pointers instead of lambda expression, and working with 2 way binding\n '), React.createElement(playground, _.merge({}, {
'id': 'weatherExample', 'id': 'weatherExample',
'direction': 'horizontal' 'direction': 'horizontal'
}, this.state.samples.weather)))); }, this.state.samples.weather))), React.createElement('div', {
'id': 'amd',
'className': 'example'
}, React.createElement('h3', {}, 'AMD'), React.createElement('p', {}, '\n This example shows the hello sample output with AMD support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.amd))), React.createElement('div', {
'id': 'commonjs',
'className': 'example'
}, React.createElement('h3', {}, 'CommonJS'), React.createElement('p', {}, '\n This example shows the hello sample output with CommonJS support.\n '), React.createElement(viewer, _.merge({}, { 'mode': 'javascript' }, this.state.cjs))));
}; };
}); });

6
playground/fiddle.rt
View File

@ -32,10 +32,8 @@
</div> </div>
<ul class="nav-site"> <ul class="nav-site">
<li><a href="index.html">HOME</a></li> <li><a href="index.html">HOME</a></li>
<li><a href="https://github.com/wix/react-templates">docs</a></li> <li><a href="https://github.com/wix/react-templates#template-directives-and-syntax">docs</a></li>
<!--<li><a href="https://github.com/wix/react-templates">support</a></li>--> <li><a href="https://github.com/wix/react-templates#installation">download</a></li>
<li><a href="https://github.com/wix/react-templates">download</a></li>
<!--<li><a href="https://github.com/wix/react-templates/">blog</a></li>-->
<li><a href="https://github.com/wix/react-templates">github</a> <li><a href="https://github.com/wix/react-templates">github</a>
</ul> </ul>
</div> </div>

2
playground/fiddle.rt.js
View File

@ -90,7 +90,7 @@ define([
'tabIndex': '-1', 'tabIndex': '-1',
'href': '#', 'href': '#',
'onClick': onClick7.bind(this) 'onClick': onClick7.bind(this)
}, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'index.html' }, 'HOME')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'docs')) /* <li><a href="https://github.com/wix/react-templates">support</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'download')) /* <li><a href="https://github.com/wix/react-templates/">blog</a></li> */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, { }, 'Weather'))))), React.createElement('ul', { 'className': 'nav-site' }, React.createElement('li', {}, React.createElement('a', { 'href': 'index.html' }, 'HOME')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates#template-directives-and-syntax' }, 'docs')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates#installation' }, 'download')), React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'github')))), React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
'ref': 'playground', 'ref': 'playground',
'direction': 'vertical', 'direction': 'vertical',
'fiddle': true 'fiddle': true

72
playground/libs/codemirror-4.8/addon/runmode/runmode.js Normal file
View File

@ -0,0 +1,72 @@
// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
mod(require("../../lib/codemirror"));
else if (typeof define == "function" && define.amd) // AMD
define(["../../lib/codemirror"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
"use strict";
CodeMirror.runMode = function(string, modespec, callback, options) {
var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
var ie = /MSIE \d/.test(navigator.userAgent);
var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
if (callback.nodeType == 1) {
var tabSize = (options && options.tabSize) || CodeMirror.defaults.tabSize;
var node = callback, col = 0;
node.innerHTML = "";
callback = function(text, style) {
if (text == "\n") {
// Emitting LF or CRLF on IE8 or earlier results in an incorrect display.
// Emitting a carriage return makes everything ok.
node.appendChild(document.createTextNode(ie_lt9 ? '\r' : text));
col = 0;
return;
}
var content = "";
// replace tabs
for (var pos = 0;;) {
var idx = text.indexOf("\t", pos);
if (idx == -1) {
content += text.slice(pos);
col += text.length - pos;
break;
} else {
col += idx - pos;
content += text.slice(pos, idx);
var size = tabSize - col % tabSize;
col += size;
for (var i = 0; i < size; ++i) content += " ";
pos = idx + 1;
}
}
if (style) {
var sp = node.appendChild(document.createElement("span"));
sp.className = "cm-" + style.replace(/ +/g, " cm-");
sp.appendChild(document.createTextNode(content));
} else {
node.appendChild(document.createTextNode(content));
}
};
}
var lines = CodeMirror.splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
for (var i = 0, e = lines.length; i < e; ++i) {
if (i) callback("\n");
var stream = new CodeMirror.StringStream(lines[i]);
if (!stream.string && mode.blankLine) mode.blankLine(state);
while (!stream.eol()) {
var style = mode.token(stream, state);
callback(stream.current(), style, i, stream.start, state);
stream.start = stream.pos;
}
}
};
});

61
playground/playground.js
View File

@ -147,12 +147,10 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
getTabs: function () { getTabs: function () {
if (this.props.codeVisible) { if (this.props.codeVisible) {
return [['templateHTML', 'Template'], ['templateProps', 'Class'], ['templateSource', 'Generated code']]; return [['templateHTML', 'Template'], ['templateProps', 'Class'], ['templateSource', 'Generated code']];
} else {
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
} }
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
}, },
updateSample: function (state) { updateSample: function (state) {
//try { //try {
// React.unmountComponentAtNode(mountNode); // React.unmountComponentAtNode(mountNode);
//} catch (e) { } //} catch (e) { }
@ -162,36 +160,41 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
//this.validHTML = this.sampleFunc !== emptyFunc; //this.validHTML = this.sampleFunc !== emptyFunc;
this.validHTML = true; this.validHTML = true;
this.sampleRender = generateRenderFunc(this.sampleFunc); this.sampleRender = generateRenderFunc(this.sampleFunc);
//var classBase = {};
try { try {
this.validProps = true; this.validProps = true;
console.log(state.templateProps); console.log(state.templateProps);
//classBase = eval(this.templateSource + '\n' + state.templateProps);
//if (!_.isObject(classBase)) {
// throw 'failed to eval';
//}
this.sample = eval('(function () {' + this.templateSource + '\n' + state.templateProps + '\n return React.createElement(' + state.name + ');})()'); this.sample = eval('(function () {' + this.templateSource + '\n' + state.templateProps + '\n return React.createElement(' + state.name + ');})()');
clearMessage(this.refs.editorCode); clearMessage(this.refs.editorCode);
} catch (e) { } catch (e) {
//classBase = {};
this.validProps = false; this.validProps = false;
this.sample = null; this.sample = null;
var editor = this.refs.editorCode; var editor = this.refs.editorCode;
this.showError(e, editor);
}
//classBase.render = this.sampleRender;
//this.sample = React.createFactory(React.createClass(classBase));
},
showError: function (e, editor) {
var mountNode = this.refs.mount.getDOMNode();
this.setTimeout(function() { this.setTimeout(function() {
showMessage(editor, e.message); showMessage(editor, e.message);
console.log('setTimeout playgroundError');
React.render( React.render(
React.createElement('div', {className: 'playground-error'}, e.toString()), React.createElement('div', {className: 'playground-error'}, e.toString()),
mountNode mountNode
); );
}, 500); }, 500);
} },
//classBase.render = this.sampleRender; showErrorAnnotation: function (annot, editor) {
//this.sample = React.createFactory(React.createClass(classBase)); var mountNode = this.refs.mount.getDOMNode();
this.setTimeout(function() {
editor.annotate(annot);
React.render(
React.createElement('div', {className: 'playground-error'}, annot.message),
mountNode
);
}, 500);
}, },
clear: function () { clear: function () {
//console.log('clear');
var currentState = { var currentState = {
templateHTML: templateHTML, templateHTML: templateHTML,
templateProps: templateProps templateProps: templateProps
@ -199,6 +202,28 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
//this.updateSample(currentState); //this.updateSample(currentState);
this.setState(currentState); this.setState(currentState);
}, },
generateCode: function (state) {
var html = state.templateHTML;
var editor = this.refs.editorRT;
var name = window.reactTemplates.normalizeName(state.name) + 'RT';
var code = null;
try {
code = window.reactTemplates.convertTemplateToReact(html.trim().replace(/\r/g, ''), {modules: 'none', name: name});
clearMessage(editor);
} catch (e) {
var annot = null;
if (e.name === 'RTCodeError') {
//index: -1 line: -1 message: "Document should have a root element" name: "RTCodeError"
annot = {line: e.line, message: e.message, index: e.index};
} else {
annot = {line: 1, message: e.message};
}
this.showErrorAnnotation(annot, editor);
//showMessage(editor, msg);
console.log(e);
}
this.templateSource = code;
},
getInitialState: function () { getInitialState: function () {
var currentState = { var currentState = {
templateHTML: this.props.templateHTML || templateHTML, templateHTML: this.props.templateHTML || templateHTML,
@ -229,14 +254,13 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
componentWillUnmount: function(){ componentWillUnmount: function(){
window.removeEventListener('resize', this.calcSize); window.removeEventListener('resize', this.calcSize);
}, },
calcSize: function() { calcSize: function() {
var contentHeight = $(window).height() - $('#header').height(); var contentHeight = $(window).height() - $('#header').height();
var height = contentHeight / 2 - 10; var height = contentHeight / 2 - 10;
$('.code-area').each(function (i, k) { $('.code-area').each(function (i, k) {
$(this).height(height); $(this).height(height);
console.log($(this).height()); //console.log($(this).height());
}); });
this.refs.editorCode.editor.refresh(); this.refs.editorCode.editor.refresh();
this.refs.editorRT.editor.refresh(); this.refs.editorRT.editor.refresh();
@ -251,9 +275,6 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
this.generateCode(this.state); this.generateCode(this.state);
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate; var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
return template.apply(this); return template.apply(this);
},
generateCode: function (state) {
this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(state.name) + 'RT');
} }
}); });