Merge pull request JedWatson#1953 from JedWatson/feature/new-build-pr…

…ocess

New build pipeline for react-select

.babelrc

@@ -0,0 +1,10 @@
+{
+  "ignore": ["node-modules/**", "src/index.umd.js"],
+  "presets": ["stage-0", "react"],
+  "env": {
+    "test": {
+      "presets": ["es2015"],
+      "plugins": ["istanbul"],
+    }
+  }
+}

.nycrc

@@ -0,0 +1,11 @@
+{
+  "reporter": [
+    "lcov",
+    "text-summary"
+  ],
+  "require": [
+    "babel-register"
+  ],
+  "sourceMap": false,
+  "instrument": false
+}

examples/src/app.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Select from 'react-select';
+import './example.less';
 
 import Creatable from './components/Creatable';
 import Contributors from './components/Contributors';

examples/src/index.html

@@ -50,7 +50,6 @@ <h1>React Select</h1>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.js"></script>
 	<script src="common.js"></script>
-	<script src="bundle.js"></script>
 	<script src="app.js"></script>
 	<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
 </body>

examples/src/standalone.html

@@ -15,10 +15,10 @@ <h2>Standalone bulid</h2>
 	</div>
 	<script src="//unpkg.com/[email protected]/dist/react.min.js"></script>
 	<script src="//unpkg.com/[email protected]/dist/react-dom.min.js"></script>
-	<script src="//unpkg.com/[email protected]/build/three.min.js"></script>
 	<script src="//unpkg.com/[email protected]/index.js"></script>
+	<script src="//unpkg.com/[email protected]/prop-types"></script>
 	<script src="//unpkg.com/[email protected]/dist/react-input-autosize.min.js"></script>
-	<script src="standalone.js"></script>
+	<script src="../../dist/react-select.js"></script>
 	<script>
 		var options = [
 			{ label: 'One', value: 1 },

lib/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+exports.Creatable = exports.AsyncCreatable = exports.Async = undefined;
+
+var _Select = require('./Select');
+
+var _Select2 = _interopRequireDefault(_Select);
+
+var _Async = require('./Async');
+
+var _Async2 = _interopRequireDefault(_Async);
+
+var _AsyncCreatable = require('./AsyncCreatable');
+
+var _AsyncCreatable2 = _interopRequireDefault(_AsyncCreatable);
+
+var _Creatable = require('./Creatable');
+
+var _Creatable2 = _interopRequireDefault(_Creatable);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Select2.default.Async = _Async2.default;
+_Select2.default.AsyncCreatable = _AsyncCreatable2.default;
+_Select2.default.Creatable = _Creatable2.default;
+
+exports.default = _Select2.default;
+exports.Async = _Async2.default;
+exports.AsyncCreatable = _AsyncCreatable2.default;
+exports.Creatable = _Creatable2.default;

package-scripts.js

@@ -0,0 +1,39 @@
+const npsUtils = require('nps-utils');
+const path = require('path');
+const series = npsUtils.series;
+const rimraf = npsUtils.rimraf;
+const concurrent = npsUtils.concurrent;
+
+module.exports = {
+  scripts: {
+    build: {
+      description: 'clean dist directory and run all builds',
+      default: series(
+        rimraf('dist'),
+        rimraf('lib'),
+        concurrent.nps('build.css', 'build.min'),
+        concurrent.nps('build.umd', 'build.umdMin', 'build.es', 'build.standalone')
+      ),
+      umd: 'rollup --config',
+      umdMin: 'rollup --config --environment MINIFY',
+      es: 'babel src -d lib',
+      css: 'lessc less/default.less dist/react-select.css',
+      min: 'lessc --clean-css less/default.less dist/react-select.min.css',
+      standalone: series(
+        'cp examples/src/standalone.html examples/dist/standalone.html',
+        'lessc examples/src/example.less examples/dist/example.less'
+      ),
+      examples: series(
+        'webpack --progress -p',
+        'cp examples/src/.gitignore examples/dist/.gitignore',
+        'git subtree push --prefix examples/dist origin gh-pages'
+      )
+    },
+    publish: {
+      default: series(
+        rimraf('examples/dist'),
+        concurrent.nps('build.examples')
+      )
+    }
+  },
+};

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0-rc.5",
   "description": "A Select control built with and for ReactJS",
   "main": "lib/index.js",
+  "jsnext:main": "dist/react-select.es.js",
   "style": "dist/react-select.min.css",
   "author": "Jed Watson",
   "license": "MIT",
@@ -11,37 +12,63 @@
     "url": "https://github.com/JedWatson/react-select.git"
   },
   "dependencies": {
+    "babel-register": "^6.26.0",
     "classnames": "^2.2.4",
-    "react-input-autosize": "^1.1.3",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "react-input-autosize": "^1.1.3"
   },
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-eslint": "^4.1.3",
-    "chai": "^3.5.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-istanbul": "^4.1.4",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "chai": "^4.1.2",
     "coveralls": "^2.11.12",
     "create-react-class": "^15.5.2",
