Merge pull request #5357 from apollographql/hello-react-apollo

Merge React Apollo hooks into Apollo Client

config/jest.config.js

@@ -10,10 +10,10 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   testURL: 'http://localhost',
-  testMatch: ['<rootDir>/src/**/__tests__/**/*.ts'],
   testPathIgnorePatterns: [
     '/node_modules/',
-    '/lib/'
+    '/dist/'
   ],
+  modulePathIgnorePatterns: ['/dist/'],
   setupFiles: ['<rootDir>/src/config/jest/setup.ts'],
 };

config/prepareDist.js

@@ -0,0 +1,43 @@
+// The Apollo Client source that is published to npm is located in the
+// "dist" directory. This utility script is called just before deploying
+// Apollo Client, to make sure the "dist" directory is prepared for publishing.
+//
+// This script will:
+//
+// - Copy the current root package.json into "dist" after adjusting it for
+//   publishing.
+// - Copy the supporting files from the root into "dist" (e.g. `README.MD`,
+//   `LICENSE`, etc.)
+
+const packageJson = require('../package.json');
+const fs = require('fs');
+
+// The root package.json is marked as private to prevent publishing
+// from happening in the root of the project. This sets the package back to
+// public so it can be published from the "dist" directory.
+packageJson.private = false;
+
+// Remove package.json items that we don't need to publish
+delete packageJson.scripts;
+delete packageJson.bundlesize;
+
+// The root package.json points to the CJS/ESM source in "dist", to support
+// on-going package development (e.g. running tests, supporting npm link, etc.).
+// When publishing from "dist" however, we need to update the package.json
+// to point to the files within the same directory.
+const distPackageJson = JSON.stringify(
+  packageJson,
+  (_key, value) => (
+    typeof value === 'string' ? value.replace(/\.\/dist\//, '') : value
+  ),
+  2
+);
+
+// Save the modified package.json to "dist"
+fs.writeFileSync(`${__dirname}/../dist/package.json`, distPackageJson);
+
+// Copy supporting files into "dist"
+const srcDir = `${__dirname}/..`;
+const destDir = `${srcDir}/dist`;
+fs.copyFileSync(`${srcDir}/README.md`,  `${destDir}/README.md`);
+fs.copyFileSync(`${srcDir}/LICENSE`,  `${destDir}/LICENSE`);

config/rollup.config.js

@@ -1,23 +1,10 @@
 import nodeResolve from 'rollup-plugin-node-resolve';
-import typescriptPlugin from 'rollup-plugin-typescript2';
-import typescript from 'typescript';
-import path from 'path';
-import fs from 'fs';
-import { transformSync } from '@babel/core';
-import cjsModulesTransform from '@babel/plugin-transform-modules-commonjs';
-import umdModulesTransform from '@babel/plugin-transform-modules-umd';
 import invariantPlugin from 'rollup-plugin-invariant';
 import { terser as minify } from 'rollup-plugin-terser';
 
-function onwarn(message) {
-  const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED'];
+import packageJson from '../package.json';
 
-  if (!suppressed.find(code => message.code === code)) {
-    return console.warn(message.message);
-  }
-}
-
-const defaultGlobals = {
+const globals = {
   'apollo-link': 'apolloLink.core',
   'tslib': 'tslib',
   'ts-invariant': 'invariant',
@@ -27,124 +14,79 @@ const defaultGlobals = {
   'graphql/language/visitor': 'visitor',
   'fast-json-stable-stringify': 'stringify',
   '@wry/equality': 'wryEquality',
+  graphql: 'graphql',
+  react: 'React'
 };
 
-function rollup({
-  input = './src/index.ts',
-  outputPrefix = 'apollo-client',
-  extraGlobals = {},
-} = {}) {
-  const projectDir = path.join(__dirname, '..');
-  console.info(`Building project esm ${projectDir}`);
-  const tsconfig = `${projectDir}/tsconfig.json`;
+function external(id) {
+  return Object.prototype.hasOwnProperty.call(globals, id);
+}
 
-  const globals = {
-    ...defaultGlobals,
-    ...extraGlobals,
+function prepareESM() {
+  return {
+    input: packageJson.module,
+    external,
+    preserveModules: true,
+    output: {
+      dir: './dist',
+      format: 'esm',
+      sourcemap: true,
+    },
+    plugins: [
+      nodeResolve(),
+      invariantPlugin({
+        // Instead of completely stripping InvariantError messages in
+        // production, this option assigns a numeric code to the
+        // production version of each error (unique to the call/throw
+        // location), which makes it much easier to trace production
+        // errors back to the unminified code where they were thrown,
+        // where the full error string can be found. See #4519.
+        errorCodes: true,
+      }),
+    ]
   };
+}
 
-  function external(id) {
-    return Object.prototype.hasOwnProperty.call(globals, id);
-  }
-
-  function outputFile(format) {
-    return `./lib/${outputPrefix}.${format}.js`;
-  }
-
-  function fromSource(format) {
-    return {
-      input,
-      external,
-      output: {
-        file: outputFile(format),
-        format,
-        sourcemap: true,
-      },
-      plugins: [
-        nodeResolve({
-          extensions: ['.ts', '.tsx'],
-        }),
-        typescriptPlugin({ typescript, tsconfig }),
-        invariantPlugin({
-          // Instead of completely stripping InvariantError messages in
-          // production, this option assigns a numeric code to the
-          // production version of each error (unique to the call/throw
-          // location), which makes it much easier to trace production
-          // errors back to the unminified code where they were thrown,
-          // where the full error string can be found. See #4519.
-          errorCodes: true,
-        }),
-      ],
-      onwarn,
-    };
-  }
-
-  function fromESM(toFormat) {
-    return {
-      input: outputFile('esm'),
-      output: {
-        file: outputFile(toFormat),
-        format: 'esm',
-        sourcemap: false,
-      },
-      // The UMD bundle expects `this` to refer to the global object. By default
-      // Rollup replaces `this` with `undefined`, but this default behavior can
-      // be overridden with the `context` option.
-      context: 'this',
-      plugins: [{
-        transform(source, id) {
-          const output = transformSync(source, {
-            inputSourceMap: JSON.parse(fs.readFileSync(id + '.map')),
-            sourceMaps: true,
-            plugins: [
-              [toFormat === 'umd' ? umdModulesTransform : cjsModulesTransform, {
-                loose: true,
-                allowTopLevelThis: true,
-              }],
-            ],
-          });
-
-          // There doesn't seem to be any way to get Rollup to emit a source map
-          // that goes all the way back to the source file (rather than just to
-          // the bundle.esm.js intermediate file), so we pass sourcemap:false in
-          // the output options above, and manually write the CJS and UMD source
-          // maps here.
-          fs.writeFileSync(
-            outputFile(toFormat) + '.map',
-            JSON.stringify(output.map),
-          );
-
-          return {
-            code: output.code,
-          };
-        }
-      }],
+function prepareCJS() {
+  return {
+    input: packageJson.module,
+    external,
+    output: {
+      file: packageJson.main,
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named'
     }
   }
+}
 
-  return [
-    fromSource('esm'),
-    fromESM('cjs'),
-    fromESM('umd'),
-    {
-      input: outputFile('cjs'),
-      output: {
-        file: outputFile('cjs.min'),
-        format: 'esm',
-      },
-      plugins: [
-        minify({
-          mangle: {
-            toplevel: true,
-          },
-          compress: {
-            global_defs: {
-              '@process.env.NODE_ENV': JSON.stringify('production'),
-            },
-          },
-        }),
-      ],
+function prepareCJSMinified() {
+  return {
+    input: packageJson.main,
+    output: {
+      file: packageJson.main.replace('.js', '.min.js'),
+      format: 'cjs',
     },
+    plugins: [
+      minify({
+        mangle: {
+          toplevel: true,
+        },
+        compress: {
+          global_defs: {
+            '@process.env.NODE_ENV': JSON.stringify('production'),
+          },
+        },
+      }),
+    ],
+  };
+}
+
+function rollup() {
+  return [
+    prepareESM(),
+    prepareCJS(),
+    prepareCJSMinified()
   ];
 }
 

docs/gatsby-config.js

@@ -20,11 +20,17 @@ module.exports = {
         },
         */
         checkLinksOptions: {
-          exceptions: ['/api/apollo-client/', '/v2.4/api/apollo-client/'],
+          exceptions: [
+            '/api/core/',
+            '/v2.4/api/core/',
+            '/v2.5/api/core/',
+            '/v2.6/api/core/',
+            '/v3.0/api/core/'
+          ],
         },
         typescriptApiBox: {
           data: require('./docs.json'),
-          filepathPrefix: 'packages/apollo-client/src/',
+          filepathPrefix: 'src/',
         },
         sidebarCategories: {
           null: ['index', 'why-apollo', 'integrations', 'hooks-migration'],
@@ -59,14 +65,13 @@ module.exports = {
             'recipes/meteor',
             'recipes/recompose',
           ],
-          'API Reference': [
-            'api/apollo-client',
+          'Apollo Client API': [
+            'api/core',
             'api/react-hooks',
-            'api/react-ssr',
             'api/react-testing',
+            'api/react-ssr',
             'api/react-components',
-            'api/react-hoc',
-            'api/react-common',
+            'api/react-hoc'
           ],
         },
       },