[changed] Update for React v0.14

kyletsang · Aug 13, 2015 · 049e538 · 049e538
1 parent b8448f5
commit 049e538
Show file tree

Hide file tree

Showing 181 changed files with 814 additions and 693 deletions.
diff --git a/docs/build.js b/docs/build.js
@@ -1,15 +1,20 @@
 /* eslint no-console: 0 */
 
-import React from 'react';
+import fsp from 'fs-promise';
 import path from 'path';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import Router from 'react-router';
-import routes from './src/Routes';
+import Location from 'react-router/lib/Location';
+
 import Root from './src/Root';
-import fsp from 'fs-promise';
-import { copy } from '../tools/fs-utils';
-import { exec } from '../tools/exec';
+import routes from './src/Routes';
+
 import metadata from './generate-metadata';
 
+import {copy} from '../tools/fs-utils';
+import {exec} from '../tools/exec';
+
 const repoRoot = path.resolve(__dirname, '../');
 const docsBuilt = path.join(repoRoot, 'docs-built');
 
@@ -24,12 +29,14 @@ const readmeDest = path.join(docsBuilt, 'README.md');
  * @return {Promise} promise
  * @internal
  */
-function generateHTML(fileName, propData) {
-  return new Promise((resolve, reject) => {
+function generateHTML(fileName) {
+  return new Promise((resolve) => {
     const urlSlug = fileName === 'index.html' ? '/' : `/${fileName}`;
 
-    Router.run(routes, urlSlug, Handler => {
-      let html = React.renderToString(React.createElement(Handler, { propData }));
+    Router.run(routes, new Location(urlSlug), (error, initialState) => {
+      let html = ReactDOMServer.renderToString(
+        <Router {...initialState} />
+      );
       html = '<!doctype html>' + html;
       let write = fsp.writeFile(path.join(docsBuilt, fileName), html);
       resolve(write);
@@ -46,8 +53,10 @@ export default function BuildDocs({dev}) {
     .then(() => fsp.mkdir(docsBuilt))
     .then(metadata)
     .then(propData => {
+      Root.assetBaseUrl = '';
+      Root.propData = propData;
 
-      let pagesGenerators = Root.getPages().map( page => generateHTML(page, propData));
+      const pagesGenerators = Root.getPages().map(generateHTML);
 
       return Promise.all(pagesGenerators.concat([
         exec(`webpack --config webpack.docs.js --bail ${devOption}`),

diff --git a/docs/client.js b/docs/client.js
@@ -1,28 +1,36 @@
+import CodeMirror from 'codemirror';
+import 'codemirror/addon/runmode/runmode';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Router} from 'react-router';
+import {history} from 'react-router/lib/BrowserHistory';
+
+import Root from './src/Root';
+import routes from './src/Routes';
+
 import 'bootstrap/less/bootstrap.less';
+
 import './assets/docs.css';
 import './assets/style.css';
 
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/solarized.css';
+import './assets/CodeMirror.css';
+
 import './assets/carousel.png';
 import './assets/logo.png';
 import './assets/favicon.ico';
 import './assets/thumbnail.png';
 import './assets/thumbnaildiv.png';
 
-import 'codemirror/mode/htmlmixed/htmlmixed';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/theme/solarized.css';
-import 'codemirror/lib/codemirror.css';
-import './assets/CodeMirror.css';
-
-import React from 'react';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/runmode/runmode';
-import Router from 'react-router';
-import routes from './src/Routes';
-
 global.CodeMirror = CodeMirror;
 
-Router.run(routes, Router.RefreshLocation, Handler => {
-  React.render(
-    React.createElement(Handler, window.INITIAL_PROPS), document);
-});
+Root.assetBaseUrl = window.ASSET_BASE_URL;
+Root.propData = window.PROP_DATA;
+
+ReactDOM.render(
+  <Router history={history} children={routes} />,
+  document
+);
diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -6,6 +6,7 @@
   "globals": {
     "mountNode",
     "React",
+    "ReactDOM",
     "classNames",
     "Accordion",
     "Alert",

diff --git a/docs/examples/AlertAutoDismissable.js b/docs/examples/AlertAutoDismissable.js
@@ -29,4 +29,4 @@ const AlertAutoDismissable = React.createClass({
   }
 });
 
-React.render(<AlertAutoDismissable />, mountNode);
+ReactDOM.render(<AlertAutoDismissable />, mountNode);
diff --git a/docs/examples/AlertBasic.js b/docs/examples/AlertBasic.js
@@ -4,4 +4,4 @@ const alertInstance = (
   </Alert>
 );
 
-React.render(alertInstance, mountNode);
+ReactDOM.render(alertInstance, mountNode);
diff --git a/docs/examples/AlertDismissable.js b/docs/examples/AlertDismissable.js
@@ -34,4 +34,4 @@ const AlertDismissable = React.createClass({
   }
 });
 
-React.render(<AlertDismissable />, mountNode);
+ReactDOM.render(<AlertDismissable />, mountNode);
diff --git a/docs/examples/Badge.js b/docs/examples/Badge.js
@@ -2,4 +2,4 @@ const badgeInstance = (
   <p>Badges <Badge>42</Badge></p>
 );
 
-React.render(badgeInstance, mountNode);
+ReactDOM.render(badgeInstance, mountNode);
diff --git a/docs/examples/ButtonActive.js b/docs/examples/ButtonActive.js
@@ -5,4 +5,4 @@ const buttonsInstance = (
   </ButtonToolbar>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/ButtonBlock.js b/docs/examples/ButtonBlock.js
@@ -7,4 +7,4 @@ const buttonsInstance = (
   </div>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/ButtonDisabled.js b/docs/examples/ButtonDisabled.js
@@ -5,4 +5,4 @@ const buttonsInstance = (
   </ButtonToolbar>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/ButtonGroupBasic.js b/docs/examples/ButtonGroupBasic.js
@@ -6,4 +6,4 @@ const buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonGroupBlock.js b/docs/examples/ButtonGroupBlock.js
@@ -5,4 +5,4 @@ const buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonGroupJustified.js b/docs/examples/ButtonGroupJustified.js
@@ -9,4 +9,4 @@ const buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonGroupNested.js b/docs/examples/ButtonGroupNested.js
@@ -9,4 +9,4 @@ const buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonGroupSizes.js b/docs/examples/ButtonGroupSizes.js
@@ -34,4 +34,4 @@ const buttonGroupInstance = (
   </div>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonGroupVertical.js b/docs/examples/ButtonGroupVertical.js
@@ -19,4 +19,4 @@ const buttonGroupInstance = (
   </ButtonGroup>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonInput.js b/docs/examples/ButtonInput.js
@@ -41,4 +41,4 @@ const ButtonInputExample = React.createClass({
   }
 });
 
-React.render(<ButtonInputExample />, mountNode);
+ReactDOM.render(<ButtonInputExample />, mountNode);
diff --git a/docs/examples/ButtonLoading.js b/docs/examples/ButtonLoading.js
@@ -29,4 +29,4 @@ const LoadingButton = React.createClass({
   }
 });
 
-React.render(<LoadingButton />, mountNode);
+ReactDOM.render(<LoadingButton />, mountNode);
diff --git a/docs/examples/ButtonSizes.js b/docs/examples/ButtonSizes.js
@@ -19,4 +19,4 @@ const buttonsInstance = (
   </div>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/ButtonTagTypes.js b/docs/examples/ButtonTagTypes.js
@@ -5,4 +5,4 @@ const buttonsInstance = (
     </ButtonToolbar>
   );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/ButtonToolbarBasic.js b/docs/examples/ButtonToolbarBasic.js
@@ -19,4 +19,4 @@ const buttonGroupInstance = (
   </ButtonToolbar>
 );
 
-React.render(buttonGroupInstance, mountNode);
+ReactDOM.render(buttonGroupInstance, mountNode);
diff --git a/docs/examples/ButtonTypes.js b/docs/examples/ButtonTypes.js
@@ -23,4 +23,4 @@ const buttonsInstance = (
   </ButtonToolbar>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/CarouselControlled.js b/docs/examples/CarouselControlled.js
@@ -43,4 +43,4 @@ const ControlledCarousel = React.createClass({
   }
 });
 
-React.render(<ControlledCarousel />, mountNode);
+ReactDOM.render(<ControlledCarousel />, mountNode);
diff --git a/docs/examples/CarouselUncontrolled.js b/docs/examples/CarouselUncontrolled.js
@@ -24,4 +24,4 @@ const carouselInstance = (
   </Carousel>
 );
 
-React.render(carouselInstance, mountNode);
+ReactDOM.render(carouselInstance, mountNode);
diff --git a/docs/examples/Collapse.js b/docs/examples/Collapse.js
@@ -25,4 +25,4 @@ class Example extends React.Component {
   }
 }
 
-React.render(<Example/>, mountNode);
+ReactDOM.render(<Example/>, mountNode);
diff --git a/docs/examples/CollapsibleNav.js b/docs/examples/CollapsibleNav.js
@@ -20,4 +20,4 @@ const navbarInstance = (
   </Navbar>
 );
 
-React.render(navbarInstance, mountNode);
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/DropdownButtonBasic.js b/docs/examples/DropdownButtonBasic.js
@@ -16,4 +16,4 @@ const buttonsInstance = (
   <ButtonToolbar>{BUTTONS.map(renderDropdownButton)}</ButtonToolbar>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/DropdownButtonNoCaret.js b/docs/examples/DropdownButtonNoCaret.js
@@ -10,4 +10,4 @@ const buttonInstance = (
   </ButtonToolbar>
 );
 
-React.render(buttonInstance, mountNode);
+ReactDOM.render(buttonInstance, mountNode);
diff --git a/docs/examples/DropdownButtonSizes.js b/docs/examples/DropdownButtonSizes.js
@@ -32,4 +32,4 @@ const buttonsInstance = (
   </div>
 );
 
-React.render(buttonsInstance, mountNode);
+ReactDOM.render(buttonsInstance, mountNode);
diff --git a/docs/examples/Fade.js b/docs/examples/Fade.js
@@ -26,4 +26,4 @@ class Example extends React.Component {
   }
 }
 
-React.render(<Example/>, mountNode);
+ReactDOM.render(<Example/>, mountNode);
diff --git a/docs/examples/Glyphicon.js b/docs/examples/Glyphicon.js
@@ -19,4 +19,4 @@ const glyphInstance = (
   </div>
 );
 
-React.render(glyphInstance, mountNode);
+ReactDOM.render(glyphInstance, mountNode);
diff --git a/docs/examples/GridBasic.js b/docs/examples/GridBasic.js
@@ -22,4 +22,4 @@ const navInstance = (
   </Grid>
 );
 
-React.render(navInstance, mountNode);
+ReactDOM.render(navInstance, mountNode);
diff --git a/docs/examples/Input.js b/docs/examples/Input.js
@@ -38,4 +38,4 @@ const ExampleInput = React.createClass({
   }
 });
 
-React.render(<ExampleInput />, mountNode);
+ReactDOM.render(<ExampleInput />, mountNode);
diff --git a/docs/examples/InputAddons.js b/docs/examples/InputAddons.js
@@ -21,4 +21,4 @@ const inputAddonsInstance = (
   </form>
 );
 
-React.render(inputAddonsInstance, mountNode);
+ReactDOM.render(inputAddonsInstance, mountNode);
diff --git a/docs/examples/InputHorizontal.js b/docs/examples/InputHorizontal.js
@@ -6,4 +6,4 @@ const inputHorizontalInstance = (
   </form>
 );
 
-React.render(inputHorizontalInstance, mountNode);
+ReactDOM.render(inputHorizontalInstance, mountNode);
diff --git a/docs/examples/InputSizes.js b/docs/examples/InputSizes.js
@@ -6,4 +6,4 @@ const inputSizeInstance = (
   </form>
 );
 
-React.render(inputSizeInstance, mountNode);
+ReactDOM.render(inputSizeInstance, mountNode);
diff --git a/docs/examples/InputTypes.js b/docs/examples/InputTypes.js
@@ -21,4 +21,4 @@ const inputTypeInstance = (
   </form>
 );
 
-React.render(inputTypeInstance, mountNode);
+ReactDOM.render(inputTypeInstance, mountNode);
diff --git a/docs/examples/InputValidation.js b/docs/examples/InputValidation.js
@@ -6,4 +6,4 @@ const inputValidationInstance = (
   </form>
 );
 
-React.render(inputValidationInstance, mountNode);
+ReactDOM.render(inputValidationInstance, mountNode);
diff --git a/docs/examples/InputWrapper.js b/docs/examples/InputWrapper.js
@@ -11,4 +11,4 @@ const inputWrapperInstance = (
   </Input>
 );
 
-React.render(inputWrapperInstance, mountNode);
+ReactDOM.render(inputWrapperInstance, mountNode);
diff --git a/docs/examples/Jumbotron.js b/docs/examples/Jumbotron.js
@@ -6,4 +6,4 @@ const jumbotronInstance = (
   </Jumbotron>
 );
 
-React.render(jumbotronInstance, mountNode);
+ReactDOM.render(jumbotronInstance, mountNode);
diff --git a/docs/examples/Label.js b/docs/examples/Label.js
@@ -9,4 +9,4 @@ const labelInstance = (
   </div>
 );
 
-React.render(labelInstance, mountNode);
+ReactDOM.render(labelInstance, mountNode);
diff --git a/docs/examples/LabelVariations.js b/docs/examples/LabelVariations.js
@@ -9,4 +9,4 @@ const labelVariationInstance = (
   </div>
 );
 
-React.render(labelVariationInstance, mountNode);
+ReactDOM.render(labelVariationInstance, mountNode);
diff --git a/docs/examples/ListGroupActive.js b/docs/examples/ListGroupActive.js
@@ -6,4 +6,4 @@ const listgroupInstance = (
   </ListGroup>
 );
 
-React.render(listgroupInstance, mountNode);
+ReactDOM.render(listgroupInstance, mountNode);
diff --git a/docs/examples/ListGroupDefault.js b/docs/examples/ListGroupDefault.js
@@ -6,4 +6,4 @@ const listgroupInstance = (
   </ListGroup>
 );
 
-React.render(listgroupInstance, mountNode);
+ReactDOM.render(listgroupInstance, mountNode);
diff --git a/docs/examples/ListGroupHeader.js b/docs/examples/ListGroupHeader.js
@@ -6,4 +6,4 @@ const listgroupInstance = (
   </ListGroup>
 );
 
-React.render(listgroupInstance, mountNode);
+ReactDOM.render(listgroupInstance, mountNode);
diff --git a/docs/examples/ListGroupLinked.js b/docs/examples/ListGroupLinked.js
@@ -6,4 +6,4 @@ const listgroupInstance = (
   </ListGroup>
 );
 
-React.render(listgroupInstance, mountNode);
+ReactDOM.render(listgroupInstance, mountNode);
diff --git a/docs/examples/ListGroupStyle.js b/docs/examples/ListGroupStyle.js
@@ -7,4 +7,4 @@ const listgroupInstance = (
   </ListGroup>
 );
 
-React.render(listgroupInstance, mountNode);
+ReactDOM.render(listgroupInstance, mountNode);
diff --git a/docs/examples/MenuItem.js b/docs/examples/MenuItem.js
@@ -23,4 +23,4 @@ const MenuItems = (
   </div>
 );
 
-React.render(MenuItems, mountNode);
+ReactDOM.render(MenuItems, mountNode);
diff --git a/docs/examples/Modal.js b/docs/examples/Modal.js
@@ -64,4 +64,4 @@ const Example = React.createClass({
   }
 });
 
-React.render(<Example/>, mountNode);
+ReactDOM.render(<Example/>, mountNode);
diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js
@@ -48,4 +48,4 @@ const Trigger = React.createClass({
   }
 });
 
-React.render(<Trigger />, mountNode);
+ReactDOM.render(<Trigger />, mountNode);