Move lazy loading players to react-player/lazy

Fixes cookpete/react-player#912
Fixes cookpete/react-player#907
Fixes cookpete/react-player#865
Sort of fixes cookpete/react-player#910
Sort of fixes cookpete/react-player#902
Affects cookpete/react-player#886
Affects cookpete/react-player#738

.gitignore

@@ -4,5 +4,6 @@ yarn-error.log
 package-lock.json
 .DS_Store
 /lib
+/lazy
 /demo
 /coverage

README.md

@@ -28,20 +28,28 @@ ReactPlayer `v2.0` removes single player imports in favour of lazy loading playe
 ### Usage
 
 ```bash
-npm install react-player --save
-# or
-yarn add react-player
+npm install react-player
 ```
 
-```js
-import React, { Component } from 'react'
+```jsx
+import React from 'react'
 import ReactPlayer from 'react-player'
 
-class App extends Component {
-  render () {
-    return <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
-  }
-}
+const App = () => (
+  <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
+)
+```
+
+If your build system supports `import()` statements, use `react-player/lazy` to lazy load the appropriate player for the `url` you pass in. This will add several `reactPlayer` chunks to your bundle, but reduce your main bundle size.
+
+```jsx
+import React from 'react'
+import ReactPlayer from 'react-player/lazy'
+
+// Only loads the YouTube player
+const App = () => (
+  <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
+)
 ```
 
 Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player)

babel.config.js

@@ -0,0 +1,28 @@
+const getExcludes = lazy => {
+  if (lazy) {
+    // Disable transforming `import()` statements to enable lazy players
+    return ['@babel/plugin-proposal-dynamic-import']
+  }
+  return []
+}
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      { exclude: getExcludes(process.env.LAZY) }
+    ],
+    '@babel/preset-react'
+  ],
+  plugins: [
+    'react-hot-loader/babel',
+    '@babel/plugin-proposal-class-properties'
+  ],
+  env: {
+    test: {
+      plugins: [
+        'istanbul'
+      ]
+    }
+  }
+}

package.json

@@ -5,20 +5,21 @@
   "main": "lib/ReactPlayer.js",
   "typings": "index.d.ts",
   "scripts": {
-    "clean": "rimraf lib demo coverage",
+    "clean": "rimraf lib lazy demo coverage",
     "start": "webpack-dev-server --config webpack/config.babel.js",
     "lint": "standard --verbose | snazzy",
     "lint:fix": "standard --fix",
     "test": "cross-env NODE_ENV=test ava",
     "test:coverage": "cross-env NODE_ENV=test nyc ava",
     "test:codecov": "nyc report --reporter=json && codecov -f coverage/coverage-final.json",
     "build:lib": "cross-env NODE_ENV=production babel src -d lib --ignore src/demo",
+    "build:lazy": "cross-env NODE_ENV=production LAZY=true babel src -d lazy --ignore src/demo",
     "build:demo": "cross-env NODE_ENV=production webpack --config webpack/production.babel.js",
     "build:dist": "cross-env NODE_ENV=production webpack --config webpack/dist.babel.js",
     "build:standalone": "cross-env NODE_ENV=production webpack --config webpack/standalone.babel.js",
     "preversion": "npm run lint && npm run test",
     "version": "auto-changelog -p && npm run build:dist && npm run build:standalone && git add CHANGELOG.md dist",
-    "prepublishOnly": "npm run build:lib && npm run build:dist",
+    "prepublishOnly": "npm run build:lib && npm run build:lazy && npm run build:dist",
     "postpublish": "npm run clean"
   },
   "repository": {
@@ -102,30 +103,6 @@
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.0.1"
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "exclude": [
-            "@babel/plugin-proposal-dynamic-import"
-          ]
-        }
-      ],
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "react-hot-loader/babel",
-      "@babel/plugin-proposal-class-properties"
-    ],
-    "env": {
-      "test": {
-        "plugins": [
-          "istanbul"
-        ]
-      }
-    }
-  },
   "postcss": {
     "plugins": {
       "autoprefixer": {},

src/index.js

@@ -0,0 +1,3 @@
+import ReactPlayer from './ReactPlayer'
+
+export default ReactPlayer