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

Use rollup for more compact build output #81

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
27 changes: 25 additions & 2 deletions .babelrc
@@ -1,5 +1,28 @@
{
"presets": [
"react-native"
"plugins": [
"syntax-async-functions",
"syntax-class-properties",
"syntax-trailing-function-commas",
"transform-class-properties",
"transform-es2015-function-name",

Choose a reason for hiding this comment

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

I wonder if babel-preset-env can help simplify this config a little?

Copy link

Choose a reason for hiding this comment

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

Or babel-preset-airbnb which uses that :-)

"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
["transform-es2015-classes", { "loose": true }],
"transform-es2015-computed-properties",
"check-es2015-constants",
"transform-es2015-destructuring",
"transform-es2015-parameters",
"transform-es2015-shorthand-properties",
"transform-es2015-spread",
"transform-es2015-template-literals",
"transform-es2015-literals",
"transform-flow-strip-types",
"transform-object-assign",
"transform-object-rest-spread",
"transform-react-display-name",
"transform-react-jsx",
"transform-regenerator",
["transform-es2015-for-of", { "loose": true }],
"external-helpers"

Choose a reason for hiding this comment

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

It looks like you are bringing in external helpers now, which means that folks will need to import the external helpers file in order for this to continue working for them. This is almost certainly a breaking change, and I'm hesitant to recommend this approach for a library at this time.

Some people are discussing a modular approach to this, so that might become a good option in the future. More info: babel/babel#5699

]
}
1 change: 1 addition & 0 deletions .gitignore
Expand Up @@ -33,6 +33,7 @@ node_modules
.node_repl_history

/lib
/dist
.DS_Store

examples/interactive-docs/example.bundle.js
12 changes: 9 additions & 3 deletions package.json
Expand Up @@ -6,8 +6,7 @@
"scripts": {
"prepublish": "npm run build:lib",
"build": "npm run build:lib && npm run build:interactive-docs",
"build:lib": "babel src --out-dir lib",
"build:watch": "npm run build:lib -- --watch",
"build:lib": "rollup -c",
"build:interactive-docs": "browserify -e examples/interactive-docs/example.js -o examples/interactive-docs/example.bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
Expand Down Expand Up @@ -38,6 +37,7 @@
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.5.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-syntax-object-rest-spread": "^6.5.0",
"babel-plugin-syntax-trailing-function-commas": "^6.5.0",
"babel-plugin-transform-flow-strip-types": "^6.5.0",
Expand All @@ -46,6 +46,12 @@
"babel-preset-react-native": "^1.4.0",
"browserify": "^13.0.0",
"react": "^15.4.0",
"react-dom": "^15.4.0"
"react-dom": "^15.4.0",
Copy link
Member

Choose a reason for hiding this comment

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

Should this be 16 now?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

we could, but then the interactive docs will need some refactoring (they use createClass right now). There's nothing about animated that's specific to 15 or 16, so it doesn't need to be changed, but we should move to 16 soon. I want to spend some time integrating animated w/ fiber's scheduling, and so at that time i'll definitely up the dev dep. don't think it should be in this PR though.

Copy link
Member

Choose a reason for hiding this comment

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

Ah gotcha, I'll refactor those and make them not just random inline code

"rollup": "^0.51.5",
"rollup-plugin-babel": "^3.0.2",
"rollup-plugin-commonjs": "^8.2.6",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^2.0.1"
}
}
61 changes: 61 additions & 0 deletions rollup.config.js
@@ -0,0 +1,61 @@
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import uglify from 'rollup-plugin-uglify';

import pkg from './package.json';

