Skip to content

Commit 804c24a

Browse files
jquensejquense
committed
[added] Support for React 0.13.x
re add react to devDeps remove old or depreciated API's Remove getDOMNode classSet, joinClasses, CloneWithProps Fix case on require() typos, and syntax errors update AMD, cjs package def fix tests Removed test dependence on root refs [FIX] Docs, upgrade to react-router
1 parent f393dca commit 804c24a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+386
-551
lines changed

‎Gruntfile.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,8 @@ module.exports = function (grunt) {
136136
almond: "../tools/vendor/almond"
137137
},
138138
packages: [
139-
{ name: 'react', location: '../node_modules/react', main: './react' }
139+
{ name: 'react', location: '../node_modules/react', main: './react' },
140+
{ name: 'classnames', location: '../node_modules/classnames', main: './index' }
140141
],
141142
include: ["almond", "react-bootstrap"],
142143
exclude: ["react"],

‎docs/build.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,22 @@
22

33
var fs = require('fs');
44
var path = require('path');
5-
var nodejsx = require('node-jsx').install();
5+
6+
require('node-jsx').install();
7+
8+
var React = require('react');
9+
var routes = require('./src/Routes');
10+
var Router = require('react-router');
11+
612
var Root = require('./src/Root');
713

814
Root.getPages()
915
.forEach(function (fileName) {
10-
var RootHTML = Root.renderToString({initialPath: fileName});
1116

12-
fs.writeFileSync(path.join(__dirname, fileName), RootHTML);
17+
Router.run(routes, '/' + fileName, function (Handler) {
18+
var RootHTML = React.renderToString(React.createElement(Handler));
19+
20+
fs.writeFileSync(
21+
path.join(__dirname, fileName), RootHTML);
22+
})
1323
});

‎docs/client.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
'use strict';
22

33
var React = require('react');
4-
var Root = require('./src/Root');
4+
var Router = require('react-router');
5+
var routes = require('./src/Routes');
56

67
// For React devtools
78
window.React = React;
89

9-
React.render(React.createFactory(Root)(window.INITIAL_PROPS), document);
10+
Router.run(routes, Router.RefreshLocation, function (Handler) {
11+
React.render(
12+
React.createElement(Handler, window.INITIAL_PROPS), document);
13+
})
14+
15+

‎docs/server.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,34 @@
22

33
var express = require('express');
44

5+
56
var development = process.env.NODE_ENV !== 'production';
67
var app = express();
78

