Import/export/package cleanup (#1467)

* rename server.ts

* export default withApollo

* uniquely name type - QueryResult -> QueryTreeResult

* uniquely name QueryProps -> GraphqlQueryControls to consolidate exports.

* refactor imports/exports and update deprecated rollup configurations

* Revert tsconfig module back to es2015 for correct package output and adjust prepare-package.sh

* changelog and bundlesize config update

Changelog.md

@@ -1,22 +1,30 @@
 # Change log
 
 ### next
-- Update all dependencies, scripts' usage, prettier and typescript setup [#1402](https://github.com/apollographql/react-apollo/pull/1402)
-- Tests are now linted and verified valid typescript [#1402](https://github.com/apollographql/react-apollo/pull/1402)
-- Typescript - updated `types` for consistency and potential to pass through all types e.g. `TProps, TData, TGraphQLVariables` [#1402](https://github.com/apollographql/react-apollo/pull/1402)
-- Typescript - added `ChildDataProps` and `ChildMutateProps` for optional stronger typed usage version of `ChildProps` [#1402](https://github.com/apollographql/react-apollo/pull/1402)
-- **BREAKING [Typescript usage only]** - `graphql` parameterized types streamlined for 
+
+- **BREAKING CHANGES**
+  - typescript - `graphql` parameterized types streamlined for 
 a) full typing; and b) ease of use; and c) consistency.  New parameterized is: 
 `graphql<TProps,TData, TGraphQLVariables, TChildProps>` where none are required and full typing only requires the
 first three params (`TChildProps` can be derived). [#1402](https://github.com/apollographql/react-apollo/pull/1402) 
-- Typescript - fix `graphql` HOC inference [#1402](https://github.com/apollographql/react-apollo/pull/1402)
-- **Remove deprecated** `operationOptions.options.skip`, use `operationOptions.skip` instead
-- Added <Query /> component [#1398](https://github.com/apollographql/react-apollo/pull/1398)
-- Made prettier solely responsible for formatting, removed all formatting linting rules from tslint [#1452](https://github.com/apollographql/react-apollo/pull/1452)
-- Add <ApolloConsumer /> component [#1399](https://github.com/apollographql/react-apollo/pull/1399)
-- Convert `Query.test` to `tsx` and parameterize types for `Query` [#1462](https://github.com/apollographql/react-apollo/pull/1462)
-- Remove copied `shallowEqual` code and delegate to `fbjs` [#1465](https://github.com/apollographql/react-apollo/pull/1465)
-
+  - Remove deprecated `operationOptions.options.skip`, use `operationOptions.skip` instead
+  - Rename type `ProviderProps` to `ApolloProviderProps` [#1467](https://github.com/apollographql/react-apollo/pull/1467)
+  - Rename `getDataFromTree` type `QueryResult` to `QueryTreeResult` [#1467](https://github.com/apollographql/react-apollo/pull/1467)
+  - Rename type `QueryProps` to `GraphqlQueryControls` [#1467](https://github.com/apollographql/react-apollo/pull/1467)
+
+- **Other Changes**
+  - Update all dependencies, scripts' usage, prettier and typescript setup [#1402](https://github.com/apollographql/react-apollo/pull/1402)
+  - Tests are now linted and verified valid typescript [#1402](https://github.com/apollographql/react-apollo/pull/1402)
+  - Typescript - updated `types` for consistency and potential to pass through all types e.g. `TProps, TData, TGraphQLVariables` [#1402](https://github.com/apollographql/react-apollo/pull/1402)
+  - Typescript - added `ChildDataProps` and `ChildMutateProps` for optional stronger typed usage version of `ChildProps` [#1402](https://github.com/apollographql/react-apollo/pull/1402)
+  - Typescript - fix `graphql` HOC inference [#1402](https://github.com/apollographql/react-apollo/pull/1402)
+  - Added <Query /> component [#1398](https://github.com/apollographql/react-apollo/pull/1398)
+  - Made prettier solely responsible for formatting, removed all formatting linting rules from tslint [#1452](https://github.com/apollographql/react-apollo/pull/1452)
+  - Add <ApolloConsumer /> component [#1399](https://github.com/apollographql/react-apollo/pull/1399)
+  - Convert `Query.test` to `tsx` and parameterize types for `Query` [#1462](https://github.com/apollographql/react-apollo/pull/1462)
+  - Remove copied `shallowEqual` code and delegate to `fbjs` [#1465](https://github.com/apollographql/react-apollo/pull/1465)
+  - Update rollup configurations, refine package exports [#1467](https://github.com/apollographql/react-apollo/pull/1467)
+
 ### 2.0.4
 - rolled back on the lodash-es changes from
   [#1344](https://github.com/apollographql/react-apollo/pull/1344) due to build

package.json

@@ -16,12 +16,12 @@
     "test-watch": "jest --watch",
     "filesize": "bundlesize",
     "type-check": "tsc --project tsconfig.json --noEmit && flow check",
-    "precompile": "rimraf lib",
+    "precompile": "rimraf lib && rimraf npm",
     "compile":
       "tsc --project tsconfig.json && rimraf lib/test && mv lib/src/* lib/. && rimraf lib/src",
     "postcompile": "npm run bundle",
     "bundle":
-      "rollup -c && rollup -c rollup.browser.config.js && rollup -c rollup.test-utils.config.js",
+      "rollup -c rollup.config.js && rollup -c rollup.test-utils.config.js",
     "watch": "tsc -w",
     "lint": "tslint --project tsconfig.json --config tslint.json",
     "lint:fix":
@@ -32,8 +32,8 @@
   },
   "bundlesize": [
     {
-      "path": "./lib/react-apollo.browser.umd.js",
-      "threshold": "10 Kb"
+      "path": "./lib/umd/react-apollo.umd.js",
+      "threshold": "1 Kb"
     }
   ],
   "lint-staged": {

rollup.config.js

@@ -1,14 +1,16 @@
 export default {
-  entry: "lib/index.js",
-  dest: "lib/react-apollo.umd.js",
-  format: "umd",
-  sourceMap: true,
-  moduleName: "react-apollo",
+  input: 'lib/index.js',
+  output: {
+    file: 'lib/umd/react-apollo.umd.js',
+    format: 'umd',
+    name: 'react-apollo',
+    sourcemap: true,
+  },
   onwarn,
 };
 
 function onwarn(message) {
-  const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"];
+  const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED'];
 
   if (!suppressed.find(code => message.code === code)) {
     return console.warn(message.message);

rollup.test-utils.config.js

@@ -1,14 +1,16 @@
 export default {
-  entry: "lib/test-utils.js",
-  dest: "lib/test-utils.js",
-  format: "umd",
-  sourceMap: true,
-  moduleName: "react-apollo",
+  input: 'lib/test-utils.js',
+  output: {
+    file: 'lib/umd/test-utils.js',
+    format: 'umd',
+    name: 'react-apollo',
+    sourcemap: true,
+  },
   onwarn,
 };
 
 function onwarn(message) {
-  const suppressed = ["UNRESOLVED_IMPORT", "THIS_IS_UNDEFINED"];
+  const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED'];
 
   if (!suppressed.find(code => message.code === code)) {
     return console.warn(message.message);

scripts/prepare-package.sh

@@ -7,7 +7,7 @@
 #
 
 # Clear the built output
-rm -rf ./lib
+rm -rf ./lib ./npm
 
 # Compile new files
 npm run compile
@@ -18,8 +18,6 @@ mkdir ./npm
 
 # Copy all files from ./lib to /npm
 cd ./lib && cp -r ./ ../npm/
-# Copy also the umd bundle with the source map file
-cp react-apollo.umd.js ../npm/ && cp react-apollo.umd.js.map ../npm/
 
 # Back to the root directory
 cd ../
@@ -34,8 +32,7 @@ node -e "var package = require('./package.json'); \
   delete package[\"pre-commit\"]; \
   delete package.scripts; \
   delete package.options; \
-  package.main = 'react-apollo.umd.js'; \
-  package.browser = 'react-apollo.browser.umd.js'; \
+  package.main = 'umd/react-apollo.umd.js'; \
   package.module = 'index.js'; \
   package['jsnext:main'] = 'index.js'; \
   package.typings = 'index.d.ts'; \

src/ApolloProvider.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Component } from 'react';
-
 import ApolloClient from 'apollo-client';
 import QueryRecyclerProvider from './QueryRecyclerProvider';
 
 const invariant = require('invariant');
 
-export interface ProviderProps<TCache> {
+export interface ApolloProviderProps<TCache> {
   client: ApolloClient<TCache>;
 }
 
 export default class ApolloProvider<TCache> extends Component<
-  ProviderProps<TCache>
+  ApolloProviderProps<TCache>
 > {
   static propTypes = {
     client: PropTypes.object.isRequired,

src/Query.tsx

@@ -14,8 +14,8 @@ import { DocumentNode } from 'graphql';
 import { ZenObservable } from 'zen-observable-ts';
 import { OperationVariables } from './types';
 import { parser, DocumentType } from './parser';
-import shallowEqual = require('fbjs/lib/shallowEqual');
 
+const shallowEqual = require('fbjs/lib/shallowEqual');
 const invariant = require('invariant');
 const pick = require('lodash.pick');
 

src/getDataFromTree.ts

@@ -13,7 +13,7 @@ export interface QueryTreeArgument<Cache> {
   rootContext?: Context<Cache>;
 }
 
-export interface QueryResult<Cache> {
+export interface QueryTreeResult<Cache> {
   query: Promise<ApolloQueryResult<any>>;
   element: ReactElement<any>;
   context: Context<Cache>;
@@ -122,7 +122,7 @@ export function walkTree<Cache>(
 function getQueriesFromTree<Cache>(
   { rootElement, rootContext = {} }: QueryTreeArgument<Cache>,
   fetchRoot: boolean = true,
-): QueryResult<Cache>[] {
+): QueryTreeResult<Cache>[] {
   const queries = [];
 
   walkTree(rootElement, rootContext, (element, instance, context) => {
@@ -143,7 +143,7 @@ function getQueriesFromTree<Cache>(
 }
 
 // XXX component Cache
-export function getDataFromTree(
+export default function getDataFromTree(
   rootElement: ReactElement<any>,
   rootContext: any = {},
   fetchRoot: boolean = true,

src/graphql.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import shallowEqual = require('fbjs/lib/shallowEqual');
 import ApolloClient, {
   ObservableQuery,
   ApolloQueryResult,
@@ -13,11 +12,12 @@ import {
   ChildProps,
   OperationOption,
   QueryOpts,
-  QueryProps,
+  GraphqlQueryControls,
   MutationFunc,
   OptionProps,
 } from './types';
 
+const shallowEqual = require('fbjs/lib/shallowEqual');
 const invariant = require('invariant');
 const assign = require('object-assign');
 const pick = require('lodash.pick');
@@ -313,7 +313,9 @@ export default function graphql<
         return opts;
       }
 
-      calculateResultProps(result: (QueryProps & TData) | MutationFunc<TData>) {
+      calculateResultProps(
+        result: (GraphqlQueryControls & TData) | MutationFunc<TData>,
+      ) {
         let name = this.type === DocumentType.Mutation ? 'mutate' : 'data';
         if (operationOptions.name) name = operationOptions.name;
 
@@ -397,7 +399,7 @@ export default function graphql<
         }
       }
 
-      // For server-side rendering (see server.ts)
+      // For server-side rendering (see renderToStringWithData.ts)
       fetchData(): Promise<ApolloQueryResult<any>> | boolean {
         if (this.shouldSkip()) return false;
         if (
@@ -573,14 +575,14 @@ export default function graphql<
 
           // handle race condition where refetch is called on child mount
           if (!this.querySubscription) {
-            (data as QueryProps).refetch = args => {
+            (data as GraphqlQueryControls).refetch = args => {
               return new Promise((r, f) => {
                 this.refetcherQueue = { resolve: r, reject: f, args };
               });
             };
           }
         }
-        return data as QueryProps & TData;
+        return data as GraphqlQueryControls & TData;
       }
 
       render() {

src/index.ts

@@ -1,4 +1,21 @@
-export * from './browser';
+export { default as getDataFromTree } from './getDataFromTree';
 export * from './getDataFromTree';
-export { renderToStringWithData } from './server';
+
+export { default as renderToStringWithData } from './renderToStringWithData';
+
+export { default as ApolloProvider } from './ApolloProvider';
+export * from './ApolloProvider';
+
+export { default as Query } from './Query';
+export * from './Query';
+
+export { default as graphql } from './graphql';
+export * from './graphql';
+
+export { default as withApollo } from './withApollo';
+
 export * from './types';
+
+// expose easy way to join queries from redux
+import * as compose from 'lodash.flowright';
+export { compose };

src/queryRecycler.ts

@@ -1,8 +1,9 @@
 import { ObservableQuery } from 'apollo-client';
 import { ZenObservable } from 'zen-observable-ts';
-import shallowEqual = require('fbjs/lib/shallowEqual');
 import { QueryOpts } from './types';
 
+const shallowEqual = require('fbjs/lib/shallowEqual');
+
 // XXX move this logic to ObservableQuery / QueryManager in apollo-client
 
 /**

src/renderToStringWithData.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+import getDataFromTree from './getDataFromTree';
+
+export default function renderToStringWithData(
+  component: React.ReactElement<any>,
+): Promise<string> {
+  return getDataFromTree(component).then(() =>
+    ReactDOM.renderToString(component),
+  );
+}

src/types.ts

@@ -36,7 +36,7 @@ export interface QueryOpts<TGraphQLVariables = OperationVariables> {
   notifyOnNetworkStatusChange?: boolean;
 }
 
-export interface QueryProps<TGraphQLVariables = OperationVariables> {
+export interface GraphqlQueryControls<TGraphQLVariables = OperationVariables> {
   error?: ApolloError;
   networkStatus: number;
   loading: boolean;
@@ -63,7 +63,7 @@ export type MutationFunc<
 export type DataValue<
   TData,
   TGraphQLVariables = OperationVariables
-> = QueryProps<TGraphQLVariables> &
+> = GraphqlQueryControls<TGraphQLVariables> &
   // data may not yet be loaded
   Partial<TData>;
 

src/withApollo.tsx

@@ -1,17 +1,16 @@
 import * as React from 'react';
+import { OperationOption } from './types';
+import ApolloConsumer from './ApolloConsumer';
 
 const invariant = require('invariant');
 
 const hoistNonReactStatics = require('hoist-non-react-statics');
 
-import { OperationOption } from './types';
-import ApolloConsumer from './ApolloConsumer';
-
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
 
-export function withApollo<TProps, TResult>(
+export default function withApollo<TProps, TResult>(
   WrappedComponent,
   operationOptions: OperationOption<TProps, TResult> = {},
 ) {