Updated webpack, babel, eslint. ES module build added. Split to separately importable pieces.

Author: aautio

.babelrc

@@ -1,4 +1,37 @@
 {
-  "presets": ["es2015", "stage-0", "react"],
-  "plugins": ["transform-runtime", "transform-class-properties"]
+  "env": {
+    "commonjs": {
+      "presets": ["env"],
+      "plugins": [
+        "transform-runtime",
+        "transform-react-jsx",
+        "transform-class-properties",
+        "transform-object-rest-spread"
+      ]
+    },
+    "es": {
+      "presets": [
+        [
+          "env",
+          { "modules": false }
+        ]
+      ],
+      "plugins": [
+        "transform-runtime",
+        "transform-react-jsx",
+        "transform-class-properties",
+        "transform-object-rest-spread"
+      ]
+    },
+    "with_react_hot_loader": {
+      "presets": ["env"],
+      "plugins": [
+        "react-hot-loader/babel",
+        "transform-runtime",
+        "transform-react-jsx",
+        "transform-class-properties",
+        "transform-object-rest-spread"
+      ]
+    }
+  }
 }

.eslintignore

@@ -0,0 +1 @@
+demos/demo0/bundle.js

.eslintrc

@@ -1,21 +1,22 @@
 {
-  "extends": "eslint-config-airbnb",
+  "extends": "airbnb",
   "env": {
-    "es6": true
+    "es6": true,
+    "browser": true
   },
   "parser": "babel-eslint",
-  "ecmaFeatures": {
-    "modules": true,
-    "jsx": true
-  },
   "plugins": [
     "react"
   ],
   "rules": {
-    "react/prefer-es6-class": 0,
     "react/jsx-closing-bracket-location": 0,
-    "react/no-did-mount-set-state": 0,
-    "react/no-is-mounted": 0,
-    "react/prefer-stateless-function": 0
+    "react/jsx-first-prop-new-line": 0,
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": 0,
+    "jsx-a11y/href-no-hash": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "no-underscore-dangle": 0,
+    "object-curly-newline": ["error", { "consistent": true }],
+    "prefer-template": 0
   }
 }

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 lib/
+es/
 *.log
 demos/demo0/bundle.js

demos/demo0/Demo.jsx

@@ -1,14 +1,17 @@
 /* eslint-disable react/prefer-stateless-function */
