Repository: cordova-docs Updated Branches: refs/heads/master 066b15f3b -> 43ab87355
CB-13025 Remove use of React in plugins.cordova.io Switched to Preact - uses `preact-compat` for API compatibility (tried to make the smallest changes possible) - uses `babel` via `babelify` instead of the deprecated `reactify` to transform the JSX - no longer re-renders the entire app when filtering by platforms or sorting has changed This closes #728 Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/43ab8735 Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/43ab8735 Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/43ab8735 Branch: refs/heads/master Commit: 43ab873557285a06126f6e3c92ef196ac7fb9c50 Parents: 066b15f Author: tommy-carlos williams <to...@devgeeks.org> Authored: Wed Sep 13 09:47:41 2017 +1000 Committer: Shazron Abdullah <shaz...@gmail.com> Committed: Mon Sep 18 11:43:22 2017 +0800 ---------------------------------------------------------------------- gulpfile.js | 9 +++++++-- package.json | 8 +++++--- www/static/plugins/app.js | 25 +++++++++++++++---------- www/static/plugins/platformbutton.jsx | 9 +++++---- www/static/plugins/plugin.jsx | 6 ++++-- www/static/plugins/pluginlist.jsx | 6 ++++-- www/static/plugins/searchbar.jsx | 26 +++++++++++++++++--------- www/static/plugins/sortbutton.jsx | 9 +++++---- www/static/plugins/sortdropdown.jsx | 12 +++++++----- www/static/plugins/supportedplatforms.jsx | 8 +++++--- 10 files changed, 74 insertions(+), 44 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/gulpfile.js ---------------------------------------------------------------------- diff --git a/gulpfile.js b/gulpfile.js index af1553b..2f0dbf6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -19,7 +19,7 @@ var vstream = require("vinyl-source-stream"); var buffer = require("vinyl-buffer"); var browserify = require("browserify"); -var reactify = require("reactify"); +var babelify = require("babelify"); var uglify = require("gulp-uglify"); var envify = require("envify"); var htmllint = require("gulp-htmllint"); @@ -400,7 +400,12 @@ gulp.task("plugins", function() { } var stream = browserify(PLUGINS_SRC_FILE, {debug: !gutil.env.prod}) - .transform(reactify) + .transform(babelify, { + presets: ["react"], + plugins: [ + ["transform-react-jsx", {"pragma": "h"}] + ] + }) .transform(envify) .bundle() .on("error", gutil.log) http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/package.json ---------------------------------------------------------------------- diff --git a/package.json b/package.json index 72532fd..62fac3c 100644 --- a/package.json +++ b/package.json @@ -43,10 +43,9 @@ "node-dir": "^0.1.6", "node-sass": "^3.4.1", "optimist": "^0.6.1", + "preact": "^8.2.5", + "preact-compat": "^3.17.0", "q": "^1.4.1", - "react": "^0.13.3", - "react-tools": "^0.13.3", - "reactify": "^1.1.1", "shelljs": "^0.3.0", "uglifyjs": "^2.4.10", "vinyl-buffer": "^1.0.0", @@ -55,6 +54,9 @@ "yargs": "^1.3.1" }, "devDependencies": { + "babel-plugin-transform-react-jsx": "^6.24.1", + "babel-preset-react": "^6.24.1", + "babelify": "^7.3.0", "colors": "^1.0.3", "diff": "^1.2.0", "glob": "^7.0.3", http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/app.js ---------------------------------------------------------------------- diff --git a/www/static/plugins/app.js b/www/static/plugins/app.js index 0d382c3..c94d14d 100755 --- a/www/static/plugins/app.js +++ b/www/static/plugins/app.js @@ -1,11 +1,13 @@ -var React = window.React = require('react'), // assign it to window for react chrome extension +var Preact = window.Preact = require('preact'), + h = require('preact').h, + createClass = require('preact-compat').createClass, SearchBar = require('./searchbar.jsx'), PluginList = require('./pluginlist.jsx'), PlatformButton = require('./platformbutton.jsx') App = {}, - SortDropdown = require('./sortdropdown.jsx'), - SortCriteria = require('./SortCriteria'), - ZeroClipboard = require("../js/lib/ZeroClipboard.js"); + SortDropdown = require('./sortdropdown.jsx'), + SortCriteria = require('./SortCriteria'), + ZeroClipboard = require("../js/lib/ZeroClipboard.js"); var INPUT_DELAY = 500; // in milliseconds @@ -21,7 +23,7 @@ var UrlParameters = { Platfroms: 'platforms', } -var App = React.createClass({ +var App = createClass({ getInitialState: function() { var staticFilters = []; staticFilters['platforms'] = []; @@ -71,6 +73,7 @@ var App = React.createClass({ } }, toggleCondition: function(keyword, condition) { + var state = this.state; this.setState(function(previousState, currentProps) { var conditionIndex = previousState.staticFilters[keyword].indexOf(condition); if(conditionIndex > -1) { @@ -85,11 +88,12 @@ var App = React.createClass({ return { staticFilters: previousState.staticFilters, plugins: previousState.plugins, - searchResults: App.filterPlugins(previousState.plugins, this.state.filterText, this.state.staticFilters) + searchResults: App.filterPlugins(previousState.plugins, state.filterText, state.staticFilters) }; }); }, setSort: function(sort) { + var state = this.state; this.setState(function(previousState, currentProps) { App.sortPlugins(previousState.plugins, sort) delay(function(){ @@ -97,7 +101,7 @@ var App = React.createClass({ }, INPUT_DELAY); return { plugins: previousState.plugins, - searchResults: App.filterPlugins(previousState.plugins, this.state.filterText, this.state.staticFilters), + searchResults: App.filterPlugins(previousState.plugins, state.filterText, state.staticFilters), sortCriteria: sort } }); @@ -424,10 +428,11 @@ var App = React.createClass({ } }, render: function() { + var toggleCondition = this.toggleCondition; var createPlatformButton = function(platform, keyword, state) { var active = state.staticFilters["platforms"].indexOf(keyword) > -1; return ( - <PlatformButton platform={platform} keyword={keyword} initiallyActive={active}/> + <PlatformButton platform={platform} keyword={keyword} initiallyActive={active} toggleCondition={toggleCondition}/> ); } @@ -481,7 +486,7 @@ var App = React.createClass({ </div> <div className="col-sm-3"> <div className="plugin-results-number">{this.state.searchResults.length} result(s) found</div> - <SortDropdown selected={this.state.sortCriteria} downloadsEnabled={this.state.downloadsReceived}/> + <SortDropdown setSort={this.setSort} selected={this.state.sortCriteria} downloadsEnabled={this.state.downloadsReceived}/> </div> </div> </div> @@ -495,7 +500,7 @@ var App = React.createClass({ }); App.start = function() { - React.render(<App />, document.getElementById('pluginsAppContainer')); + Preact.render(<App />, document.getElementById('pluginsAppContainer')); }; function delay(callback, ms){ http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/platformbutton.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/platformbutton.jsx b/www/static/plugins/platformbutton.jsx index 529e2eb..1ce7cda 100755 --- a/www/static/plugins/platformbutton.jsx +++ b/www/static/plugins/platformbutton.jsx @@ -1,14 +1,15 @@ -var React = require('react'); +var Preact = require('preact'); +var h = require('preact').h; +var createClass = require('preact-compat').createClass; -var PlatformButton = React.createClass({ +var PlatformButton = createClass({ getInitialState: function() { return { isActive: this.props.initiallyActive }; }, onClick: function() { - var appInstance = React.render(<App />, document.getElementById('pluginsAppContainer')); - appInstance.toggleCondition('platforms', this.props.keyword); + this.props.toggleCondition('platforms', this.props.keyword); this.setState(function(prevState, currentProps) { return { isActive: !prevState.isActive http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/plugin.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/plugin.jsx b/www/static/plugins/plugin.jsx index 2552c87..4c14ff7 100755 --- a/www/static/plugins/plugin.jsx +++ b/www/static/plugins/plugin.jsx @@ -1,9 +1,11 @@ -var React = require('react'), +var Preact = require('preact'), + h = require('preact').h, + createClass = require('preact-compat').createClass, SupportedPlatforms = require('./supportedplatforms.jsx'), classNames = require('classnames'), ZeroClipboard = require('../js/lib/ZeroClipboard.js'); -var Plugin = React.createClass({ +var Plugin = createClass({ shouldComponentUpdate: function(nextProps, nextState) { return this.props.plugin !== nextProps.plugin; }, http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/pluginlist.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/pluginlist.jsx b/www/static/plugins/pluginlist.jsx index 8c3efc7..b31f437 100755 --- a/www/static/plugins/pluginlist.jsx +++ b/www/static/plugins/pluginlist.jsx @@ -1,4 +1,6 @@ -var React = require('react'), +var Preact = require('preact'), + h = require('preact').h, + createClass = require('preact-compat').createClass, Plugin = require('./plugin.jsx'); var InitialPageLength = 10; @@ -7,7 +9,7 @@ var PageExtensionLength = 20; /* States site loaded */ -var PluginList = React.createClass({ +var PluginList = createClass({ getInitialState: function() { return { bootstrapped: false } }, http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/searchbar.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/searchbar.jsx b/www/static/plugins/searchbar.jsx index bc553c7..ba544de 100755 --- a/www/static/plugins/searchbar.jsx +++ b/www/static/plugins/searchbar.jsx @@ -1,10 +1,18 @@ +var Preact = require('preact'); +var h = require('preact').h; +var findDOMNode = require('preact-compat').findDOMNode; +var createClass = require('preact-compat').createClass; var Bacon = require('baconjs').Bacon; -var SearchBar = React.createClass({ - propTypes: { - initialValue: React.PropTypes.string.isRequired, - placeHolderText: React.PropTypes.string.isRequired, - onUserInput: React.PropTypes.func.isRequired +var SearchBar = createClass({ + + // polyfill of sorts for string refs + linkRef: function(component, name) { + let cache = component._linkedRefs || (component._linkedRefs = {}); + if (!component.refs) component.refs = {}; + return cache[name] || (cache[name] = c => { + component.refs[name] = c; + }); }, getInitialState: function() { @@ -18,7 +26,7 @@ var SearchBar = React.createClass({ componentDidMount: function() { var self = this, delay = 200, // in ms - inputElem = React.findDOMNode(this.refs.filterTextInput); + inputElem = findDOMNode(this.refs.filterTextInput); // Convert input events to stream var text = Bacon.fromEvent(inputElem, 'input') @@ -49,9 +57,9 @@ var SearchBar = React.createClass({ autoComplete="off" placeholder={this.props.placeHolderText} value={this.state.textValue} - onChange={this.handleChange} - ref="filterTextInput" - /> + onInput={this.handleChange} + ref={this.linkRef(this, "filterTextInput")} + /> </div> ); } http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/sortbutton.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/sortbutton.jsx b/www/static/plugins/sortbutton.jsx index 8d5c208..65ea0ac 100755 --- a/www/static/plugins/sortbutton.jsx +++ b/www/static/plugins/sortbutton.jsx @@ -1,9 +1,10 @@ -var React = require('react'); +var Preact = require('preact'), + h = require('preact').h, + createClass = require('preact-compat').createClass; -var SortButton = React.createClass({ +var SortButton = createClass({ onClick: function() { - var appInstance = React.render(<App />, document.getElementById('pluginsAppContainer')); - appInstance.setSort(this.props.criteria); + this.props.setSort(this.props.criteria); }, render: function() { return ( http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/sortdropdown.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/sortdropdown.jsx b/www/static/plugins/sortdropdown.jsx index f02ff55..8b9b3fc 100755 --- a/www/static/plugins/sortdropdown.jsx +++ b/www/static/plugins/sortdropdown.jsx @@ -1,13 +1,15 @@ -var React = require('react'); +var Preact = require('preact'); +var h = require('preact').h; +var createClass = require('preact-compat').createClass; var SortButton = require('./sortbutton.jsx'); var SortCriteria = require('./SortCriteria'); -var SortDropdown = React.createClass({ +var SortDropdown = createClass({ render: function() { var downloadsButton; if(this.props.downloadsEnabled) { - downloadsButton = <SortButton criteria={SortCriteria.Downloads}/>; + downloadsButton = <SortButton setSort={this.props.setSort} criteria={SortCriteria.Downloads}/>; } return ( <div className="dropdown plugins-sort-dropdown"> @@ -16,8 +18,8 @@ var SortDropdown = React.createClass({ <span className="caret"></span> </button> <ul className="dropdown-menu" aria-labelledby="dropdownMenu1"> - <SortButton criteria={SortCriteria.Quality}/> - <SortButton criteria={SortCriteria.RecentlyUpdated}/> + <SortButton setSort={this.props.setSort} criteria={SortCriteria.Quality}/> + <SortButton setSort={this.props.setSort} criteria={SortCriteria.RecentlyUpdated}/> {downloadsButton} </ul> </div> http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/43ab8735/www/static/plugins/supportedplatforms.jsx ---------------------------------------------------------------------- diff --git a/www/static/plugins/supportedplatforms.jsx b/www/static/plugins/supportedplatforms.jsx index bf0fee4..66f41e2 100755 --- a/www/static/plugins/supportedplatforms.jsx +++ b/www/static/plugins/supportedplatforms.jsx @@ -1,7 +1,9 @@ -var React = require('react'), - PlatformButton = require('./platformbutton.jsx') +var Preact = require('preact'), + h = require('preact').h, + createClass = require('preact-compat').createClass, + PlatformButton = require('./platformbutton.jsx'); -var SupportedPlatforms = React.createClass({ +var SupportedPlatforms = createClass({ render: function() { var keywords = this.props.keywords; var sortedPlatforms = [ --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@cordova.apache.org For additional commands, e-mail: commits-h...@cordova.apache.org