Use --harmomy in docs examples for cleaner code
Paul O’Shannessy committed
Oct 23, 2014 at 21:13 UTC
0344aaf18d677f6df29728f151ead28852c5a58c
5 files changed
+104
-103
docs/Rakefile
+2
-2
@@ -4,12 +4,12 @@ require('yaml')
4
5
desc "generate js from jsx"
6
task :js do
7
- system "../bin/jsx _js js"
7
+ system "../bin/jsx --harmony _js js"
8
end
9
10
desc "watch js"
11
task :watch do
12
- Process.spawn "../bin/jsx --watch _js js"
12
+ Process.spawn "../bin/jsx --watch --harmony _js js"
13
Process.waitall
14
end
15
docs/_js/examples/hello.js
+9
-9
@@ -1,12 +1,12 @@
1
-var HELLO_COMPONENT = "\
2
-var HelloMessage = React.createClass({\n\
3
- render: function() {\n\
4
- return <div>Hello {this.props.name}</div>;\n\
5
- }\n\
6
-});\n\
7
-\n\
8
-React.render(<HelloMessage name=\"John\" />, mountNode);\
9
-";
1
+var HELLO_COMPONENT = `
2
+var HelloMessage = React.createClass({
3
+ render: function() {
4
+ return <div>Hello {this.props.name}</div>;
5
+ }
6
+});
7
+
8
+React.render(<HelloMessage name="John" />, mountNode);
9
+`;
10
11
React.render(
12
<ReactPlayground codeText={HELLO_COMPONENT} />,
docs/_js/examples/markdown.js
+32
-32
@@ -1,35 +1,35 @@
1
-var MARKDOWN_COMPONENT = "\
2
-var converter = new Showdown.converter();\n\
3
-\n\
4
-var MarkdownEditor = React.createClass({\n\
5
- getInitialState: function() {\n\
6
- return {value: 'Type some *markdown* here!'};\n\
7
- },\n\
8
- handleChange: function() {\n\
9
- this.setState({value: this.refs.textarea.getDOMNode().value});\n\
10
- },\n\
11
- render: function() {\n\
12
- return (\n\
13
- <div className=\"MarkdownEditor\">\n\
14
- <h3>Input</h3>\n\
15
- <textarea\n\
16
- onChange={this.handleChange}\n\
17
- ref=\"textarea\"\n\
18
- defaultValue={this.state.value} />\n\
19
- <h3>Output</h3>\n\
20
- <div\n\
21
- className=\"content\"\n\
22
- dangerouslySetInnerHTML={{\n\
23
- __html: converter.makeHtml(this.state.value)\n\
24
- }}\n\
25
- />\n\
26
- </div>\n\
27
- );\n\
28
- }\n\
29
-});\n\
30
-\n\
31
-React.render(<MarkdownEditor />, mountNode);\
32
-";
1
+var MARKDOWN_COMPONENT = `
2
+var converter = new Showdown.converter();
3
+
4
+var MarkdownEditor = React.createClass({
5
+ getInitialState: function() {
6
+ return {value: 'Type some *markdown* here!'};
7
+ },
8
+ handleChange: function() {
9
+ this.setState({value: this.refs.textarea.getDOMNode().value});
10
+ },
11
+ render: function() {
12
+ return (
13
+ <div className="MarkdownEditor">
14
+ <h3>Input</h3>
15
+ <textarea
16
+ onChange={this.handleChange}
17
+ ref="textarea"
18
+ defaultValue={this.state.value} />
19
+ <h3>Output</h3>
20
+ <div
21
+ className="content"
22
+ dangerouslySetInnerHTML={{
23
+ __html: converter.makeHtml(this.state.value)
24
+ }}
25
+ />
26
+ </div>
27
+ );
28
+ }
29
+});
30
+
31
+React.render(<MarkdownEditor />, mountNode);
32
+`;
33
34
React.render(
35
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
docs/_js/examples/timer.js
+23
-23
@@ -1,26 +1,26 @@
1
-var TIMER_COMPONENT = "\
2
-var Timer = React.createClass({\n\
3
- getInitialState: function() {\n\
4
- return {secondsElapsed: 0};\n\
5
- },\n\
6
- tick: function() {\n\
7
- this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
8
- },\n\
9
- componentDidMount: function() {\n\
10
- this.interval = setInterval(this.tick, 1000);\n\
11
- },\n\
12
- componentWillUnmount: function() {\n\
13
- clearInterval(this.interval);\n\
14
- },\n\
15
- render: function() {\n\
16
- return (\n\
17
- <div>Seconds Elapsed: {this.state.secondsElapsed}</div>\n\
18
- );\n\
19
- }\n\
20
-});\n\
21
-\n\
22
-React.render(<Timer />, mountNode);\
23
-";
1
+var TIMER_COMPONENT = `
2
+var Timer = React.createClass({
3
+ getInitialState: function() {
4
+ return {secondsElapsed: 0};
5
+ },
6
+ tick: function() {
7
+ this.setState({secondsElapsed: this.state.secondsElapsed + 1});
8
+ },
9
+ componentDidMount: function() {
10
+ this.interval = setInterval(this.tick, 1000);
11
+ },
12
+ componentWillUnmount: function() {
13
+ clearInterval(this.interval);
14
+ },
15
+ render: function() {
16
+ return (
17
+ <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
18
+ );
19
+ }
20
+});
21
+
22
+React.render(<Timer />, mountNode);
23
+`;
24
25
React.render(
26
<ReactPlayground codeText={TIMER_COMPONENT} />,
docs/_js/examples/todo.js
+38
-37
@@ -1,40 +1,41 @@
1
-var TODO_COMPONENT = "\
2
-var TodoList = React.createClass({\n\
3
- render: function() {\n\
4
- var createItem = function(itemText) {\n\
5
- return <li>{itemText}</li>;\n\
6
- };\n\
7
- return <ul>{this.props.items.map(createItem)}</ul>;\n\
8
- }\n\
9
-});\n\
10
-var TodoApp = React.createClass({\n\
11
- getInitialState: function() {\n\
12
- return {items: [], text: ''};\n\
13
- },\n\
14
- onChange: function(e) {\n\
15
- this.setState({text: e.target.value});\n\
16
- },\n\
17
- handleSubmit: function(e) {\n\
18
- e.preventDefault();\n\
19
- var nextItems = this.state.items.concat([this.state.text]);\n\
20
- var nextText = '';\n\
21
- this.setState({items: nextItems, text: nextText});\n\
22
- },\n\
23
- render: function() {\n\
24
- return (\n\
25
- <div>\n\
26
- <h3>TODO</h3>\n\
27
- <TodoList items={this.state.items} />\n\
28
- <form onSubmit={this.handleSubmit}>\n\
29
- <input onChange={this.onChange} value={this.state.text} />\n\
30
- <button>{'Add #' + (this.state.items.length + 1)}</button>\n\
31
- </form>\n\
32
- </div>\n\
33
- );\n\
34
- }\n\
35
-});\n\
36
-React.render(<TodoApp />, mountNode);\
37
-";
1
+var TODO_COMPONENT = `
2
+var TodoList = React.createClass({
3
+ render: function() {
4
+ var createItem = function(itemText) {
5
+ return <li>{itemText}</li>;
6
+ };
7
+ return <ul>{this.props.items.map(createItem)}</ul>;
8
+ }
9
+});
10
+var TodoApp = React.createClass({
11
+ getInitialState: function() {
12
+ return {items: [], text: ''};
13
+ },
14
+ onChange: function(e) {
15
+ this.setState({text: e.target.value});
16
+ },
17
+ handleSubmit: function(e) {
18
+ e.preventDefault();
19
+ var nextItems = this.state.items.concat([this.state.text]);
20
+ var nextText = '';
21
+ this.setState({items: nextItems, text: nextText});
22
+ },
23
+ render: function() {
24
+ return (
25
+ <div>
26
+ <h3>TODO</h3>
27
+ <TodoList items={this.state.items} />
28
+ <form onSubmit={this.handleSubmit}>
29
+ <input onChange={this.onChange} value={this.state.text} />
30
+ <button>{'Add #' + (this.state.items.length + 1)}</button>
31
+ </form>
32
+ </div>
33
+ );
34
+ }
35
+});
36
+
37
+React.render(<TodoApp />, mountNode);
38
+`;
39
40
React.render(
41
<ReactPlayground codeText={TODO_COMPONENT} />,