bobwen-dev
/
react-templates
mirror of https://github.com/bobwen-dev/react-templates
1
0
Fork 0
Code Issues Releases Wiki Activity

intro and samples

This commit is contained in:
avim 2014-12-02 18:59:03 +02:00
parent 42b8741beb
commit b32bba381c
21 changed files with 717 additions and 939 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
Gruntfile.js
View File

@ -35,16 +35,61 @@ module.exports = function (grunt) {
grunt: ['conf/tasks/test']
},
browserify: {
options: {
},
// libs: {
// files: {
// 'playground/libs.browser.js': ['playground/libs.js']
// },
// options: {
// alias: [
// 'react:react/addons'
// ],
// shim: {
// "react/addons": {
// path: 'react/addons',
// exports: 'React',
// depends: {
// lodash: '_'
// }
// },
// "../src/reactTemplates": {
// path: '../src/reactTemplates.js',
// exports: 'reactTemplates',
// depends: {
// lodash: '_'
// }
// },
// "lodash": {
// path: 'lodash',
// exports: '_'
// },
// "brace": {
// path: 'brace',
// exports: 'brace',
// depends: {
// lodash: '_'
// }
// }
// }
//
// }
// },
pg: {
files: {
'playground/main.browser.js': ['playground/main.js']
}
},
home: {
files: {
'playground/home-main.browser.js': ['playground/home-main.js']
},
options: {
transform: ['brfs'],
alias: [
'react:react/addons'
]
// exclude:['react','react/addons','../src/reactTemplates','lodash','brace','brace/mode/javascript','brace/mode/html','brace/theme/solarized_light'],
// external: [
// 'react/addons',
// '../src/reactTemplates',
// 'lodash',
// 'brace'
// ]
}
}
},

8
index.html
View File

@ -15,12 +15,18 @@
<link rel="stylesheet" href="playground/playground.css"/>
</head>
<body>
<div id="playground">
<div id="container">
</div>
<!--<script src="playground/bundle/reactTemplates.bundle.js"></script>-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.5/firebase.js"></script>
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>-->
<!--<script src="playground/libs.browser.js"></script>-->
<script src="playground/main.browser.js"></script>
<script type="application/javascript">
initIntro();
</script>
</body>
</html>

309
playground/codemirror.css
View File

