Use UMD bundle and ES6 modules #1069

kamilkisiela · 2016-12-20T14:11:30Z

UMD bundle for everyone and a version with ES6 modules for those who might be interested in tree-shaking etc.

@helfer We talked some time ago about the tree-shaking. I already moved angular2-apollo (released), apollo-client-rxjs (not yet published) and created an example (will publish it later today).

TODO:

If this PR is a new feature, reference an issue where a consensus about the design was reached (not necessary for small changes)
Make sure all of the significant new logic is covered by tests
Rebase your changes on master so that they can be merged easily
Make sure all tests and linter rules pass
Update CHANGELOG.md with your change
Add your name and email to the AUTHORS file (optional)
If this was a change that affects the external API, update the docs and post a link to the PR in the discussion

Rollup

We use rollup to produce the UMD bundle that contains all files. This way we get smaller size of the library and support for CommonJS and AMD.

ESM (ES6 Modules)

We compile TS files to ES5, so this stays the same. Only difference is that we use es6 modules instead of commonjs. Thanks to that change the apollo-client is tree-shaking friendly

`main` and `module`

To make these changes to work with most of build tools we use main and module fields of package.json:

{
  "main": "apollo.umd.js",
  "module": "index.js"
}

module tells where to look for ES6 modules.
main the same as before, points to files with CommonJS (in this case, only one file)

Filesize

Because we use rollup and we have everything inside just one file, size of the library has been reduced.

Before:
The total size of index.min.js is 136 kB.
The total gzipped size of index.min.js is 35.7 kB.

After:
The total size of index.min.js is 127 kB.
The total gzipped size of index.min.js is 34.8 kB.

Tests

You probably noticed that I use babel to compile already compiled files.

When TypeScript sees this:

import isBoolean from 'lodash/isBoolean';
console.log(isBoolean(false));

It's being compiled to:

var isBoolean = require('lodash/isBoolean');
console.log(isBoolean(false).default);

And since lodash/isBoolean looks like this:

var isBoolean = require('../index').isBoolean;
module.exports = isBoolean;

We end up with isBoolean as undefined.

This is why I use babel to compile ES5 file with ES6 modules to CommonJS so mocha could handle it.

Deploy

I also applied these changes in scripts/deploy.sh.

Circular Dependencies

We also fixed the issue #1074

After this PR we can merge these:

PS @Urigo I wrote a summary so everyone can easily follow changes etc

helfer · 2016-12-21T09:59:48Z

@kamilkisiela is this PR intended for reference only?

kamilkisiela · 2016-12-21T11:37:17Z

@helfer I was working on an example for angular2-apollo that has the tree-shaking and the Ahead-of-Time compilation and it would be nice to have es6 modules in apollo-client to make the app even smaller and tree-shake friendly.

So I ended up with these changes and I decided to open a PR and a discussion :)

helfer · 2016-12-23T09:44:24Z

@kamilkisiela @Urigo this is a pretty major change, so it would have been very useful if you let me know beforehand so we could plan things and avoid wasting time by having to redo parts of this PR (or other PRs) after merging other stuff. It's also unfortunate that removing circular dependencies was rolled in with this PR, I think we could have merged it more quickly otherwise (no need to manually check that the Apollo Client package doesn't break).

Other than that, I think this is pretty cool, so thanks for the hard work! It looks like tree-shaking doesn't actually do much for our library size, but it's always nice to support it.

helfer · 2016-12-23T09:45:22Z

package.json

  "typings": "./lib/src/index.d.ts",
  "scripts": {
    "dev": "./scripts/dev.sh",
-    "deploy": "rm -rf ./lib && npm run compile && ./scripts/deploy.sh",
-    "pretest": "npm run compile",
+    "deploy": "rm -rf ./lib && ./scripts/deploy.sh",


Is the assumption here that the compiler and bundler already ran at this point?

npm run compile is here, so there's no point of running it twice

Makes sense.

DxCx · 2016-12-23T19:13:25Z

Nicely done!
@helfer, please note that the library size kept about the same as not what you should look at.
With the patch apollo client will be treeshake ready, so clients that needs to use only part of the library will get much smaller bundle sizes..

helfer · 2016-12-25T16:41:05Z

@DxCx yeah, I understand that. At the same time it's surprising to see that tree shaking doesn't reduce the library size because I assumed that we had a lot of dependencies of which we only use a small part. I guess that means we were pretty good at only importing what we really needed.

helfer · 2016-12-25T16:43:29Z

@kamilkisiela Can I bug you again when I think things are stable enough to merge this into the 0.6 branch? A lot of conflicts will need to be resolved, so I think it would make sense to do this in a relatively short timeframe once we're ready.

kamilkisiela · 2016-12-28T13:28:03Z

@helfer Sure thing! 👍

helfer · 2017-01-04T15:20:28Z

@kamilkisiela do you have time to change the base of this PR to zero-decimal-six in the next day or two and fix all the conflicts? If you can, then I can merge it and release it with 0.6 :)

