[change] React 0.14 support

README.md

@@ -4,7 +4,7 @@
 [![npm version][npm-image]][npm-url]
 
 [React Native][react-native-url] components and APIs for the Web.
-~19 KB minified and gzipped.
+~17.7 KB minified and gzipped.
 
 * [Slack: reactiflux channel #react-native-web][slack-url]
 * [Gitter: react-native-web][gitter-url]
@@ -23,7 +23,7 @@
 ## Install
 
 ```
-npm install --save react react-native-web
+npm install --save react react-dom react-native-web
 ```
 
 ## Example

config/webpack.config.publish.js

@@ -7,7 +7,8 @@ module.exports = assign({}, base, {
     main: constants.SRC_DIRECTORY
   },
   externals: [{
-    react: true
+    'react': true,
+    'react-dom': true
   }],
   output: {
     filename: 'react-native-web.js',

package.json

@@ -17,9 +17,8 @@
   },
   "dependencies": {
     "inline-style-prefixer": "^0.3.3",
-    "react": ">=0.13.3",
-    "react-tappable": "^0.6.0",
-    "react-textarea-autosize": "^2.5.3"
+    "react-tappable": "^0.7.1",
+    "react-textarea-autosize": "^3.0.0"
   },
   "devDependencies": {
     "babel-core": "^5.8.23",
@@ -42,6 +41,9 @@
     "mocha": "^2.3.0",
     "node-libs-browser": "^0.5.2",
     "object-assign": "^4.0.1",
+    "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0",
+    "react-dom": "^0.14.0",
     "webpack": "^1.12.1",
     "webpack-dev-server": "^1.10.1"
   },

src/components/Image/__tests__/index-test.js

@@ -2,7 +2,7 @@
 
 import { assertProps, render, renderToDOM } from '../../../modules/specHelpers'
 import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
 
 import Image from '../'
 

src/components/ListView/__tests__/index-test.js

@@ -1,20 +1 @@
 /* eslint-env mocha */
-
-/*
-import assert from 'assert'
-import React from 'react/addons'
-
-import ListView from '../'
-
-const ReactTestUtils = React.addons.TestUtils
-
-function shallowRender(component, context = {}) {
-  const shallowRenderer = React.addons.TestUtils.createRenderer()
-  shallowRenderer.render(component, context)
-  return shallowRenderer.getRenderOutput()
-}
-
-suite.skip('ListView', () => {
-  test('prop "children"', () => {})
-})
-*/

src/components/ScrollView/__tests__/index-test.js

@@ -1,15 +1 @@
 /* eslint-env mocha */
-
-/*
-import { assertProps, renderToDOM, shallowRender } from '../../../modules/specHelpers'
-import assert from 'assert'
-import React from 'react/addons'
-
-import ScrollView from '.'
-
-const ReactTestUtils = React.addons.TestUtils
-
-suite.skip('ScrollView', () => {
-  test('prop "children"', () => {})
-})
-*/

src/components/Text/__tests__/index-test.js

@@ -2,12 +2,11 @@
 
 import { assertProps, renderToDOM, shallowRender } from '../../../modules/specHelpers'
 import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
+import ReactTestUtils from 'react-addons-test-utils'
 
 import Text from '../'
 
-const ReactTestUtils = React.addons.TestUtils
-
 suite('components/Text', () => {
   test('prop "accessibilityLabel"', () => {
     assertProps.accessibilityLabel(Text)

src/components/TextInput/__tests__/index-test.js

@@ -2,12 +2,11 @@
 
 import * as utils from '../../../modules/specHelpers'
 import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
+import ReactTestUtils from 'react-addons-test-utils'
 
 import TextInput from '../'
 
-const ReactTestUtils = React.addons.TestUtils
-
 suite('components/TextInput', () => {
   test('prop "accessibilityLabel"', () => {
     utils.assertProps.accessibilityLabel(TextInput)

src/components/TextInput/index.js

@@ -1,6 +1,7 @@
 import { pickProps } from '../../modules/filterObjectProps'
 import CoreComponent from '../CoreComponent'
 import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
 import StyleSheet from '../../modules/StyleSheet'
 import TextareaAutosize from 'react-textarea-autosize'
 import TextInputStylePropTypes from './TextInputStylePropTypes'
@@ -71,7 +72,7 @@ class TextInput extends React.Component {
 
   _onFocus(e) {
     const { clearTextOnFocus, onFocus, selectTextOnFocus } = this.props
-    const node = React.findDOMNode(this)
+    const node = ReactDOM.findDOMNode(this)
     if (clearTextOnFocus) node.value = ''
     if (selectTextOnFocus) node.select()
     if (onFocus) onFocus(e)
@@ -168,9 +169,10 @@ class TextInput extends React.Component {
       type
     }
 
-    return (multiline
-      ? <CoreComponent {...propsMultiline} />
-      : <CoreComponent {...propsSingleline} />
+    const props = multiline ? propsMultiline : propsSingleline
+
+    return (
+      <CoreComponent {...props} />
     )
   }
 }

src/components/Touchable/__tests__/index-test.js

@@ -2,7 +2,7 @@
 
 import { assertProps, shallowRender } from '../../../modules/specHelpers'
 import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
 
 import Touchable from '../'
 

src/components/View/__tests__/index-test.js

@@ -2,7 +2,7 @@
 
 import { assertProps, shallowRender } from '../../../modules/specHelpers'
 import assert from 'assert'
-import React from 'react/addons'
+import React from 'react'
 
 import View from '../'
 

src/example.js

@@ -1,31 +1,13 @@
 import React, { Image, StyleSheet, Text, TextInput, Touchable, View } from '.'
+import ReactDOM from 'react-dom'
 
-const { Component, PropTypes } = React
-
-class Heading extends React.Component {
-  static propTypes = {
-    children: PropTypes.any,
-    level: PropTypes.string,
-    size: PropTypes.string
-  }
-
-  static defaultProps = {
-    level: '1',
-    size: 'normal'
-  }
-
-  render() {
-    const { children, level, size } = this.props
-
-    return (
-      <Text
-        children={children}
-        component={`h${level}`}
-        style={headingStyles.size[size]}
-      />
-    )
-  }
-}
+const Heading = ({ children, level = '1', size = 'normal' }) => (
+  <Text
+    children={children}
+    component={`h${level}`}
+    style={headingStyles.size[size]}
+  />
+)
 
 const headingStyles = StyleSheet.create({
   size: {
@@ -46,7 +28,7 @@ const headingStyles = StyleSheet.create({
   }
 })
 
-class Example extends Component {
+class Example extends React.Component {
   static propTypes = {
     style: View.propTypes.style
   }
@@ -124,7 +106,7 @@ class Example extends Component {
         <TextInput keyboardType='email-address' />
         <TextInput keyboardType='numeric' />
         <TextInput keyboardType='phone-pad' />
-        <TextInput keyboardType='url' />
+        <TextInput keyboardType='url' selectTextOnFocus />
         <TextInput
           defaultValue='default value'
           maxNumberOfLines={10}
@@ -223,6 +205,6 @@ const styles = StyleSheet.create({
   }
 })
 
-React.render(<Example />, document.getElementById('react-root'))
+ReactDOM.render(<Example />, document.getElementById('react-root'))
 
 document.getElementById('react-stylesheet').textContent = StyleSheet.renderToString()

src/modules/specHelpers/index.js

@@ -1,9 +1,9 @@
 /* eslint-env mocha */
 
 import assert from 'assert'
-import React from 'react/addons'
-
-const ReactTestUtils = React.addons.TestUtils
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ReactTestUtils from 'react-addons-test-utils'
 
 export const assertProps = {
   accessibilityLabel: function (Component, props) {
@@ -82,7 +82,7 @@ export const assertProps = {
 
 export function render(element, container) {
   return container
-    ? React.render(element, container)
+    ? ReactDOM.render(element, container)
     : ReactTestUtils.renderIntoDocument(element)
 }
 
@@ -99,16 +99,16 @@ export function renderAndInject(element) {
   }
 
   const result = render(element, div)
-  return React.findDOMNode(result)
+  return ReactDOM.findDOMNode(result)
 }
 
 export function renderToDOM(element, container) {
   const result = render(element, container)
-  return React.findDOMNode(result)
+  return ReactDOM.findDOMNode(result)
 }
 
 export function shallowRender(component, context = {}) {
-  const shallowRenderer = React.addons.TestUtils.createRenderer()
+  const shallowRenderer = ReactTestUtils.createRenderer()
   shallowRenderer.render(component, context)
   return shallowRenderer.getRenderOutput()
 }