-    "eslint": "^1.10.3",
-    "eslint-plugin-react": "^3.15.0",
-    "gulp": "^3.9.1",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.6.1",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "html-loader": "^0.5.1",
+    "html-webpack-plugin": "^2.30.1",
     "isomorphic-fetch": "^2.2.1",
     "istanbul": "^0.4.5",
-    "jsdom": "^9.5.0",
+    "jsdom": "^9.12.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
+    "less-plugin-clean-css": "^1.5.1",
     "mocha": "^3.0.2",
+    "nps": "^5.7.1",
+    "nps-utils": "^1.3.0",
+    "nyc": "^11.1.0",
     "react": "^15.0",
     "react-addons-shallow-compare": "^15.0",
     "react-addons-test-utils": "^15.0",
-    "react-component-gulp-tasks": "^0.7.7",
     "react-dom": "^15.0",
     "react-gravatar": "^2.4.5",
     "react-highlight-words": "^0.3.0",
+    "react-test-renderer": "^15.6.1",
     "react-virtualized": "^7.23.0",
     "react-virtualized-select": "^1.4.0",
-    "sinon": "^1.17.5",
-    "unexpected": "^10.17.0",
-    "unexpected-dom": "^3.1.0",
-    "unexpected-react": "^3.2.4",
-    "unexpected-sinon": "^10.4.0"
+    "rollup": "^0.49.2",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-commonjs": "^8.2.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "sinon": "^3.2.1",
+    "style-loader": "^0.18.2",
+    "uglify-es": "^3.0.28",
+    "unexpected": "^10.35.0",
+    "unexpected-dom": "^4.0.0",
+    "unexpected-react": "^4.1.0",
+    "unexpected-sinon": "^10.4.0",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || ^15.0",
@@ -54,19 +81,13 @@
     "react-input-autosize": "global:AutosizeInput"
   },
   "scripts": {
-    "build": "gulp clean && NODE_ENV=production gulp build",
-    "bump": "gulp bump",
-    "bump:major": "gulp bump:major",
-    "bump:minor": "gulp bump:minor",
-    "cover": "istanbul cover _mocha -- -u exports --compilers js:babel/register -R spec",
-    "coveralls": "NODE_ENV=test istanbul cover _mocha --report lcovonly -- -u exports --compilers js:babel/register -R spec && cat coverage/lcov.info | coveralls",
-    "examples": "gulp dev:server",
+    "build": "nps build",
+    "cover": "istanbul cover _mocha -- -u exports --compilers js:babel-core/register -R spec",
+    "coveralls": "NODE_ENV=test nyc mocha",
     "lint": "eslint .",
-    "publish:examples": "NODE_ENV=production gulp publish:examples",
-    "release": "NODE_ENV=production gulp release",
-    "start": "gulp dev",
-    "test": "npm run lint && mocha --compilers js:babel/register",
-    "watch": "gulp watch:lib"
+    "publish:examples": "NODE_ENV=production nps publish",
+    "start": "webpack-dev-server --progress",
+    "test": "npm run lint && NODE_ENV=test mocha --compilers js:babel-core/register"
   },
   "keywords": [
     "combobox",

rollup.config.js

@@ -0,0 +1,42 @@
+
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import uglify from 'rollup-plugin-uglify';
+import { minify } from 'uglify-es';
+const min = process.env.MINIFY;
+
+export default {
+    input: 'src/index.umd.js',
+    output: {
+      name: 'Select',
+      file: getDist(min),
+      format: 'umd',
+    },
+    globals: {
+      react: 'React',
+      'prop-types': 'PropTypes',
+      'react-dom': 'ReactDOM',
+      'react-input-autosize': 'AutosizeInput',
+      'classnames': 'classNames',
+    },
+    external: [
+      'classnames',
+      'prop-types',
+      'react-input-autosize',
+      'react',
+      'react-dom',
+    ],
+    plugins: [
+      babel({
+        presets: [['es2015', { 'modules': false }]],
+        plugins: ['external-helpers']
+      }),
+      resolve(),
+      min ? uglify({}, minify) : {},
+    ]
+};
+
+
+function getDist (min) {
+  return min ? 'dist/react-select.min.js' : 'dist/react-select.js';
+}

src/Async.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Select from './Select';
 import stripDiacritics from './utils/stripDiacritics';
-
 const propTypes = {
 	autoload: PropTypes.bool.isRequired,       // automatically call the `loadOptions` prop on-mount; defaults to true
 	cache: PropTypes.any,                      // object to use to cache results; set to null/false to disable caching

src/AsyncCreatable.js

@@ -44,4 +44,4 @@ class AsyncCreatableSelect extends React.Component {
 	}
 };
 
-module.exports = AsyncCreatableSelect;
+export default AsyncCreatableSelect;

src/Creatable.js

@@ -294,4 +294,4 @@ CreatableSelect.propTypes = {
 };
 
 
-module.exports = CreatableSelect;
+export default CreatableSelect;

src/Option.js

@@ -110,4 +110,4 @@ Option.propTypes = {
 	optionIndex: PropTypes.number,           // index of the option, used to generate unique ids for aria
 };
 
-module.exports = Option;
+export default Option;

src/Select.js

@@ -3,7 +3,6 @@
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/react-select
 */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
@@ -229,6 +228,7 @@ class Select extends React.Component {
 
 		// for the non-searchable select, toggle the menu
 		if (!this.props.searchable) {
+			// TODO: This code means that if a select is searchable, onClick the options menu will not appear, only on subsequent click will it open.
 			this.focus();
 			return this.setState({
 				isOpen: !this.state.isOpen,

src/Value.js

@@ -103,4 +103,4 @@ Value.propTypes = {
 	value: PropTypes.object.isRequired,     // the option object for this value
 };
 
-module.exports = Value;
+export default Value;

src/index.umd.js

@@ -0,0 +1,10 @@
+import Select from './Select';
+import Async from './Async';
+import AsyncCreatable from './AsyncCreatable';
+import Creatable from './Creatable';
+
+Select.Async = Async;
+Select.AsyncCreatable = AsyncCreatable;
+Select.Creatable = Creatable;
+
+export default Select;

src/utils/defaultFilterOptions.js

@@ -35,4 +35,4 @@ function filterOptions (options, filterValue, excludeOptions, props) {
 	});
 }
 
-module.exports = filterOptions;
+export default filterOptions;

src/utils/defaultMenuRenderer.js

@@ -47,4 +47,4 @@ function menuRenderer ({
 	});
 }
 
-module.exports = menuRenderer;
+export default menuRenderer;