diff --git a/img/icons-footer-sab5af31545.png b/img/icons-footer-sab5af31545.png
new file mode 100644
index 0000000..634e75e
Binary files /dev/null and b/img/icons-footer-sab5af31545.png differ
diff --git a/index.html b/index.html
index 1866ce0..50dbcd5 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,4 @@
-
-
@@ -11,27 +9,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@ -58,78 +35,49 @@
-
React Templates
- Light weight templates for React
+ Lightweight Templates for React
-
-
-
-
- No runtime libraries. No magic. Just simple pre-compilation to a clear React code
- Super easy to write panels. By panels we mean components that have a lot of HTML code and non-reusable logic
- Very good separation of presentation and logic. Almost no HTML within the component file
- Declarative coding for presentation. HTML that you write and inspect look similar
- Easy syntax. Similar to HTML. All IDEs recognize this format
+ - Supports AMD, CommonJS and globals
-
-
- Loading...
+ Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
diff --git a/playground/CodeMirrorEditor.js b/playground/CodeMirrorEditor.js
index d3c6c19..49122ec 100644
--- a/playground/CodeMirrorEditor.js
+++ b/playground/CodeMirrorEditor.js
@@ -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) {
- // this.panel.clear();
- //}
- //this.panel = this.editor.addPanel(anOption, {height: 22}); // {position: 'bottom'}
- },
- clearMessage: function () {
- if (this.panel) {
- this.panel.clear();
- this.panel = null;
- }
- },
+ //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 = null;
+ // }
+ //},
annotate: function (annot) {
CMLint.annotate(this.editor, annot);
},
diff --git a/playground/CodeMirrorViewer.js b/playground/CodeMirrorViewer.js
new file mode 100644
index 0000000..a98b09d
--- /dev/null
+++ b/playground/CodeMirrorViewer.js
@@ -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();
+ }
+ });
+});
\ No newline at end of file
diff --git a/playground/css/fiddle.css b/playground/css/fiddle.css
index 841ed23..5307bd4 100644
--- a/playground/css/fiddle.css
+++ b/playground/css/fiddle.css
@@ -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';
}
\ No newline at end of file
diff --git a/playground/css/home.css b/playground/css/home.css
index e3db550..2e5c9ae 100644
--- a/playground/css/home.css
+++ b/playground/css/home.css
@@ -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;
+}
+
+
diff --git a/playground/css/playground.css b/playground/css/playground.css
index 1dca2bf..323c1db 100644
--- a/playground/css/playground.css
+++ b/playground/css/playground.css
@@ -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;
}
\ No newline at end of file
diff --git a/playground/examples.js b/playground/examples.js
index 2b7ce15..3426b56 100644
--- a/playground/examples.js
+++ b/playground/examples.js
@@ -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);
}
diff --git a/playground/examples.rt b/playground/examples.rt
index 6f1afc5..943529e 100644
--- a/playground/examples.rt
+++ b/playground/examples.rt
@@ -1,5 +1,6 @@
+
Hello world in react templates
@@ -43,4 +44,18 @@
+
+
AMD
+
+ This example shows the hello sample output with AMD support.
+
+
+
+
+
CommonJS
+
+ This example shows the hello sample output with CommonJS support.
+
+
+
diff --git a/playground/examples.rt.js b/playground/examples.rt.js
index fe8edb4..f58f793 100644
--- a/playground/examples.rt.js
+++ b/playground/examples.rt.js
@@ -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))));
};
});
\ No newline at end of file
diff --git a/playground/fiddle.rt b/playground/fiddle.rt
index fb948c7..8ab9b71 100644
--- a/playground/fiddle.rt
+++ b/playground/fiddle.rt
@@ -32,10 +32,8 @@
diff --git a/playground/fiddle.rt.js b/playground/fiddle.rt.js
index dc0c519..0abf415 100644
--- a/playground/fiddle.rt.js
+++ b/playground/fiddle.rt.js
@@ -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')) /* support */, React.createElement('li', {}, React.createElement('a', { 'href': 'https://github.com/wix/react-templates' }, 'download')) /* blog */, 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
diff --git a/playground/libs/codemirror-4.8/addon/runmode/runmode.js b/playground/libs/codemirror-4.8/addon/runmode/runmode.js
new file mode 100644
index 0000000..07d2279
--- /dev/null
+++ b/playground/libs/codemirror-4.8/addon/runmode/runmode.js
@@ -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;
+ }
+ }
+};
+
+});
diff --git a/playground/playground.js b/playground/playground.js
index beceb5c..28476bf 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -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.setTimeout(function() {
- showMessage(editor, e.message);
- console.log('setTimeout playgroundError');
- React.render(
- React.createElement('div', {className: 'playground-error'}, e.toString()),
- mountNode
- );
- }, 500);
+ 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);
+ React.render(
+ React.createElement('div', {className: 'playground-error'}, e.toString()),
+ mountNode
+ );
+ }, 500);
+ },
+ 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');
}
});