From 18ac25e853e763fee24e8a3e1e0a5ecabfebfa51 Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Mon, 10 Apr 2017 12:53:52 +1000 Subject: [PATCH 1/3] Use and packages to prevent React v15.5.0 and up from complaining about deprecated API's. --- index.js | 6 ++++-- package.json | 2 ++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 857a506..42c6617 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,8 @@ 'use strict'; var React = require('react'), + PropTypes = require('prop-types'), + createReactClass = require('create-react-class'), withSideEffect = require('react-side-effect'); function reducePropsToState(propsList) { @@ -17,11 +19,11 @@ function handleStateChangeOnClient(title) { } } -var DocumentTitle = React.createClass({ +var DocumentTitle = createReactClass({ displayName: 'DocumentTitle', propTypes: { - title: React.PropTypes.string.isRequired + title: PropTypes.string.isRequired }, render: function render() { diff --git a/package.json b/package.json index 7926dac..649cd61 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,8 @@ "react": "^0.13.0" }, "dependencies": { + "create-react-class": "^15.5.1", + "prop-types": "^15.5.6", "react-side-effect": "^1.0.2" } } From aa6e0483a7360985905b449044eb026a1abbc44e Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 12 Apr 2017 11:45:55 +1000 Subject: [PATCH 2/3] Define DocumentTitle in a prototypal way, elimenating the dependency on --- index.js | 25 ++++++++++++------------- package.json | 1 - 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/index.js b/index.js index 42c6617..d25e416 100644 --- a/index.js +++ b/index.js @@ -2,7 +2,6 @@ var React = require('react'), PropTypes = require('prop-types'), - createReactClass = require('create-react-class'), withSideEffect = require('react-side-effect'); function reducePropsToState(propsList) { @@ -19,21 +18,21 @@ function handleStateChangeOnClient(title) { } } -var DocumentTitle = createReactClass({ - displayName: 'DocumentTitle', +function DocumentTitle() {} +DocumentTitle.prototype = Object.create(React.Component.prototype); - propTypes: { - title: PropTypes.string.isRequired - }, +DocumentTitle.displayName = 'DocumentTitle'; +DocumentTitle.propTypes = { + title: PropTypes.string.isRequired +}; - render: function render() { - if (this.props.children) { - return React.Children.only(this.props.children); - } else { - return null; - } +DocumentTitle.prototype.render = function() { + if (this.props.children) { + return React.Children.only(this.props.children); + } else { + return null; } -}); +}; module.exports = withSideEffect( reducePropsToState, diff --git a/package.json b/package.json index 649cd61..bdd002f 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "react": "^0.13.0" }, "dependencies": { - "create-react-class": "^15.5.1", "prop-types": "^15.5.6", "react-side-effect": "^1.0.2" } From f695234c811d9a33dd54faf8ceeead47e85c38de Mon Sep 17 00:00:00 2001 From: Jaap Rood Date: Wed, 12 Apr 2017 11:49:50 +1000 Subject: [PATCH 3/3] Use create-react-class for the components created in testing --- package.json | 1 + test/browser.js | 7 ++++--- test/common.js | 9 +++++---- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index bdd002f..f10c19c 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "homepage": "https://github.com/gaearon/react-document-title", "devDependencies": { + "create-react-class": "^15.5.2", "expect.js": "^0.3.1", "global": "^4.3.0", "jshint": "^2.5.6", diff --git a/test/browser.js b/test/browser.js index 5c4aa7e..2f0a9c1 100644 --- a/test/browser.js +++ b/test/browser.js @@ -3,6 +3,7 @@ 'use strict'; var expect = require('expect.js'), React = require('react'), + createReactClass = require('create-react-class'), DocumentTitle = require('../'); describe('DocumentTitle (in a browser)', function () { @@ -27,7 +28,7 @@ describe('DocumentTitle (in a browser)', function () { }); it('changes the document title on mount', function (done) { var title = 'hello world'; - var Component = React.createClass({ + var Component = createReactClass({ componentDidMount: function () { expect(global.document.title).to.equal(title); done(); @@ -41,7 +42,7 @@ describe('DocumentTitle (in a browser)', function () { it('supports nesting', function (done) { var called = false; var title = 'hello world'; - var Component1 = React.createClass({ + var Component1 = createReactClass({ componentDidMount: function () { setTimeout(function () { expect(called).to.be(true); @@ -53,7 +54,7 @@ describe('DocumentTitle (in a browser)', function () { return React.createElement(DocumentTitle, {title: title}); } }); - var Component2 = React.createClass({ + var Component2 = createReactClass({ componentDidMount: function () { called = true; }, diff --git a/test/common.js b/test/common.js index e3ec319..c4aa3cc 100644 --- a/test/common.js +++ b/test/common.js @@ -3,6 +3,7 @@ 'use strict'; var expect = require('expect.js'), React = require('react'), + createReactClass = require('create-react-class'), DocumentTitle = require('../'); describe('DocumentTitle', function () { @@ -17,7 +18,7 @@ describe('DocumentTitle', function () { expect(el.type.displayName).to.equal('SideEffect(DocumentTitle)'); }); it('hides itself from the DOM', function () { - var Component = React.createClass({ + var Component = createReactClass({ render: function () { return React.createElement(DocumentTitle, {title: 'irrelevant'}, React.createElement('div', null, 'hello') @@ -28,7 +29,7 @@ describe('DocumentTitle', function () { expect(markup).to.equal('
hello
'); }); it('throws an error if it has multiple children', function (done) { - var Component = React.createClass({ + var Component = createReactClass({ render: function () { return React.createElement(DocumentTitle, {title: 'irrelevant'}, React.createElement('div', null, 'hello'), @@ -44,7 +45,7 @@ describe('DocumentTitle', function () { }); }); it('works with complex children', function () { - var Component1 = React.createClass({ + var Component1 = createReactClass({ render: function() { return React.createElement('p', null, React.createElement('span', null, 'c'), @@ -52,7 +53,7 @@ describe('DocumentTitle', function () { ); } }); - var Component2 = React.createClass({ + var Component2 = createReactClass({ render: function () { return React.createElement(DocumentTitle, {title: 'irrelevant'}, React.createElement('div', null,