diff --git a/.gitignore b/.gitignore index 86a93a7..9bc53f8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,6 @@ yarn-error.log package-lock.json .DS_Store /lib +/lazy /demo /coverage diff --git a/README.md b/README.md index c7eed88..f2cceff 100644 --- a/README.md +++ b/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 - } -} +const App = () => ( + +) +``` + +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 = () => ( + +) ``` Demo page: [`https://cookpete.com/react-player`](https://cookpete.com/react-player) diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..02b436d --- /dev/null +++ b/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' + ] + } + } +} diff --git a/package.json b/package.json index ad71b7f..1e9b601 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "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", @@ -13,12 +13,13 @@ "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": {}, diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..b2691d8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +import ReactPlayer from './ReactPlayer' + +export default ReactPlayer