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>
<!--[if IE]><![endif]-->
<html>
<head>
<meta charset="utf-8">
@ -11,27 +9,6 @@
<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 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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
@ -58,78 +35,49 @@
</a>
<ul class="nav-site">
<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">support</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#template-directives-and-syntax">docs</a></li>
<li><a href="https://github.com/wix/react-templates#installation">download</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">React Templates</div>
<div class="minitext">
Light weight templates for React
Lightweight Templates for React
</div>
<div class="buttons-unit">
<a href="fiddle.html" class="button">Checkout the Playground</a>
<!--<a href="/react/downloads.html" class="button">Download React v0.12.1</a>-->
</div>
<a href="fiddle.html" class="button">Check Out the Playground</a>
</div>
</div>
</div>
<section class="content wrap">
<section class="love-list">
<ul >
<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>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>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>
</section>
<section id="home-section" class="home-section">
</section>
<div id="loading" style="/* padding-bottom: 40px; */
margin-bottom: 100px;
font-size: 20px;
padding-top: 50px;
text-align: center;">Loading...</div>
<div id="loading">Loading...</div>
<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>
<!--<footer class="wrap">-->
<!--<div class="left">-->
<!--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>-->
<footer class="footer">
<span>Sponsored by </span> <a href="//wix.com" class="wf-white-logo"></a>
</footer>
</div>
<div id="fb-root"></div>
<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 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>-->

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/xml-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/css/css',
'./libs/codemirror-4.8/mode/htmlmixed/htmlmixed'
//'./libs/codemirror-4.8/mode/css/css',
'./libs/codemirror-4.8/addon/runmode/runmode'
//'./libs/codemirror-4.8/addon/display/placeholder'
], function (React, _, $, CodeMirror, CMLint) {
'use strict';
@ -69,13 +69,25 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
var editor = React.createClass({
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 () {
return {
editorId: _.uniqueId()
};
},
componentWillMount: function () {
},
//componentWillMount: function () {
//},
render: function () {
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
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.gutters = ['CodeMirror-lint-markers'];
options.lint = true;
//options.lint = true;
} else {
options.mode = 'javascript';
//options.gutters = ['CodeMirror-lint-markers'];
options.lint = true;
//options.lint = true;
}
this.editor = CodeMirror.fromTextArea(this.getDOMNode(), options);
@ -132,21 +144,21 @@ define(['react', 'lodash', 'jquery', './libs/codemirror-4.8/lib/codemirror',
}.bind(this));
}
},
showMessage: function (msg) {
//var anOption = document.createElement('div');
//anOption.innerText = msg;
//anOption.setAttribute('class', 'error-panel');
//if (this.panel) {
//showMessage: function (msg) {
// //var anOption = document.createElement('div');
// //anOption.innerText = msg;
// //anOption.setAttribute('class', 'error-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 = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'}
},
clearMessage: function () {
if (this.panel) {
this.panel.clear();
this.panel = null;
}
},
// this.panel = null;
// }
//},
annotate: function (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 {
/*padding: 20px;*/
font-family: 'Lato', sans-serif;
font-weight: 300;
/*background: #f6f6f6 url(../img/initializing.png) 50% 50% no-repeat;*/
/*overflow: hidden;*/
overflow: hidden;
padding: 0;
margin: 0;
/*position: relative;*/
@ -45,7 +43,7 @@ body {
display: inline-block;
}
.title-link{
.title-link {
float: left;
margin-top: -3px;
margin-right: 5px;
@ -62,8 +60,8 @@ body {
display: inline-block;
}
#buttons-bar button{
font-weight:400;
#buttons-bar button {
font-weight: 400;
}
#buttons-bar button, #buttons-bar div {
@ -78,17 +76,18 @@ body {
margin-right: 5px;
}
.nav-site{
position:absolute;
top:0;
right:0;
}
.nav-site li {
margin: 0;
display:inline-block;
.nav-site {
position: absolute;
top: 0;
right: 0;
}
.nav-site a {
.nav-site li {
margin: 0;
display: inline-block;
}
.nav-site a {
padding: 0 8px;
text-transform: uppercase;
letter-spacing: 1px;
@ -98,17 +97,16 @@ body {
color: #aaa
}
.nav-site a:hover {
.nav-site a:hover {
color: #fafafa
}
.nav-site a.active {
.nav-site a.active {
color: #fafafa;
border-bottom: 3px solid #cc7a6f;
background: #333
}
.fiddle {
height: 100%;
}
@ -132,9 +130,8 @@ body {
/*margin: 10px;*/
}
.sample-view {
height:100%;
height: 100%;
border: 1px solid #ddd;
background-color: #f8f8f5;
@ -154,7 +151,7 @@ body {
}
.CodeMirror-wrap {
border:1px solid #ddd;
border: 1px solid #ddd;
/*border-radius: 4px 4px 4px 4px;*/
/*height: 400px;*/
/*min-height: 100px;*/
@ -162,19 +159,20 @@ body {
/*margin: 10px;*/
}
.fiddle-row{
overflow:hidden;
.fiddle-row {
overflow: hidden;
}
.code-area {
width: 50%;
float:left;
position:relative;
float: left;
position: relative;
padding: 5px;
}
.result-area-form{
padding:5px;
.result-area-form {
padding: 5px;
margin: 10px 20px;
}
.error-panel {
@ -194,38 +192,40 @@ body {
background-color: aliceblue;
opacity: 0.9;
}
/*position: relative; min-height: 100%;*/
.code-area::after{
content:'';
position:absolute;
top:5px;
right:5px;
.code-area::after {
content: '';
position: absolute;
top: 5px;
right: 5px;
font-size: 11px;
padding:2px 5px;
border:1px solid #ddd;
padding: 2px 5px;
border: 1px solid #ddd;
color: #b4b4b4;
background: rgba(255,255,255,0.5);
pointer-events:none;
background: rgba(255, 255, 255, 0.5);
pointer-events: none;
transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
/*.code-area:hover::after{
opacity:0.2;
}*/
#area-rt::after{
content:'Template';
#area-rt::after {
content: 'Template';
}
#area-code::after{
content:'Class';
#area-code::after {
content: 'Class';
}
#area-generated::after{
content:'Generated Code';
#area-generated::after {
content: 'Generated Code';
}
#area-result::after{
content:'Result';
#area-result::after {
content: 'Result';
}

109
playground/css/home.css
View File

@ -1,5 +1,3 @@
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
@ -11,12 +9,12 @@ p {
margin: 0 0 10px
}
.subHeader {
font-size: 21px;
font-weight: 200;
line-height: 30px;
margin-bottom: 10px
}
/*.subHeader {*/
/*font-size: 21px;*/
/*font-weight: 200;*/
/*line-height: 30px;*/
/*margin-bottom: 10px*/
/*}*/
em {
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 {
font-size: 110px;
text-align: center;
font-weight: 100;
font-weight: 300;
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 {
font-size: 24px;
background: #cc7a6f;
font-size: 22px;
background: #FB7D33;
color: #fafafa
}
@ -714,14 +712,6 @@ h3 {
float: right
}
footer {
font-size: 13px;
font-weight: 600;
margin-top: 36px;
margin-bottom: 18px;
overflow: auto
}
section.black content {
padding-bottom: 18px
}
@ -1070,19 +1060,19 @@ h1:after {
}
}
.post {
margin-bottom: 30px
}
/*.post {*/
/*margin-bottom: 30px*/
/*}*/
.pagination {
margin-bottom: 30px;
width: 100%;
overflow: hidden
}
/*.pagination {*/
/*margin-bottom: 30px;*/
/*width: 100%;*/
/*overflow: hidden;*/
/*}*/
.pagination .next {
float: right
}
/*.pagination .next {*/
/*float: right*/
/*}*/
div[data-twttr-id] iframe {
margin: 10px auto !important
@ -1104,16 +1094,33 @@ div[data-twttr-id] iframe {
margin-left: 20px
}
.nav-tabs {
margin-left: 0; margin-bottom: 1px;border-bottom:none;
#loading {
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 {
border:1px solid #ddd;
border: 1px solid #ddd;
border-radius: 0 4px 4px 4px;
/*height: 400px;*/
/*min-height: 100px;*/
@ -1121,12 +1128,12 @@ div[data-twttr-id] iframe {
/*margin: 10px;*/
}
.code-area, .result-area{
box-sizing:border-box;
.code-area, .result-area {
box-sizing: border-box;
}
.CodeMirror-wrap {
border:1px solid #ddd;
border: 1px solid #ddd;
border-radius: 0 4px 4px 4px;
/*height: 400px;*/
/*min-height: 100px;*/
@ -1165,6 +1172,9 @@ div[data-twttr-id] iframe {
background-color: #f8f8f5;
padding: 20px 30px;
margin-left:30px;
height: 301px;
max-height:308px;
overflow: auto;
}
.sample-view button {
@ -1175,4 +1185,27 @@ div[data-twttr-id] iframe {
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 {
color: red;
font-weight: 500;
}
.cm-s-solarized .editor-error {
/*color: red;*/
/*text-decoration: underline;*/
background-color: #F0F079;
}

6
playground/examples.js
View File

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

15
playground/examples.rt
View File

@ -1,5 +1,6 @@
<!--suppress CheckEmptyScriptTag -->
<rt-require dependency="./playground" as="playground"/>
<rt-require dependency="./CodeMirrorViewer" as="viewer"/>
<div id="examples">
<div class="example">
<h3>Hello world in react templates</h3>
@ -43,4 +44,18 @@
</p>
<playground id="weatherExample" rt-props="this.state.samples.weather" direction="horizontal"></playground>
</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>

13
playground/examples.rt.js
View File

@ -1,8 +1,9 @@
define([
'react/addons',
'lodash',
'./playground'
], function (React, _, playground) {
'./playground',
'./CodeMirrorViewer'
], function (React, _, playground, viewer) {
'use strict';
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({}, {
@ -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({}, {
'id': 'weatherExample',
'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>
<ul class="nav-site">
<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">support</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#template-directives-and-syntax">docs</a></li>
<li><a href="https://github.com/wix/react-templates#installation">download</a></li>
<li><a href="https://github.com/wix/react-templates">github</a>
</ul>
</div>

2
playground/fiddle.rt.js
View File

@ -90,7 +90,7 @@ define([
'tabIndex': '-1',
'href': '#',
'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',
'direction': 'vertical',
'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 () {
if (this.props.codeVisible) {
return [['templateHTML', 'Template'], ['templateProps', 'Class'], ['templateSource', 'Generated code']];
} else {
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
}
return [['templateHTML', 'Template'], ['templateSource', 'Generated code']];
},
updateSample: function (state) {
//try {
// React.unmountComponentAtNode(mountNode);
//} catch (e) { }
@ -162,36 +160,41 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
//this.validHTML = this.sampleFunc !== emptyFunc;
this.validHTML = true;
this.sampleRender = generateRenderFunc(this.sampleFunc);
//var classBase = {};
try {
this.validProps = true;
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 + ');})()');
clearMessage(this.refs.editorCode);
} catch (e) {
//classBase = {};
this.validProps = false;
this.sample = null;
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() {
showMessage(editor, e.message);
console.log('setTimeout playgroundError');
React.render(
React.createElement('div', {className: 'playground-error'}, e.toString()),
mountNode
);
}, 500);
}
//classBase.render = this.sampleRender;
//this.sample = React.createFactory(React.createClass(classBase));
},
showErrorAnnotation: function (annot, editor) {
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 () {
//console.log('clear');
var currentState = {
templateHTML: templateHTML,
templateProps: templateProps
@ -199,6 +202,28 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
//this.updateSample(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 () {
var currentState = {
templateHTML: this.props.templateHTML || templateHTML,
@ -229,14 +254,13 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
componentWillUnmount: function(){
window.removeEventListener('resize', this.calcSize);
},
calcSize: function() {
var contentHeight = $(window).height() - $('#header').height();
var height = contentHeight / 2 - 10;
$('.code-area').each(function (i, k) {
$(this).height(height);
console.log($(this).height());
//console.log($(this).height());
});
this.refs.editorCode.editor.refresh();
this.refs.editorRT.editor.refresh();
@ -251,9 +275,6 @@ define(['react', 'jquery', 'lodash', './playground-fiddle.rt', './playground.rt'
this.generateCode(this.state);
var template = this.props.fiddle ? pgFiddleTemplate : playgroundTemplate;
return template.apply(this);
},
generateCode: function (state) {
this.templateSource = generateTemplateSource(state.templateHTML, this.refs.editorRT, window.reactTemplates.normalizeName(state.name) + 'RT');
}
});