The return of single player imports

Refactors `src/ReactPlayer.js` to be a `createReactPlayer` factory that takes an array of players
The default import then becomes `src/index.js` which just calls `createReactPlayer` with the whole players array from `src/players/index.js`
A script now generates top level files before publishing, eg `youtube.js` that call `createReactPlayer` with just the `YouTube` player

Author: cookpete

MIGRATING.md

@@ -4,19 +4,31 @@ Breaking changes are in 🔥 __bold and on fire__.
 
 ### Lazy players
 
-ReactPlayer v2.0 uses [React lazy loading](https://reactjs.org/docs/code-splitting.html#reactlazy) to only load the players required based on the `url` prop passed in. Previous versions of ReactPlayer would include the code for all players, regardless of what type of player is used.
+As of `v2.2`, if your build system supports `import()` statements, use `react-player/lazy` to [lazy load](https://reactjs.org/docs/code-splitting.html#reactlazy) the appropriate player for the `url` you pass in. This adds several `reactPlayer` chunks to your output, but reduces your main bundle size.
 
-Because of this, 🔥 __single player imports are now redundant, and have been removed__. Instead of importing single players, you can safely import from `react-player` and only the relevant player will be loaded if you only use one type of `url`.
+Due to the use of `lazy` and `Suspense`, 🔥 __React 16.6 or later is now required__.
 
 ```jsx
 // Before
-import YouTubePlayer from 'react-player/lib/players/YouTube'
+import ReactPlayer from 'react-player'
 
 // After
-import YouTubePlayer from 'react-player'
+import ReactPlayer from 'react-player/lazy'
 ```
 
-Due to the use of `lazy` and `Suspense`, 🔥 __React 16.6 or later is now required__.
+Lazy players were the default import in `v2.1`, but moved to `react-player/lazy` in `v2.2` to avoid causing problems with common build systems.
+
+### Single player imports
+
+As of `v2.2`, the 🔥 __location of single player imports has changed__. Single players are not available in `v2.0` and `v2.1`.
+
+```jsx
+// Before
+import ReactPlayer from 'react-player/lib/players/YouTube'
+
+// After
+import ReactPlayer from 'react-player/youtube'
+```
 
 ### Preloading
 

README.md

@@ -23,33 +23,40 @@
 
 ### Migrating to ReactPlayer `v2.0`
 
-ReactPlayer `v2.0` removes single player imports in favour of lazy loading players. Support for `preload` has also been removed, plus some other changes. See [`MIGRATING.md`](/MIGRATING.md) for information.
+ReactPlayer `v2.0` changes single player imports and adds lazy loading players. Support for `preload` has also been removed, plus some other changes. See [`MIGRATING.md`](/MIGRATING.md) for information.
 
 ### Usage
 
 ```bash
-npm install react-player
+npm install react-player # or yarn add react-player
 ```
 
 ```jsx
 import React from 'react'
 import ReactPlayer from 'react-player'
 
-const App = () => (
-  <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
-)
+// Render a YouTube video player
+<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.
+By default, ReactPlayer supports [many different types](#supported-media) of `url`. If you only ever use one type, use imports such as `react-player/youtube` to reduce your bundle size. See [config keys](#config-prop) for all player keys.
 
 ```jsx
 import React from 'react'
-import ReactPlayer from 'react-player/lazy'
+import ReactPlayer from 'react-player/youtube'
 
 // Only loads the YouTube player
-const App = () => (
-  <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
-)
+<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 adds several `reactPlayer` chunks to your output, but reduces your main bundle size.
+
+```jsx
+import React from 'react'
+import ReactPlayer from 'react-player/lazy'
+
+// Lazy load the YouTube player
+<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />
 ```
 
 Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player)

package.json

@@ -2,7 +2,7 @@
   "name": "react-player",
   "version": "2.1.1",
   "description": "A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion",
-  "main": "lib/ReactPlayer.js",
+  "main": "lib/index.js",
   "typings": "index.d.ts",
   "scripts": {
     "clean": "rimraf lib lazy demo coverage",
@@ -19,8 +19,8 @@
     "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:lazy && npm run build:dist",
-    "postpublish": "npm run clean"
+    "prepublishOnly": "npm run build:lib && npm run build:lazy && npm run build:dist && node scripts/pre-publish.js",
+    "postpublish": "node scripts/post-publish.js && npm run clean"
   },
   "repository": {
     "type": "git",

scripts/post-publish.js

@@ -0,0 +1,11 @@
+const { join } = require('path')
+const { unlink } = require('fs').promises
+const { default: players } = require('../lib/players')
+
+const deleteSinglePlayers = async () => {
+  for (const { key } of players) {
+    await unlink(join('.', `${key}.js`))
+  }
+}
+
+deleteSinglePlayers()

scripts/pre-publish.js

@@ -0,0 +1,16 @@
+const { join } = require('path')
+const { writeFile } = require('fs').promises
+const { default: players } = require('../lib/players')
+
+const generateSinglePlayers = async () => {
+  for (const { key, name } of players) {
+    const file = `
+      const { createReactPlayer } = require('./lib/ReactPlayer')
+      const Player = require('./lib/players/${name}').default
+      module.exports = createReactPlayer([Player])
+    `
+    await writeFile(join('.', `${key}.js`), file)
+  }
+}
+
+generateSinglePlayers()