Skip to content

Commit 4e81aff

Browse files
committed
update docs and test examples for changes in 0.12
1 parent 2ebce56 commit 4e81aff

File tree

9 files changed

+8
-32
lines changed

9 files changed

+8
-32
lines changed

README.md

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,11 @@ Alternatively, you can include it directly as a separate script tag:
5858

5959
### JSX
6060

61-
To transform your JSX into JS, simply create `.js.jsx` files, and ensure that the file has the `/** @jsx React.DOM */` docblock. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
61+
To transform your JSX into JS, simply create `.js.jsx` files. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
6262

63-
CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. You must use this form of the docblock at the top of each file: `###* @jsx React.DOM ###`. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
63+
CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
6464

6565
```coffee
66-
###* @jsx React.DOM ###
67-
6866
Component = React.createClass
6967
render: ->
7068
`<ExampleComponent videos={this.props.videos} />`
@@ -191,8 +189,6 @@ In order for us to render your React components, we need to be able to find them
191189
This will bring in all files located in the `app/assets/javascripts/components` directory. You can organize your code however you like, as long as a request for `/assets/javascripts/components.js` brings in a concatenated file containing all of your React components, and each one has to be available in the global scope (either `window` or `global` can be used). For `.js.jsx` files this is not a problem, but if you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
192190

193191
```coffee
194-
###* @jsx React.DOM ###
195-
196192
Component = React.createClass
197193
render: ->
198194
`<ExampleComponent videos={this.props.videos} />`
@@ -258,8 +254,6 @@ end
258254
It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow `/* */` style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
259255

260256
```coffee
261-
###* @jsx React.DOM ###
262-
263257
Component = React.createClass
264258
render: ->
265259
`<ExampleComponent videos={this.props.videos} />`

test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
###* @jsx React.DOM ###
2-
31
Todo = React.createClass
42
render: ->
53
`<li>{this.props.todo}</li>`

test/dummy/app/assets/javascripts/components/TodoList.js.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/** @jsx React.DOM */
2-
31
TodoList = React.createClass({
42
getInitialState: function() {
53
return({mounted: "nope"});
@@ -18,4 +16,3 @@ TodoList = React.createClass({
1816
)
1917
}
2018
})
21-
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
/** @jsx React.DOM */
21
<div/>;
Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
###* @jsx React.DOM ###
2-
31
Component = React.createClass
42
render: ->
53
`<ExampleComponent videos={this.props.videos} />`
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
/** @jsx React.DOM */
21
<div/>;

test/helper_files/TodoListWithUpdates.js.jsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/** @jsx React.DOM */
2-
31
TodoList = React.createClass({
42
getInitialState: function() {
53
return({mounted: "nope"});
@@ -19,4 +17,3 @@ TodoList = React.createClass({
1917
)
2018
}
2119
})
22-

test/jsxtransform_test.rb

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,16 @@
33

44
# Sprockets is inserting a newline after the docblock for some reason...
55
EXPECTED_JS = <<eos
6-
/** @jsx React.DOM */
7-
8-
React.DOM.div(null);
6+
React.createElement("div", null);
97
eos
108

119
EXPECTED_JS_2 = <<eos
12-
/** @jsx React.DOM */
13-
1410
(function() {
1511
var Component;
1612
1713
Component = React.createClass({displayName: 'Component',
1814
render: function() {
19-
return ExampleComponent( {videos:this.props.videos} );
15+
return React.createElement(ExampleComponent, {videos:this.props.videos} );
2016
}
2117
});
2218
@@ -35,10 +31,8 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
3531
test 'asset pipeline should transform JSX + Coffeescript' do
3632
get 'assets/example2.js'
3733
assert_response :success
38-
# Different coffee-script may generate slightly different outputs:
39-
# 1. Some version inserts an extra "\n" at the beginning.
40-
# 2. "/** @jsx React.DOM */" and "/** @jsx React.DOM*/" are both possible.
41-
#
34+
# Different coffee-script may generate slightly different outputs,
35+
# as some version inserts an extra "\n" at the beginning.
4236
# Because appraisal is used, multiple versions of coffee-script are treated
4337
# together. Remove all spaces to make test pass.
4438
assert_equal EXPECTED_JS_2.gsub(/\s/, ''), @response.body.gsub(/\s/, '')

test/react_renderer_test.rb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class ReactRendererTest < ActiveSupport::TestCase
3030
err = assert_raises React::Renderer::PrerenderError do
3131
React::Renderer.render("NonexistentComponent", {error: true, exists: false})
3232
end
33-
expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
33+
expected_message = 'Encountered error "ReferenceError: Can\'t find variable: NonexistentComponent" when prerendering NonexistentComponent with {"error":true,"exists":false}'
3434
assert_equal expected_message, err.message
3535
end
3636

@@ -43,7 +43,7 @@ class ReactRendererTest < ActiveSupport::TestCase
4343
err = assert_raises React::Renderer::PrerenderError do
4444
React::Renderer.render("NonexistentComponent", json_string)
4545
end
46-
expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
46+
expected_message = 'Encountered error "ReferenceError: Can\'t find variable: NonexistentComponent" when prerendering NonexistentComponent with {"error":true,"exists":false}'
4747
assert_equal expected_message, err.message
4848
end
4949
end

0 commit comments

Comments
 (0)