89
if (development) {
10+
var React = require('react');
911
var path = require('path');
1012
var url = require('url');
1113
var browserify = require('connect-browserify');
1214
var nodejsx = require('node-jsx').install();
13-
var Root = require('./src/Root');
15+
16+
var routes = require('./src/Routes');
17+
var Router = require('react-router');
1418

1519
app = app
1620
.get('/assets/bundle.js', browserify('./client', {debug: true, watch: false}))
1721
.use('/assets', express.static(path.join(__dirname, 'assets')))
1822
.use('/vendor', express.static(path.join(__dirname, 'vendor')))
1923
.use(function renderApp(req, res) {
2024
var fileName = url.parse(req.url).pathname;
21-
var RootHTML = Root.renderToString({initialPath: fileName});
2225

23-
res.send(RootHTML);
26+
Router.run(routes, req.url, function (Handler) {
27+
var RootHTML = React.renderToString(React.createElement(Handler));
28+
29+
res.send(RootHTML);
30+
})
31+
32+
2433
});
2534
} else {
2635
app = app

‎docs/src/NavMain.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
'use strict';
22

33
var React = require('react');
4-
var Router = require('react-router-component');
4+
var Router = require('react-router');
55
var Navbar = require('../../lib/Navbar');
66
var Nav = require('../../lib/Nav');
77

8+
89
var InternalLink = Router.Link;
910

1011
var NAV_LINKS = {
1112
'getting-started': {
12-
link: '/getting-started.html',
13+
link: 'getting-started',
1314
title: 'Getting started'
1415
},
1516
'components': {
16-
link: '/components.html',
17+
link: 'components',
1718
title: 'Components'
1819
}
1920
};
@@ -24,7 +25,7 @@ var NavMain = React.createClass({
2425
},
2526

2627
render: function () {
27-
var brand = <InternalLink href="/" className="navbar-brand">React Bootstrap</InternalLink>;
28+
var brand = <InternalLink to='home' className="navbar-brand">React Bootstrap</InternalLink>;
2829

2930
return (
3031
<Navbar componentClass='header' brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
@@ -40,7 +41,7 @@ var NavMain = React.createClass({
4041

4142
return (
4243
<li className={this.props.activePage === linkName ? 'active' : null} key={linkName}>
43-
<InternalLink href={link.link}>{link.title}</InternalLink>
44+
<InternalLink to={link.link}>{link.title}</InternalLink>
4445
</li>
4546
);
4647
}

‎docs/src/ReactPlayground.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var React = require('react');
2-
var classSet = require('react/lib/cx');
2+
var classSet = require('classnames');
33
var CodeMirror = global.CodeMirror;
44
var JSXTransformer = global.JSXTransformer;
55
var Accordion = require('../../lib/Accordion');

‎docs/src/Root.js

+3-27
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,7 @@
11
'use strict';
22

33
var React = require('react');
4-
var Router = require('react-router-component');
5-
6-
var HomePage = React.createFactory(require('./HomePage'));
7-
var GettingStartedPage = React.createFactory(require('./GettingStartedPage'));
8-
var ComponentsPage = React.createFactory(require('./ComponentsPage'));
9-
var NotFoundPage = React.createFactory(require('./NotFoundPage'));
10-
11-
var Locations = Router.Locations;
12-
var Location = Router.Location;
13-
var NotFound = Router.NotFound;
14-
15-
var PagesHolder = React.createClass({
16-
render: function () {
17-
return (
18-
<Locations contextual>
19-
<Location path="/" handler={HomePage} />
20-
<Location path="/index.html" handler={HomePage} />
21-
<Location path="/getting-started.html" handler={GettingStartedPage} />
22-
<Location path="/components.html" handler={ComponentsPage} />
23-
<NotFound handler={NotFoundPage} />
24-
</Locations>
25-
);
26-
}
27-
});
4+
var Router = require('react-router');
285

296
var Root = React.createClass({
307
statics: {
@@ -110,9 +87,7 @@ var Root = React.createClass({
11087
<head dangerouslySetInnerHTML={head} />
11188

11289
<body>
113-
<Locations path={Root.getBaseUrl() + this.props.initialPath}>
114-
<Location path={Root.getBaseUrl() + '*'} handler={React.createFactory(PagesHolder)} />
115-
</Locations>
90+
<Router.RouteHandler />
11691

11792
<script dangerouslySetInnerHTML={browserInitScriptObj} />
11893
<script src="vendor/codemirror/codemirror.js" />
@@ -125,4 +100,5 @@ var Root = React.createClass({
125100
}
126101
});
127102

103+
128104
module.exports = Root;

‎docs/src/Routes.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
var React = require('react');
2+
3+
var Root = require('./Root');
4+
var HomePage = require('./HomePage');
5+
var GettingStartedPage = require('./GettingStartedPage');
6+
var ComponentsPage = require('./ComponentsPage');
7+
var NotFoundPage = require('./NotFoundPage');
8+
9+
var Router = require('react-router');
10+
11+
12+
module.exports = (
13+
<Router.Route name="app" path="/" handler={Root}>
14+
<Router.DefaultRoute handler={HomePage}/>
15+
<Router.NotFoundRoute handler={NotFoundPage} />
16+
17+
<Router.Route name='home' path="index.html" handler={HomePage} />
18+
<Router.Route name='getting-started' path="getting-started.html" handler={GettingStartedPage} />
19+
<Router.Route name='components' path="components.html" handler={ComponentsPage} />
20+
</Router.Route>
21+
)

‎ie8/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>React Bootstrap IE8 test page</title>
88

99
<!-- Bootstrap -->
10-
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
10+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
1111
<style>
1212
body {
1313
padding: 50px 100px;

‎ie8/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
"browserify": "^4.1.11",
44
"reactify": "^0.13.1",
55
"envify": "^1.2.1",
6-
"react": "^0.10.0",
6+
"react": "^0.13.0",
77
"http-server": "^0.6.1"
88
},
99
"scripts": {
1010
"postinstall": "npm run build",
1111
"start": "http-server -c-1",
12-
"build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js"
12+
"build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js --harmony"
1313
}
1414
}

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"author": "Stephen J. Collings <[email protected]>",
2626
"license": "MIT",
2727
"peerDependencies": {
28-
"react": ">=0.12"
28+
"react": ">=0.13"
2929
},
3030
"devDependencies": {
3131
"async": "~0.2.9",
@@ -55,12 +55,13 @@
5555
"karma-script-launcher": "~0.1.0",
5656
"karma-sinon": "^1.0.3",
5757
"mocha": "~1.16.2",
58-
"react": "~0.12.0",
59-
"react-async": "~2.0.0",
60-
"react-router-component": "git://github.com/STRML/react-router-component#react-0.12",
58+
"react": "0.13.0",
6159
"requirejs": "~2.1.9",
6260
"rf-changelog": "^0.4.0",
6361
"semver": "~2.0.7",
6462
"sinon": "^1.10.3"
63+
},
64+
"dependencies": {
65+
"classnames": "^1.1.4"
6566
}
66-
}
67+
}

‎src/Affix.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
2+
var classSet = require('classnames');
33
var AffixMixin = require('./AffixMixin');
44
var domUtils = require('./utils/domUtils');
55

@@ -13,7 +13,7 @@ var Affix = React.createClass({
1313
render: function () {
1414
var holderStyle = {top: this.state.affixPositionTop};
1515
return (
16-
<div {...this.props} className={joinClasses(this.props.className, this.state.affixClass)} style={holderStyle}>
16+
<div {...this.props} className={classSet(this.props.className, this.state.affixClass)} style={holderStyle}>
1717
{this.props.children}
1818
</div>
1919
);

‎src/AffixMixin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ var AffixMixin = {
3939
return;
4040
}
4141

42-
DOMNode = this.getDOMNode();
42+
DOMNode = React.findDOMNode(this);
4343
scrollHeight = document.documentElement.offsetHeight;
4444
scrollTop = window.pageYOffset;
4545
position = domUtils.getOffset(DOMNode);

‎src/Alert.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
3-
var classSet = require('./utils/classSet');
2+
3+
var classSet = require('classnames');
44
var BootstrapMixin = require('./BootstrapMixin');
55

66

@@ -38,7 +38,7 @@ var Alert = React.createClass({
3838
classes['alert-dismissable'] = isDismissable;
3939

4040
return (
41-
<div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
41+
<div {...this.props} className={classSet(this.props.className, classes)}>
4242
{isDismissable ? this.renderDismissButton() : null}
4343
{this.props.children}
4444
</div>

‎src/Badge.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
2+
33
var ValidComponentChildren = require('./utils/ValidComponentChildren');
4-
var classSet = require('./utils/classSet');
4+
var classSet = require('classnames');
55

66
var Badge = React.createClass({
77
propTypes: {
@@ -22,7 +22,7 @@ var Badge = React.createClass({
2222
return (
2323
<span
2424
{...this.props}
25-
className={joinClasses(this.props.className, classSet(classes))}>
25+
className={classSet(this.props.className, classes)}>
2626
{this.props.children}
2727
</span>
2828
);

‎src/Button.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
3-
var classSet = require('./utils/classSet');
2+
3+
var classSet = require('classnames');
44
var BootstrapMixin = require('./BootstrapMixin');
55

66
var Button = React.createClass({
@@ -52,7 +52,7 @@ var Button = React.createClass({
5252
<Component
5353
{...this.props}
5454
href={href}
55-
className={joinClasses(this.props.className, classSet(classes))}
55+
className={classSet(this.props.className, classes)}
5656
role="button">
5757
{this.props.children}
5858
</Component>
@@ -65,7 +65,7 @@ var Button = React.createClass({
6565
return (
6666
<Component
6767
{...this.props}
68-
className={joinClasses(this.props.className, classSet(classes))}>
68+
className={classSet(this.props.className, classes)}>
6969
{this.props.children}
7070
</Component>
7171
);

‎src/ButtonGroup.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
3-
var classSet = require('./utils/classSet');
2+
3+
var classSet = require('classnames');
44
var BootstrapMixin = require('./BootstrapMixin');
55
var Button = require('./Button');
66

@@ -27,7 +27,7 @@ var ButtonGroup = React.createClass({
2727
return (
2828
<div
2929
{...this.props}
30-
className={joinClasses(this.props.className, classSet(classes))}>
30+
className={classSet(this.props.className, classes)}>
3131
{this.props.children}
3232
</div>
3333
);

‎src/ButtonToolbar.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
var React = require('react');
2-
var joinClasses = require('./utils/joinClasses');
3-
var classSet = require('./utils/classSet');
2+
3+
var classSet = require('classnames');
44
var BootstrapMixin = require('./BootstrapMixin');
55
var Button = require('./Button');
66

@@ -20,7 +20,7 @@ var ButtonToolbar = React.createClass({
2020
<div
2121
{...this.props}
2222
role="toolbar"
23-
className={joinClasses(this.props.className, classSet(classes))}>
23+
className={classSet(this.props.className, classes)}>
2424
{this.props.children}
2525
</div>
2626
);

0 commit comments

Comments
 (0)