function distBuild(options = {}) {
return {
input: 'src/index.js',
output: {
file: `dist/${options.filename}`,
format: options.format,
name: 'animated',
sourcemap: options.sourcemap,
},
plugins: [
babel({
exclude: ['node_modules/**'],
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
resolve({
browser: true,
}), // so rollup can find node modules
commonjs(), // so rollup can convert node modules to ESM if needed
options.minify && uglify(),
]
};
}

function standardBuilds(filename) {
return {
input: `src/${filename}.js`,
external: [
...Object.keys(pkg.dependencies),
...Object.keys(pkg.peerDependencies)
],
output: [
{ file: `lib/${filename}.js`, format: 'cjs' },
{ file: `lib/${filename}.mjs`, format: 'es' },
],
plugins: [
babel({
exclude: ['node_modules/**'],
}),
commonjs(), // so rollup can convert node modules to ESM if needed
]
};
}

export default [
distBuild({ filename: 'animated.umd.js', format: 'umd', sourcemap: true, minify: false }),
distBuild({ filename: 'animated.umd.min.js', format: 'umd', sourcemap: true, minify: true }),

Choose a reason for hiding this comment

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

Are you already publishing UMD builds? If not, I'm not really sure how much value it adds to start publishing them now, especially if nobody is asking for them. I'd probably leave this out for now.

Copy link

Choose a reason for hiding this comment

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

Agreed

distBuild({ filename: 'animated.js', format: 'cjs', sourcemap: false, minify: false }),
standardBuilds('index'),
standardBuilds('targets/react-dom'),
standardBuilds('targets/react-native'),
];
2 changes: 1 addition & 1 deletion src/Animated.js
Expand Up @@ -22,4 +22,4 @@ class Animated {
__getChildren(): Array<Animated> { return []; }
}

module.exports = Animated;
export default Animated;
12 changes: 6 additions & 6 deletions src/AnimatedAddition.js
Expand Up @@ -10,11 +10,11 @@
*/
'use strict';

var AnimatedWithChildren = require('./AnimatedWithChildren');
var Animated = require('./Animated');
var AnimatedValue = require('./AnimatedValue');
var Interpolation = require('./Interpolation');
var AnimatedInterpolation = require('./AnimatedInterpolation');
import AnimatedWithChildren from './AnimatedWithChildren';
import Animated from './Animated';
import AnimatedValue from './AnimatedValue';
import Interpolation from './Interpolation';
import AnimatedInterpolation from './AnimatedInterpolation';

import type { InterpolationConfigType } from './Interpolation';

Expand Down Expand Up @@ -75,4 +75,4 @@ class AnimatedAddition extends AnimatedWithChildren {
}
}

module.exports = AnimatedAddition;
export default AnimatedAddition;
12 changes: 6 additions & 6 deletions src/AnimatedInterpolation.js
Expand Up @@ -10,11 +10,11 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedWithChildren = require('./AnimatedWithChildren');
var invariant = require('invariant');
var Interpolation = require('./Interpolation');
var guid = require('./guid');
import Animated from './Animated';
import AnimatedWithChildren from './AnimatedWithChildren';
import invariant from 'invariant';
import Interpolation from './Interpolation';
import guid from './guid';

import type { ValueListenerCallback } from './AnimatedValue';

Expand Down Expand Up @@ -71,4 +71,4 @@ class AnimatedInterpolation extends AnimatedWithChildren {
}
}

module.exports = AnimatedInterpolation;
export default AnimatedInterpolation;
10 changes: 5 additions & 5 deletions src/AnimatedModulo.js
Expand Up @@ -10,10 +10,10 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedWithChildren = require('./AnimatedWithChildren');
var AnimatedInterpolation = require('./AnimatedInterpolation');
var Interpolation = require('./Interpolation');
import Animated from './Animated';
import AnimatedWithChildren from './AnimatedWithChildren';
import AnimatedInterpolation from './AnimatedInterpolation';
import Interpolation from './Interpolation';

import type { InterpolationConfigType } from './Interpolation';

Expand Down Expand Up @@ -64,4 +64,4 @@ class AnimatedModulo extends AnimatedWithChildren {
}
}

module.exports = AnimatedModulo;
export default AnimatedModulo;
12 changes: 6 additions & 6 deletions src/AnimatedMultiplication.js
Expand Up @@ -10,11 +10,11 @@
*/
'use strict';

var AnimatedWithChildren = require('./AnimatedWithChildren');
var Animated = require('./Animated');
var AnimatedValue = require('./AnimatedValue');
var AnimatedInterpolation = require('./AnimatedInterpolation');
var Interpolation = require('./Interpolation');
import AnimatedWithChildren from './AnimatedWithChildren';
import Animated from './Animated';
import AnimatedValue from './AnimatedValue';
import AnimatedInterpolation from './AnimatedInterpolation';
import Interpolation from './Interpolation';

import type { InterpolationConfigType } from './Interpolation';

Expand Down Expand Up @@ -75,4 +75,4 @@ class AnimatedMultiplication extends AnimatedWithChildren {
}
}

module.exports = AnimatedMultiplication;
export default AnimatedMultiplication;
6 changes: 3 additions & 3 deletions src/AnimatedProps.js
Expand Up @@ -10,8 +10,8 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedStyle = require('./AnimatedStyle');
import Animated from './Animated';
import AnimatedStyle from './AnimatedStyle';

class AnimatedProps extends Animated {
_props: Object;
Expand Down Expand Up @@ -80,4 +80,4 @@ class AnimatedProps extends Animated {
}
}

module.exports = AnimatedProps;
export default AnimatedProps;
10 changes: 5 additions & 5 deletions src/AnimatedStyle.js
Expand Up @@ -10,10 +10,10 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedWithChildren = require('./AnimatedWithChildren');
var AnimatedTransform = require('./AnimatedTransform');
var FlattenStyle = require('./injectable/FlattenStyle');
import Animated from './Animated';
import AnimatedWithChildren from './AnimatedWithChildren';
import AnimatedTransform from './AnimatedTransform';
import FlattenStyle from './injectable/FlattenStyle';

class AnimatedStyle extends AnimatedWithChildren {
_style: Object;
Expand Down Expand Up @@ -73,4 +73,4 @@ class AnimatedStyle extends AnimatedWithChildren {
}
}

