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",
   ]
 }

.flowconfig

@@ -10,4 +10,4 @@
 [options]
 
 [version]
-^0.69.0
+^0.73.0

package.json

@@ -14,7 +14,9 @@
     "type": "git",
     "url": "http://github.com/graphql/graphql-relay-js.git"
   },
-  "main": "lib/index.js",
+  "main": "lib/index",
+  "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",
@@ -71,7 +76,7 @@
     "eslint": "^4.17.0",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-flowtype": "^2.44.0",
-    "flow-bin": "^0.69.0",
+    "flow-bin": "^0.73.0",
     "graphql": "^0.13.1",
     "isparta": "4.0.0",
     "mocha": "^5.0.1",

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,32 @@
+/**
+ * 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 an issue with importing Buffer across
+ * Webpack and Node.
+ *
+ * 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.
+ */
+
+export const Buffer = NodeBuffer.Buffer;

yarn.lock

@@ -1384,9 +1384,9 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
-flow-bin@^0.69.0:
-  version "0.69.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.69.0.tgz#053159a684a6051fcbf0b71a2eb19a9679082da6"
+flow-bin@^0.73.0:
+  version "0.73.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.73.0.tgz#da1b90a02b0ef9c439f068c2fc14968db83be425"
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"