kamilkisiela · 2017-01-04T15:29:12Z

@helfer Yep. There's an issue with code coverage reports, I'm working on it.

kamilkisiela · 2017-01-04T16:38:33Z

@helfer Maybe we could update the redux to at least ^3.4.0? This way we get the official typescript definitions so we can drop @types/redux

kamilkisiela · 2017-01-04T16:42:25Z

Closes #746

Note: Typescript files with only types, are used only in compilation phase and not going to be imported on compiled javascript. Closes #1074

This way we avoid an issue with require('lodash/someFunction').default()

kamilkisiela · 2017-01-04T16:51:10Z

change the base of this PR to zero-decimal-six

@helfer Okay, done.

helfer · 2017-01-04T16:51:48Z

@kamilkisiela re updating redux: sure thing, feel free to update it to the latest (compatible) version!

helfer · 2017-01-04T16:53:03Z

Okay, done.

Hm, that's weird, it still says the base is master on github.

edit: Oh, I see, you rebased, but you didn't change the base...

kamilkisiela · 2017-01-04T16:55:04Z

@helfer Yes... Look now

This way we avoid using @types/redux and we use official typescript definition instead

helfer · 2017-01-05T04:04:35Z

Thanks a lot @kamilkisiela, merging now!

lucasconstantino · 2017-01-24T03:29:55Z

I'm trying to upgrade from 0.5.10 to 0.8.0 (as a sugestion from #1194) but I'm experiencing an unexpected token error. As far as I could investigate, importing apollo-client as import Apollo from "apollo-client" and using Webpack to build my app is ending up with a export function somewhere in the bundled file.

Any thoughts? Posting here because it definitely seems related.

EDIT: Ok, I found the issue: I'm importing ApolloError class to do some custom error normalization. The problem is on version 0.5.10 I could simply import doing import { ApolloError } from 'apollo-client/errors/ApolloError' but now that only the apollo.umd.js is properly transpiled into ES5, that's the only file I can trust.

This error normalization is not the only low-level api I'm using from Apollo... I hope I can find them through the officially exported bundle.

kamilkisiela added the in progress label Dec 20, 2016

Urigo force-pushed the umd branch from f9c153b to 2e1e821 Compare December 22, 2016 13:08

This was referenced Dec 22, 2016

Implement es6 modules and UMD bundle kamilkisiela/apollo-client-rxjs#16

Merged

Tree-shaking with apollo-client and apollo-client-rxjs kamilkisiela/apollo-angular#206

Merged

helfer reviewed Dec 23, 2016

View reviewed changes

kamilkisiela force-pushed the umd branch from 0e2110a to 453e1bf Compare December 23, 2016 14:20

Urigo mentioned this pull request Dec 30, 2016

Module or jsnext:main in package.json #746

Closed

kamilkisiela mentioned this pull request Jan 3, 2017

Version 0.7 #1095

Merged

4 tasks

kamilkisiela force-pushed the umd branch from 453e1bf to 70657d8 Compare January 4, 2017 08:30

kamilkisiela and others added 10 commits January 4, 2017 17:45

Use UMD bundle and ES6 modules

4f76c57

Single imports

de2e7a2

Fix circular dependencies

a781301

Note: Typescript files with only types, are used only in compilation phase and not going to be imported on compiled javascript. Closes #1074

Compile to commonjs with babel

cc52b46

This way we avoid an issue with require('lodash/someFunction').default()

Inlude mising tests

0b2c92c

Exclude bundle from babel

bc00bac

Fix missing ApolloQueryResult in tests

87d2e83

Fix tests

db06402

Compile with sourcemaps

