Step 2: Publish ECMAScript modules

.eslintrc.js

@@ -5,7 +5,6 @@
  *  This source code is licensed under the license found in the
  *  LICENSE file in the root directory of this source tree.
  *
- *  @flow
  */
 
 module.exports = {
@@ -21,9 +20,9 @@ module.exports = {
     },
   },
   settings: {
-    'react': {
-      'version': 'detect'
-    }
+    react: {
+      version: 'detect',
+    },
   },
   // https://github.com/sindresorhus/globals/blob/master/globals.json
   env: {
@@ -33,7 +32,6 @@ module.exports = {
     jest: true,
     mocha: true,
     browser: true,
-    'cypress/globals': true
   },
 
   extends: ['prettier', 'plugin:import/typescript', 'plugin:react/recommended'],
@@ -292,9 +290,19 @@ module.exports = {
     'prefer-object-spread/prefer-object-spread': 1,
   },
 
-  plugins: ['babel', 'import', 'flowtype', 'prefer-object-spread', 'cypress'],
+  plugins: ['babel', 'import', 'flowtype', 'prefer-object-spread'],
 
   overrides: [
+    // Cypress plugin, global, etc only for cypress directory
+    // https://github.com/cypress-io/eslint-plugin-cypress
+    // cypress clashes with jest expect()
+    {
+      files: ['**/cypress/**'],
+      plugins: ['cypress'],
+      env: {
+        'cypress/globals': true,
+      },
+    },
     // Rules for TypeScript only
     {
       files: ['*.ts', '*.tsx'],

.gitignore

@@ -16,3 +16,4 @@ node_modules/
 npm-debug.log
 lerna-debug.log
 **/tsconfig.tsbuildinfo
+**/*.tsbuildinfo

babel.config.js

@@ -1,7 +1,13 @@
-
+// for ESM don't transpile modules
 module.exports = {
   presets: [
-    require.resolve('@babel/preset-env'),
+    [
+      require.resolve('@babel/preset-env'),
+      {
+        modules: process.env.ESM ? false : 'commonjs',
+        targets: process.env.ESM ? { node: true } : '> 0.25%, not dead'
+      },
+    ],
     require.resolve('@babel/preset-flow'),
     require.resolve('@babel/preset-react'),
   ],

jest.config.js

@@ -5,8 +5,8 @@ const { jsWithBabel: jsWithBabelPreset } = require('ts-jest/presets');
 module.exports = {
   globals: {
     'ts-jest': {
-      tsConfig: './tsconfig.base.json'
-    }
+      tsConfig: './resources/tsconfig.base.esm.json',
+    },
   },
   verbose: true,
   clearMocks: true,
@@ -19,12 +19,13 @@ module.exports = {
   transform: {
     '^.+\\.jsx?$': require.resolve('./resources/jestBabelTransform'),
     ...tsjPreset.transform,
-    ...jsWithBabelPreset.transform
+    ...jsWithBabelPreset.transform,
   },
   testEnvironment: require.resolve('jest-environment-jsdom-global'),
   testPathIgnorePatterns: ['node_modules', 'dist', 'codemirror-graphql'],
   collectCoverageFrom: [
     '**/src/**/*.{js,jsx,ts,tsx}',
+    '!**/{dist,esm}/**',
     '!**/node_modules/**',
     '!**/__tests__/**',
     '!**/resources/**',

package.json

@@ -23,6 +23,7 @@
     "build-js": "lerna run build --scope codemirror-graphql --scope graphql-language-service-server --scope graphiql graphql-language-service",
     "build-ts": "tsc --build",
     "build-clean": "tsc --build --clean && rm -rf 'packages/**/src/{dist,esm,bundle}' && lerna run build-clean --parallel",
+    "build-demo": "lerna run build-demo",
     "test": "yarn run lint && yarn run check && yarn run build && yarn run testonly && yarn run e2e",
     "testonly": "jest && lerna run test --scope codemirror-graphql",
     "e2e": "cd packages/graphiql && yarn e2e",
@@ -61,6 +62,7 @@
     "chai": "4.2.0",
     "codecov": "^3.5.0",
     "conventional-changelog-conventionalcommits": "^4.1.0",
+    "copy": "^0.3.2",
     "cypress": "^3.4.1",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "6.7.0",
@@ -78,6 +80,7 @@
     "jest-environment-jsdom": "^24.8.0",
     "jest-environment-jsdom-global": "^1.2.0",
     "lerna": "^3.16.4",
+    "mkdirp": "^0.5.1",
     "mocha": "6.1.4",
     "prettier": "^1.18.2",
     "rimraf": "^3.0.0",

packages/codemirror-graphql/babel.config.js

@@ -1,12 +1,2 @@
 
-module.exports = {
-  presets: [
-    require.resolve('@babel/preset-env'),
-    require.resolve('@babel/preset-flow'),
-    require.resolve('@babel/preset-react'),
-  ],
-  plugins: [
-    require.resolve('@babel/plugin-proposal-class-properties'),
-    require.resolve('@babel/plugin-syntax-dynamic-import'),
-  ],
-};
+module.exports = require('../../babel.config')

packages/codemirror-graphql/package.json

@@ -14,30 +14,36 @@
   },
   "license": "MIT",
   "files": [
-    "dist",
+    "hint.esm.js",
     "hint.js",
+    "hint.js.flow",
+    "info.esm.js",
     "info.js",
+    "info.js.flow",
+    "jump.esm.js",
     "jump.js",
+    "jump.js.flow",
+    "lint.esm.js",
     "lint.js",
+    "lint.js.flow",
+    "mode.esm.js",
     "mode.js",
-    "*.flow",
+    "mode.js.flow",
     "utils",
     "variables",
-    "results",
-    "README.md",
-    "LICENSE"
+    "results"
   ],
-  "main": "dist",
   "options": {
     "mocha": "--full-trace --require resources/mochaBootload src/*/__tests__/*-test.js",
     "mocha_tdd": "--full-trace --watch --require resources/mochaBootload src/**/*/__tests__/*-test.js"
   },
   "scripts": {
     "lint": "eslint src",
     "check": "flow check",
-    "build": "yarn build-clean && yarn build-js && yarn build-flow .",
-    "build-js": "babel src --root-mode upward --ignore src/__tests__ --out-dir .",
-    "build-clean": "rimraf '{mode,hint,info,jump,lint}.{js,js.flow}' && rimraf esm results utils variables coverage __tests__",
+    "build": "yarn build-clean && yarn build-js && yarn build-esm && yarn build-flow .",
+    "build-js": "babel src --root-mode upward --ignore src/__tests__ --out-dir . && babel src --root-mode upward --ignore src/__tests__ --out-dir esm && node ../../resources/renameFileExtensions.js './esm/**/*.js' . .esm.js",
+    "build-esm": "ESM=true babel src --root-mode upward --ignore src/__tests__ --out-dir esm",
+    "build-clean": "rimraf {mode,hint,info,jump,lint}.{js,esm.js,js.flow} && rimraf esm results utils variables coverage __tests__",
     "build-flow": "node ../../resources/buildFlow.js",
     "watch": "babel --optional runtime resources/watch.js | node",
     "prepublish": "node ../../resources/prepublish.js",

packages/examples/graphiql-cdn/index.html

@@ -36,13 +36,10 @@
       favored resource bundler.
      -->
     <link rel="stylesheet" href="/graphiql.css" />
-    <script src="/graphiql.js" type="application/javascript"></script>
-    <script src="/renderExample.js" type="application/javascript"></script>
-
   </head>
   <body>
     <div id="graphiql">Loading...</div>
-    <script>
-    </script>
+      <script src="/graphiql.js" type="application/javascript"></script>
+      <script src="/renderExample.js" type="application/javascript"></script>
   </body>
 </html>

packages/graphiql/babel.config.js

@@ -1,13 +1 @@
-module.exports = {
-  presets: [
-    [
-      require.resolve('@babel/preset-env'),
-      {
-        targets: '> 0.25%, not dead',
-      },
-    ],
-    require.resolve('@babel/preset-flow'),
-    require.resolve('@babel/preset-react'),
-  ],
-  plugins: [require.resolve('@babel/plugin-proposal-class-properties')],
-};
+module.exports = require('../../babel.config')

packages/graphiql/cypress/support/commands.js

@@ -8,7 +8,7 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 //
-//
+
 Cypress.Commands.add('getCy', cyName => {
   return cy.get(`[data-cy=${cyName}]`);
 });
@@ -39,15 +39,3 @@ Cypress.Commands.add('assertQueryResult', (op, mockSuccess) => {
     );
   });
 });
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

