From 6ebacef9de3819319bfb1f3e41d044e27bdf324a Mon Sep 17 00:00:00 2001 From: hwillson Date: Wed, 18 Sep 2019 20:47:25 -0400 Subject: [PATCH] Create a new testing bundle These new rollup config elements will create a separate `testing.js` CJS based bundle, that contains React testing utilities like `MockedProvider`. Applications can access this new bundle like: import { MockedProvider } from '@apollo/client/lib/testing'; --- config/rollup.config.js | 117 +++++++++++++++++++++++++++++----------- package-lock.json | 25 +++++++++ package.json | 7 +-- 3 files changed, 116 insertions(+), 33 deletions(-) diff --git a/config/rollup.config.js b/config/rollup.config.js index 9c79e3c9ee4..aefca088e97 100644 --- a/config/rollup.config.js +++ b/config/rollup.config.js @@ -8,6 +8,10 @@ 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'; +import replace from 'rollup-plugin-replace'; +import { main as mainBundle } from '../package.json'; + +const hasOwn = Object.prototype.hasOwnProperty; function onwarn(message) { const suppressed = ['UNRESOLVED_IMPORT', 'THIS_IS_UNDEFINED']; @@ -37,7 +41,6 @@ function rollup({ extraGlobals = {}, } = {}) { const projectDir = path.join(__dirname, '..'); - console.info(`Building project esm ${projectDir}`); const tsconfig = `${projectDir}/tsconfig.json`; const globals = { @@ -46,7 +49,7 @@ function rollup({ }; function external(id) { - return Object.prototype.hasOwnProperty.call(globals, id); + return hasOwn.call(globals, id); } function outputFile(format) { @@ -93,34 +96,36 @@ function rollup({ // 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, - }; + 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, + }; + } } - }], + ] } } @@ -145,9 +150,61 @@ function rollup({ }, }, }), + ] + } + ]; +} + +// Build a separate CJS only `testing.js` bundle, that includes React +// testing utilities like `MockedProvider` (testing utilities are kept out of +// the main `apollo-client` bundle). This bundle can be accessed directly +// like: +// +// import { MockedProvider } from '@apollo/client/lib/testing'; +// +// Note: The `ApolloProvider` reference is marked as being global so it can +// then be replaced with a hard coded path to the `apollo-client.cjs.js` +// bundle. This is done to ensure that when using this bundle `MockedProvider` +// always uses the same `ApolloProvider` instance as the rest of the +// application under test. This means they'll share the exact same React +// context, and be able to share the same Apollo Client instance stored in that +// context. +function rollupTesting() { + const globals = { + ...defaultGlobals, + '../../context/ApolloProvider': 'ApolloProvider' + }; + + const output = { + file: './lib/testing.js', + format: 'cjs', + }; + + return [ + { + input: './src/react/testing/index.ts', + external: (id) => hasOwn.call(globals, id), + output, + plugins: [ + nodeResolve({ + extensions: ['.ts', '.tsx'], + }), + typescriptPlugin({ + typescript, + tsconfig: `${path.join(__dirname, '..')}/tsconfig.json` + }), + ], + }, + { + input: output.file, + output, + plugins: [ + replace({ + 'context/ApolloProvider': mainBundle + }), ], }, ]; } -export default rollup(); +export default rollup().concat(rollupTesting()); diff --git a/package-lock.json b/package-lock.json index eeeba0a4b08..a7f4a3b1e28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6174,6 +6174,15 @@ "yallist": "^2.1.2" } }, + "magic-string": { + "version": "0.25.3", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz", + "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==", + "dev": true, + "requires": { + "sourcemap-codec": "^1.4.4" + } + }, "make-dir": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", @@ -7299,6 +7308,16 @@ "rollup-pluginutils": "^2.8.1" } }, + "rollup-plugin-replace": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz", + "integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==", + "dev": true, + "requires": { + "magic-string": "^0.25.2", + "rollup-pluginutils": "^2.6.0" + } + }, "rollup-plugin-sourcemaps": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/rollup-plugin-sourcemaps/-/rollup-plugin-sourcemaps-0.4.2.tgz", @@ -8068,6 +8087,12 @@ "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "dev": true }, + "sourcemap-codec": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz", + "integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==", + "dev": true + }, "spdx-correct": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", diff --git a/package.json b/package.json index bc5c98945de..2d23309fc1e 100644 --- a/package.json +++ b/package.json @@ -12,10 +12,10 @@ ], "author": "opensource@apollographql.com", "license": "MIT", - "main": "./lib/apollo-client.cjs.js", - "module": "./lib/apollo-client.esm.js", + "main": "lib/apollo-client.cjs.js", + "module": "lib/apollo-client.esm.js", "sideEffects": [ - "./lib/cache/inmemory/fixPolyfills.js" + "lib/cache/inmemory/fixPolyfills.js" ], "repository": { "type": "git", @@ -94,6 +94,7 @@ "rollup-plugin-invariant": "0.5.6", "rollup-plugin-local-resolve": "1.0.7", "rollup-plugin-node-resolve": "5.2.0", + "rollup-plugin-replace": "^2.2.0", "rollup-plugin-sourcemaps": "0.4.2", "rollup-plugin-terser": "5.1.1", "rollup-plugin-typescript2": "0.24.0",