chore: build-clean, better demo, better e2e tests

.eslintignore

@@ -12,6 +12,7 @@
 #
 # Now un-ignore source code, tests, configuration, etc
 !/packages/*/src/**
+!/packages/*/cypress/**
 !/packages/*/test/**
 !/packages/codemirror-graphql/resources/**
 !/packages/examples/**
@@ -31,6 +32,7 @@
 # Build artifacts
 **/flow-typed
 **/dist
+**/renderExample.js
 
 # Vendored files
 /packages/codemirror-graphql/

.eslintrc.js

@@ -20,6 +20,11 @@ module.exports = {
       experimentalObjectRestSpread: true,
     },
   },
+  settings: {
+    'react': {
+      'version': 'detect'
+    }
+  },
   // https://github.com/sindresorhus/globals/blob/master/globals.json
   env: {
     atomtest: true,
@@ -28,9 +33,10 @@ module.exports = {
     jest: true,
     mocha: true,
     browser: true,
+    'cypress/globals': true
   },
 
-  extends: ['prettier', 'plugin:import/typescript'],
+  extends: ['prettier', 'plugin:import/typescript', 'plugin:react/recommended'],
 
   globals: {
     atom: false,
@@ -286,7 +292,7 @@ module.exports = {
     'prefer-object-spread/prefer-object-spread': 1,
   },
 
-  plugins: ['babel', 'import', 'flowtype', 'prefer-object-spread'],
+  plugins: ['babel', 'import', 'flowtype', 'prefer-object-spread', 'cypress'],
 
   overrides: [
     // Rules for TypeScript only

.npmignore

@@ -14,3 +14,6 @@ coverage
 resources
 src
 packages
+packages/graphiql/*.html
+cypress.json
+babel.config.js

babel.config.js

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

netlify.toml

@@ -1,3 +1,3 @@
 [build]
   command = "yarn && yarn build && lerna run build-demo"
-  publish = "packages/examples/graphiql-cdn"
+  publish = "packages/graphiql"

package.json

@@ -19,28 +19,32 @@
     }
   },
   "scripts": {
-    "build": "tsc --build && lerna run build --scope codemirror-graphql --scope graphiql --scope graphql-language-service --scope graphql-language-service-server",
+    "build": "yarn run build-clean && yarn build-ts && yarn build-js",
+    "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",
     "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",
-    "cypress:open": "cd packages/graphiql && yarn e2e:server & cypress open --project ./packages/graphiql",
+    "cypress-open": "cd packages/graphiql && yarn e2e:server & cypress open --project ./packages/graphiql",
     "t": "yarn run testonly",
-    "lint": "eslint --ext=ts,js,jsx,tsx . || (printf '\\033[33mTry: \\033[7m yarn run lint -- --fix \\033[0m\\n' && exit 1)",
-    "lint:fix": "eslint --ext=ts,js,jsx,tsx . --fix",
-    "lint:check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "lint": "eslint --ext=ts,js,jsx,tsx . || (printf '\\033[33mTry: \\033[7m yarn format \\033[0m\\n' && exit 1)",
+    "lint-fix": "eslint --ext=ts,js,jsx,tsx . --fix",
+    "lint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
     "check": "flow check --show-all-errors",
     "prepublish": "node resources/prepublish.js",
     "pretty": "node resources/pretty.js",
     "pretty-check": "node resources/pretty.js --check",
-    "version:release": "lerna version",
-    "version:prerelease": "lerna version --conventional-prerelease",
-    "version:graduate": "lerna version --conventional-graduate"
+    "version-release": "lerna version",
+    "version-prerelease": "lerna version --conventional-prerelease",
+    "version-graduate": "lerna version --conventional-graduate"
   },
   "devDependencies": {
     "@babel/cli": "7.4.4",
     "@babel/core": "7.4.5",
     "@babel/node": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "7.4.5",
@@ -50,6 +54,7 @@
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
     "@commitlint/config-lerna-scopes": "^8.1.0",
+    "@cypress/code-coverage": "^1.10.2",
     "@types/jest": "^24.0.18",
     "@typescript-eslint/parser": "^2.3.0",
     "babel-eslint": "^10.0.1",
@@ -60,6 +65,7 @@
     "eslint": "^6.4.0",
     "eslint-config-prettier": "6.3.0",
     "eslint-plugin-babel": "5.3.0",
+    "eslint-plugin-cypress": "^2.7.0",
     "eslint-plugin-flowtype": "4.3.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prefer-object-spread": "1.2.1",
@@ -74,6 +80,7 @@
     "lerna": "^3.16.4",
     "mocha": "6.1.4",
     "prettier": "^1.18.2",
+    "rimraf": "^3.0.0",
     "ts-jest": "^24.1.0",
     "typescript": "^3.6.3",
     "wait-on": "^3.3.0"

packages/codemirror-graphql/.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 coverage/
 /*.js
+/*.js.flow
 !babel.config.js
 /utils
 /variables

packages/codemirror-graphql/babel.config.js

@@ -1,8 +1,12 @@
+
 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')],
+  plugins: [
+    require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('@babel/plugin-syntax-dynamic-import'),
+  ],
 };

packages/codemirror-graphql/package.json

@@ -14,26 +14,30 @@
   },
   "license": "MIT",
   "files": [
+    "dist",
     "hint.js",
     "info.js",
     "jump.js",
     "lint.js",
     "mode.js",
+    "*.flow",
     "utils",
     "variables",
     "results",
     "README.md",
     "LICENSE"
   ],
+  "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": "babel src --root-mode upward --ignore __tests__ --out-dir .",
-    "build-js": "node ../../resources/buildJs.js",
+    "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-flow": "node ../../resources/buildFlow.js",
     "watch": "babel --optional runtime resources/watch.js | node",
     "prepublish": "node ../../resources/prepublish.js",
@@ -54,6 +58,7 @@
     "graphql": "^14.0.2",
     "jsdom": "^11.2.0",
     "mocha": "3.5.0",
+    "rimraf": "^3.0.0",
     "sane": "2.0.0"
   }
 }

packages/examples/graphiql-cdn/.gitignore

@@ -1,2 +1,3 @@
 graphiql.js
 graphiql.css
+renderExample.js

packages/examples/graphiql-cdn/README.md

@@ -1,14 +1,15 @@
 Example GraphiQL Install
 ========================
 
-This example uses the browserified, unminified CDN version of GraphiQL found in packages/graphiql to make it easy to test changes. It's also used by netlify builds
+This example uses the browserified, unminified CDN version of GraphiQL found in packages/graphiql to make it easy to test changes. It's also used by netlify builds.
 
 1. Run `yarn` and `yarn build` in the root of this project
 2. Navigate to this directory (packages/examples/graphiql-cdn) in Terminal
 3. Then, run `yarn setup` and `yarn start`
 4. Open your browser to the automatically generated address listed in your console. e.g. `Started on http://localhost:49811/`
+5. To have it open on the same port consistently, use `PORT=3000 yarn start`
 
 ## Notes
 
 - If the `setup` script fails, it's because `graphiql` hasn't been built.
-- Thanks to @orta being super clever, if you run this from a host other than localhost (i.e. remotely or by changing your /etc/hosts file) it will load the remote swapi graphql instead of the local server (the old graphcool one for now)
+- Thanks to @orta, if you run this from a host other than localhost (i.e. remotely or by changing your /etc/hosts file) it will load the remote swapi graphql instead of the local server (the old graphcool one for now)

packages/examples/graphiql-cdn/index.html

@@ -27,127 +27,22 @@
       If you do not want to rely on a CDN, you can host these files locally or
       include them directly in your favored resource bunder.
     -->
-    <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
-    <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
-    <script src="//cdn.jsdelivr.net/react/15.4.2/react.min.js"></script>
-    <script src="//cdn.jsdelivr.net/react/15.4.2/react-dom.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 
     <!--
       These two files can be found in the npm module, however you may wish to
       copy them directly into your environment, or perhaps include them in your
       favored resource bundler.
      -->
     <link rel="stylesheet" href="/graphiql.css" />
-    <script src="/graphiql.js" charset="utf-8"></script>
+    <script src="/graphiql.js" type="application/javascript"></script>
+    <script src="/renderExample.js" type="application/javascript"></script>
 
   </head>
   <body>
     <div id="graphiql">Loading...</div>
     <script>
-
-      /**
-       * This GraphiQL example illustrates how to use some of GraphiQL's props
-       * in order to enable reading and updating the URL parameters, making
-       * link sharing of queries a little bit easier.
-       *
-       * This is only one example of this kind of feature, GraphiQL exposes
-       * various React params to enable interesting integrations.
-       */
-
-      // Parse the search string to get url parameters.
-      var search = window.location.search;
-      var parameters = {};
-      search.substr(1).split('&').forEach(function (entry) {
-        var eq = entry.indexOf('=');
-        if (eq >= 0) {
-          parameters[decodeURIComponent(entry.slice(0, eq))] =
-            decodeURIComponent(entry.slice(eq + 1));
-        }
-      });
-
-      // If variables was provided, try to format it.
-      if (parameters.variables) {
-        try {
-          parameters.variables =
-            JSON.stringify(JSON.parse(parameters.variables), null, 2);
-        } catch (e) {
-          // Do nothing, we want to display the invalid JSON as a string, rather
-          // than present an error.
-        }
-      }
-
-      // When the query and variables string is edited, update the URL bar so
-      // that it can be easily shared.
-      function onEditQuery(newQuery) {
-        parameters.query = newQuery;
-        updateURL();
-      }
-
-      function onEditVariables(newVariables) {
-        parameters.variables = newVariables;
-        updateURL();
-      }
-
-      function onEditOperationName(newOperationName) {
-        parameters.operationName = newOperationName;
-        updateURL();
-      }
-
-      function updateURL() {
-        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
-          return Boolean(parameters[key]);
-        }).map(function (key) {
-          return encodeURIComponent(key) + '=' +
-            encodeURIComponent(parameters[key]);
-        }).join('&');
-        history.replaceState(null, null, newSearch);
-      }
-
-      // Defines a GraphQL fetcher using the fetch API. You're not required to
-      // use fetch, and could instead implement graphQLFetcher however you like,
-      // as long as it returns a Promise or Observable.
-      function graphQLFetcher(graphQLParams) {
-        // When working locally, the example expects a GraphQL server at the path /graphql.
-        // In a PR preview, it connects to the Star Wars API externally.
-        // Change this to point wherever you host your GraphQL server.
-        const isDev = !window.location.hostname.match(/(^|\.)netlify\.com$|(^|\.)graphql\.org$/)
-        const api = isDev ? '/graphql' : 'https://swapi.graph.cool/'
-        return fetch(api, {
-          method: 'post',
-          headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'include',
-        }).then(function (response) {
-          return response.text();
-        }).then(function (responseBody) {
-          try {
-            return JSON.parse(responseBody);
-          } catch (error) {
-            return responseBody;
-          }
-        });
-      }
-
-      // Render <GraphiQL /> into the body.
-      // See the README in the top level of this module to learn more about
-      // how you can customize GraphiQL by providing different values or
-      // additional child elements.
-      ReactDOM.render(
-        React.createElement(GraphiQL, {
-          fetcher: graphQLFetcher,
-          query: parameters.query,
-          variables: parameters.variables,
-          operationName: parameters.operationName,
-          onEditQuery: onEditQuery,
-          onEditVariables: onEditVariables,
-          defaultVariableEditorOpen: true,
-          onEditOperationName: onEditOperationName
-        }),
-        document.getElementById('graphiql')
-      );
     </script>
   </body>
 </html>

packages/examples/graphiql-cdn/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "description": "An example using GraphiQL",
   "scripts": {
-    "build-demo": "cp ../../graphiql/graphiql.js ../../graphiql/graphiql.css .",
+    "build-demo": "cp ../../graphiql/graphiql.js ../../graphiql/graphiql.css ../../graphiql/resources/renderExample.js .",
     "start": "node server"
   },
   "dependencies": {

packages/graphiql/.eslintrc.js

@@ -71,6 +71,8 @@ module.exports = {
         order: ['static-methods', 'lifecycle', 'render', 'everything-else'],
       },
     ],
+    // temporary
+    'react/no-find-dom-node': 'warn',
     'no-constant-condition': 'error',
     'no-control-regex': 'error',
     'no-debugger': 'warn',

packages/graphiql/.gitignore

@@ -6,3 +6,6 @@ example/yarn.lock
 example/graphiql.js
 example/graphiql.css
 test/pid
+/*.html
+renderGraphiql.js
+cypress/screenshots