You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cordova.apache.org by sh...@apache.org on 2017/09/18 03:43:39 UTC
docs commit: CB-13025 Remove use of React in plugins.cordova.io
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 <sh...@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-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org