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.

Sign up for GitHub

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

Jump to bottom

Incorporated development + production builds into /dist (#64) #66

Merged
merged 2 commits into from May 29, 2017
Merged

Incorporated development + production builds into /dist (#64) #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efd8907
Incorporated development + production builds into /dist (#64) and
virgofx May 29, 2017
2e39c94
Dropping references to Webpack specific build configurations in Readme
virgofx May 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
@@ -1,3 +1,8 @@
## [v1.1.X]
> 2017-XX-XX

- **Feature:** Dist build now includes both production and development builds ([#64])

## [v1.1.3]
> 2017-05-02

Expand Down
10 changes: 9 additions & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -20,14 +20,22 @@ npm install react-transition-group --save
yarn add react-transition-group
```

## CDN / External

Since react-transition-group is fairly small, the overhead of including the library in your application is
negligible. However, in situations where it may be useful to benefit from an external CDN when bundling, link
to the following CDN:

[https://unpkg.com/react-transition-group/dist/react-transition-group.min.js](https://unpkg.com/react-transition-group/dist/react-transition-group.min.js)

## High-level API: CSSTransitionGroup

`CSSTransitionGroup` is a high-level API based on [`TransitionGroup`](#low-level-api-transitiongroup) and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](http://www.nganimate.org/) library.

**Importing**

```javascript
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' // ES6
import { CSSTransitionGroup } from 'react-transition-group' // ES6
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather show the cherry picked version here :)

Copy link
Contributor Author

@virgofx virgofx May 29, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't able to get the cherry picked version to exclude properly when testing. (Which is why I included the corresponding webpack config in the readme as well)

All documentation everywhere prefers the standard ES6 brace style for non-default components. Do you have an example webpack external config where using cherry picked version will work?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya you can't cherry pick from the dist builds since they are flat files (a downside of UMD builds). We really should just both options since they are all valid choices for importing. I'm fine leaving this change in. I can make the docs more detailed later

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha. Dropped the webpack build specific option above and added minor clarity. If you want to clarify the import or even better document both (Cherry picked for direct bundled or ES6 style import for those using /dist builds), fine with me.


var CSSTransitionGroup = require('react-transition-group/CSSTransitionGroup') // ES5 with npm
```
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@
"test": "jest --runInBand --verbose",
"tdd": "jest --watch",
"build": "rimraf lib && babel src --out-dir lib && npm run build:dist",
"build:dist": "rimraf lib/dist && webpack -p --define process.env.NODE_ENV='production'",
"build:dist": "rimraf lib/dist && webpack && NODE_ENV=production webpack -p",
"lint": "eslint src test",
"release": "release"
},
Expand Down
4 changes: 3 additions & 1 deletion webpack.config.js
View file
Open in desktop
Expand Up @@ -3,7 +3,9 @@ const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'react-transition-group.js',
filename: process.env.NODE_ENV === 'production'
? 'react-transition-group.min.js'
: 'react-transition-group.js',
path: path.join(__dirname, 'lib/dist'),
library: 'ReactTransitionGroup',
libraryTarget: 'umd',
Expand Down