Build .mjs files (ES modules) alongside CommonJS

.babelrc

@@ -19,7 +19,7 @@
     "transform-es2015-parameters",
     ["transform-es2015-destructuring", {loose: true}],
     "transform-es2015-block-scoping",
-    "transform-es2015-modules-commonjs",
+    "./resources/common-js-modules",
     "transform-regenerator",
   ]
 }

package.json

@@ -15,6 +15,8 @@
     "url": "http://github.com/graphql/graphql-relay-js.git"
   },
   "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "sideEffects": false,
   "directories": {
     "lib": "./lib"
   },
@@ -32,7 +34,10 @@
     "testonly": "babel-node ./node_modules/.bin/_mocha $npm_package_options_mocha",
     "lint": "eslint src",
     "check": "flow check",
-    "build": "rm -rf lib/* && babel src --ignore __tests__ --out-dir lib && npm run build:flow",
+    "build": "npm run build:clean && npm run build:cjs && npm run build:mjs && npm run build:flow",
+    "build:clean": "rm -rf ./lib && mkdir ./lib",
+    "build:cjs": "babel src --ignore __tests__ --out-dir lib",
+    "build:mjs": "BABEL_MODULES=1 babel src --optional runtime --ignore __tests__ --out-dir lib/module/ && for file in $(find lib/module -name '*.js'); do mv \"$file\" `echo \"$file\" | sed 's/lib\\/module/lib/g; s/.js$/.mjs/g'`; done && rm -rf lib/module",
     "build:flow": "find ./src -name '*.js' -not -path '*/__tests__*' | while read filepath; do cp $filepath `echo $filepath | sed 's/\\/src\\//\\/lib\\//g'`.flow; done",
     "watch": "babel-node scripts/watch.js",
     "cover": "babel-node node_modules/.bin/isparta cover --root src --report html node_modules/.bin/_mocha -- $npm_package_options_mocha",

resources/common-js-modules.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * Determines whether to transform modules to commonjs based on an
+ * environment variable. Module import/export statements are not transformed
+ * if the `BABEL_MODULES` env variable is set.
+ */
+module.exports = process.env.BABEL_MODULES ?
+  () => ({}) :
+  require('babel-plugin-transform-es2015-modules-commonjs');

src/__tests__/starWarsConnectionTests.js

@@ -9,7 +9,7 @@
 
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
-import { StarWarsSchema } from './starWarsSchema.js';
+import { StarWarsSchema } from './starWarsSchema';
 import { graphql } from 'graphql';
 
 // 80+ char lines are useful in describe/it, so ignore in this file.

src/__tests__/starWarsMutationTests.js

@@ -9,7 +9,7 @@
 
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
-import { StarWarsSchema } from './starWarsSchema.js';
+import { StarWarsSchema } from './starWarsSchema';
 import { graphql } from 'graphql';
 
 // 80+ char lines are useful in describe/it, so ignore in this file.

src/__tests__/starWarsObjectIdentificationTests.js

@@ -9,7 +9,7 @@
 
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
-import { StarWarsSchema } from './starWarsSchema.js';
+import { StarWarsSchema } from './starWarsSchema';
 import { graphql } from 'graphql';
 
 // 80+ char lines are useful in describe/it, so ignore in this file.

src/__tests__/starWarsSchema.js

@@ -19,28 +19,28 @@ import {
   nodeDefinitions,
   globalIdField,
   fromGlobalId
-} from '../node/node.js';
+} from '../node/node';
 
 import {
   connectionFromArray
-} from '../connection/arrayconnection.js';
+} from '../connection/arrayconnection';
 
 import {
   connectionArgs,
   connectionDefinitions
-} from '../connection/connection.js';
+} from '../connection/connection';
 
 import {
   mutationWithClientMutationId
-} from '../mutation/mutation.js';
+} from '../mutation/mutation';
 
 import {
   getFaction,
   getShip,
   getRebels,
   getEmpire,
   createShip,
-} from './starWarsData.js';
+} from './starWarsData';
 
 /**
  * This is a basic end-to-end test, designed to demonstrate the various

src/connection/__tests__/connection.js

@@ -17,14 +17,14 @@ import {
 
 import {
   connectionFromArray,
-} from '../arrayconnection.js';
+} from '../arrayconnection';
 
 import {
   backwardConnectionArgs,
   connectionArgs,
   connectionDefinitions,
   forwardConnectionArgs,
-} from '../connection.js';
+} from '../connection';
 
 import { expect } from 'chai';
 import { describe, it } from 'mocha';

src/connection/arrayconnection.js

@@ -16,7 +16,7 @@ import type {
 import {
   base64,
   unbase64,
-} from '../utils/base64.js';
+} from '../utils/base64';
 
 type ArraySliceMetaInfo = {
   sliceStart: number;

src/index.js

@@ -14,15 +14,15 @@ export type {
   ConnectionCursor,
   Edge,
   PageInfo,
-} from './connection/connectiontypes.js';
+} from './connection/connectiontypes';
 
 // Helpers for creating connection types in the schema
 export {
   backwardConnectionArgs,
   connectionArgs,
   connectionDefinitions,
   forwardConnectionArgs,
-} from './connection/connection.js';
+} from './connection/connection';
 
 // Helpers for creating connections from arrays
 export {
@@ -34,26 +34,26 @@ export {
   cursorToOffset,
   getOffsetWithDefault,
   offsetToCursor,
-} from './connection/arrayconnection.js';
+} from './connection/arrayconnection';
 
 // Helper for creating mutations with client mutation IDs
 export {
   mutationWithClientMutationId,
-} from './mutation/mutation.js';
+} from './mutation/mutation';
 
 // Helper for creating node definitions
 export {
   nodeDefinitions,
-} from './node/node.js';
+} from './node/node';
 
 // Helper for creating plural identifying root fields
 export {
   pluralIdentifyingRootField,
-} from './node/plural.js';
+} from './node/plural';
 
 // Utilities for creating global IDs in systems that don't have them.
 export {
   fromGlobalId,
   globalIdField,
   toGlobalId,
-} from './node/node.js';
+} from './node/node';

src/node/node.js

@@ -23,7 +23,7 @@ import type {
 import {
   base64,
   unbase64
-} from '../utils/base64.js';
+} from '../utils/base64';
 
 type GraphQLNodeDefinitions = {
   nodeInterface: GraphQLInterfaceType,

src/utils/base64.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import { Buffer } from './buffer';
+
 export type Base64String = string;
 
 export function base64(i: string): Base64String {

src/utils/buffer.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/**
+ * This file exists to work around a number of issues with importing Buffer
+ * across Webpack, Node and Flow.
+ *
+ * Webpack (tested with 4.5.0) doesn't currently support use of Node globals,
+ * such as Buffer, in ES modules.
+ * See https://github.com/webpack/webpack/issues/7032
+ *
+ * Hence we want to import it explicitly e.g.
+ *
+ * import { Buffer } from 'buffer';
+ *
+ * But Node (tested with version 9.11.1 and --experimental-modules) only has
+ * Buffer as a property of the default export, not as a separate named export.
+ */
+
+import NodeBuffer from 'buffer';
+
+/**
+ * An alias for Node's Buffer class.
+ *
+ * Flow (tested with 0.69.0) knows about global.Buffer but not about
+ * require('buffer').Buffer.
+ * https://github.com/facebook/flow/issues/3723
+ */
+
+// $FlowFixMe because of the above.
+export const Buffer: typeof global.Buffer = NodeBuffer.Buffer;