From 33b5443e25311312b35a95d4b0287c5aac18ed4a Mon Sep 17 00:00:00 2001 From: ido Date: Tue, 30 Dec 2014 17:33:28 +0200 Subject: [PATCH] add amd, minor ui fixes --- img/icons-footer-sab5af31545.png | Bin 0 -> 3378 bytes index.html | 72 ++---------- playground/CodeMirrorEditor.js | 56 +++++---- playground/CodeMirrorViewer.js | 69 +++++++++++ playground/css/fiddle.css | 88 +++++++------- playground/css/home.css | 109 ++++++++++++------ playground/css/playground.css | 60 +--------- playground/examples.js | 6 +- playground/examples.rt | 15 +++ playground/examples.rt.js | 13 ++- playground/fiddle.rt | 6 +- playground/fiddle.rt.js | 2 +- .../codemirror-4.8/addon/runmode/runmode.js | 72 ++++++++++++ playground/playground.js | 69 +++++++---- 14 files changed, 378 insertions(+), 259 deletions(-) create mode 100644 img/icons-footer-sab5af31545.png create mode 100644 playground/CodeMirrorViewer.js create mode 100644 playground/libs/codemirror-4.8/addon/runmode/runmode.js diff --git a/img/icons-footer-sab5af31545.png b/img/icons-footer-sab5af31545.png new file mode 100644 index 0000000000000000000000000000000000000000..634e75eb8f486c29028106e7e4a6b6bf7096cde0 GIT binary patch literal 3378 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 literal 0 HcmV?d00001 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
- Checkout the Playground - + Check Out the Playground
-
-
-
-
  • 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...
- - - - - - -
- - - - - - - - - - - +
+ Sponsored by +
-
- + 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'); } });