packages/graphiql/package.json

@@ -15,11 +15,10 @@
   "main": "dist/index.js",
   "files": [
     "dist",
+    "esm",
     "graphiql.js",
     "graphiql.min.js",
-    "graphiql.css",
-    "README.md",
-    "LICENSE"
+    "graphiql.css"
   ],
   "nyc": {
     "report-dir": "coverage/cypress",
@@ -36,7 +35,7 @@
     "build-demo": "cp resources/index.html .",
     "check": "flow check",
     "dev": "babel-node test/server.js",
-    "e2e": "yarn e2e:server && cypress run && kill -9 `cat test/pid`",
+    "e2e": "yarn e2e:server && cypress run",
     "e2e:server": "PORT=8080 node test/e2e-server & wait-on http://localhost:8080",
     "test": "node ../../resources/runTests ENZYME=true"
   },

packages/graphiql/resources/build.sh

@@ -9,6 +9,7 @@ if [ ! -d "node_modules/.bin" ]; then
 fi
 
 babel src --ignore __tests__ --out-dir dist/
+ESM=true babel src --ignore __tests__ --out-dir esm/
 echo "Bundling graphiql.js..."
 browserify -g browserify-shim -s GraphiQL dist/index.js > graphiql.js
 echo "Bundling graphiql.min.js..."

