diff --git a/README.md b/README.md index 8b2e2664..fa7217c2 100644 --- a/README.md +++ b/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 diff --git a/config/webpack.config.publish.js b/config/webpack.config.publish.js index 601da79a..df4c5a54 100644 --- a/config/webpack.config.publish.js +++ b/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', diff --git a/package.json b/package.json index 90d4ec45..2e9b68be 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/Image/__tests__/index-test.js b/src/components/Image/__tests__/index-test.js index 505e9b77..49440021 100644 --- a/src/components/Image/__tests__/index-test.js +++ b/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 '../' diff --git a/src/components/ListView/__tests__/index-test.js b/src/components/ListView/__tests__/index-test.js index 0fe4a477..38743c8e 100644 --- a/src/components/ListView/__tests__/index-test.js +++ b/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"', () => {}) -}) -*/ diff --git a/src/components/ScrollView/__tests__/index-test.js b/src/components/ScrollView/__tests__/index-test.js index 6052bbea..38743c8e 100644 --- a/src/components/ScrollView/__tests__/index-test.js +++ b/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"', () => {}) -}) -*/ diff --git a/src/components/Text/__tests__/index-test.js b/src/components/Text/__tests__/index-test.js index 8a83a8a8..d864a077 100644 --- a/src/components/Text/__tests__/index-test.js +++ b/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) diff --git a/src/components/TextInput/__tests__/index-test.js b/src/components/TextInput/__tests__/index-test.js index 345646a6..b5e6baf9 100644 --- a/src/components/TextInput/__tests__/index-test.js +++ b/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) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index 6c513959..23a31b06 100644 --- a/src/components/TextInput/index.js +++ b/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 - ? - : + const props = multiline ? propsMultiline : propsSingleline + + return ( + ) } } diff --git a/src/components/Touchable/__tests__/index-test.js b/src/components/Touchable/__tests__/index-test.js index 73172553..aa0660e8 100644 --- a/src/components/Touchable/__tests__/index-test.js +++ b/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 '../' diff --git a/src/components/View/__tests__/index-test.js b/src/components/View/__tests__/index-test.js index 2c752501..0df61f4f 100644 --- a/src/components/View/__tests__/index-test.js +++ b/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 '../' diff --git a/src/example.js b/src/example.js index 7710c3b8..3fd7bd7c 100644 --- a/src/example.js +++ b/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 ( - - ) - } -} +const Heading = ({ children, level = '1', size = 'normal' }) => ( + +) 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 { - + , document.getElementById('react-root')) +ReactDOM.render(, document.getElementById('react-root')) document.getElementById('react-stylesheet').textContent = StyleSheet.renderToString() diff --git a/src/modules/specHelpers/index.js b/src/modules/specHelpers/index.js index 80059ec8..128a9ded 100644 --- a/src/modules/specHelpers/index.js +++ b/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() }