module.exports = AnimatedStyle;
export default AnimatedStyle;
6 changes: 3 additions & 3 deletions src/AnimatedTemplate.js
Expand Up @@ -10,8 +10,8 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedWithChildren = require('./AnimatedWithChildren');
import Animated from './Animated';
import AnimatedWithChildren from './AnimatedWithChildren';

class AnimatedTemplate extends AnimatedWithChildren {
_strings: Array<string>;
Expand Down Expand Up @@ -56,4 +56,4 @@ class AnimatedTemplate extends AnimatedWithChildren {
}
}

module.exports = AnimatedTemplate;
export default AnimatedTemplate;
6 changes: 3 additions & 3 deletions src/AnimatedTracking.js
Expand Up @@ -10,8 +10,8 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedValue = require('./AnimatedValue');
import Animated from './Animated';
import AnimatedValue from './AnimatedValue';

import type { EndCallback } from './Animated';

Expand Down Expand Up @@ -58,4 +58,4 @@ class AnimatedTracking extends Animated {
}
}

module.exports = AnimatedTracking;
export default AnimatedTracking;
6 changes: 3 additions & 3 deletions src/AnimatedTransform.js
Expand Up @@ -10,8 +10,8 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedWithChildren = require('./AnimatedWithChildren');
import Animated from './Animated';
import AnimatedWithChildren from './AnimatedWithChildren';

class AnimatedTransform extends AnimatedWithChildren {
_transforms: Array<Object>;
Expand Down Expand Up @@ -75,4 +75,4 @@ class AnimatedTransform extends AnimatedWithChildren {
}
}

module.exports = AnimatedTransform;
export default AnimatedTransform;
19 changes: 11 additions & 8 deletions src/AnimatedValue.js
Expand Up @@ -10,13 +10,16 @@
*/
'use strict';

var AnimatedWithChildren = require('./AnimatedWithChildren');
var InteractionManager = require('./injectable/InteractionManager');
var AnimatedInterpolation = require('./AnimatedInterpolation');
var Interpolation = require('./Interpolation');
var Animation = require('./Animation');
var guid = require('./guid');
var Set = global.Set || require('./SetPolyfill');
import AnimatedWithChildren from './AnimatedWithChildren';
import InteractionManager from './injectable/InteractionManager';
import AnimatedInterpolation from './AnimatedInterpolation';
import Interpolation from './Interpolation';
import Animation from './Animation';
import guid from './guid';
import SetPilyfill from './SetPolyfill';

Choose a reason for hiding this comment

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

typo: Pilyfill


// TODO: wonder if we should do the set polyfill another way...

Choose a reason for hiding this comment

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

It would be nice if the Set polyfill from es6-shim was a standalone module that you could just depend on. Alternatively, you could put the burden on consumers and make shimming Set a requirement.

@ljharb might have some thoughts about how to do this best.

Copy link

Choose a reason for hiding this comment

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

I think it’s way simpler for a standard polyfillable feature like Set (or Map, or Promise, etc) to just assume it’s present, and state in the docs that a polyfill is needed.

var Set = global.Set || SetPilyfill;

import type { EndCallback } from './Animation';
import type { InterpolationConfigType } from './Interpolation';
Expand Down Expand Up @@ -209,4 +212,4 @@ class AnimatedValue extends AnimatedWithChildren {
}
}

module.exports = AnimatedValue;
export default AnimatedValue;
12 changes: 6 additions & 6 deletions src/AnimatedValueXY.js
Expand Up @@ -10,11 +10,11 @@
*/
'use strict';

var Animated = require('./Animated');
var AnimatedValue = require('./AnimatedValue');
var AnimatedWithChildren = require('./AnimatedWithChildren');
var invariant = require('invariant');
var guid = require('./guid');
import Animated from './Animated';
import AnimatedValue from './AnimatedValue';
import AnimatedWithChildren from './AnimatedWithChildren';
import invariant from 'invariant';
import guid from './guid';

type ValueXYListenerCallback = (value: {x: number; y: number}) => void;

Expand Down Expand Up @@ -157,4 +157,4 @@ class AnimatedValueXY extends AnimatedWithChildren {
}
}

module.exports = AnimatedValueXY;
export default AnimatedValueXY;
4 changes: 2 additions & 2 deletions src/AnimatedWithChildren.js
Expand Up @@ -10,7 +10,7 @@
*/
'use strict';

var Animated = require('./Animated');
import Animated from './Animated';

class AnimatedWithChildren extends Animated {
_children: Array<Animated>;
Expand Down Expand Up @@ -44,4 +44,4 @@ class AnimatedWithChildren extends Animated {
}
}

module.exports = AnimatedWithChildren;
export default AnimatedWithChildren;
2 changes: 1 addition & 1 deletion src/Animation.js
Expand Up @@ -38,4 +38,4 @@ class Animation {
}
}

module.exports = Animation;
export default Animation;