packages/graphql-language-service-interface/package.json

@@ -20,6 +20,8 @@
     "graphql"
   ],
   "main": "dist/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
   "scripts": {
     "test": "node ../../resources/runTests.js",
     "build": "yarn run build-ts && yarn run build-flow",

packages/graphql-language-service-interface/tsconfig.esm.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../resources/tsconfig.base.esm.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./esm",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../graphql-language-service-parser"
+    },
+    {
+      "path": "../graphql-language-service-types"
+    },
+    {
+      "path": "../graphql-language-service-utils"
+    }
+  ]
+}

packages/graphql-language-service-interface/tsconfig.json

@@ -1,7 +1,19 @@
 {
-  "extends": "../../tsconfig.base",
+  "extends": "../../resources/tsconfig.base.cjs.json",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",
-  }
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../graphql-language-service-parser"
+    },
+    {
+      "path": "../graphql-language-service-types"
+    },
+    {
+      "path": "../graphql-language-service-utils"
+    }
+  ]
 }

packages/graphql-language-service-parser/package.json

@@ -19,8 +19,9 @@
   "keywords": [
     "graphql"
   ],
-  "main": "./dist/index.js",
-  "typings": "./dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
   "scripts": {
     "build": "yarn run build-ts && yarn run build-flow",
     "build-ts": "tsc",

packages/graphql-language-service-parser/tsconfig.esm.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../resources/tsconfig.base.esm.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./esm",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../graphql-language-service-types"
+    }
+  ]
+}

packages/graphql-language-service-parser/tsconfig.json

@@ -1,7 +1,13 @@
 {
-  "extends": "../../tsconfig.base",
+  "extends": "../../resources/tsconfig.base.cjs.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "outDir": "./dist"
-  }
+    "outDir": "./dist",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../graphql-language-service-types"
+    }
+  ]
 }

packages/graphql-language-service-server/package.json

@@ -14,16 +14,20 @@
   },
   "license": "MIT",
   "files": [
-    "dist"
+    "dist",
+    "esm"
   ],
   "keywords": [
     "graphql"
   ],
   "main": "dist/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
   "scripts": {
     "test": "node ../../resources/runTests.js",
-    "build": "yarn run build-js && yarn run build-flow",
+    "build": "yarn build-js && yarn build-esm && yarn build-flow",
     "build-js": "node ../../resources/buildJs.js",
+    "build-esm": "ESM=true babel src --root-mode upward --ignore __tests__ --out-dir esm",
     "build-flow": "node ../../resources/buildFlow.js",
     "prepublish": "node ../../resources/prepublish.js"
   },