+/* eslint-disable import/no-unresolved, import/extensions, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
-import {
-  ShareButtons,
-  ShareCounts,
-  generateShareIcon,
-} from 'react-share';
 
-import exampleImage from './react-share-pin-example.png';
+import {
+  FacebookShareCount,
+  GooglePlusShareCount,
+  LinkedinShareCount,
+  PinterestShareCount,
+  VKShareCount,
+  OKShareCount,
+  RedditShareCount,
+  TumblrShareCount,
 
-const {
   FacebookShareButton,
   GooglePlusShareButton,
   LinkedinShareButton,
@@ -23,33 +26,25 @@ const {
   TumblrShareButton,
   LivejournalShareButton,
   MailruShareButton,
-} = ShareButtons;
 
-const {
-  FacebookShareCount,
-  GooglePlusShareCount,
-  LinkedinShareCount,
-  PinterestShareCount,
-  VKShareCount,
-  OKShareCount,
-  RedditShareCount,
-  TumblrShareCount,
-} = ShareCounts;
-
-const FacebookIcon = generateShareIcon('facebook');
-const TwitterIcon = generateShareIcon('twitter');
-const GooglePlusIcon = generateShareIcon('google');
-const LinkedinIcon = generateShareIcon('linkedin');
-const PinterestIcon = generateShareIcon('pinterest');
-const VKIcon = generateShareIcon('vk');
-const OKIcon = generateShareIcon('ok');
-const TelegramIcon = generateShareIcon('telegram');
-const WhatsappIcon = generateShareIcon('whatsapp');
-const RedditIcon = generateShareIcon('reddit');
-const TumblrIcon = generateShareIcon('tumblr');
-const MailruIcon = generateShareIcon('mailru');
-const EmailIcon = generateShareIcon('email');
-const LivejournalIcon = generateShareIcon('livejournal');
+  FacebookIcon,
+  TwitterIcon,
+  GooglePlusIcon,
+  LinkedinIcon,
+  PinterestIcon,
+  VKIcon,
+  OKIcon,
+  TelegramIcon,
+  WhatsappIcon,
+  RedditIcon,
+  TumblrIcon,
+  MailruIcon,
+  EmailIcon,
+  LivejournalIcon,
+} from 'react-share';
+
+import exampleImage from './react-share-pin-example.png';
+
 
 class Demo extends Component {
   render() {

demos/demo0/index.jsx

@@ -1,5 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Demo from './Demo';
 
 ReactDOM.render(<Demo />, document.querySelector('#content'));
+
+if (module.hot) {
+  module.hot.accept();
+}

package.json

@@ -2,17 +2,19 @@
   "name": "react-share",
   "version": "1.19.0",
   "description": "Easy social media share buttons and share counts.",
-  "main": "./lib/react-share.js",
+  "main": "./lib/index.js",
+  "module": "./es/index.js",
   "engines": {
     "node": ">=4.0.0",
     "npm": ">=3.0.0"
   },
   "scripts": {
-    "build": "npm run lint && npm run build-src && npm run build-demos",
-    "build-src": "babel ./src --out-dir ./lib",
-    "build-demos": "NODE_ENV=production webpack -p --config webpack.demos.config.js",
-    "run-demos": "NODE_ENV=development webpack-dev-server --config webpack.demos.config.js --content-base demos/ --progress --colors",
-    "lint": "eslint --ext .jsx ./src ./demos",
+    "build": "npm run lint && npm run build:commonjs && npm run build:es && npm run build-demos",
+    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel ./src --out-dir ./lib",
+    "build:es": "rimraf ./es && cross-env BABEL_ENV=es babel ./src --out-dir ./es",
+    "build-demos": "webpack -p --config webpack.demos.config.js",
+    "run-demos": "webpack-dev-server --hot --config webpack.demos.config.js --content-base demos/ --progress",
+    "lint": "eslint --ext .jsx --ext .js ./src ./demos",
     "prepublish": "npm run build",
     "start": "npm run run-demos"
   },
@@ -38,28 +40,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "babel-cli": "6.18.0",
-    "babel-core": "6.18.2",
-    "babel-eslint": "7.1.1",
-    "babel-loader": "6.2.10",
-    "babel-plugin-transform-class-properties": "6.18.0",
-    "babel-plugin-transform-runtime": "6.15.0",
-    "babel-preset-airbnb": "1.1.1",
-    "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "6.16.0",
-    "babel-preset-stage-0": "6.16.0",
-    "eslint": "2.13.1",
-    "eslint-config-airbnb": "7.0.0",
-    "eslint-loader": "1.6.3",
-    "eslint-plugin-jsx-a11y": "0.6.2",
-    "eslint-plugin-react": "4.3.0",
-    "file-loader": "0.9.0",
+    "babel-cli": "6.26.0",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.1.2",
+    "babel-loader": "7.1.2",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-plugin-transform-runtime": "6.23.0",
+    "babel-preset-env": "1.6.1",
+    "cross-env": "5.1.3",
+    "eslint": "4.14.0",
+    "eslint-config-airbnb": "16.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-jsx-a11y": "6.0.3",
+    "eslint-plugin-react": "7.5.1",
+    "file-loader": "1.1.6",
     "react": "15.5.4",
     "react-dom": "15.5.4",
-    "react-hot-loader": "1.3.1",
-    "url-loader": "0.5.8",
-    "webpack": "1.13.3",
-    "webpack-dev-server": "1.16.3"
+    "react-hot-loader": "^3.1.3",
+    "rimraf": "^2.6.2",
+    "url-loader": "0.6.2",
+    "webpack": "3.10.0",
+    "webpack-dev-server": "2.9.7"
   },
   "dependencies": {
     "babel-runtime": "^6.6.1",

src/EmailIcon.js

@@ -0,0 +1,9 @@
+import iconFactory from './utils/iconFactory';
+
+const EmailIcon = iconFactory('email', {
+  icon: 'M17,22v20h30V22H17z M41.1,25L32,32.1L22.9,25H41.1z M20,39V26.6l12,9.3l12-9.3V39H20z',
+  mask: 'M41.1,25H22.9l9.1,7.1L41.1,25z M44,26.6l-12,9.3l-12-9.3V39h24V26.6z M0,0v64h64V0H0z M47,42H17V22h30V42z',
+  color: '#7f7f7f',
+});
+
+export default EmailIcon;

src/EmailShareButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+
+import objectToGetParams from './utils/objectToGetParams';
+import createShareButton from './utils/createShareButton';
+
+function emailLink(url, { subject, body }) {
+  return 'mailto:' + objectToGetParams({ subject, body: body || subject });
+}
+
+const EmailShareButton = createShareButton('email', emailLink, props => ({
+  subject: props.subject,
+  body: props.body,
+}), {
+  subject: PropTypes.string,
+  body: PropTypes.string,
+}, {
+  openWindow: false,
+  onClick: (link) => { window.location.href = link; },
+});
+
+export default EmailShareButton;

src/FacebookIcon.js

@@ -0,0 +1,9 @@
+import iconFactory from './utils/iconFactory';
+
+const FacebookIcon = iconFactory('facebook', {
+  icon: 'M34.1,47V33.3h4.6l0.7-5.3h-5.3v-3.4c0-1.5,0.4-2.6,2.6-2.6l2.8,0v-4.8c-0.5-0.1-2.2-0.2-4.1-0.2 c-4.1,0-6.9,2.5-6.9,7V28H24v5.3h4.6V47H34.1z',
+  mask: 'M0,0v64h64V0H0z M39.6,22l-2.8,0c-2.2,0-2.6,1.1-2.6,2.6V28h5.3l-0.7,5.3h-4.6V47h-5.5V33.3H24V28h4.6V24 c0-4.6,2.8-7,6.9-7c2,0,3.6,0.1,4.1,0.2V22z',
+  color: '#3b5998',
+});
+
+export default FacebookIcon;

src/FacebookShareButton.js

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+
+import assert from 'assert';
+
+import objectToGetParams from './utils/objectToGetParams';
+import createShareButton from './utils/createShareButton';
+
+function facebookLink(url, { quote, hashtag }) {
+  assert(url, 'facebook.url');
+
+  return 'https://www.facebook.com/sharer/sharer.php' + objectToGetParams({
+    u: url,
+    quote,
+    hashtag,
+  });
+}
+
+const FacebookShareButton = createShareButton('facebook', facebookLink, (props) => {
+  /* eslint-disable no-console */
+  if (props.picture) {
+    console.warn('FacebookShareButton warning: picture is a deprecated prop.');
+  }
+
+  if (props.title) {
+    console.warn('FacebookShareButton warning: title is a deprecated prop. Use "quote" instead.');
+  }
+
+  if (props.description) {
+    console.warn(`FacebookShareButton warning: description is a deprecated prop.
+      Use "quote" instead.`);
+  }
+  /* eslint-enable no-console */
+
+  return {
+    quote: props.quote,
+    hashtag: props.hashtag,
+  };
+}, {
+  quote: PropTypes.string,
+  hashtag: PropTypes.string,
+}, {
+  windowWidth: 550,
+  windowHeight: 400,
+});
+
+export default FacebookShareButton;

src/FacebookShareCount.js

@@ -0,0 +1,15 @@
+import jsonp from 'jsonp';
+
+import shareCountFactory from './utils/shareCountFactory';
+
+function getFacebookShareCount(shareUrl, callback) {
+  const endpoint = `https://graph.facebook.com/?id=${shareUrl}`;
+
+  jsonp(endpoint, (err, data) => {
+    callback(!err && data && data.share && data.share.share_count
+      ? data.share.share_count
+      : undefined);
+  });
+}
+
+export default shareCountFactory(getFacebookShareCount);

src/GooglePlusIcon.js

@@ -0,0 +1,23 @@
+import assert from 'assert';
+
+import objectToGetParams from './utils/objectToGetParams';
+import createShareButton from './utils/createShareButton';
+
+function googlePlusLink(url) {
+  assert(url, 'googlePlus.url');
+
+  return 'https://plus.google.com/share' + objectToGetParams({ url });
+}
+
+const GooglePlusShareButton = createShareButton(
+  'googlePlus',
+  googlePlusLink,
+  undefined,
+  undefined,
+  {
+    windowWidth: 550,
+    windowHeight: 400,
+  },
+);
+
+export default GooglePlusShareButton;