graphql · thomasheyenbrock · Aug 29, 2022 · Aug 28, 2022 · Aug 28, 2022
diff --git a/.changeset/mean-dancers-visit.md b/.changeset/mean-dancers-visit.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-explorer': minor
+---
+
+Add a package that exports a plugin to use the GraphiQL Explorer from OneGraph
diff --git a/.changeset/thirty-eyes-behave.md b/.changeset/thirty-eyes-behave.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Add the contents of `graphql` and `@graphiql/react` as static properties to the `GraphiQL` component in CDN bundles so that these modules can be reused from plugin CDN bundles.
diff --git a/examples/graphiql-explorer/index.html b/examples/graphiql-explorer/index.html
diff --git a/examples/graphiql-explorer/package.json b/examples/graphiql-explorer/package.json
diff --git a/examples/graphiql-explorer/src/customArgs.ts b/examples/graphiql-explorer/src/customArgs.ts
diff --git a/examples/graphiql-explorer/src/graphiql-explorer.d.ts b/examples/graphiql-explorer/src/graphiql-explorer.d.ts
diff --git a/examples/graphiql-explorer/src/main.tsx b/examples/graphiql-explorer/src/main.tsx
diff --git a/examples/graphiql-explorer/src/vite-env.d.ts b/examples/graphiql-explorer/src/vite-env.d.ts
diff --git a/examples/graphiql-explorer/vite.config.ts b/examples/graphiql-explorer/vite.config.ts
diff --git a/package.json b/package.json
@@ -6,7 +6,6 @@
   "workspaces": {
     "packages": [
       "packages/*",
-      "examples/graphiql-explorer",
       "examples/graphiql-webpack",
       "examples/monaco-graphql-webpack",
       "examples/monaco-graphql-react-vite"
@@ -33,14 +32,15 @@
     "npm": "please_use_yarn_instead"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql",
+    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql",
     "build-bundles": "yarn prebuild-bundles && wsrun -p -m -s build-bundles",
     "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql run build-bundles-clean",
     "build-clean": "wsrun -m build-clean ",
     "build-demo": "wsrun -m -s build-demo",
     "build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
     "build:clean": "yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json",
     "build:graphiql": "yarn tsc resources/tsconfig.graphiql.json",
+    "build:graphiql-plugin-explorer": "yarn workspace @graphiql/plugin-explorer run build",
     "build:graphiql-react": "yarn workspace @graphiql/react run build",
     "build:packages": "yarn tsc",
     "build:watch": "yarn tsc --watch",

diff --git a/examples/graphiql-explorer/.eslintrc → packages/graphiql-plugin-explorer/.eslintrc b/examples/graphiql-explorer/.eslintrc → packages/graphiql-plugin-explorer/.eslintrc
diff --git a/examples/graphiql-explorer/.gitignore → packages/graphiql-plugin-explorer/.gitignore b/examples/graphiql-explorer/.gitignore → packages/graphiql-plugin-explorer/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+types
 *.local
 
 # Editor directories and files

diff --git a/packages/graphiql-plugin-explorer/README.md b/packages/graphiql-plugin-explorer/README.md
@@ -0,0 +1,55 @@
+# GraphiQL Explorer Plugin
+
+This package provides a plugin that integrated the [`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.
+
+## Install
+
+Use your favorite package manager to install the package:
+
+```sh
+npm i -S @graphiql/plugin-explorer
+```
+
+The following packages are peer dependencies, so make sure you have them installed as well:
+
+```sh
+npm i -S react react-dom graphql @graphiql/react
+```
+
+## Usage
+
+```jsx
+import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import { useState } from 'react';
+
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+
+const fetcher = createGraphiQLFetcher({
+  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+});
+
+function GraphiQLWithExplorer() {
+  const [query, setQuery] = useState(DEFAULT_QUERY);
+  const explorerPlugin = useExplorerPlugin({
+    query,
+    onEdit: setQuery,
+    getDefaultScalarArgValue,
+    makeDefaultArg,
+  });
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[explorerPlugin]}
+    />
+  );
+}
+```
+
+## CDN bundles
+
+You can also use add this plugin when using the [CDN bundle](../../examples/graphiql-cdn) to render GraphiQL. Check out the [example HTML file](examples/index.html) that shows how you can do this.
diff --git a/packages/graphiql-plugin-explorer/examples/index.html b/packages/graphiql-plugin-explorer/examples/index.html
@@ -0,0 +1,80 @@
+<!--
+ *  Copyright (c) 2021 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>
+
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">Loading...</div>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/react@17/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+    ></script>
+
+    <script
+      crossorigin
+      src="https://unpkg.com/graphiql/graphiql.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
+    ></script>
+
+    <script>
+      var fetcher = GraphiQL.createFetcher({
+        url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+      });
+
+      function GraphiQLWithExplorer() {
+        var [query, setQuery] = React.useState(
+          'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}',
+        );
+        var explorerPlugin = useExplorerPlugin({
+          query: query,
+          onEdit: setQuery,
+        });
+        return React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [explorerPlugin],
+          query: query,
+          onEditQuery: setQuery,
+        });
+      }
+
+      ReactDOM.render(
+        React.createElement(GraphiQLWithExplorer),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>
diff --git a/packages/graphiql-plugin-explorer/package.json b/packages/graphiql-plugin-explorer/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@graphiql/plugin-explorer",
+  "private": true,
+  "version": "0.0.0",
+  "main": "dist/graphiql-plugin-explorer.cjs.js",
+  "module": "dist/graphiql-plugin-explorer.es.js",
+  "types": "types/index.d.ts",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "explorer"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "graphiql-explorer": "^0.9.0"
+  },
+  "peerDependencies": {
+    "@graphiql/react": "^0.11.1",
+    "graphql": "^16.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.5"
+  }
+}
diff --git a/packages/graphiql-plugin-explorer/resources/copy-types.mjs b/packages/graphiql-plugin-explorer/resources/copy-types.mjs
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const base = path.resolve(path.dirname(__filename), '..');
+
+fs.copyFileSync(
+  path.resolve(base, 'src', 'graphiql-explorer.d.ts'),
+  path.resolve(base, 'types', 'graphiql-explorer.d.ts'),
+);
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ lerna-debug.log* @@
     node_modules
     dist
     dist-ssr
+    types
     *.local
     # Editor directories and files
@@ Expand Down @@