[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
kyletsang · Mar 22, 2015 · 804c24a · 804c24a
1 parent f393dca
commit 804c24a
Show file tree

Hide file tree

Showing 71 changed files with 386 additions and 551 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -136,7 +136,8 @@ module.exports = function (grunt) {
             almond: "../tools/vendor/almond"
           },
           packages: [
-            {	name: 'react', location: '../node_modules/react', main: './react' }
+            {	name: 'react', location: '../node_modules/react', main: './react' },
+            { name: 'classnames', location: '../node_modules/classnames', main: './index' }
           ],
           include: ["almond", "react-bootstrap"],
           exclude: ["react"],

diff --git a/docs/build.js b/docs/build.js
@@ -2,12 +2,22 @@
 
 var fs = require('fs');
 var path = require('path');
-var nodejsx = require('node-jsx').install();
+
+require('node-jsx').install();
+
+var React = require('react');
+var routes = require('./src/Routes');
+var Router = require('react-router');
+
 var Root = require('./src/Root');
 
 Root.getPages()
   .forEach(function (fileName) {
-    var RootHTML = Root.renderToString({initialPath: fileName});
 
-    fs.writeFileSync(path.join(__dirname, fileName), RootHTML);
+    Router.run(routes, '/' + fileName, function (Handler) {
+      var RootHTML = React.renderToString(React.createElement(Handler));
+
+      fs.writeFileSync(
+        path.join(__dirname, fileName), RootHTML);
+    })
   });
diff --git a/docs/client.js b/docs/client.js
@@ -1,9 +1,15 @@
 'use strict';
 
 var React = require('react');
-var Root = require('./src/Root');
+var Router = require('react-router');
+var routes = require('./src/Routes');
 
 // For React devtools
 window.React = React;
 
-React.render(React.createFactory(Root)(window.INITIAL_PROPS), document);
+Router.run(routes, Router.RefreshLocation, function (Handler) {
+  React.render(
+    React.createElement(Handler, window.INITIAL_PROPS), document);
+})
+
+
diff --git a/docs/server.js b/docs/server.js
@@ -2,25 +2,34 @@
 
 var express = require('express');
 
+
 var development = process.env.NODE_ENV !== 'production';
 var app = express();
 
 if (development) {
+  var React = require('react');
   var path = require('path');
   var url = require('url');
   var browserify = require('connect-browserify');
   var nodejsx = require('node-jsx').install();
-  var Root = require('./src/Root');
+
+  var routes = require('./src/Routes');
+  var Router = require('react-router');
 
   app = app
     .get('/assets/bundle.js', browserify('./client', {debug: true, watch: false}))
     .use('/assets', express.static(path.join(__dirname, 'assets')))
     .use('/vendor', express.static(path.join(__dirname, 'vendor')))
     .use(function renderApp(req, res) {
       var fileName = url.parse(req.url).pathname;
-      var RootHTML = Root.renderToString({initialPath: fileName});
 
-      res.send(RootHTML);
+      Router.run(routes, req.url, function (Handler) {
+        var RootHTML = React.renderToString(React.createElement(Handler));
+
+        res.send(RootHTML);
+      })
+
+
     });
 } else {
   app = app

diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
@@ -1,19 +1,20 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
+var Router = require('react-router');
 var Navbar = require('../../lib/Navbar');
 var Nav = require('../../lib/Nav');
 
+
 var InternalLink = Router.Link;
 
 var NAV_LINKS = {
   'getting-started': {
-    link: '/getting-started.html',
+    link: 'getting-started',
     title: 'Getting started'
   },
   'components': {
-    link: '/components.html',
+    link: 'components',
     title: 'Components'
   }
 };
@@ -24,7 +25,7 @@ var NavMain = React.createClass({
   },
 
   render: function () {
-    var brand = <InternalLink href="/" className="navbar-brand">React Bootstrap</InternalLink>;
+    var brand = <InternalLink to='home' className="navbar-brand">React Bootstrap</InternalLink>;
 
     return (
       <Navbar componentClass='header' brand={brand} staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
@@ -40,7 +41,7 @@ var NavMain = React.createClass({
 
     return (
         <li className={this.props.activePage === linkName ? 'active' : null} key={linkName}>
-          <InternalLink href={link.link}>{link.title}</InternalLink>
+          <InternalLink to={link.link}>{link.title}</InternalLink>
         </li>
       );
   }

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
@@ -1,5 +1,5 @@
 var React = require('react');
-var classSet = require('react/lib/cx');
+var classSet = require('classnames');
 var CodeMirror = global.CodeMirror;
 var JSXTransformer = global.JSXTransformer;
 var Accordion = require('../../lib/Accordion');

diff --git a/docs/src/Root.js b/docs/src/Root.js
@@ -1,30 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Router = require('react-router-component');
-
-var HomePage = React.createFactory(require('./HomePage'));
-var GettingStartedPage = React.createFactory(require('./GettingStartedPage'));
-var ComponentsPage = React.createFactory(require('./ComponentsPage'));
-var NotFoundPage = React.createFactory(require('./NotFoundPage'));
-
-var Locations = Router.Locations;
-var Location = Router.Location;
-var NotFound = Router.NotFound;
-
-var PagesHolder = React.createClass({
-  render: function () {
-    return (
-        <Locations contextual>
-          <Location path="/" handler={HomePage} />
-          <Location path="/index.html" handler={HomePage} />
-          <Location path="/getting-started.html" handler={GettingStartedPage} />
-          <Location path="/components.html" handler={ComponentsPage} />
-          <NotFound handler={NotFoundPage} />
-        </Locations>
-      );
-  }
-});
+var Router = require('react-router');
 
 var Root = React.createClass({
   statics: {
@@ -110,9 +87,7 @@ var Root = React.createClass({
           <head dangerouslySetInnerHTML={head} />
 
           <body>
-            <Locations path={Root.getBaseUrl() + this.props.initialPath}>
-              <Location path={Root.getBaseUrl() + '*'} handler={React.createFactory(PagesHolder)} />
-            </Locations>
+            <Router.RouteHandler />
 
             <script dangerouslySetInnerHTML={browserInitScriptObj} />
             <script src="vendor/codemirror/codemirror.js" />
@@ -125,4 +100,5 @@ var Root = React.createClass({
   }
 });
 
+
 module.exports = Root;
diff --git a/docs/src/Routes.js b/docs/src/Routes.js
@@ -0,0 +1,21 @@
+var React = require('react');
+
+var Root = require('./Root');
+var HomePage = require('./HomePage');
+var GettingStartedPage = require('./GettingStartedPage');
+var ComponentsPage = require('./ComponentsPage');
+var NotFoundPage = require('./NotFoundPage');
+
+var Router = require('react-router');
+
+
+module.exports = (
+  <Router.Route name="app" path="/" handler={Root}>
+    <Router.DefaultRoute handler={HomePage}/>
+    <Router.NotFoundRoute handler={NotFoundPage} />
+
+    <Router.Route name='home' path="index.html" handler={HomePage} />
+    <Router.Route name='getting-started' path="getting-started.html" handler={GettingStartedPage} />
+    <Router.Route name='components' path="components.html" handler={ComponentsPage} />  
+  </Router.Route>
+)
diff --git a/ie8/index.html b/ie8/index.html
@@ -7,7 +7,7 @@
     <title>React Bootstrap IE8 test page</title>
 
     <!-- Bootstrap -->
-    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <style>
       body {
         padding: 50px 100px;

diff --git a/ie8/package.json b/ie8/package.json
@@ -3,12 +3,12 @@
     "browserify": "^4.1.11",
     "reactify": "^0.13.1",
     "envify": "^1.2.1",
-    "react": "^0.10.0",
+    "react": "^0.13.0",
     "http-server": "^0.6.1"
   },
   "scripts": {
     "postinstall": "npm run build",
     "start": "http-server -c-1",
-    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js"
+    "build": "grunt --gruntfile ../Gruntfile.js && browserify -t reactify src.js > bundle.js --harmony"
   }
 }
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
   "author": "Stephen J. Collings <stevoland@gmail.com>",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=0.12"
+    "react": ">=0.13"
   },
   "devDependencies": {
     "async": "~0.2.9",
@@ -55,12 +55,13 @@
     "karma-script-launcher": "~0.1.0",
     "karma-sinon": "^1.0.3",
     "mocha": "~1.16.2",
-    "react": "~0.12.0",
-    "react-async": "~2.0.0",
-    "react-router-component": "git://github.com/STRML/react-router-component#react-0.12",
+    "react": "0.13.0",
     "requirejs": "~2.1.9",
     "rf-changelog": "^0.4.0",
     "semver": "~2.0.7",
     "sinon": "^1.10.3"
+  },
+  "dependencies": {
+    "classnames": "^1.1.4"
   }
-}
+}
diff --git a/src/Affix.jsx b/src/Affix.jsx
@@ -1,5 +1,5 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+var classSet = require('classnames');
 var AffixMixin = require('./AffixMixin');
 var domUtils = require('./utils/domUtils');
 
@@ -13,7 +13,7 @@ var Affix = React.createClass({
   render: function () {
     var holderStyle = {top: this.state.affixPositionTop};
     return (
-      <div {...this.props} className={joinClasses(this.props.className, this.state.affixClass)} style={holderStyle}>
+      <div {...this.props} className={classSet(this.props.className, this.state.affixClass)} style={holderStyle}>
         {this.props.children}
       </div>
     );

diff --git a/src/AffixMixin.js b/src/AffixMixin.js
@@ -39,7 +39,7 @@ var AffixMixin = {
       return;
     }
 
-    DOMNode = this.getDOMNode();
+    DOMNode = React.findDOMNode(this);
     scrollHeight = document.documentElement.offsetHeight;
     scrollTop = window.pageYOffset;
     position = domUtils.getOffset(DOMNode);

diff --git a/src/Alert.jsx b/src/Alert.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 
@@ -38,7 +38,7 @@ var Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <div {...this.props} className={classSet(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>

diff --git a/src/Badge.jsx b/src/Badge.jsx
@@ -1,7 +1,7 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
+
 var ValidComponentChildren = require('./utils/ValidComponentChildren');
-var classSet = require('./utils/classSet');
+var classSet = require('classnames');
 
 var Badge = React.createClass({
   propTypes: {
@@ -22,7 +22,7 @@ var Badge = React.createClass({
     return (
       <span
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </span>
     );

diff --git a/src/Button.jsx b/src/Button.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 
 var Button = React.createClass({
@@ -52,7 +52,7 @@ var Button = React.createClass({
       <Component
         {...this.props}
         href={href}
-        className={joinClasses(this.props.className, classSet(classes))}
+        className={classSet(this.props.className, classes)}
         role="button">
         {this.props.children}
       </Component>
@@ -65,7 +65,7 @@ var Button = React.createClass({
     return (
       <Component
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </Component>
     );

diff --git a/src/ButtonGroup.jsx b/src/ButtonGroup.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -27,7 +27,7 @@ var ButtonGroup = React.createClass({
     return (
       <div
         {...this.props}
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );

diff --git a/src/ButtonToolbar.jsx b/src/ButtonToolbar.jsx
@@ -1,6 +1,6 @@
 var React = require('react');
-var joinClasses = require('./utils/joinClasses');
-var classSet = require('./utils/classSet');
+
+var classSet = require('classnames');
 var BootstrapMixin = require('./BootstrapMixin');
 var Button = require('./Button');
 
@@ -20,7 +20,7 @@ var ButtonToolbar = React.createClass({
       <div
         {...this.props}
         role="toolbar"
-        className={joinClasses(this.props.className, classSet(classes))}>
+        className={classSet(this.props.className, classes)}>
         {this.props.children}
       </div>
     );