d960c6a

Make everything ready to npm publish

f542f14

kamilkisiela added 6 commits January 4, 2017 17:46

Use UMD bundle to filesize check

696e2ed

Fix wrong function usage in test

5fe7970

Add lodash to globals in rollup

6ad6da8

Make code coverage works

fa58b1f

Add jsnext:main

5ba7fe5

Define globals for lodash in rollup

ecef360

kamilkisiela force-pushed the umd branch from 67576dc to ecef360 Compare January 4, 2017 16:50

kamilkisiela changed the base branch from master to zero-decimal-six January 4, 2017 16:54

kamilkisiela added 2 commits January 4, 2017 18:01

Update to [email protected]

c90a749

This way we avoid using @types/redux and we use official typescript definition instead

Add recent changes to the changelog

c42b761

helfer merged commit 08d6dfc into zero-decimal-six Jan 5, 2017

helfer removed the in progress label Jan 5, 2017

helfer deleted the umd branch January 5, 2017 04:05

helfer mentioned this pull request Jan 5, 2017

Incompatibility with Rollup #731

Closed

Urigo mentioned this pull request Jan 25, 2017

Angular-GraphQL cookbook angular/angular.io#3135

Open

9 tasks

bgentry mentioned this pull request Jan 27, 2017

Cannot use newer version of apollo-client ember-graphql/ember-apollo-client#10

Closed

jbaxleyiii mentioned this pull request May 6, 2017

Support Tree Shaking though module field apollographql/react-apollo#686

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 2, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use UMD bundle and ES6 modules #1069

Use UMD bundle and ES6 modules #1069

kamilkisiela commented Dec 20, 2016 •

edited by johnthepink

Loading

helfer commented Dec 21, 2016

kamilkisiela commented Dec 21, 2016

helfer commented Dec 23, 2016

helfer Dec 23, 2016

kamilkisiela Dec 23, 2016

helfer Dec 25, 2016

DxCx commented Dec 23, 2016

helfer commented Dec 25, 2016

helfer commented Dec 25, 2016

kamilkisiela commented Dec 28, 2016

helfer commented Jan 4, 2017 •

edited

Loading

kamilkisiela commented Jan 4, 2017 •

edited

Loading

kamilkisiela commented Jan 4, 2017

kamilkisiela commented Jan 4, 2017

kamilkisiela commented Jan 4, 2017

helfer commented Jan 4, 2017

helfer commented Jan 4, 2017 •

edited

Loading

kamilkisiela commented Jan 4, 2017

helfer commented Jan 5, 2017

lucasconstantino commented Jan 24, 2017 •

edited

Loading

Use UMD bundle and ES6 modules #1069

Use UMD bundle and ES6 modules #1069

Conversation

kamilkisiela commented Dec 20, 2016 • edited by johnthepink Loading

Rollup

ESM (ES6 Modules)

main and module

Filesize

Tests

Deploy

Circular Dependencies

helfer commented Dec 21, 2016

kamilkisiela commented Dec 21, 2016

helfer commented Dec 23, 2016

helfer Dec 23, 2016

Choose a reason for hiding this comment

kamilkisiela Dec 23, 2016

Choose a reason for hiding this comment

helfer Dec 25, 2016

Choose a reason for hiding this comment

DxCx commented Dec 23, 2016

helfer commented Dec 25, 2016

helfer commented Dec 25, 2016

kamilkisiela commented Dec 28, 2016

helfer commented Jan 4, 2017 • edited Loading

kamilkisiela commented Jan 4, 2017 • edited Loading

kamilkisiela commented Jan 4, 2017

kamilkisiela commented Jan 4, 2017

kamilkisiela commented Jan 4, 2017

helfer commented Jan 4, 2017

helfer commented Jan 4, 2017 • edited Loading

kamilkisiela commented Jan 4, 2017

helfer commented Jan 5, 2017

lucasconstantino commented Jan 24, 2017 • edited Loading

kamilkisiela commented Dec 20, 2016 •

edited by johnthepink

Loading

`main` and `module`

helfer commented Jan 4, 2017 •

edited

Loading

kamilkisiela commented Jan 4, 2017 •

edited

Loading

helfer commented Jan 4, 2017 •

edited

Loading

lucasconstantino commented Jan 24, 2017 •

edited

Loading