Implement es6 modules and UMD bundle (#16)

* Implement es6 modules and UMD bundle

* Use latest

* Make compatible with 0.7

.travis.yml

@@ -3,7 +3,6 @@ sudo: false
 language: node_js
 
 node_js:
-  - '4'
   - '6'
 
 cache:

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### vNEXT
 
+- Use ES6 Modules and UMD bundle to make this package tree-shaking friendly [PR #16](https://github.com/kamilkisiela/apollo-client-rxjs/pull/16)
 
 ### v0.3.0
 

package.json

@@ -4,7 +4,8 @@
   "description": "Adds RxJS to ApolloClient",
   "author": "Kamil Kisiela <kamil.kisiela@gmail.com>",
   "license": "MIT",
-  "main": "./build/src/index.js",
+  "main": "build/bundles/apollo-rxjs.umd.js",
+  "module": "./build/src/index.js",
   "typings": "./build/src/index.d.ts",
   "repository": {
     "type": "git",
@@ -21,7 +22,7 @@
     "graphql"
   ],
   "scripts": {
-    "pretest": "npm run build",
+    "pretest": "npm run build-test",
     "test": "npm run test-only --",
     "posttest": "npm run lint",
     "test-only": "mocha --reporter spec --full-trace build/tests/index.js",
@@ -31,6 +32,9 @@
     "lint": "tslint src/**/*.ts && tslint tests/*.ts",
     "prebuild": "npm run clean:build",
     "build": "tsc",
+    "build-test": "tsc -p tsconfig.test.json",
+    "postbuild": "npm run bundle",
+    "bundle": "rollup -c",
     "watch": "tsc -w",
     "clean": "npm run clean:build && npm run clean:coverage",
     "clean:build": "rimraf build/*",
@@ -41,7 +45,7 @@
     "lodash": "^4.17.2"
   },
   "peerDependencies": {
-    "apollo-client": "^0.6.0",
+    "apollo-client": "^0.7.0",
     "rxjs": "^5.0.0-beta.12 || ^5.0.0-rc.1 || ^5.0.0"
   },
   "devDependencies": {
@@ -51,19 +55,20 @@
     "@types/mocha": "^2.2.31",
     "@types/node": "^6.0.38",
     "@types/sinon": "^1.16.29",
-    "apollo-client": "^0.6.0",
+    "apollo-client": "^0.7.1",
     "chai": "^3.5.0",
-    "graphql": "^0.8.0",
-    "graphql-tag": "^0.1.15",
+    "graphql": "^0.8.2",
+    "graphql-tag": "^1.1.2",
     "isomorphic-fetch": "^2.2.1",
-    "istanbul": "^0.4.4",
-    "mocha": "^3.1.2",
-    "remap-istanbul": "^0.7.0",
+    "istanbul": "^0.4.5",
+    "mocha": "^3.2.0",
+    "remap-istanbul": "^0.8.2",
     "rimraf": "^2.5.4",
-    "rxjs": "^5.0.0",
+    "rollup": "^0.37.0",
+    "rxjs": "^5.0.3",
     "sinon": "^1.17.5",
-    "source-map-support": "^0.4.5",
-    "tslint": "^3.15.1",
+    "source-map-support": "^0.4.6",
+    "tslint": "^4.1.1",
     "typescript": "^2.0.0"
   }
 }

rollup.config.js

@@ -0,0 +1,24 @@
+export default {
+  entry: 'build/src/index.js',
+  dest: 'build/bundles/apollo-rxjs.umd.js',
+  format: 'umd',
+  moduleName: 'apollo.rxjs',
+  globals: {
+    'lodash': '_',
+    'apollo-client': 'apollo',
+    'rxjs/Observable': 'Rx',
+    'rxjs/Observer': 'Rx',
+    'rxjs/Subscription': 'Rx',
+    'rxjs/Subscriber': 'Rx',
+    'rxjs/Operator': 'Rx',
+
+    'rxjs/symbol/observable': 'Rx.Symbol',
+
+    'rxjs/scheduler/AsyncScheduler': 'Rx.Scheduler.async',
+
+    'rxjs/observable/combineLatest': 'Rx.Observable',
+
+    'rxjs/operator/observeOn': 'Rx.Observable.prototype',
+    'rxjs/operator/switchMap': 'Rx.Observable.prototype'
+  }
+}

src/RxApolloClient.ts

@@ -1,4 +1,5 @@
 import { ApolloClient, WatchQueryOptions } from 'apollo-client';
+
 import { RxObservableQuery } from './RxObservableQuery';
 import { createWithObservableVariables } from './utils/variables';
 

src/RxObservableQuery.ts

@@ -9,7 +9,7 @@ import { ObservableQueryRef } from './utils/ObservableQueryRef';
 
 export class RxObservableQuery<T> extends Observable<T> {
   constructor(
-    public apollo: ObservableQuery | ObservableQueryRef,
+    public apollo: ObservableQuery<any> | ObservableQueryRef,
     subscribe?: <R>(subscriber: Subscriber<R>) => Subscription | Function | void
   ) {
     super(null);
@@ -30,7 +30,7 @@ export class RxObservableQuery<T> extends Observable<T> {
 
   // apollo-specific methods
 
-  public refetch(variables?: any): Promise<ApolloQueryResult> {
+  public refetch(variables?: any): Promise<ApolloQueryResult<any>> {
     return this.getObservableQuery().refetch(variables);
   }
 
@@ -68,12 +68,12 @@ export class RxObservableQuery<T> extends Observable<T> {
     return obs[$$observable]().subscribe(subscriber);
   }
 
-  private getObservableQuery(): ObservableQuery {
+  private getObservableQuery(): ObservableQuery<any> {
     if (this.apollo instanceof ObservableQueryRef) {
       const ref = this.apollo as ObservableQueryRef;
       return ref.getRef();
     }
 
-    return this.apollo as ObservableQuery;
+    return this.apollo as ObservableQuery<any>;
   }
 }

src/rxify.ts

@@ -2,14 +2,13 @@ import { ApolloClient, ApolloQueryResult, ObservableQuery } from 'apollo-client'
 import { observeOn } from 'rxjs/operator/observeOn';
 import { AsyncAction } from 'rxjs/scheduler/AsyncAction';
 import { AsyncScheduler } from 'rxjs/scheduler/AsyncScheduler';
+import { isFunction } from 'lodash';
 
 import { createWithObservableVariables } from './utils/variables';
 import { RxObservableQuery } from './RxObservableQuery';
 
-import isFunction = require('lodash/isFunction');
-
-export type WatchQueryFn = (options?: any) => ObservableQuery;
-export type WatchQueryRxFn = (options?: any) => RxObservableQuery<ApolloQueryResult>;
+export type WatchQueryFn = (options?: any) => ObservableQuery<any>;
+export type WatchQueryRxFn = (options?: any) => RxObservableQuery<ApolloQueryResult<any>>;
 
 export function rxify(
   clientOrWatchQuery: ApolloClient | WatchQueryFn
@@ -18,7 +17,7 @@ export function rxify(
   if (clientOrWatchQuery instanceof ApolloClient) {
     const savedWatchQuery = clientOrWatchQuery.watchQuery;
 
-    clientOrWatchQuery.watchQuery = function(options): RxObservableQuery<ApolloQueryResult> {
+    clientOrWatchQuery.watchQuery = function(options): RxObservableQuery<ApolloQueryResult<any>> {
       return wrapWatchQuery((opts) => savedWatchQuery.call(this, opts))(options);
     }.bind(clientOrWatchQuery);
 

src/utils/ObservableQueryRef.ts

@@ -1,19 +1,19 @@
 import { ObservableQuery } from 'apollo-client';
 
 export class ObservableQueryRef {
-  private ref: ObservableQuery;
+  private ref: ObservableQuery<any>;
 
-  constructor(ref?: ObservableQuery) {
+  constructor(ref?: ObservableQuery<any>) {
     if (ref) {
       this.setRef(ref);
     }
   }
 
-  public setRef(ref: ObservableQuery) {
+  public setRef(ref: ObservableQuery<any>) {
     this.ref = ref;
   }
 
-  public getRef(): ObservableQuery {
+  public getRef(): ObservableQuery<any> {
     return this.ref;
   }
 }

src/utils/variables.ts

@@ -1,33 +1,30 @@
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
+import { switchMap } from 'rxjs/operator/switchMap';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 import { ObservableQuery } from 'apollo-client';
+import { assign, omit } from 'lodash';
 
 import { ObservableQueryRef } from './ObservableQueryRef';
 import { RxObservableQuery } from '../RxObservableQuery';
 
-import assign = require('lodash/assign');
-import omit = require('lodash/omit');
-
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/observable/combineLatest';
-
 export function createWithObservableVariables(
   options: any,
-  mapFn: (options: any) => ObservableQuery
+  mapFn: (options: any) => ObservableQuery<any>,
 ): RxObservableQuery<any> {
   const observableQueryRef = new ObservableQueryRef();
   const varObs = observeVariables(options.variables);
 
   return new RxObservableQuery(observableQueryRef, subscriber => {
-    const sub = varObs.switchMap(newVariables => {
+    const sub = switchMap.call(varObs, (newVariables => {
       // prepare variables
       const cleanOptions = omit(options, 'variables');
       const newOptions = assign(cleanOptions, { variables: newVariables });
 
       observableQueryRef.setRef(mapFn(newOptions));
 
       return observableQueryRef.getRef();
-    }).subscribe(subscriber);
+    })).subscribe(subscriber);
 
     return () => sub.unsubscribe();
   });
@@ -37,7 +34,7 @@ export function observeVariables(variables?: Object): Observable<Object> {
   const keys = Object.keys(variables);
 
   return Observable.create((observer: Observer<any>) => {
-    Observable.combineLatest(mapVariablesToObservables(variables))
+    combineLatest.call(undefined, mapVariablesToObservables(variables))
       .subscribe((values) => {
         const resultVariables = {};
 
@@ -51,12 +48,12 @@ export function observeVariables(variables?: Object): Observable<Object> {
   });
 };
 
-function mapVariablesToObservables(variables?: Object) {
+function mapVariablesToObservables(variables?: Object): Observable<any>[] {
   return Object.keys(variables)
     .map(key => getVariableToObservable(variables[key]));
 }
 
-function getVariableToObservable(variable: any | Observable<any>) {
+function getVariableToObservable(variable: any | Observable<any>): Observable<any> {
   if (variable instanceof Observable) {
     return variable;
   } else if (typeof variable !== 'undefined') {

tests/RxApolloClient/watchQuery.ts

@@ -20,7 +20,7 @@ describe('RxApolloClient.watchQuery', () => {
         assert.deepEqual(result.data, heroes.data);
         done();
       },
-      error(error) {
+      error() {
         done(new Error('should not be called'));
       }
     });
@@ -32,8 +32,10 @@ describe('RxApolloClient.watchQuery', () => {
     });
 
     obs.subscribe({
-      next(result) {},
-      error(error) {
+      next() {
+        //
+      },
+      error() {
         done(new Error('should not be called'));
       }
     });

tests/RxObservableQuery.ts

@@ -9,8 +9,8 @@ import { ObservableQueryRef } from '../src/utils/ObservableQueryRef';
 import 'rxjs/add/operator/map';
 
 describe('RxObservableQuery', () => {
-  let obsQuery: ObservableQuery;
-  let rxObsQuery: RxObservableQuery<ApolloQueryResult>;
+  let obsQuery: ObservableQuery<any>;
+  let rxObsQuery: RxObservableQuery<ApolloQueryResult<any>>;
   let client: ApolloClient;
 
   beforeEach(() => {
@@ -25,7 +25,7 @@ describe('RxObservableQuery', () => {
     const mockedClient = {
       refetch() { done(); },
     };
-    const obsQRef = new ObservableQueryRef(mockedClient as ObservableQuery);
+    const obsQRef = new ObservableQueryRef(mockedClient as ObservableQuery<any>);
     const rxObs = new RxObservableQuery(obsQRef);
 
     rxObs.refetch();
@@ -60,7 +60,7 @@ describe('RxObservableQuery', () => {
           assert.deepEqual(result, heroes.data);
           done();
         },
-        error(error) {
+        error() {
           done(new Error('should not be called'));
         },
       });

tests/fixtures/heroes.ts

@@ -45,8 +45,8 @@ export const variables = { hero: 'Mr Bar' };
 
 export interface MockedClientResult {
   client: ApolloClient;
-  obsQuery: ObservableQuery;
-  rxObsQuery: RxObservableQuery<ApolloQueryResult>;
+  obsQuery: ObservableQuery<any>;
+  rxObsQuery: RxObservableQuery<ApolloQueryResult<any>>;
 }
 
 export function mockClient(): MockedClientResult {

tests/mocks/mockNetworkInterface.ts

@@ -1,9 +1,12 @@
 import {
   NetworkInterface,
-  BatchedNetworkInterface,
   Request,
+} from 'apollo-client';
+
+import {
+  BatchedNetworkInterface,
   SubscriptionNetworkInterface,
-} from 'apollo-client/transport/networkInterface';
+} from 'apollo-client/lib/src/transport/networkInterface';
 
 import {
   ExecutionResult,

tsconfig.json

@@ -2,14 +2,16 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["es6", "dom"],
-    "module": "commonjs",
+    "module": "es2015",
     "moduleResolution": "node",
     "removeComments": true,
     "sourceMap": true,
     "declaration": true,
     "rootDir": ".",
     "outDir": "build",
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
   },
   "files": [
     "src/index.ts",

tsconfig.test.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "removeComments": true,
+    "sourceMap": true,
+    "declaration": true,
+    "rootDir": ".",
+    "outDir": "build",
+    "noImplicitAny": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "files": [
+    "src/index.ts",
+    "tests/index.ts"
+  ]
+}