Stop transforming class -> className
Update the broken examples too (`git grep class=`)
Paul O’Shannessy committed
Sep 9, 2013 at 15:24 UTC
d83fe785c52e3cc43542b035f02d77286944ff14
6 files changed
+87
-28
examples/animation/index.html
new
+64
@@ -0,0 +1,64 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
+ <title>Basic Example with JSX</title>
6
+ <link rel="stylesheet" href="../shared/css/base.css" />
7
+ </head>
8
+ <body>
9
+ <h1>Basic Example with JSX</h1>
10
+ <div id="container">
11
+ <p>
12
+ To install React, follow the instructions on
13
+ <a href="http://www.github.com/facebook/react/">GitHub</a>.
14
+ </p>
15
+ <p>
16
+ If you can see this, React is not working right.
17
+ If you checked out the source from GitHub make sure to run <code>grunt</code>.
18
+ </p>
19
+ </div>
20
+ <h4>Example Details</h4>
21
+ <ul>
22
+ <li>
23
+ This is built with
24
+ <a href="https://github.com/substack/node-browserify">browserify</a>.
25
+ </li>
26
+ <li>
27
+ This is written with JSX and transformed in the browser.
28
+ </li>
29
+ </ul>
30
+ <p>
31
+ </p>
32
+ <p>
33
+ Learn more at
34
+ <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
35
+ </p>
36
+ <script src="../../build/react.js"></script>
37
+ <script src="../../build/react-transitiongroup.js"></script>
38
+ <script src="../../build/JSXTransformer.js"></script>
39
+ <script type="text/jsx">
40
+ /**
41
+ * @jsx React.DOM
42
+ */
43
+ console.log(ReactTransitionGroup);
44
+ var ExampleApplication = React.createClass({
45
+ render: function() {
46
+ var elapsed = Math.round(this.props.elapsed / 100);
47
+ var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
48
+ var message =
49
+ 'React has been successfully running for ' + seconds + ' seconds.';
50
+
51
+ return <p>{message}</p>;
52
+ }
53
+ });
54
+ var start = new Date().getTime();
55
+ setInterval(function() {
56
+ React.renderComponent(
57
+ <ExampleApplication elapsed={new Date().getTime() - start} />,
58
+ document.getElementById('container')
59
+ );
60
+ }, 50);
61
+
62
+ </script>
63
+ </body>
64
+</html>
examples/todomvc-backbone/js/app.js
+5
-5
@@ -92,10 +92,10 @@ var TodoItem = React.createClass({
92
completed: this.props.todo.get('completed'), editing: this.props.editing
93
});
94
return (
95
- <li class={classes}>
96
- <div class="view">
95
+ <li className={classes}>
96
+ <div className="view">
97
<input
98
- class="toggle"
98
+ className="toggle"
99
type="checkbox"
100
checked={this.props.todo.get('completed')}
101
onChange={this.props.onToggle}
@@ -104,12 +104,12 @@ var TodoItem = React.createClass({
104
<label onDoubleClick={this.onEdit}>
105
{this.props.todo.get('title')}
106
</label>
107
- <button class="destroy" onClick={this.props.onDestroy} />
107
+ <button className="destroy" onClick={this.props.onDestroy} />
108
</div>
109
<form onSubmit={this.handleSubmit}>
110
<input
111
ref="editField"
112
- class="edit"
112
+ className="edit"
113
defaultValue={this.props.todo.get('title')}
114
onBlur={this.handleSubmit}
115
autoFocus="autofocus"
examples/todomvc-director/js/footer.jsx
+3
-3
@@ -39,15 +39,15 @@
39
</span>
40
<ul id="filters">
41
<li>
42
- <a href="#/" class={show[ALL_TODOS]}>All</a>
42
+ <a href="#/" className={show[ALL_TODOS]}>All</a>
43
</li>
44
{' '}
45
<li>
46
- <a href="#/active" class={show[ACTIVE_TODOS]}>Active</a>
46
+ <a href="#/active" className={show[ACTIVE_TODOS]}>Active</a>
47
</li>
48
{' '}
49
<li>
50
- <a href="#/completed" class={show[COMPLETED_TODOS]}>Completed</a>
50
+ <a href="#/completed" className={show[COMPLETED_TODOS]}>Completed</a>
51
</li>
52
</ul>
53
{clearButton}
examples/todomvc-director/js/todoItem.jsx
+5
-5
@@ -62,13 +62,13 @@
62
63
render: function () {
64
return (
65
- <li class={Utils.stringifyObjKeys({
65
+ <li className={Utils.stringifyObjKeys({
66
completed: this.props.todo.completed,
67
editing: this.props.editing
68
})}>
69
- <div class="view">
69
+ <div className="view">
70
<input
71
- class="toggle"
71
+ className="toggle"
72
type="checkbox"
73
checked={this.props.todo.completed ? 'checked' : null}
74
onChange={this.props.onToggle}
@@ -76,11 +76,11 @@
76
<label onDoubleClick={this.handleEdit}>
77
{this.props.todo.title}
78
</label>
79
- <button class='destroy' onClick={this.props.onDestroy} />
79
+ <button className='destroy' onClick={this.props.onDestroy} />
80
</div>
81
<input
82
ref="editField"
83
- class="edit"
83
+ className="edit"
84
value={this.state.editText}
85
onBlur={this.handleSubmit}
86
onChange={this.handleChange}
src/core/__tests__/ReactDOM-test.js
+9
-9
@@ -79,35 +79,35 @@ describe('ReactDOM', function() {
79
it("should purge the DOM cache when removing nodes", function() {
80
var myDiv = ReactTestUtils.renderIntoDocument(
81
<div>{{
82
- theDog: <div class="dog" />,
83
- theBird: <div class="bird" />
82
+ theDog: <div className="dog" />,
83
+ theBird: <div className="bird" />
84
}}</div>
85
);
86
// Warm the cache with theDog
87
myDiv.setProps({
88
children: {
89
- theDog: <div class="dogbeforedelete" />,
90
- theBird: <div class="bird" />
89
+ theDog: <div className="dogbeforedelete" />,
90
+ theBird: <div className="bird" />
91
}
92
});
93
// Remove theDog - this should purge the cache
94
myDiv.setProps({
95
children: {
96
- theBird: <div class="bird" />
96
+ theBird: <div className="bird" />
97
}
98
});
99
// Now, put theDog back. It's now a different DOM node.
100
myDiv.setProps({
101
children: {
102
- theDog: <div class="dog" />,
103
- theBird: <div class="bird" />
102
+ theDog: <div className="dog" />,
103
+ theBird: <div className="bird" />
104
}
105
});
106
// Change the className of theDog. It will use the same element
107
myDiv.setProps({
108
children: {
109
- theDog: <div class="bigdog" />,
110
- theBird: <div class="bird" />
109
+ theDog: <div className="bigdog" />,
110
+ theBird: <div className="bird" />
111
}
112
});
113
var root = ReactMount.getNode(myDiv._rootNodeID);
vendor/fbtransform/transforms/react.js
+1
-6
@@ -43,11 +43,6 @@ var quoteAttrName = require('./xjs').quoteAttrName;
43
* javascript since "class" is not a valid object key in javascript.
44
*/
45
46
-var JSX_ATTRIBUTE_RENAMES = {
47
- 'class': 'className',
48
- cxName: 'className'
49
-};
50
-
46
var JSX_ATTRIBUTE_TRANSFORMS = {
47
cxName: function(attr) {
48
if (attr.value.type !== Syntax.Literal) {
@@ -93,7 +88,7 @@ function visitReactTag(traverse, object, path, state) {
88
throw new Error(
89
'Namespace attributes are not supported. ReactJSX is not XML.');
90
}
96
- var name = JSX_ATTRIBUTE_RENAMES[attr.name.name] || attr.name.name;
91
+ var name = attr.name.name;
92
var isFirst = index === 0;
93
var isLast = index === object.attributes.length - 1;
94