Refresh

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "es2015",
+    "env",
     "react"
   ],
   "plugins": [

.circleci/config.yml

@@ -3,9 +3,9 @@ version: 2
 
 jobs:
   build:
-    working_directory: ~/react-debounce-input
+    working_directory: ~/app
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:8.4.0
       - image: selenium/standalone-firefox:3.4.0
 
     steps:

README.md

@@ -3,7 +3,6 @@
 [![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help)
 
 [![CircleCI](https://img.shields.io/circleci/project/nkbt/react-debounce-input.svg?style=flat-square&label=nix-build)](https://circleci.com/gh/nkbt/react-debounce-input)
-[![Coverage](https://img.shields.io/codecov/c/github/nkbt/react-debounce-input.svg?style=flat-square)](https://codecov.io/github/nkbt/react-debounce-input?branch=master)
 [![Dependencies](https://img.shields.io/david/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input)
 [![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input#info=devDependencies)
 
@@ -17,22 +16,17 @@ Can be used as drop-in replacement for `<input type="text" />` or `<textarea />`
 ## Installation
 
 ### NPM
+
 ```sh
 npm install --save react react-debounce-input
 ```
 
 Don't forget to manually install peer dependencies (`react`) if you use npm@3.
 
 
-### Bower:
-```sh
-bower install --save https://unpkg.com/react-debounce-input/bower.zip
-```
-
-
 ### 1998 Script Tag:
 ```html
-<script src="https://unpkg.com/react/dist/react.js"></script>
+<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-debounce-input/build/react-debounce-input.js"></script>
 (Module exposed as `DebounceInput`)
 ```
@@ -44,20 +38,18 @@ bower install --save https://unpkg.com/react-debounce-input/bower.zip
 
 ## Codepen demo
 
-[http://codepen.io/nkbt/pen/VvmzLQ](http://codepen.io/nkbt/pen/VvmzLQ?editors=101)
+[http://codepen.io/nkbt/pen/VvmzLQ](http://codepen.io/nkbt/pen/VvmzLQ?editors=0010)
 
 ## Usage
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-import DebounceInput from 'react-debounce-input';
+import {DebounceInput} from 'react-debounce-input';
 
-const App = React.createClass({
-  getInitialState() {
-    return {
-      value: ''
-    };
-  },
+class App extends React.Component {
+  state = {
+    value: ''
+  };
 
   render() {
     return (
@@ -71,7 +63,7 @@ const App = React.createClass({
       </div>
     );
   }
-});
+}
 
 const appRoot = document.createElement('div');
 document.body.appendChild(appRoot);
@@ -185,6 +177,9 @@ yarn lint
 yarn test
 
 # to run end-to-end tests
+# first, run `selenium/standalone-firefox:3.4.0` docker image
+docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
+# then run test
 yarn e2e
 ```
 

package.json

@@ -4,7 +4,11 @@
   "description": "React component that renders Input with debounced onChange",
   "main": "lib/index.js",
   "config": {
-    "component": "DebounceInput"
+    "component": "DebounceInput",
+    "externals": {
+      "react": "React",
+      "react-dom": "ReactDOM"
+    }
   },
   "scripts": {
     "build": "scripts/build.js",
@@ -17,7 +21,9 @@
     "pub": "scripts/pub.js",
     "test": "scripts/test.js",
     "prepublish": "yarn build",
-    "postversion": "git push --follow-tags"
+    "postversion": "git push --follow-tags",
+    "nuke": "rm -rf node_modules yarn.lock",
+    "postnuke": "yarn install"
   },
   "repository": {
     "type": "git",
@@ -38,23 +44,23 @@
   },
   "homepage": "https://github.com/nkbt/react-debounce-input",
   "peerDependencies": {
-    "react": ">=15.3"
+    "react": "^15.3.0 || ^16.0.0"
   },
   "dependencies": {
     "lodash.debounce": "^4",
     "prop-types": "^15"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.1",
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
     "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.24.1",
+    "babili-webpack-plugin": "^0.1.2",
     "css-loader": "^0.28.4",
     "eslint": "^4.4.0",
     "eslint-config-airbnb": "^15.1.0",
@@ -66,12 +72,12 @@
     "finalhandler": "^1.0.4",
     "gh-pages": "^1.0.0",
     "glob": "^7.1.2",
-    "html-webpack-include-assets-plugin": "^0.0.7",
+    "html-webpack-include-assets-plugin": "^1.0.0",
     "html-webpack-plugin": "^2.30.1",
     "nightwatch": "^0.9.16",
     "portfinder": "^1.0.13",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rimraf": "^2.6.1",
     "serve-static": "^1.12.3",
     "style-loader": "^0.18.2",
@@ -83,7 +89,6 @@
     "build",
     "lib",
     "src",
-    "bower.json",
     "LICENSE",
     "package.json",
     "README.md"

scripts/lint.js

@@ -5,4 +5,4 @@
 const {npm, CWD} = require(`./utils/bash`);
 
 
-npm(`eslint --fix .`, {cwd: CWD});
+npm(`eslint .`, {cwd: CWD});

scripts/utils/webpack/common.js

@@ -5,6 +5,9 @@ const webpack = require(`webpack`);
 const HtmlWebpackPlugin = require(`html-webpack-plugin`);
 const HtmlWebpackIncludeAssetsPlugin = require(`html-webpack-include-assets-plugin`);
 const path = require(`path`);
+const BabiliPlugin = require(`babili-webpack-plugin`);
+
+
 const {NODE_ENV = `development`} = process.env;
 
 
@@ -18,12 +21,17 @@ const {
     externals: COMPONENT_EXTERNALS = {
       [`react`]: `React`,
       [`react-dom`]: `ReactDOM`
-    }
+    },
+    include: INCLUDE_JS = [
+      `https://unpkg.com/[email protected]/umd/react.production.min.js`,
+      `https://unpkg.com/[email protected]/umd/react-dom.production.min.js`
+    ]
   },
   name: PACKAGE_NAME
 } = require(pathTo(`package.json`));
 exports.PACKAGE_NAME = PACKAGE_NAME;
 exports.COMPONENT_NAME = COMPONENT_NAME;
+exports.INCLUDE_JS = INCLUDE_JS;
 
 
 if (!COMPONENT_NAME) {
@@ -47,8 +55,8 @@ exports.loaders = {
     options: {
       babelrc: false,
       presets: [
-        [`es2015`, {modules: false}],
-        `react`
+        `react`,
+        [`env`, {modules: false}]
       ],
       plugins: [
         `transform-object-rest-spread`,
@@ -66,12 +74,17 @@ exports.loaders = {
 };
 
 
+const babiliPlugin = new BabiliPlugin({
+  mergeVars: false
+}, {sourceMap: false});
+
+
 exports.plugins = {
   define: new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
   }),
   html: new HtmlWebpackPlugin(),
-  uglify: new webpack.optimize.UglifyJsPlugin(),
+  uglify: babiliPlugin,
   include: assets => new HtmlWebpackIncludeAssetsPlugin({
     assets,
     append: false
@@ -82,9 +95,7 @@ exports.plugins = {
 };
 
 
-exports.resolve = {
-  extensions: [`.js`]
-};
+exports.resolve = {};
 
 
 exports.stats = {colors: true};

scripts/utils/webpack/pub.config.js

@@ -9,7 +9,8 @@ const {
   loaders,
   resolve,
   stats,
-  externals
+  externals,
+  INCLUDE_JS
 } = require(`./common`);
 
 
@@ -23,11 +24,7 @@ module.exports = {
   plugins: [
     plugins.define,
     plugins.html,
-    plugins.include([
-      `https://unpkg.com/react/dist/react.min.js`,
-      `https://unpkg.com/react-dom/dist/react-dom.min.js`,
-      `styles.css`
-    ]),
+    plugins.include(INCLUDE_JS.concat([`styles.css`])),
     new ExtractTextPlugin(`styles.css`)
   ],
   module: {