graphql · acao · Jun 11, 2020 · Feb 21, 2020 · Feb 22, 2020 · Apr 19, 2020
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -313,7 +313,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/{graphql-*,graphiql}/src/**'],
+      files: ['packages/{graphql-*,graphiql}/src/**', 'plugins/*/src/**'],
       extends: ['plugin:jest/recommended'],
       env: {
         'jest/globals': true,
@@ -357,7 +357,7 @@ module.exports = {
     },
     {
       // Resources are typically our helper scripts; make life easier there
-      files: ['resources/*.js', 'packages/*/resources/*.js'],
+      files: ['resources/*.js', '**/resources/*.js'],
       rules: {
         'no-console': 0,
         'no-await-in-loop': 0,

diff --git a/.yarnrc b/.yarnrc
@@ -0,0 +1,3 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
diff --git a/babel.config.js b/babel.config.js
@@ -12,7 +12,7 @@ if (process.env.ESM) {
 }
 
 if (process.env.CDN) {
-  envConfig.modules = 'umd';
+  envConfig.modules = 'amd';
   envConfig.targets = null;
   envConfig.ignoreBrowserslistConfig = false;
 }
@@ -28,6 +28,9 @@ module.exports = {
     test: {
       plugins: [require.resolve('babel-plugin-macros')],
     },
+    development: {
+      compact: false,
+    },
   },
   plugins: [
     require.resolve('@babel/plugin-proposal-class-properties'),

diff --git a/examples/graphiql-cdn-subscriptions/index.html b/examples/graphiql-cdn-subscriptions/index.html
@@ -0,0 +1,122 @@
+<!--
+ *  Copyright (c) 2019 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      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
+      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>
+    <script crossorigin src="//unpkg.com/graphql@15.0.0"></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.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="https://unpkg.com/graphiql/graphiql.min.css" />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script>
+      const mockSubcriptionClient = {
+        subscribe: () => {},
+        unsubscribe: () => {},
+      };
+
+      const hasSubscriptionOperation = graphQlParams => {
+        const queryDoc = parse(graphQlParams.query);
+
+        for (let definition of queryDoc.definitions) {
+          if (definition.kind === 'OperationDefinition') {
+            const operation = definition.operation;
+            if (operation === 'subscription') {
+              return true;
+            }
+          }
+        }
+
+        return false;
+      };
+
+      export const graphQLFetcher = (subscriptionsClient, fallbackFetcher) => {
+        let activeSubscription = null;
+
+        return graphQLParams => {
+          if (subscriptionsClient && activeSubscription !== null) {
+            subscriptionsClient.unsubscribe();
+          }
+
+          if (subscriptionsClient && hasSubscriptionOperation(graphQLParams)) {
+            return {
+              subscribe: observer => {
+                observer.next(
+                  'Your subscription data will appear here after server publication!',
+                );
+
+                subscriptionsClient.subscribe(
+                  {
+                    query: graphQLParams.query,
+                    variables: graphQLParams.variables,
+                  },
+                  function (error, result) {
+                    if (error) {
+                      observer.error(error);
+                    } else {
+                      observer.next(result);
+                    }
+                  },
+                );
+                activeSubscription = true;
+              },
+            };
+          } else {
+            return fallbackFetcher(graphQLParams);
+          }
+        };
+      };
+
+      ReactDOM.render(
+        React.createElement(GraphiQL, {
+          fetcher: graphQLFetcher,
+          defaultVariableEditorOpen: true,
+        }),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/examples/graphiql-cdn-subscriptions/subscriptionsExample.js b/examples/graphiql-cdn-subscriptions/subscriptionsExample.js
@@ -0,0 +1,56 @@
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+import { parse } from 'graphql';
+
+const hasSubscriptionOperation = (graphQlParams: any) => {
+  const queryDoc = parse(graphQlParams.query);
+
+  for (const definition of queryDoc.definitions) {
+    if (definition.kind === 'OperationDefinition') {
+      const operation = definition.operation;
+      if (operation === 'subscription') {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+export const graphQLFetcher = (
+  subscriptionsClient: SubscriptionClient,
+  fallbackFetcher: Function,
+) => {
+  let activeSubscriptionId: number | null = null;
+
+  return (graphQLParams: any) => {
+    if (subscriptionsClient && activeSubscriptionId !== null) {
+      subscriptionsClient.unsubscribe(activeSubscriptionId);
+    }
+
+    if (subscriptionsClient && hasSubscriptionOperation(graphQLParams)) {
+      return {
+        subscribe: (observer: { error: Function, next: Function }) => {
+          observer.next(
+            'Your subscription data will appear here after server publication!',
+          );
+
+          activeSubscriptionId = subscriptionsClient.subscribe(
+            {
+              query: graphQLParams.query,
+              variables: graphQLParams.variables,
+            },
+            function (error, result) {
+              if (error) {
+                observer.error(error);
+              } else {
+                observer.next(result);
+              }
+            },
+          );
+        },
+      };
+    } else {
+      return fallbackFetcher(graphQLParams);
+    }
+  };
+};
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -5,8 +5,7 @@
   "license": "MIT",
   "description": "A GraphiQL example with webpack and typescript",
   "scripts": {
-    "build-validate": "webpack",
-    "build-demo": "yarn build-validate && yarn copy-demo",
+    "build-demo": "webpack-cli && yarn copy-demo",
     "copy-demo": "mkdirp ../../packages/graphiql/webpack && copy 'dist/*' '../../packages/graphiql/webpack'",
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
@@ -26,7 +25,7 @@
     "html-webpack-plugin": "^4.2.0",
     "react-dom": "^16.12.0",
     "style-loader": "^1.1.3",
-    "webpack": "4.42.0",
+    "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
     "worker-loader": "^2.0.0"

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
 import GraphiQL from 'graphiql';
-import 'graphiql/graphiql.css';
 
 const Logo = () => <span>{'My Corp'}</span>;
 

diff --git a/examples/graphiql-webpack/webpack.config.js b/examples/graphiql-webpack/webpack.config.js
@@ -52,6 +52,10 @@ module.exports = {
         test: /\.svg$/,
         use: [{ loader: 'svg-inline-loader' }],
       },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: ['file-loader'],
+      },
     ],
   },
   resolve: {

diff --git a/examples/monaco-graphql-webpack/babel.config.js b/examples/monaco-graphql-webpack/babel.config.js
@@ -10,7 +10,7 @@ module.exports = {
         bugfixes: true,
       },
     ],
-    require.resolve('@babel/preset-typescript'),
+    [require.resolve('@babel/preset-typescript'), {}],
   ],
   plugins: [
     require.resolve('@babel/plugin-syntax-dynamic-import'),

diff --git a/examples/monaco-graphql-webpack/package.json b/examples/monaco-graphql-webpack/package.json
@@ -6,8 +6,8 @@
   "description": "A simple monaco example with webpack and typescript",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack-cli",
-    "build-demo": "yarn build && yarn copy-demo",
-    "copy-demo": "mkdirp ../../packages/graphiql/monaco && copy 'bundle/*' '../../packages/graphiql/monaco'",
+    "build-demo-master": "yarn build && yarn copy-demo",
+    "copy-demo-master": "mkdirp ../../packages/graphiql/monaco && copy 'bundle/*' '../../packages/graphiql/monaco'",
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
@@ -28,9 +28,9 @@
     "monaco-editor-webpack-plugin": "^1.9.0",
     "react-dom": "^16.12.0",
     "style-loader": "^1.1.3",
-    "webpack": "^4.42.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
+    "webpack": "4.42.1",
     "worker-loader": "^2.0.0"
   }
 }
diff --git a/examples/monaco-graphql-webpack/src/index.ts b/examples/monaco-graphql-webpack/src/index.ts
@@ -138,7 +138,7 @@ const opAction: monaco.editor.IActionDescriptor = {
   id: 'graphql-run',
   label: 'Run Operation',
   contextMenuOrder: 0,
-  contextMenuGroupId: 'graphql',
+  contextMenuGroupId: 'operation',
   keybindings: [
     // eslint-disable-next-line no-bitwise
     monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,

diff --git a/examples/monaco-graphql-webpack/tsconfig.json b/examples/monaco-graphql-webpack/tsconfig.json
@@ -9,8 +9,7 @@
     "strictPropertyInitialization": false,
     "types": ["node", "jest"],
     "typeRoots": ["../../node_modules/@types", "node_modules/@types"],
-    "lib": ["dom"],
-    "module": "umd"
+    "lib": ["dom"]
   },
   "references": [{ "path": "../../packages/monaco-graphql" }],
   "include": ["src"],

diff --git a/jest.config.js b/jest.config.js
@@ -17,6 +17,7 @@ module.exports = {
       'identity-obj-proxy',
     '\\.(css|less)$': 'identity-obj-proxy',
     '^graphql-language-([^/]+)': '<rootDir>/packages/graphql-language-$1/src',
+    '^@graphiql-plugins\\/([^/]+)': '<rootDir>/plugins/$1/src',
     '^codemirror-graphql\\/([^]+)':
       '<rootDir>/packages/codemirror-graphql/src/$1',
     '^example-([^/]+)': '<rootDir>/examples/$1/src',
@@ -28,7 +29,12 @@ module.exports = {
     '!**/cypress/**',
   ],
   testEnvironment: require.resolve('jest-environment-jsdom'),
-  testPathIgnorePatterns: ['node_modules', 'dist', 'codemirror-graphql'],
+  testPathIgnorePatterns: [
+    'node_modules',
+    'dist',
+    'codemirror-graphql',
+    'packages/graphiql',
+  ],
   collectCoverageFrom: [
     '**/src/**/*.{js,jsx,ts,tsx}',
     '!**/src/**/*.stories.js*',

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*", "examples/*"],
+  "packages": ["packages/*", "examples/*", "plugins/*"],
   "npmClient": "yarn",
   "useWorkspaces": true,
   "version": "independent",

diff --git a/netlify.toml b/netlify.toml
@@ -1,5 +1,5 @@
 [build]
-  command = "yarn build && yarn build-bundles && yarn build-demo && yarn build-docs"
+  command = "yarn build && yarn build-bundles && yarn build-demo"
   publish = "packages/graphiql"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1