diff --git a/.eslintrc b/.eslintrc
index 6855461..c8cd547 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -65,7 +65,6 @@
"space-in-brackets": [0, "never"],
"space-infix-ops": 2,
"space-return-throw-case": 2,
- "space-unary-word-ops": 2,
"strict": 2,
"valid-typeof": 2,
"wrap-regex": 0,
@@ -128,7 +127,8 @@
"quote-props": [1, "as-needed"],
"no-multi-spaces": 1,
"key-spacing": [1, { "beforeColon": false, "afterColon": true }],
- "comma-spacing": 1
+ "comma-spacing": 1,
+ "space-unary-ops": [1, { "words": true, "nonwords": false }]
},
"env": {
"browser": false,
diff --git a/Gruntfile.js b/Gruntfile.js
index 8d7a63f..b9f505b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -138,7 +138,7 @@ module.exports = function (grunt) {
grunt.registerTask('rt', function () {
var reactTemplates = require('./src/cli');
- var files = grunt.file.expand('playground/**/*.rt');
+ var files = grunt.file.expand('playground/*.rt');
var conf = {commonJS: true, force: true};
conf._ = files;
var ret = reactTemplates.executeOptions(conf);
diff --git a/home.html b/home.html
index f89fce7..af16f21 100644
--- a/home.html
+++ b/home.html
@@ -17,9 +17,9 @@
-
-
-
+
+
+
@@ -29,12 +29,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
@@ -42,7 +42,7 @@
-
+
diff --git a/index.html b/index.html
index 5e1f289..22dc59b 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
-
+
diff --git a/package.json b/package.json
index aa84629..51d8902 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
"grunt": "^0.4.5",
"grunt-browserify": "^3.2.0",
"grunt-contrib-watch": "^0.6.1",
- "grunt-eslint": "^2.0.0",
+ "grunt-eslint": "^2.1.0",
"grunt-node-tap": "^0.1.61",
"tape": "^3.0.2"
}
diff --git a/playground/css/home.css b/playground/css/home.css
new file mode 100644
index 0000000..07b00c9
--- /dev/null
+++ b/playground/css/home.css
@@ -0,0 +1,1134 @@
+.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;
+}
+
+html {
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ color: #484848;
+ line-height: 1.28
+}
+
+p {
+ margin: 0 0 10px
+}
+
+.subHeader {
+ font-size: 21px;
+ font-weight: 200;
+ line-height: 30px;
+ margin-bottom: 10px
+}
+
+em {
+ font-style: italic
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 10px 0;
+ font-family: inherit;
+ font-weight: bold;
+ line-height: 20px;
+ color: inherit;
+ text-rendering: optimizelegibility
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+ font-weight: normal;
+ color: #7b7b7b
+}
+
+h1, h2, h3 {
+ line-height: 40px
+}
+
+h1 {
+ font-size: 39px
+}
+
+h2 {
+ font-size: 31px
+}
+
+h3 {
+ font-size: 23px
+}
+
+h4 {
+ font-size: 17px
+}
+
+h5 {
+ font-size: 14px
+}
+
+h6 {
+ font-size: 11px
+}
+
+h1 small {
+ font-size: 24px
+}
+
+h2 small {
+ font-size: 18px
+}
+
+h3 small {
+ font-size: 16px
+}
+
+h4 small {
+ font-size: 14px
+}
+
+ul, ol {
+ margin: 0 0 10px 25px;
+ padding: 0
+}
+
+ul ul, ul ol, ol ol, ol ul {
+ margin-bottom: 0
+}
+
+li {
+ line-height: 20px
+}
+
+a {
+ color: #c05b4d;
+ text-decoration: none
+}
+
+a:hover, a:focus {
+ color: #a5473a;
+ text-decoration: underline
+}
+
+a:focus {
+ outline: thin dotted #333;
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px
+}
+
+.center {
+ text-align: center
+}
+
+html * {
+ color-profile: sRGB;
+ rendering-intent: auto
+}
+
+.cm-s-solarized-light {
+ background-color: #f8f5ec;
+ color: #637c84
+}
+
+.cm-s-solarized-light .emphasis {
+ font-weight: bold
+}
+
+.cm-s-solarized-light .dotted {
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light .CodeMirror-gutter {
+ background-color: #eee8d5;
+ border-right: 3px solid #eee8d5
+}
+
+.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
+ color: #93a1a1
+}
+
+.cm-s-solarized-light .CodeMirror-cursor {
+ border-left-color: #002b36 !important
+}
+
+.cm-s-solarized-light .CodeMirror-matchingbracket {
+ color: #002b36;
+ background-color: #eee8d5;
+ box-shadow: 0 0 10px #eee8d5;
+ font-weight: bold
+}
+
+.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
+ color: #002b36;
+ background-color: #eee8d5;
+ box-shadow: 0 0 10px #eee8d5;
+ font-weight: bold;
+ color: #dc322f;
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light span.cm-keyword {
+ color: #268bd2
+}
+
+.cm-s-solarized-light span.cm-atom {
+ color: #2aa198
+}
+
+.cm-s-solarized-light span.cm-number {
+ color: #586e75
+}
+
+.cm-s-solarized-light span.cm-def {
+ color: #637c84
+}
+
+.cm-s-solarized-light span.cm-variable {
+ color: #637c84
+}
+
+.cm-s-solarized-light span.cm-variable-2 {
+ color: #b58900
+}
+
+.cm-s-solarized-light span.cm-variable-3 {
+ color: #cb4b16
+}
+
+.cm-s-solarized-light span.cm-comment {
+ color: #93a1a1
+}
+
+.cm-s-solarized-light span.cm-property {
+ color: #637c84
+}
+
+.cm-s-solarized-light span.cm-operator {
+ color: #657b83
+}
+
+.cm-s-solarized-light span.cm-string {
+ color: #36958e
+}
+
+.cm-s-solarized-light span.cm-error {
+ font-weight: bold;
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-light span.cm-bracket {
+ color: #cb4b16
+}
+
+.cm-s-solarized-light span.cm-tag {
+ color: #657b83
+}
+
+.cm-s-solarized-light span.cm-attribute {
+ color: #586e75;
+ font-weight: bold
+}
+
+.cm-s-solarized-light span.cm-meta {
+ color: #268bd2
+}
+
+.cm-s-solarized-dark {
+ background-color: #002b36;
+ color: #839496
+}
+
+.cm-s-solarized-dark .emphasis {
+ font-weight: bold
+}
+
+.cm-s-solarized-dark .dotted {
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter {
+ background-color: #073642;
+ border-right: 3px solid #073642
+}
+
+.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
+ color: #586e75
+}
+
+.cm-s-solarized-dark .CodeMirror-cursor {
+ border-left-color: #fdf6e3 !important
+}
+
+.cm-s-solarized-dark .CodeMirror-matchingbracket {
+ color: #fdf6e3;
+ background-color: #073642;
+ box-shadow: 0 0 10px #073642;
+ font-weight: bold
+}
+
+.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
+ color: #fdf6e3;
+ background-color: #073642;
+ box-shadow: 0 0 10px #073642;
+ font-weight: bold;
+ color: #dc322f;
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-keyword {
+ color: #839496;
+ font-weight: bold
+}
+
+.cm-s-solarized-dark span.cm-atom {
+ color: #2aa198
+}
+
+.cm-s-solarized-dark span.cm-number {
+ color: #93a1a1
+}
+
+.cm-s-solarized-dark span.cm-def {
+ color: #268bd2
+}
+
+.cm-s-solarized-dark span.cm-variable {
+ color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-variable-2 {
+ color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-variable-3 {
+ color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-comment {
+ color: #586e75
+}
+
+.cm-s-solarized-dark span.cm-property {
+ color: #b58900
+}
+
+.cm-s-solarized-dark span.cm-operator {
+ color: #839496
+}
+
+.cm-s-solarized-dark span.cm-string {
+ color: #6c71c4
+}
+
+.cm-s-solarized-dark span.cm-error {
+ font-weight: bold;
+ border-bottom: 1px dotted #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-bracket {
+ color: #cb4b16
+}
+
+.cm-s-solarized-dark span.cm-tag {
+ color: #839496
+}
+
+.cm-s-solarized-dark span.cm-attribute {
+ color: #93a1a1;
+ font-weight: bold
+}
+
+.cm-s-solarized-dark span.cm-meta {
+ color: #268bd2
+}
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ border: none;
+ margin: 0;
+ padding: 0
+}
+
+html {
+ background: #f9f9f9
+}
+
+.left {
+ float: left
+}
+
+.right {
+ float: right
+}
+
+.container {
+ padding-top: 50px;
+ min-width: 960px
+}
+
+.wrap {
+ width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px
+}
+
+.skinnyWrap {
+ width: 690px;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 20px;
+ padding-right: 20px
+}
+
+hr {
+ height: 0;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #eee
+}
+
+ul, li {
+ margin-left: 20px
+}
+
+h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
+ margin-top: -50px;
+ position: absolute
+}
+
+h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-link, h5:hover .hash-link, h6:hover .hash-link {
+ display: inline
+}
+
+.hash-link {
+ color: #aaa;
+ display: none
+}
+
+.nav-main {
+ background: #222;
+ color: #fafafa;
+ position: fixed;
+ top: 0;
+ height: 50px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ width: 100%;
+ z-index: 100
+}
+
+.nav-main:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.nav-main a {
+ color: #e9e9e9;
+ text-decoration: none
+}
+
+.nav-main .nav-site {
+ float: right;
+ margin: 0
+}
+
+.nav-main .nav-site li {
+ margin: 0
+}
+
+.nav-main .nav-site a {
+ padding: 0 8px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ line-height: 50px;
+ display: inline-block;
+ height: 50px;
+ color: #aaa
+}
+
+.nav-main .nav-site a:hover {
+ color: #fafafa
+}
+
+.nav-main .nav-site a.active {
+ color: #fafafa;
+ border-bottom: 3px solid #cc7a6f;
+ background: #333
+}
+
+.nav-main .nav-home {
+ color: #00d8ff;
+ font-size: 24px;
+ line-height: 50px;
+ height: 50px;
+ display: inline-block
+}
+
+.nav-main .nav-logo {
+ vertical-align: middle;
+ display: inline-block
+}
+
+.nav-main ul {
+ display: inline
+}
+
+.nav-main li {
+ display: inline
+}
+
+.hero {
+ height: 300px;
+ background: #2d2d2d;
+ padding-top: 50px;
+ color: #e9e9e9;
+ font-weight: 300
+}
+
+.hero .text {
+ font-size: 64px;
+ text-align: center
+}
+
+.hero .minitext {
+ font-size: 16px;
+ text-align: center;
+ text-transform: uppercase
+}
+
+.hero strong {
+ color: #61dafb;
+ font-weight: 400
+}
+
+.buttons-unit {
+ margin-top: 60px;
+ text-align: center
+}
+
+.buttons-unit a {
+ color: #61dafb
+}
+
+.buttons-unit .button {
+ font-size: 24px;
+ background: #cc7a6f;
+ color: #fafafa
+}
+
+.buttons-unit .button:active {
+ background: #c5695c
+}
+
+.buttons-unit.downloads {
+ margin: 30px 0
+}
+
+.nav-docs {
+ color: #2d2d2d;
+ font-size: 14px;
+ float: left;
+ width: 210px
+}
+
+.nav-docs ul {
+ list-style: none;
+ margin: 0
+}
+
+.nav-docs ul ul {
+ margin: 6px 0 0 20px
+}
+
+.nav-docs li {
+ line-height: 16px;
+ margin: 0 0 6px
+}
+
+.nav-docs h3 {
+ text-transform: uppercase;
+ font-size: 14px
+}
+
+.nav-docs a {
+ color: #666;
+ display: block
+}
+
+.nav-docs a:hover {
+ text-decoration: none;
+ color: #cc7a6f
+}
+
+.nav-docs a.active {
+ color: #cc7a6f
+}
+
+.nav-docs .nav-docs-section {
+ border-bottom: 1px solid #ccc;
+ border-top: 1px solid #eee;
+ padding: 12px 0
+}
+
+.nav-docs .nav-docs-section:first-child {
+ padding-top: 0;
+ border-top: 0
+}
+
+.nav-docs .nav-docs-section:last-child {
+ padding-bottom: 0;
+ border-bottom: 0
+}
+
+.nav-blog li {
+ margin-bottom: 5px
+}
+
+.home-section {
+ margin: 50px 0
+}
+
+.home-divider {
+ border-top-color: #bbb;
+ margin: 0 auto;
+ width: 400px
+}
+
+.skinny-row:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.skinny-col {
+ float: left;
+ margin-left: 40px;
+ width: 305px
+}
+
+.skinny-col:first-child {
+ margin-left: 0
+}
+
+.marketing-row {
+ margin: 50px 0
+}
+
+.marketing-row:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.marketing-col {
+ float: left;
+ margin-left: 40px;
+ width: 280px
+}
+
+.marketing-col h3 {
+ color: #2d2d2d;
+ font-size: 24px;
+ font-weight: normal;
+ text-transform: uppercase
+}
+
+.marketing-col p {
+ font-size: 16px
+}
+
+.marketing-col:first-child {
+ margin-left: 0
+}
+
+#examples h3, .home-presentation h3 {
+ color: #2d2d2d;
+ font-size: 24px;
+ font-weight: normal;
+ margin-bottom: 5px
+}
+
+#examples p {
+ margin: 0 0 25px 0;
+ max-width: 600px
+}
+
+#examples .example {
+ margin-top: 60px
+}
+
+#examples #todoExample {
+ font-size: 14px
+}
+
+#examples #todoExample ul {
+ list-style-type: square;
+ margin: 0 0 10px 0
+}
+
+#examples #todoExample input {
+ border: 1px solid #ccc;
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ padding: 3px;
+ width: 150px
+}
+
+#examples #todoExample button {
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ margin-left: 5px;
+ padding: 4px 10px
+}
+
+#examples #markdownExample textarea {
+ border: 1px solid #ccc;
+ font: 14px proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ margin-bottom: 10px;
+ padding: 5px
+}
+
+.home-bottom-section {
+ margin-bottom: 100px
+}
+
+.docs-nextprev:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.docs-prev {
+ float: left
+}
+
+.docs-next {
+ float: right
+}
+
+footer {
+ font-size: 13px;
+ font-weight: 600;
+ margin-top: 36px;
+ margin-bottom: 18px;
+ overflow: auto
+}
+
+section.black content {
+ padding-bottom: 18px
+}
+
+.blogContent {
+ padding-top: 20px
+}
+
+.blogContent:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.blogContent blockquote {
+ padding: 5px 15px;
+ margin: 20px 0;
+ background-color: #f8f5ec;
+ border-left: 5px solid #f7ebc6
+}
+
+.documentationContent {
+ padding-top: 20px
+}
+
+.documentationContent:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.documentationContent .subHeader {
+ font-size: 24px
+}
+
+.documentationContent h2 {
+ margin-top: 30px
+}
+
+.documentationContent blockquote {
+ padding: 15px 30px 15px 15px;
+ margin: 20px 0;
+ background-color: rgba(204, 122, 111, 0.1);
+ border-left: 5px solid rgba(191, 87, 73, 0.2)
+}
+
+.documentationContent blockquote h4 {
+ margin-top: 0
+}
+
+.documentationContent blockquote p {
+ margin-bottom: 0
+}
+
+.documentationContent blockquote p:first-child {
+ font-weight: bold;
+ font-size: 17.5px;
+ line-height: 20px;
+ margin-top: 0;
+ text-rendering: optimizelegibility
+}
+
+.docs-prevnext {
+ padding-top: 40px;
+ padding-bottom: 40px
+}
+
+.jsxCompiler {
+ margin: 0 auto;
+ padding-top: 20px;
+ width: 1220px
+}
+
+.jsxCompiler label.compiler-option {
+ display: block;
+ margin-top: 5px
+}
+
+.jsxCompiler #jsxCompiler {
+ margin-top: 20px
+}
+
+.jsxCompiler .playgroundPreview {
+ padding: 0;
+ width: 600px
+}
+
+.jsxCompiler .playgroundPreview pre {
+ font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+ font-size: 0.8em;
+ line-height: 1.5
+}
+
+.jsxCompiler .playgroundError {
+ padding: 15px 20px
+}
+
+.button {
+ background: -webkit-linear-gradient(#9a9a9a, #646464);
+ background: linear-gradient(#9a9a9a, #646464);
+ border-radius: 4px;
+ padding: 8px 16px;
+ font-size: 18px;
+ font-weight: 400;
+ margin: 0 12px;
+ display: inline-block;
+ color: #fafafa;
+ text-decoration: none;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+ text-decoration: none
+}
+
+.button:hover {
+ text-decoration: none
+}
+
+.button:active {
+ box-shadow: none
+}
+
+.hero .button {
+ box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3)
+}
+
+.button.blue {
+ background: -webkit-linear-gradient(#77a3d2, #4783c2);
+ background: linear-gradient(#77a3d2, #4783c2)
+}
+
+.row {
+ padding-bottom: 4px
+}
+
+.row .span4 {
+ width: 33.33%;
+ display: table-cell
+}
+
+.row .span8 {
+ width: 66.66%;
+ display: table-cell
+}
+
+.row .span6 {
+ width: 50%;
+ display: table-cell
+}
+
+p {
+ margin: 10px 0
+}
+
+.highlight {
+ padding: 10px;
+ margin-bottom: 20px
+}
+
+figure {
+ text-align: center
+}
+
+.inner-content {
+ float: right;
+ width: 650px
+}
+
+.nosidebar .inner-content {
+ float: none;
+ margin: 0 auto
+}
+
+h1:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.edit-page-link {
+ float: right;
+ font-size: 16px;
+ font-weight: normal;
+ line-height: 20px;
+ margin-top: 17px
+}
+
+.post-list-item + .post-list-item {
+ margin-top: 60px
+}
+
+div.CodeMirror pre, div.CodeMirror-linenumber, code {
+ font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
+ font-size: 0.8em;
+ line-height: 1.5
+}
+
+div.CodeMirror-linenumber:after {
+ content: '.'
+}
+
+.CodeMirror, div.CodeMirror-gutters, div.highlight {
+ border: none
+}
+
+.CodeMirror-readonly div.CodeMirror-cursor {
+ visibility: hidden
+}
+
+small code, li code, p code {
+ color: #555;
+ background-color: rgba(0, 0, 0, 0.04);
+ padding: 1px 3px
+}
+
+.cm-s-default span.cm-string-2 {
+ color: inherit
+}
+
+.playground:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.playground-tab {
+ border-bottom: none !important;
+ border-radius: 3px 3px 0 0;
+ padding: 6px 8px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #c2c0bc;
+ background-color: #f1ede4;
+ display: inline-block;
+ cursor: pointer
+}
+
+.playgroundCode, .playground-tab, .playgroundPreview {
+ border: 1px solid rgba(16, 16, 16, 0.1)
+}
+
+.playground-tab-active {
+ color: #222
+}
+
+.playgroundCode {
+ border-radius: 0 3px 3px 3px;
+ float: left;
+ overflow: hidden;
+ width: 600px
+}
+
+.playgroundPreview {
+ background-color: white;
+ border-radius: 3px;
+ float: right;
+ padding: 15px 20px;
+ width: 280px
+}
+
+.playgroundError {
+ color: #c5695c;
+ font-size: 15px
+}
+
+.MarkdownEditor textarea {
+ width: 100%;
+ height: 100px
+}
+
+.hll {
+ background-color: #f7ebc6;
+ border-left: 5px solid #f7d87c;
+ display: block;
+ margin-left: -14px;
+ margin-right: -14px;
+ padding-left: 9px
+}
+
+.highlight .javascript .err {
+ background-color: transparent;
+ color: inherit
+}
+
+.highlight {
+ position: relative;
+ margin-bottom: 14px;
+ padding: 30px 14px 14px;
+ border: none;
+ border-radius: 0;
+ overflow: auto
+}
+
+.highlight pre {
+ padding: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+ background-color: transparent;
+ border: 0
+}
+
+.highlight pre code {
+ display: block;
+ background: none;
+ padding: 0
+}
+
+.highlight pre .lineno {
+ display: inline-block;
+ width: 22px;
+ padding-right: 5px;
+ margin-right: 10px;
+ color: #bebec5;
+ text-align: right
+}
+
+.highlight:after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ padding: 3px 7px;
+ font-size: 12px;
+ font-weight: bold;
+ color: #c2c0bc;
+ background-color: #f1ede4;
+ content: "Code"
+}
+
+.downloadCenter {
+ text-align: center;
+ margin-top: 20px;
+ margin-bottom: 25px
+}
+
+.downloadSection:hover {
+ text-decoration: none !important
+}
+
+@media screen and (max-width: 960px) {
+ .nav-main {
+ position: static
+ }
+
+ .container {
+ padding-top: 0
+ }
+}
+
+.post {
+ margin-bottom: 30px
+}
+
+.pagination {
+ margin-bottom: 30px;
+ width: 100%;
+ overflow: hidden
+}
+
+.pagination .next {
+ float: right
+}
+
+div[data-twttr-id] iframe {
+ margin: 10px auto !important
+}
+
+.three-column:after {
+ content: "";
+ display: table;
+ clear: both
+}
+
+.three-column > ul {
+ float: left;
+ margin-left: 30px;
+ width: 190px
+}
+
+.three-column > ul:first-child {
+ margin-left: 20px
+}
\ No newline at end of file
diff --git a/playground/playground.css b/playground/css/playground.css
similarity index 100%
rename from playground/playground.css
rename to playground/css/playground.css
diff --git a/playground/fiddle.js b/playground/fiddle.js
index f772c32..cb80376 100644
--- a/playground/fiddle.js
+++ b/playground/fiddle.js
@@ -1,6 +1,7 @@
/**
* Created by avim on 12/2/2014.
*/
+'use strict';
var React = require('react/addons');
var _ = require('lodash');
var fiddleTemplate = require('./fiddle.rt.js');
@@ -11,10 +12,10 @@ function generateRandomId() {
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
-};
+}
var Fiddle = React.createClass({
- displayName: "Fiddle",
+ displayName: 'Fiddle',
componentDidMount: function () {
if (window.location.hash) {
var newHash = window.location.hash.replace("#", "");
@@ -37,7 +38,7 @@ var Fiddle = React.createClass({
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")
+ alert("saved the fiddle, you can share your url");
}.bind(this));
},
diff --git a/playground/intro.js b/playground/intro.js
index 554e79d..a564089 100644
--- a/playground/intro.js
+++ b/playground/intro.js
@@ -1,31 +1,32 @@
/**
* Created by avim on 12/2/2014.
*/
+'use strict';
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 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]
+ [helloCode, helloRT],
+ [todoCode, todoRT]
];
-samples = _.map(samples,function (tuple) {
- return {templateProps:tuple[0],templateHTML:tuple[1]}
+samples = _.map(samples, function (tuple) {
+ return {templateProps: tuple[0], templateHTML: tuple[1]};
});
var intro = React.createClass({
- displayName:"Intro",
- getInitialState: function (){
+ displayName: 'Intro',
+ getInitialState: function () {
return {
- samples:samples
- }
+ samples: samples
+ };
},
render: function () {
return introTemplate.apply(this);
diff --git a/playground/libs.js b/playground/libs.js
index 0ac79c9..a33423a 100644
--- a/playground/libs.js
+++ b/playground/libs.js
@@ -1,9 +1,10 @@
/**
* Created by avim on 12/2/2014.
*/
+'use strict';
var _ = require('lodash');
var React = require('react/addons');
-var reactTemplates = require('../src/reactTemplates.js')
+var reactTemplates = require('../src/reactTemplates.js');
var brace = require('brace');
require('brace/mode/javascript');
require('brace/mode/html');
diff --git a/playground/main.js b/playground/main.js
index e3a498a..2ea8a9e 100644
--- a/playground/main.js
+++ b/playground/main.js
@@ -1,14 +1,15 @@
/**
* Created by avim on 12/2/2014.
*/
+'use strict';
var React = require('react/addons');
var fiddle = require('./fiddle.js');
var intro = require('./intro.js');
window.initFiddle = function () {
window.fiddle = React.render(fiddle(), document.getElementById('container'));
-}
+};
window.initIntro = function () {
window.intro = React.render(intro(), document.getElementById('container'));
-}
+};
diff --git a/playground/playground.js b/playground/playground.js
index 2c54258..f94a830 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -22,12 +22,12 @@ function generateTemplateSource(html) {
function generateTemplateFunction(code) {
try {
- var defineMap = {"react/addons": React, lodash: _};
+ var defineMap = {'react/addons': React, lodash: _};
var define = function (requirementsNames, content) {
- var requirements = _.map(requirementsNames,function (reqName) {
+ var requirements = _.map(requirementsNames, function (reqName) {
return defineMap[reqName];
});
- return content.apply(this,requirements);
+ return content.apply(this, requirements);
};
/*eslint no-eval:0*/
var res = eval(code);
diff --git a/src/reactTemplates.js b/src/reactTemplates.js
index c6d67c5..fbe4943 100644
--- a/src/reactTemplates.js
+++ b/src/reactTemplates.js
@@ -64,8 +64,8 @@ function convertText(node, context, txt) {
if (curlyCounter !== 0) {
throw buildError("Failed to parse text '" + txt + "'", context, node);
} else {
- var needsParens = start !== 0 || end !== txt.length -1;
- res += (first ? '' : '+') + (needsParens?'(':'')+txt.substr(start + 1, end - start - 2)+(needsParens?')':'');
+ var needsParens = start !== 0 || end !== txt.length - 1;
+ res += (first ? '' : '+') + (needsParens ? '(' : '') + txt.substr(start + 1, end - start - 2) + (needsParens ? ')' : '');
first = false;
txt = txt.substr(end);
}
@@ -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/addons": 'React', lodash: '_'};
+ var defines = {'react/addons': 'React', lodash: '_'};
html = extractDefinesFromJSXTag(html, defines);
var context = defaultContext();
context.html = html;