Skip to content

Commit

Permalink
The return of single player imports
Browse files Browse the repository at this point in the history
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
  • Loading branch information
cookpete committed Jun 7, 2020
1 parent 45369bb commit 45635ef
Show file tree
Hide file tree
Showing 14 changed files with 220 additions and 155 deletions.
22 changes: 17 additions & 5 deletions MIGRATING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
27 changes: 17 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
11 changes: 11 additions & 0 deletions scripts/post-publish.js
Original file line number Diff line number Diff line change
@@ -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()
16 changes: 16 additions & 0 deletions scripts/pre-publish.js
Original file line number Diff line number Diff line change
@@ -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')

This comment has been minimized.

Copy link
@unformatt

unformatt Feb 4, 2022

Contributor

This ends up injecting code that circumvents webpack's target option. Meaning, if you specify in webpack target = ['web', 'es5'] and are expecting an es5-compatible bundle, the bundle will be broken because of the const injected here; const is not es5.

const Player = require('./lib/players/${name}').default
module.exports = createReactPlayer([Player])
`
await writeFile(join('.', `${key}.js`), file)
}
}

generateSinglePlayers()
Loading

0 comments on commit 45635ef

Please sign in to comment.