Use --harmomy in docs examples for cleaner code

Rakefile

@@ -4,12 +4,12 @@ require('yaml')
 
 desc "generate js from jsx"
 task :js do
-  system "../bin/jsx _js js"
+  system "../bin/jsx --harmony _js js"
 end
 
 desc "watch js"
 task :watch do
-  Process.spawn "../bin/jsx --watch _js js"
+  Process.spawn "../bin/jsx --watch --harmony _js js"
   Process.waitall
 end
 

_js/examples/hello.js

@@ -1,12 +1,12 @@
-var HELLO_COMPONENT = "\
-var HelloMessage = React.createClass({\n\
-  render: function() {\n\
-    return <div>Hello {this.props.name}</div>;\n\
-  }\n\
-});\n\
-\n\
-React.render(<HelloMessage name=\"John\" />, mountNode);\
-";
+var HELLO_COMPONENT = `
+var HelloMessage = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+
+React.render(<HelloMessage name="John" />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={HELLO_COMPONENT} />,

_js/examples/markdown.js

@@ -1,35 +1,35 @@
-var MARKDOWN_COMPONENT = "\
-var converter = new Showdown.converter();\n\
-\n\
-var MarkdownEditor = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {value: 'Type some *markdown* here!'};\n\
-  },\n\
-  handleChange: function() {\n\
-    this.setState({value: this.refs.textarea.getDOMNode().value});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div className=\"MarkdownEditor\">\n\
-        <h3>Input</h3>\n\
-        <textarea\n\
-          onChange={this.handleChange}\n\
-          ref=\"textarea\"\n\
-          defaultValue={this.state.value} />\n\
-        <h3>Output</h3>\n\
-        <div\n\
-          className=\"content\"\n\
-          dangerouslySetInnerHTML={{\n\
-            __html: converter.makeHtml(this.state.value)\n\
-          }}\n\
-        />\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.render(<MarkdownEditor />, mountNode);\
-";
+var MARKDOWN_COMPONENT = `
+var converter = new Showdown.converter();
+
+var MarkdownEditor = React.createClass({
+  getInitialState: function() {
+    return {value: 'Type some *markdown* here!'};
+  },
+  handleChange: function() {
+    this.setState({value: this.refs.textarea.getDOMNode().value});
+  },
+  render: function() {
+    return (
+      <div className="MarkdownEditor">
+        <h3>Input</h3>
+        <textarea
+          onChange={this.handleChange}
+          ref="textarea"
+          defaultValue={this.state.value} />
+        <h3>Output</h3>
+        <div
+          className="content"
+          dangerouslySetInnerHTML={{
+            __html: converter.makeHtml(this.state.value)
+          }}
+        />
+      </div>
+    );
+  }
+});
+
+React.render(<MarkdownEditor />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={MARKDOWN_COMPONENT} />,

_js/examples/timer.js

@@ -1,26 +1,26 @@
-var TIMER_COMPONENT = "\
-var Timer = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {secondsElapsed: 0};\n\
-  },\n\
-  tick: function() {\n\
-    this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
-  },\n\
-  componentDidMount: function() {\n\
-    this.interval = setInterval(this.tick, 1000);\n\
-  },\n\
-  componentWillUnmount: function() {\n\
-    clearInterval(this.interval);\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
-    );\n\
-  }\n\
-});\n\
-\n\
-React.render(<Timer />, mountNode);\
-";
+var TIMER_COMPONENT = `
+var Timer = React.createClass({
+  getInitialState: function() {
+    return {secondsElapsed: 0};
+  },
+  tick: function() {
+    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
+  },
+  componentDidMount: function() {
+    this.interval = setInterval(this.tick, 1000);
+  },
+  componentWillUnmount: function() {
+    clearInterval(this.interval);
+  },
+  render: function() {
+    return (
+      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
+    );
+  }
+});
+
+React.render(<Timer />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={TIMER_COMPONENT} />,

_js/examples/todo.js

@@ -1,40 +1,41 @@
-var TODO_COMPONENT = "\
-var TodoList = React.createClass({\n\
-  render: function() {\n\
-    var createItem = function(itemText) {\n\
-      return <li>{itemText}</li>;\n\
-    };\n\
-    return <ul>{this.props.items.map(createItem)}</ul>;\n\
-  }\n\
-});\n\
-var TodoApp = React.createClass({\n\
-  getInitialState: function() {\n\
-    return {items: [], text: ''};\n\
-  },\n\
-  onChange: function(e) {\n\
-    this.setState({text: e.target.value});\n\
-  },\n\
-  handleSubmit: function(e) {\n\
-    e.preventDefault();\n\
-    var nextItems = this.state.items.concat([this.state.text]);\n\
-    var nextText = '';\n\
-    this.setState({items: nextItems, text: nextText});\n\
-  },\n\
-  render: function() {\n\
-    return (\n\
-      <div>\n\
-        <h3>TODO</h3>\n\
-        <TodoList items={this.state.items} />\n\
-        <form onSubmit={this.handleSubmit}>\n\
-          <input onChange={this.onChange} value={this.state.text} />\n\
-          <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
-        </form>\n\
-      </div>\n\
-    );\n\
-  }\n\
-});\n\
-React.render(<TodoApp />, mountNode);\
-";
+var TODO_COMPONENT = `
+var TodoList = React.createClass({
+  render: function() {
+    var createItem = function(itemText) {
+      return <li>{itemText}</li>;
+    };
+    return <ul>{this.props.items.map(createItem)}</ul>;
+  }
+});
+var TodoApp = React.createClass({
+  getInitialState: function() {
+    return {items: [], text: ''};
+  },
+  onChange: function(e) {
+    this.setState({text: e.target.value});
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    var nextItems = this.state.items.concat([this.state.text]);
+    var nextText = '';
+    this.setState({items: nextItems, text: nextText});
+  },
+  render: function() {
+    return (
+      <div>
+        <h3>TODO</h3>
+        <TodoList items={this.state.items} />
+        <form onSubmit={this.handleSubmit}>
+          <input onChange={this.onChange} value={this.state.text} />
+          <button>{'Add #' + (this.state.items.length + 1)}</button>
+        </form>
+      </div>
+    );
+  }
+});
+
+React.render(<TodoApp />, mountNode);
+`;
 
 React.render(
   <ReactPlayground codeText={TODO_COMPONENT} />,