initial

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,57 @@
+# 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-explorer/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,
+  });
+  return (
+    <GraphiQL
+      fetcher={fetcher}
+      query={query}
+      onEditQuery={setQuery}
+      plugins={[exporterPlugin]}
+    />
+  );
+}
+```
+
+## CDN bundles
+
+TODO!
+
+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/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@graphiql/plugin-code-exporter",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/graphql/graphiql",
+    "directory": "packages/graphiql-plugin-code-exporter"
+  },
+  "author": "LekoArts",
+  "main": "dist/graphiql-plugin-code-exporter.cjs.js",
+  "module": "dist/graphiql-plugin-code-exporter.es.js",
+  "types": "types/index.d.ts",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "graphql",
+    "graphiql",
+    "plugin",
+    "explorer"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@graphiql/react": "^0.13.0",
+    "graphiql-code-exporter": "^3.0.3"
+  },
+  "peerDependencies": {
+    "graphql": "^15.5.0 || ^16.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.13"
+  }
+}

packages/graphiql-plugin-code-exporter/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-code-exporter.d.ts'),
+  path.resolve(base, 'types', 'graphiql-code-exporter.d.ts'),
+);

packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts

@@ -0,0 +1,14 @@
+declare module 'graphiql-code-exporter' {
+  import { GraphQLLeafType, ValueNode } from 'graphql';
+  import { ComponentType } from 'react';
+
+  export type GraphiQLCodeExporterProps = {
+    query: string;
+  };
+
+  const GraphiQLCodeExporter: ComponentType<GraphiQLCodeExporterProps> & {
+    defaultValue: (arg: GraphQLLeafType) => ValueNode;
+  };
+
+  export default GraphiQLCodeExporter;
+}

packages/graphiql-plugin-code-exporter/src/index.css

@@ -0,0 +1 @@
+/* TODO */

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -0,0 +1,46 @@
+import { GraphiQLPlugin } from '@graphiql/react';
+import { useMemo, useRef } from 'react';
+import GraphiQLCodeExporter, {
+  GraphiQLCodeExporterProps,
+} from 'graphiql-code-exporter';
+
+import './graphiql-code-exporter.d.ts';
+import './index.css';
+
+function ExporterPlugin(props: GraphiQLCodeExporterProps) {
+  return <GraphiQLCodeExporter {...props} />;
+}
+
+export function useExplorerPlugin(props: GraphiQLCodeExporterProps) {
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  return useMemo<GraphiQLPlugin>(
+    () => ({
+      title: 'GraphiQL Code Exporter',
+      icon: () => (
+        <svg height="1em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M18 6H20M22 6H20M20 6V4M20 6V8"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M21.4 20H2.6C2.26863 20 2 19.7314 2 19.4V11H21.4C21.7314 11 22 11.2686 22 11.6V19.4C22 19.7314 21.7314 20 21.4 20Z"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M2 11V4.6C2 4.26863 2.26863 4 2.6 4H8.77805C8.92127 4 9.05977 4.05124 9.16852 4.14445L12.3315 6.85555C12.4402 6.94876 12.5787 7 12.722 7H14"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ),
+      content: () => <ExporterPlugin {...propsRef.current} />,
+    }),
+    [],
+  );
+}

packages/graphiql-plugin-code-exporter/src/vite-env.d.ts

@@ -0,0 +1 @@
+// / <reference types="vite/client" />

packages/graphiql-plugin-code-exporter/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationDir": "types",
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/graphiql-plugin-code-exporter/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

packages/graphiql-plugin-code-exporter/vite.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: 'src/index.tsx',
+      fileName: 'graphiql-plugin-code-exporter',
+      name: 'GraphiQLPluginCodeExporter',
+      formats: ['cjs', 'es', 'umd'],
+    },
+    rollupOptions: {
+      external: ['@graphiql/react', 'graphql', 'react', 'react-dom'],
+      output: {
+        chunkFileNames: '[name].[format].js',
+        globals: {
+          '@graphiql/react': 'GraphiQL.React',
+          graphql: 'GraphiQL.GraphQL',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    commonjsOptions: {
+      esmExternals: true,
+      requireReturnsDefault: 'auto',
+    },
+  },
+});

yarn.lock

@@ -7299,6 +7299,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.0.8:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.2.tgz#5b263ec2366224b100181dded7ce0579b340c107"
+  integrity sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-to-clipboard@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
@@ -10355,6 +10362,13 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphiql-code-exporter@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/graphiql-code-exporter/-/graphiql-code-exporter-3.0.3.tgz#550c87caa018eade5db4238f81953db6e0468248"
+  integrity sha512-Ml3J/ojCQ56qrIgJPDCrWQ2cpI/6yio2P1tHPBuvhGJ2zVSUCH/D+v1DIwXIzsAMwqq0WkaknqH3iuA6LD5A5A==
+  dependencies:
+    copy-to-clipboard "^3.0.8"
+
 graphiql-explorer@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.9.0.tgz#25f6b990bfc3e04e88c0cf419e28d12abe2c4fbe"