Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add named exports for individual players #421

Closed
madeleineostoja opened this issue Jun 10, 2018 · 7 comments
Closed

Add named exports for individual players #421

madeleineostoja opened this issue Jun 10, 2018 · 7 comments

Comments

@madeleineostoja
Copy link

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
Copy link
Owner

@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
Copy link
Author

madeleineostoja commented Jun 11, 2018

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

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

@cookpete
Copy link
Owner

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
Copy link
Owner

@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?

david-hub024 pushed a commit to david-hub024/React_VideoPlayer that referenced this issue Dec 23, 2018
david-hub024 pushed a commit to david-hub024/React_VideoPlayer that referenced this issue May 23, 2020
albanqoku added a commit to albanqoku/react-player that referenced this issue Feb 24, 2021
Webmaster1116 added a commit to Webmaster1116/video-player that referenced this issue May 20, 2021
webmiraclepro added a commit to webmiraclepro/video-player that referenced this issue Sep 9, 2022
philip-luther added a commit to philip-luther/react-player that referenced this issue Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants