Add named exports for individual players

[madeleineostoja]

Minor thing, but it'd be nice to add named exports for each individual player to the main entrypoint, so you could consume them through ES6 destructuring rather than explicitly importing the source file

import { Vimeo } from 'react-player'

Would be an easy and non-breaking change to add, along the lines of tacking this onto ReactPlayer.js

export { default as Vimeo } from './players/Vimeo'
// Repeat for each player

[cookpete]

@seaneking This is an interesting suggestion, but I'm trying to see why would someone do

import { Vimeo } from 'react-player'

and include the whole library into their bundle, when they can already import a single player:

import Vimeo from 'react-player/lib/players/Vimeo'

which includes only the code for that player.

[madeleineostoja]

Because (using any modern bundler) that doesn't import the whole library, just the module you've specified.

Same thing as importing the file directly, just a nicer syntax that takes advantage of modules and tree shaking. A lot of libraries use this pattern.

[cookpete]

The issue is that import { Vimeo } from 'react-player' will import ReactPlayer.js, which imports all players:

https://github.com/CookPete/react-player/blob/7b2784d7d3a4a62b17fa8b46f62a9741e4d97c3d/src/ReactPlayer.js#L5

Is tree-shaking good enough these days to not import all the players when doing it like this?

[madeleineostoja]

Yep AFAIK, because you're only importing that named module (and its direct/used deps). Could include your whole library into one file, consuming just one function should tree shake the rest out.

Rollup (and pretty sure Webpack 2+) can tree shake out unused functions and consts from within a module, so wouldn't have any probs here.

[madeleineostoja]

That said it's hardly a big deal either way, just some light syntax sugar, so 🤷‍♂️

[cookpete]

That said it's hardly a big deal either way, just some light syntax sugar

Yeah I like the idea, and it's easy enough to add. I think I've just been doing something wrong when experimenting with tree-shaking..

[cookpete]

@seaneking Would this still work considering the source code would get compiled into something like:

var _YouTube = require('./players/YouTube');

Object.defineProperty(exports, 'YouTube', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_YouTube)['default'];
  }
});

var _SoundCloud = require('./players/SoundCloud');

Object.defineProperty(exports, 'SoundCloud', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_SoundCloud)['default'];
  }
});

as opposed to export statements?