@ -1,309 +0,0 @@
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
}
.CodeMirror-scroll {
/* Set scrolling behaviour here */
overflow: auto;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
/* CURSOR */
.CodeMirror div.CodeMirror-cursor {
border-left: 1px solid black;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
width: auto;
border: 0;
background: #7e7;
}
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
}
@-moz-keyframes blink {
0% { background: #7e7; }
50% { background: none; }
100% { background: #7e7; }
}
@-webkit-keyframes blink {
0% { background: #7e7; }
50% { background: none; }
100% { background: #7e7; }
}
@keyframes blink {
0% { background: #7e7; }
50% { background: none; }
100% { background: #7e7; }
}
/* Can style cursor different in overwrite (non-insert) mode */
div.CodeMirror-overwrite div.CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-ruler {
border-left: 1px solid #ccc;
position: absolute;
}
/* DEFAULT THEME */
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
line-height: 1;
position: relative;
overflow: hidden;
background: white;
color: black;
}
.CodeMirror-scroll {
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actuall scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
padding-bottom: 30px;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding-bottom: 30px;
margin-bottom: -32px;
display: inline-block;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {}
.CodeMirror-wrap .CodeMirror-scroll {
overflow-x: hidden;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor {
position: absolute;
border-right: none;
width: 0;
}
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

54
playground/fiddle.js Normal file
View File

@ -0,0 +1,54 @@
/**
* Created by avim on 12/2/2014.
*/
var React = require('react/addons');
var _ = require('lodash');
var fiddleTemplate = require('./fiddle.rt.js');
function generateRandomId() {
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function (c) {
var r = _.random(0, 15);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
};
var Fiddle = React.createClass({
displayName: "Fiddle",
componentDidMount: function () {
if (window.location.hash) {
var newHash = window.location.hash.replace("#", "");
var firebase = new Firebase('https://reacttemplates.firebaseio-demo.com/');
firebase.child("fiddles").child(newHash).on('value', function (snapshot) {
this.refs.playground.setState(snapshot.val());
Firebase.goOffline();
}.bind(this));
} else {
Firebase.goOffline();
}
},
save: function () {
var newHash = generateRandomId();
window.location.hash = newHash;
Firebase.goOnline();
var playgroundState = this.refs.playground.state;
var firebase = new Firebase('https://reacttemplates.firebaseio-demo.com/');
firebase.child("fiddles").child(newHash).set(playgroundState, function () {
Firebase.goOffline();
alert("saved the fiddle, you can share your url")
}.bind(this));
},
render: function () {
return fiddleTemplate.apply(this);
}
});
module.exports = Fiddle;

8
playground/fiddle.rt Normal file
View File

@ -0,0 +1,8 @@
<!DOCTYPE rt playGround="./PlayGround.js">
<div>
<h1>React Templates fiddle</h1>
<h2>Play with react templates and save/share your results</h2>
<button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>
<br>
<playGround ref="playground" direction="vertical"/>
</div>

17
playground/fiddle.rt.js Normal file
View File

@ -0,0 +1,17 @@
var React = require('react/addons');
var _ = require('lodash');
var playGround = require('./PlayGround.js');
'use strict';
function onClick1(evt) {
evt.preventDefault();
this.save();
}
module.exports = function () {
return React.DOM.div({}, React.DOM.h1({}, 'React Templates fiddle'), React.DOM.h2({}, 'Play with react templates and save/share your results'), React.DOM.button({
'className': 'btn btn-lg btn-primary',
'onClick': onClick1.bind(this)
}, 'Save fiddle'), React.DOM.br({}, playGround({
'ref': 'playground',
'direction': 'vertical'
})));
};

35
playground/intro.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Created by avim on 12/2/2014.
*/
var React = require('react/addons');
var _ = require('lodash');
var introTemplate = require('./intro.rt.js');
var path = require('path');
var fs = require('fs');
var helloCode = fs.readFileSync(__dirname+"/samples/hello.code").toString();
var helloRT = fs.readFileSync(__dirname+"/samples/hello.rt").toString();
var todoCode = fs.readFileSync(__dirname+"/samples/todo.code").toString();
var todoRT = fs.readFileSync(__dirname+"/samples/todo.rt").toString();
var samples = [
[helloCode,helloRT],
[todoCode,todoRT]
];
samples = _.map(samples,function (tuple) {
return {templateProps:tuple[0],templateHTML:tuple[1]}
});
var intro = React.createClass({
displayName:"Intro",
getInitialState: function (){
return {
samples:samples
}
},
render: function () {
return introTemplate.apply(this);
}
});
module.exports = intro;

6
playground/intro.rt Normal file
View File

@ -0,0 +1,6 @@
<!DOCTYPE rt playGround="./PlayGround.js">
<div>
<h1>React Templates</h1>
<playGround ref="playground" direction="horizontal" rt-props="this.state.samples[0]"/>
<playGround ref="playground" direction="horizontal" rt-props="this.state.samples[1]"/>
</div>

13
playground/intro.rt.js Normal file
View File

@ -0,0 +1,13 @@
var React = require('react');
var _ = require('lodash');
var playGround = require('./PlayGround.js');
'use strict';
module.exports = function () {
return React.DOM.div({}, React.DOM.h1({}, 'React Templates'), playGround(_.merge({}, {
'ref': 'playground',
'direction': 'horizontal'
}, this.state.samples[0])), playGround(_.merge({}, {
'ref': 'playground',
'direction': 'horizontal'
}, this.state.samples[1])));
};

10
playground/libs.js Normal file
View File

@ -0,0 +1,10 @@
/**
* Created by avim on 12/2/2014.
*/
var _ = require('lodash');
var React = require('react/addons');
var reactTemplates = require('../src/reactTemplates.js')
var brace = require('brace');
require('brace/mode/javascript');
require('brace/mode/html');
require('brace/theme/solarized_light');

840
playground/main.browser.js
View File

File diff suppressed because one or more lines are too long

44
playground/main.js
View File

@ -1,36 +1,14 @@
'use strict';
/*eslint-env browser*/
var reactTemplates = require('../src/reactTemplates');
/**
* Created by avim on 12/2/2014.
*/
var React = require('react/addons');
var fiddle = require('./fiddle.js');
var intro = require('./intro.js');
var _ = require('lodash');
var html = '<div>hello</div>';
var res = reactTemplates.convertTemplateToReact(html.trim());
//console.log(res);
var Playground = require('./playground.js');
window.playground = React.render(Playground({"direction":'vertical'}), document.getElementById('playground'));
/*
function generateRandomId() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
var r = _.random(0,15);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
};
if (window.location.hash) {
var firebase = new Firebase('https://co5qowu8b6k.firebaseio-demo.com/'+window.location.hash);
firebase.on('value',function (snapshot) {
window.playground.setState(snapshot.val());
firebase.goOffline();
});
}*/
window.initFiddle = function () {
window.fiddle = React.render(fiddle(), document.getElementById('container'));
}
window.initIntro = function () {
window.intro = React.render(intro(), document.getElementById('container'));
}

34
playground/playground.js
View File

@ -7,11 +7,6 @@ var React = require('react/addons');
var _ = require('lodash');
var html = '<div>hello</div>';
var res = reactTemplates.convertTemplateToReact(html.trim());
//console.log(res);
function emptyFunc() {
return null;
}
@ -27,7 +22,7 @@ function generateTemplateSource(html) {
function generateTemplateFunction(code) {
try {
var defineMap = {react: React, lodash: _};
var defineMap = {"react/addons": React, lodash: _};
var define = function (requirementsNames, content) {
var requirements = _.map(requirementsNames,function (reqName) {
return defineMap[reqName];
@ -95,14 +90,13 @@ var Playground = React.createClass({
this.validProps = false;
}
classBase.render = this.sampleRender;
console.log(classBase);
this.sample = React.createFactory(React.createClass(classBase));
},
getInitialState: function () {
var currentState = {
templateHTML: templateHTML,
templateProps: templateProps
templateHTML: this.props.templateHTML || templateHTML,
templateProps: this.props.templateProps || templateProps
};
this.updateSample(currentState);
return currentState;
@ -119,25 +113,3 @@ var Playground = React.createClass({
});
module.exports = Playground;
/*
function generateRandomId() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
var r = _.random(0,15);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
};
if (window.location.hash) {
var firebase = new Firebase('https://co5qowu8b6k.firebaseio-demo.com/'+window.location.hash);
firebase.on('value',function (snapshot) {
window.playground.setState(snapshot.val());
firebase.goOffline();
});
}*/

1
playground/playground.rt
View File

@ -39,4 +39,5 @@
</this.sample>
</form>
</div>
<br style="clear:both">
</div>

2
playground/playground.rt.js
View File

@ -74,5 +74,5 @@ module.exports = function () {
}, React.DOM.h2({}, 'Preview:'), React.DOM.form({
'className': 'sample-view',
'onSubmit': onSubmit3.bind(this)
}, this.sample({ 'key': 'sample' }))));
}, this.sample({ 'key': 'sample' }))), React.DOM.br({ 'style': { clear: 'both' } }));
};

3
playground/samples/hello.code Normal file
View File

@ -0,0 +1,3 @@
{
}

1
playground/samples/hello.rt Normal file
View File

@ -0,0 +1 @@
<h1>Hello world</h1>

25
playground/samples/todo.code Normal file
View File

@ -0,0 +1,25 @@
{
mixins: [React.addons.LinkedStateMixin],
getInitialState: function () {
return {
edited: '', todos: [], counter: 0};
},
add: function () {
if (this.state.edited.trim().length === 0) {
return;
}
var newTodo = {value: this.state.edited, done: false, key: this.state.counter};
this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});
},
remove: function (todo) {
this.setState({todos: _.reject(this.state.todos, todo)});
},
toggleChecked: function (index) {
var todos = _.cloneDeep(this.state.todos);
todos[index].done = !todos[index].done;
this.setState({todos: todos});
},
clearDone: function () {
this.setState({todos: _.filter(this.state.todos, {done: false})});
}
}

13
playground/samples/todo.rt Normal file
View File

@ -0,0 +1,13 @@
<div>
Have {_.filter(this.state.todos, {done:true}).length} todos done,
and {_.filter(this.state.todos, {done:false}).length} not done
<br/>
<div rt-repeat="todo in this.state.todos" key="{todo.key}">
<button onClick="()=>this.remove(todo)">x</button>
<input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>
<span style="text-decoration: {todo.done ? 'line-through': 'none'}">{todo.value}</span>
</div>
<input key="myinput" type="text" onKeyDown="(e) => if (e.keyCode == 13) { e.preventDefault(); this.add(); }" valueLink="{this.linkState('edited')}"/>
<button onClick="()=>this.add()">Add</button><br/>
<button onClick="()=>this.clearDone()">Clear done</button>
</div>

170
playground/solarized.css
View File

@ -1,170 +0,0 @@
/*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/
/*
Solarized color pallet
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/
.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3 { color: #fdf6e3; }
.solarized.solar-yellow { color: #b58900; }
.solarized.solar-orange { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }
/* Color scheme for code-mirror */
.cm-s-solarized {
line-height: 1.45em;
color-profile: sRGB;
rendering-intent: auto;
}
.cm-s-solarized.cm-s-dark {
color: #839496;
background-color: #002b36;
text-shadow: #002b36 0 1px;
}
.cm-s-solarized.cm-s-light {
background-color: #fdf6e3;
color: #657b83;
text-shadow: #eee8d5 0 1px;
}
.cm-s-solarized .CodeMirror-widget {
text-shadow: none;
}
.cm-s-solarized .cm-keyword { color: #cb4b16 }
.cm-s-solarized .cm-atom { color: #d33682; }
.cm-s-solarized .cm-number { color: #d33682; }
.cm-s-solarized .cm-def { color: #2aa198; }
.cm-s-solarized .cm-variable { color: #268bd2; }
.cm-s-solarized .cm-variable-2 { color: #b58900; }
.cm-s-solarized .cm-variable-3 { color: #6c71c4; }
.cm-s-solarized .cm-property { color: #2aa198; }
.cm-s-solarized .cm-operator {color: #6c71c4;}
.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }
.cm-s-solarized .cm-string { color: #859900; }
.cm-s-solarized .cm-string-2 { color: #b58900; }
.cm-s-solarized .cm-meta { color: #859900; }
.cm-s-solarized .cm-qualifier { color: #b58900; }
.cm-s-solarized .cm-builtin { color: #d33682; }
.cm-s-solarized .cm-bracket { color: #cb4b16; }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-solarized .cm-tag { color: #93a1a1 }
.cm-s-solarized .cm-attribute { color: #2aa198; }
.cm-s-solarized .cm-header { color: #586e75; }
.cm-s-solarized .cm-quote { color: #93a1a1; }
.cm-s-solarized .cm-hr {
color: transparent;
border-top: 1px solid #586e75;
display: block;
}
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; }
.cm-s-solarized .cm-em {
color: #999;
text-decoration: underline;
text-decoration-style: dotted;
}
.cm-s-solarized .cm-strong { color: #eee; }
.cm-s-solarized .cm-tab:before {
content: "➤"; /*visualize tab character*/
color: #586e75;
position:absolute;
}
.cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar {
color: #586e75;
border-bottom: 1px dotted #dc322f;
}
.cm-s-solarized.cm-s-dark .CodeMirror-selected {
background: #073642;
}
.cm-s-solarized.cm-s-light .CodeMirror-selected {
background: #eee8d5;
}
/* Editor styling */
/* Little shadow on the view-port of the buffer view */
.cm-s-solarized.CodeMirror {
-moz-box-shadow: inset 7px 0 12px -6px #000;
-webkit-box-shadow: inset 7px 0 12px -6px #000;
box-shadow: inset 7px 0 12px -6px #000;
}
/* Gutter border and some shadow from it */
.cm-s-solarized .CodeMirror-gutters {
border-right: 1px solid;
}
/* Gutter colors and line number styling based of color scheme (dark / light) */
/* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
background-color: #002b36;
border-color: #00232c;
}
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
text-shadow: #021014 0 -1px;
}
/* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
background-color: #fdf6e3;
border-color: #eee8d5;
}
/* Common */
.cm-s-solarized .CodeMirror-linenumber {
color: #586e75;
padding: 0 5px;
}
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
color: #586e75;
}
.cm-s-solarized .CodeMirror-lines .CodeMirror-cursor {
border-left: 1px solid #819090;
}
/*
Active line. Negative margin compensates left padding of the text in the
view-port
*/
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
background: rgba(255, 255, 255, 0.10);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0.10);
}

4
src/reactTemplates.js
View File

@ -6,7 +6,7 @@ var cheerio = require('cheerio');
var _ = require('lodash');
var esprima = require('esprima');
var escodegen = require('escodegen');
var React = require('react');
var React = require('react/addons');
var stringUtils = require('./stringUtils');
var repeatTemplate = _.template('_.map(<%= collection %>,<%= repeatFunction %>.bind(<%= repeatBinds %>))');
@ -332,7 +332,7 @@ function extractDefinesFromJSXTag(html, defines) {
function convertTemplateToReact(html, options) {
var rootNode = cheerio.load(html, {lowerCaseTags: false, lowerCaseAttributeNames: false, xmlMode: true, withStartIndices: true});
options = options || {};
var defines = {react: 'React', lodash: '_'};
var defines = {"react/addons": 'React', lodash: '_'};
html = extractDefinesFromJSXTag(html, defines);
var context = defaultContext();
context.html = html;