feat: Add @graphiql/plugin-code-exporter

custom-words.txt

@@ -58,6 +58,8 @@ timsuchanek
 urigo
 wincent
 yoshiakis
+Leko
+LekoArts
 
 
 // packages and tools

examples/graphiql-webpack/package.json

@@ -9,11 +9,14 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
+    "@graphiql/plugin-code-exporter": "^0.0.1",
+    "@graphiql/plugin-explorer": "^0.1.3",
     "@graphiql/toolkit": "^0.8.0",
     "graphiql": "^2.0.7",
     "graphql": "^16.4.0",
     "graphql-ws": "^5.5.5",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",

examples/graphiql-webpack/src/index.jsx

@@ -1,34 +1,94 @@
-import React from 'react';
+import 'regenerator-runtime/runtime.js';
+
+import * as React from 'react';
 import { render } from 'react-dom';
 import GraphiQL from 'graphiql';
+import { useExplorerPlugin } from '@graphiql/plugin-explorer';
+import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
+
 import 'graphiql/graphiql.css';
+import '@graphiql/plugin-explorer/dist/style.css';
+import '@graphiql/plugin-code-exporter/dist/style.css';
+
+const removeQueryName = query =>
+  query.replace(
+    /^[^{(]+([{(])/,
+    (_match, openingCurlyBracketsOrParenthesis) =>
+      `query ${openingCurlyBracketsOrParenthesis}`,
+  );
+
+const getQuery = (arg, spaceCount) => {
+  const { operationDataList } = arg;
+  const { query } = operationDataList[0];
+  const anonymousQuery = removeQueryName(query);
+  return (
+    ` `.repeat(spaceCount) +
+    anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+  );
+};
+
+const exampleSnippetOne = {
+  name: `Example One`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const exampleSnippetTwo = {
+  name: `Example Two`,
+  language: `JavaScript`,
+  codeMirrorMode: `jsx`,
+  options: [],
+  generate: arg => `import { graphql } from 'graphql'
+
+export const query = graphql\`
+${getQuery(arg, 2)}
+\`
+`,
+};
+
+const snippets = [exampleSnippetOne, exampleSnippetTwo];
+
+const App = () => {
+  const [query, setQuery] = React.useState('');
+  const explorerPlugin = useExplorerPlugin({
+    query,
+    onEdit: setQuery,
+  });
+  const exporterPlugin = useExporterPlugin({
+    query,
+    snippets,
+    codeMirrorTheme: 'graphiql',
+  });
 
-const Logo = () => <span>My Corp</span>;
-
-// See GraphiQL Readme - Advanced Usage section for more examples like this
-GraphiQL.Logo = Logo;
-
-const App = () => (
-  <GraphiQL
-    style={{ height: '100vh' }}
-    headerEditorEnabled
-    fetcher={async (graphQLParams, options) => {
-      const data = await fetch(
-        'https://swapi-graphql.netlify.app/.netlify/functions/index',
-        {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Content-Type': 'application/json',
-            ...options.headers,
+  return (
+    <GraphiQL
+      style={{ height: '100vh' }}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[explorerPlugin, exporterPlugin]}
+      fetcher={async (graphQLParams, options) => {
+        const data = await fetch(
+          'https://swapi-graphql.netlify.app/.netlify/functions/index',
+          {
+            method: 'POST',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+              ...options.headers,
+            },
+            body: JSON.stringify(graphQLParams),
+            credentials: 'same-origin',
           },
-          body: JSON.stringify(graphQLParams),
-          credentials: 'same-origin',
-        },
-      );
-      return data.json().catch(() => data.text());
-    }}
-  />
-);
+        );
+        return data.json().catch(() => data.text());
+      }}
+    />
+  );
+};
 
 render(<App />, document.getElementById('root'));

package.json

@@ -32,7 +32,7 @@
     "npm": "please_use_yarn_instead"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql",
+    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql-plugin-code-exporter && 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 ",
@@ -41,6 +41,7 @@
     "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-plugin-code-exporter": "yarn workspace @graphiql/plugin-code-exporter run build",
     "build:graphiql-react": "yarn workspace @graphiql/react run build",
     "build:packages": "yarn tsc",
     "build:watch": "yarn tsc --watch",

packages/graphiql-plugin-code-exporter/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:react/jsx-runtime"]
+}

packages/graphiql-plugin-code-exporter/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+types
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/graphiql-plugin-code-exporter/CHANGELOG.md

@@ -0,0 +1 @@
+# @graphiql/plugin-code-exporter

packages/graphiql-plugin-code-exporter/README.md

@@ -0,0 +1,56 @@
+# GraphiQL Code Exporter Plugin
+
+This package provides a plugin that integrated the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
+
+## Install
+
+Use your favorite package manager to install the package:
+
+```sh
+npm i -S @graphiql/plugin-code-exporter
+```
+
+The following packages are peer dependencies, so make sure you have them installed as well:
+
+```sh
+npm i -S react react-dom graphql
+```
+
+## Usage
+
+```jsx
+import { useCodeExporterPlugin } from '@graphiql/plugin-code-exporter';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import { useState } from 'react';
+
+import 'graphiql/graphiql.css';
+import '@graphiql/plugin-code-exporter/dist/style.css';
+
+const fetcher = createGraphiQLFetcher({
+  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+});
+
+const snippets = [`your-custom-snippets`];
+
+function GraphiQLWithExplorer() {
+  const [query, setQuery] = useState(DEFAULT_QUERY);
+  const exporterPlugin = useCodeExporterPlugin({
+    query,
+    snippets,
+    codeMirrorTheme: 'graphiql',
+  });
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[exporterPlugin]}
+    />
+  );
+}
+```
+
+## 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.

packages/graphiql-plugin-code-exporter/examples/index.html

@@ -0,0 +1,125 @@
+<!--
+ *  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-code-exporter/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-code-exporter/dist/graphiql-plugin-explorer.umd.js"
+    ></script>
+
+    <script>
+      var fetcher = GraphiQL.createFetcher({
+        url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
+      });
+
+      function removeQueryName(query) {
+        return query.replace(
+          /^[^{(]+([{(])/,
+          (_match, openingCurlyBracketsOrParenthesis) =>
+            `query ${openingCurlyBracketsOrParenthesis}`,
+        );
+      }
+
+      function getQuery(arg, spaceCount) {
+        var { operationDataList } = arg;
+        var { query } = operationDataList[0];
+        var anonymousQuery = removeQueryName(query);
+        return (
+          ` `.repeat(spaceCount) +
+          anonymousQuery.replace(/\n/g, `\n` + ` `.repeat(spaceCount))
+        );
+      }
+
+      var exampleSnippetOne = {
+        name: `Example One`,
+        language: `JavaScript`,
+        codeMirrorMode: `jsx`,
+        options: [],
+        generate: arg => `export const query = graphql\`
+      ${getQuery(arg, 2)}
+      \`
+      `,
+      };
+
+      var exampleSnippetTwo = {
+        name: `Example Two`,
+        language: `JavaScript`,
+        codeMirrorMode: `jsx`,
+        options: [],
+        generate: arg => `import { graphql } from 'graphql'
+
+      export const query = graphql\`
+      ${getQuery(arg, 2)}
+      \`
+      `,
+      };
+
+      var snippets = [exampleSnippetOne, exampleSnippetTwo];
+
+      function GraphiQLWithExporter() {
+        var [query, setQuery] = React.useState(
+          'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}',
+        );
+        var exporterPlugin = GraphiQLPluginCodeExporter.useExporterPlugin({
+          query: query,
+          snippets,
+          codeMirrorTheme: 'graphiql',
+        });
+        return React.createElement(GraphiQL, {
+          fetcher: fetcher,
+          defaultEditorToolsVisibility: true,
+          plugins: [exporterPlugin],
+          query: query,
+          onEditQuery: setQuery,
+        });
+      }
+
+      ReactDOM.render(
+        React.createElement(GraphiQLWithExporter),
+        document.getElementById('graphiql'),
+      );
+    </script>
+  </body>
+</html>