From f5ef33dee77f8ae7934f321aa7d975b5f95e1264 Mon Sep 17 00:00:00 2001 From: Joe Critchley Date: Fri, 29 Jan 2016 15:44:34 +0000 Subject: [PATCH] Migration from React v0.13 to v0.14 --- frontend/js/download/Detect.js | 9 +++++---- frontend/js/download/DetectList.js | 8 ++++---- frontend/js/download/DownloadOverlay.js | 7 +++---- frontend/js/download/DownloadOverlayOption.js | 8 ++++---- frontend/js/download/DownloadUI.js | 4 ++-- frontend/js/download/LeftColumn.js | 4 ++-- frontend/js/download/Metadata.js | 4 ++-- frontend/js/download/MetadataDocs.js | 4 ++-- frontend/js/download/MetadataList.js | 4 ++-- frontend/js/download/MetadataNotes.js | 4 ++-- frontend/js/download/MetadataPolyfills.js | 4 ++-- frontend/js/download/Option.js | 7 ++++--- frontend/js/download/SVGToggle.js | 4 ++-- frontend/js/download/SearchHeader.js | 6 +++--- frontend/js/download/index.js | 5 +++-- gulpfile.js | 4 ++-- package.json | 4 +++- server/buildSteps/download.js | 3 ++- 18 files changed, 49 insertions(+), 44 deletions(-) diff --git a/frontend/js/download/Detect.js b/frontend/js/download/Detect.js index 0abf010..341fd2d 100644 --- a/frontend/js/download/Detect.js +++ b/frontend/js/download/Detect.js @@ -1,5 +1,6 @@ 'use strict'; -var React = require('react/addons'); +var React = require('react'); +var ReactDOM = require('react-dom'); var Option = React.createFactory(require('./Option')); var cx = require('classnames'); @@ -56,7 +57,7 @@ var Detect = React.createClass({ var windowTop = window.pageYOffset; var windowBottom = windowTop + windowHeight; - var node = this.getDOMNode(); + var node = ReactDOM.findDOMNode(this); var nodeTop = node.offsetTop; var nodeBottom = nodeTop + node.offsetHeight; var offset; @@ -84,7 +85,7 @@ var Detect = React.createClass({ mouseDown: function(e) { var props = this.props; - var metadataPane = this.refs.option.refs.metadata.getDOMNode(); + var metadataPane = ReactDOM.findDOMNode(this.refs.option.refs.metadata); if (metadataPane.contains(e.target) && !this.state.clickFocused) { this.setState({clickFocused: true}); } @@ -94,7 +95,7 @@ var Detect = React.createClass({ blur: function(e) { if (this.state.clickFocused) { this.setState({clickFocused: false}); - this.refs.option.refs.input.getDOMNode().focus(); + this.refs.option.refs.input.focus(); return e.preventDefault(); } diff --git a/frontend/js/download/DetectList.js b/frontend/js/download/DetectList.js index 7cf195d..83da61b 100644 --- a/frontend/js/download/DetectList.js +++ b/frontend/js/download/DetectList.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var Detect = React.createFactory(require('./Detect')); var DOM = React.DOM, ul = DOM.ul, li = DOM.li; var cx = require('classnames'); @@ -24,8 +24,8 @@ var DetectList = React.createClass({ var nextRef = Math.max(0, Math.min(currentIndex + offset, this.props.detects.length)); if (nextRef !== currentIndex) { - this.refs[currentIndex].refs.option.refs.input.getDOMNode().blur(); - this.refs[nextRef].refs.option.refs.input.getDOMNode().focus(); + this.refs[currentIndex].refs.option.refs.input.blur(); + this.refs[nextRef].refs.option.refs.input.focus(); } e.preventDefault(); } diff --git a/frontend/js/download/DownloadOverlay.js b/frontend/js/download/DownloadOverlay.js index d57e935..0490a15 100644 --- a/frontend/js/download/DownloadOverlay.js +++ b/frontend/js/download/DownloadOverlay.js @@ -1,7 +1,7 @@ /*globals Modernizr*/ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var DownloadOverlayOption = React.createFactory(require('./DownloadOverlayOption')); var gruntify = require('./util').gruntify; var DOM = React.DOM, div = DOM.div, form = DOM.form, button = DOM.button, input = DOM.input, ul = DOM.ul, li = DOM.li; @@ -83,8 +83,7 @@ var DownloadOverlay = React.createClass({ }, toggleOverlay: function(e) { - var container = this.refs.container.getDOMNode(); - if (!container.contains(e.target)) { + if (!this.refs.container.contains(e.target)) { this.props.toggle(false); } }, diff --git a/frontend/js/download/DownloadOverlayOption.js b/frontend/js/download/DownloadOverlayOption.js index 420dd3b..36e0139 100644 --- a/frontend/js/download/DownloadOverlayOption.js +++ b/frontend/js/download/DownloadOverlayOption.js @@ -1,7 +1,7 @@ /*globals ZeroClipboard, Modernizr*/ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var DOM = React.DOM, textarea = DOM.textarea, a = DOM.a, li = DOM.li, label = DOM.label, button = DOM.button, span=DOM.span; var DownloadOverlayOption = React.createClass({ @@ -19,7 +19,7 @@ var DownloadOverlayOption = React.createClass({ var state = this.state; var props = this.props; if (state.hasFlash) { - var zeroClipboard = new ZeroClipboard(this.refs[props.title].getDOMNode()); + var zeroClipboard = new ZeroClipboard(this.refs[props.title]); ZeroClipboard.on('error', function() { Modernizr.flash = false; self.setState({hasFlash: false}); @@ -77,7 +77,7 @@ var DownloadOverlayOption = React.createClass({ componentDidUpdate: function() { this.setupClipboard(); var textarea = this.refs.textarea; - textarea && textarea.getDOMNode().select(); + textarea && textarea.select(); }, clickDownload: function() { diff --git a/frontend/js/download/DownloadUI.js b/frontend/js/download/DownloadUI.js index 53ae296..2ca3fbd 100644 --- a/frontend/js/download/DownloadUI.js +++ b/frontend/js/download/DownloadUI.js @@ -1,5 +1,5 @@ 'use strict'; -var React = require('react/addons'); +var React = require('react'); var DetectList = React.createFactory(require('./DetectList')); var LeftColumn = React.createFactory(require('./LeftColumn')); var SearchHeader = React.createFactory(require('./SearchHeader')); @@ -80,7 +80,7 @@ var DownloadUI = React.createClass({ focusFirst: function() { var topDetect = this.refs.detectList.refs[0]; if (topDetect) { - topDetect.refs.option.refs.input.getDOMNode().focus(); + topDetect.refs.option.refs.input.focus(); } }, diff --git a/frontend/js/download/LeftColumn.js b/frontend/js/download/LeftColumn.js index 960d782..1acbe96 100644 --- a/frontend/js/download/LeftColumn.js +++ b/frontend/js/download/LeftColumn.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var Option = React.createFactory(require('./Option')); var util = require('./util'); var cx = require('classnames'); diff --git a/frontend/js/download/Metadata.js b/frontend/js/download/Metadata.js index 1345fbd..fdd757a 100644 --- a/frontend/js/download/Metadata.js +++ b/frontend/js/download/Metadata.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var MetadataDocs = React.createFactory(require('./MetadataDocs')); var MetadataList = React.createFactory(require('./MetadataList')); var MetadataNotes = React.createFactory(require('./MetadataNotes')); diff --git a/frontend/js/download/MetadataDocs.js b/frontend/js/download/MetadataDocs.js index 01729ed..5581d18 100644 --- a/frontend/js/download/MetadataDocs.js +++ b/frontend/js/download/MetadataDocs.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var DOM = React.DOM, div = DOM.div; var MetadataDocs = React.createClass({ mixins: [PureRenderMixin], diff --git a/frontend/js/download/MetadataList.js b/frontend/js/download/MetadataList.js index 8053ff1..2e63c67 100644 --- a/frontend/js/download/MetadataList.js +++ b/frontend/js/download/MetadataList.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var util = require('./util'); var pluralize = util.pluralize; var DOM = React.DOM, div = DOM.div, ul = DOM.ul, li = DOM.li; diff --git a/frontend/js/download/MetadataNotes.js b/frontend/js/download/MetadataNotes.js index 3e4297c..7fe2729 100644 --- a/frontend/js/download/MetadataNotes.js +++ b/frontend/js/download/MetadataNotes.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var DOM = React.DOM, div = DOM.div, a = DOM.a; var MetadataNotes = React.createClass({ mixins: [PureRenderMixin], diff --git a/frontend/js/download/MetadataPolyfills.js b/frontend/js/download/MetadataPolyfills.js index 55691a2..2088143 100644 --- a/frontend/js/download/MetadataPolyfills.js +++ b/frontend/js/download/MetadataPolyfills.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var util = require('./util'); var listify = util.listify; var DOM = React.DOM, div = DOM.div, ul = DOM.ul, li = DOM.li, a = DOM.a; diff --git a/frontend/js/download/Option.js b/frontend/js/download/Option.js index 87e0650..80d922e 100644 --- a/frontend/js/download/Option.js +++ b/frontend/js/download/Option.js @@ -1,5 +1,6 @@ 'use strict'; -var React = require('react/addons'); +var React = require('react'); +var ReactDOM = require('react-dom'); var SVGToggle = React.createFactory(require('./SVGToggle')); var Metadata = React.createFactory(require('./Metadata')); var DOM = React.DOM, div = DOM.div, input = DOM.input, label = DOM.label; @@ -49,7 +50,7 @@ var Option = React.createClass({ keyDown: function(e) { if (e.which === 13) { - var input = this.refs.input.getDOMNode(); + var input = this.refs.input; input.checked = !input.checked; this.change(); e.preventDefault(); @@ -58,7 +59,7 @@ var Option = React.createClass({ click: function(e) { var props = this.props; - var toggle = this.refs.SVGToggle.getDOMNode(); + var toggle = ReactDOM.findDOMNode(this.refs.SVGToggle); if (props.ignoreLabelClick && !toggle.contains(e.target)) { e.preventDefault(); diff --git a/frontend/js/download/SVGToggle.js b/frontend/js/download/SVGToggle.js index 022a874..34ba764 100644 --- a/frontend/js/download/SVGToggle.js +++ b/frontend/js/download/SVGToggle.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var DOM = React.DOM, svg = DOM.svg, circle = DOM.circle, path = DOM.path; var SVGToggle = React.createClass({ diff --git a/frontend/js/download/SearchHeader.js b/frontend/js/download/SearchHeader.js index c3c8de7..08bc9d1 100644 --- a/frontend/js/download/SearchHeader.js +++ b/frontend/js/download/SearchHeader.js @@ -1,6 +1,6 @@ 'use strict'; -var React = require('react/addons'); -var PureRenderMixin = React.addons.PureRenderMixin; +var React = require('react'); +var PureRenderMixin = require('react-addons-pure-render-mixin'); var Fuse = require('fuse.js'); var DOM = React.DOM, div = DOM.div, input = DOM.input, label = DOM.label, button = DOM.button; var fuseOptions = { @@ -44,7 +44,7 @@ var SearchHeader = React.createClass({ }, change: function() { - var val = this.refs.search.getDOMNode().value; + var val = this.refs.search.value; this.props.onChange(fuse.search(val), val); }, diff --git a/frontend/js/download/index.js b/frontend/js/download/index.js index 2ea9255..cff1d86 100644 --- a/frontend/js/download/index.js +++ b/frontend/js/download/index.js @@ -1,5 +1,6 @@ 'use strict'; -var React = require('react/addons'); +var React = require('react'); +var ReactDOM = require('react-dom'); var DownloadUI = React.createFactory(require('./DownloadUI')); var currentSearch; var shouldBuild; @@ -159,7 +160,7 @@ ZeroClipboard.config({ flashLoadTimeout: 5000 }); -React.render(DownloadUI({ +ReactDOM.render(DownloadUI({ detects: window._modernizrMetadata, options: window._options, currentSearch: currentSearch, diff --git a/gulpfile.js b/gulpfile.js index 388cea2..d28c33c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -30,12 +30,12 @@ process.env.cache_time = Date.now(); gulp.task('browserify', function() { // the react lib has wonderful debugging messages, but it comes at the cost of a much // larger lib. So use the `.min` mode when building the production site to save those byte$ - var reactVersion = process.env.NODE_ENV === 'production' ? 'react/dist/react-with-addons.min' : 'react/addons'; + var reactVersion = process.env.NODE_ENV === 'production' ? 'react/dist/react.min' : 'react'; return browserify('./frontend/js/download/index.js') .transform(aliasify, { aliases: { - 'react/addons': reactVersion + 'react': reactVersion } }) .bundle() diff --git a/package.json b/package.json index a6be341..cc89ae3 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,9 @@ "he": "^0.5.0", "highlight.js": "^8.5.0", "modernizr": "^3", - "react": "^0.13.0", + "react": "^0.14.0", + "react-addons-pure-render-mixin": "^0.14.7", + "react-dom": "^0.14.0", "rss": "^1.1.1", "yaml-front-matter": "^3.2.3", "zeroclipboard": "^2.2.0" diff --git a/server/buildSteps/download.js b/server/buildSteps/download.js index 6e803ea..6635795 100644 --- a/server/buildSteps/download.js +++ b/server/buildSteps/download.js @@ -1,10 +1,11 @@ 'use strict'; var React = require('react'); var Modernizr = require('modernizr'); +var ReactDOMServer = require('react-dom/server'); var DownloadModule = require('../../frontend/js/download/DownloadUI'); var downloadFactory = React.createFactory(DownloadModule); var options = require('../util/modernizrOptions'); // render a static version of the `builder` for a faster inital render/script-less clients -module.exports = React.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options})); +module.exports = ReactDOMServer.renderToString(downloadFactory({detects:Modernizr.metadata(), options: options}));