React-transition-group: Allow import { ... } from 'react-transition-group'

[tkrotoff]

You advertise this syntax:

import Transition from 'react-transition-group/Transition'

It feels awkward, a regular ES6 syntax should be:

import { Transition } from 'react-transition-group'

And this is what other popular projects do:

• Redux: import { createStore } from 'redux'
• Reselect: import { createSelector } from 'reselect'
• React Router: import { Router, Route, Switch } from 'react-router'
• React/Create React App: import React, { Component } from 'react'
• Enzyme: import { shallow } from 'enzyme'
• Angular: import { NgModule } from '@angular/core'
• Vue.js: import Vue, { ComponentOptions } from 'vue'
• Node.js: import { join } from 'path'
• Lodash: import { range } from 'lodash'

I understand the concern about size. Lodash does that too and still allow the regular import { ... } syntax.

webpack and Rollup now support tree-shaking with ES6 modules, (it still not perfect though: https://github.com/webpack/webpack/issues/2867, https://github.com/webpack/webpack/issues/1750) so the size problem will eventually vanish.

All browsers will soon support ES6 modules:

• Chrome 61: https://www.chromestatus.com/feature/5365692190687232
• Safari: https://webkit.org/status/#feature-modules
• Edge (preview for now): https://developer.microsoft.com/en-us/microsoft-edge/platform/status/moduleses6/
• Firefox (behind a flag): https://bugzilla.mozilla.org/show_bug.cgi?id=568953
  See https://github.com/paulirish/es-modules-todomvc

Related discussions:

• https://github.com/DefinitelyTyped/DefinitelyTyped/pull/18550
• https://github.com/reactjs/react-transition-group/pull/40

Edit:

Related code in react-transition-group: https://github.com/reactjs/react-transition-group/blob/v2.2.0/src/index.js#L6

module.exports = {
  Transition,
  TransitionGroup,
  CSSTransition,
};

Should be:

export {
  Transition,
  TransitionGroup,
  CSSTransition
};

[jquense]

import { Transition } from 'react-transition-group' works fine, you can do that if you want. Most of those projects (especially lodash) also allow importing the specific thing you want as well.

The reason we don't recommend it is that it includes the entire package instead of just the files you want. Cherry Picking imports will always be better than tree-shaking, just give how tree-shaking works and when it needs to bail out of the optimization.

[tkrotoff]

@jquense
So import { Transition } from 'react-transition-group' is officially supported, right?

[jquense]

yup

[tkrotoff]

Thanks for the answer.

Is there any reason for writing:

module.exports = {
  Transition,
  TransitionGroup,
  CSSTransition,
};

instead of:

export {
  Transition,
  TransitionGroup,
  CSSTransition
};

https://github.com/reactjs/react-transition-group/blob/v2.2.0/src/index.js#L6

[jquense]

Yes, it better controls what the compiled output will be. Practically if you wrote the es6 syntax there the compiled code would end up looking just like we have it now. e.g module.exports = {...}

[tkrotoff]

Thx.
I'm asking you all these questions because DefinitelyTyped authors (TypeScript definition files) don't want to support the import { ... } from 'react-transition-group' syntax.

And here current strange state:
- the syntax is officially supported by you
- it works with TypeScript
=> but is not allowed with the definition type because _It currently "works" by historical accident. [and] will not work on real module implementations._

I suspect that if inside index.js export { ... } were used instead of module.exports = { ... } they would not question the import { ... } from ... syntax.

See https://github.com/DefinitelyTyped/DefinitelyTyped/pull/18550

[jquense]

I think the TS type defs just need to be updated to correctly allow that syntax