diff --git a/.changeset/dirty-melons-burn.md b/.changeset/dirty-melons-burn.md
new file mode 100644
index 00000000000..943e06fdacf
--- /dev/null
+++ b/.changeset/dirty-melons-burn.md
@@ -0,0 +1,5 @@
+---
+'graphiql': patch
+---
+
+Fix the width of the plugin pane
diff --git a/.changeset/real-boxes-sleep.md b/.changeset/real-boxes-sleep.md
new file mode 100644
index 00000000000..2ad4a3f8e05
--- /dev/null
+++ b/.changeset/real-boxes-sleep.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-code-exporter': minor
+---
+
+Add code exported plugin
diff --git a/custom-words.txt b/custom-words.txt
index a748897d81d..fea7f589730 100644
--- a/custom-words.txt
+++ b/custom-words.txt
@@ -59,6 +59,8 @@ timsuchanek
urigo
wincent
yoshiakis
+Leko
+LekoArts
// packages and tools
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
index 315df95550c..21bc632aab7 100644
--- a/examples/graphiql-webpack/package.json
+++ b/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.11",
"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",
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
index c9ede1fdbcd..575c3645788 100644
--- a/examples/graphiql-webpack/src/index.jsx
+++ b/examples/graphiql-webpack/src/index.jsx
@@ -1,34 +1,93 @@
-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,
+ });
-const Logo = () => My Corp;
-
-// See GraphiQL Readme - Advanced Usage section for more examples like this
-GraphiQL.Logo = Logo;
-
-const App = () => (
- {
- 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 (
+ {
+ 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(, document.getElementById('root'));
diff --git a/package.json b/package.json
index e304fd53efa..c2b6f71e504 100644
--- a/package.json
+++ b/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",
diff --git a/packages/graphiql-plugin-code-exporter/.eslintrc b/packages/graphiql-plugin-code-exporter/.eslintrc
new file mode 100644
index 00000000000..98f785433f6
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/.eslintrc
@@ -0,0 +1,3 @@
+{
+ "extends": ["plugin:react/jsx-runtime"]
+}
diff --git a/packages/graphiql-plugin-code-exporter/.gitignore b/packages/graphiql-plugin-code-exporter/.gitignore
new file mode 100644
index 00000000000..81275974cf0
--- /dev/null
+++ b/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?
diff --git a/packages/graphiql-plugin-code-exporter/CHANGELOG.md b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
new file mode 100644
index 00000000000..42072232b44
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
@@ -0,0 +1 @@
+# @graphiql/plugin-code-exporter
diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
new file mode 100644
index 00000000000..7d5234d17fe
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/README.md
@@ -0,0 +1,103 @@
+# GraphiQL Code Exporter Plugin
+
+This package provides a plugin that integrates 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
+
+See [GraphiQL Code Exporter README](https://github.com/OneGraph/graphiql-code-exporter) for all details on available `props` and how to [create snippets](https://github.com/OneGraph/graphiql-code-exporter#snippets).
+
+```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',
+});
+
+/*
+Example code for snippets. See https://github.com/OneGraph/graphiql-code-exporter#snippets for details
+*/
+
+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];
+
+function GraphiQLWithExplorer() {
+ const [query, setQuery] = useState(DEFAULT_QUERY);
+ const exporterPlugin = useCodeExporterPlugin({
+ query,
+ snippets,
+ codeMirrorTheme: 'graphiql',
+ });
+ return (
+
+ );
+}
+```
+
+## CDN bundles
+
+You can also use 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-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
new file mode 100644
index 00000000000..67475959084
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
new file mode 100644
index 00000000000..34ce71c7ea2
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "@graphiql/plugin-code-exporter",
+ "version": "0.0.1",
+ "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-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": {
+ "@graphiql/react": "^0.13.0",
+ "@vitejs/plugin-react": "^1.3.0",
+ "postcss-nesting": "^10.1.7",
+ "typescript": "^4.6.3",
+ "vite": "^2.9.13"
+ }
+}
diff --git a/packages/graphiql-plugin-code-exporter/postcss.config.js b/packages/graphiql-plugin-code-exporter/postcss.config.js
new file mode 100644
index 00000000000..1ab3f9d65bf
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+ plugins: [require('postcss-nesting')],
+};
diff --git a/packages/graphiql-plugin-code-exporter/resources/copy-types.mjs b/packages/graphiql-plugin-code-exporter/resources/copy-types.mjs
new file mode 100644
index 00000000000..45e621b507b
--- /dev/null
+++ b/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'),
+);
diff --git a/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
new file mode 100644
index 00000000000..29264e30216
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts
@@ -0,0 +1,53 @@
+declare module 'graphiql-code-exporter' {
+ import { ComponentType } from 'react';
+ import {
+ GraphQLSchema,
+ OperationTypeNode,
+ OperationDefinitionNode,
+ FragmentDefinitionNode,
+ } from 'graphql';
+
+ type OperationData = {
+ query: string;
+ name: string;
+ displayName: string;
+ type: OperationTypeNode | 'fragment';
+ variableName: string;
+ variables: Record;
+ operationDefinition: OperationDefinitionNode | FragmentDefinitionNode;
+ fragmentDependencies: Array;
+ };
+
+ type GenerateOptions = {
+ serverUrl: string;
+ headers: Record;
+ context: Record;
+ operationDataList: Array;
+ options: Record;
+ };
+
+ type Snippet = {
+ language: string;
+ codeMirrorMode: string;
+ name: string;
+ options: Array<{
+ id: string;
+ label: string;
+ initial: boolean;
+ }>;
+ generate: (options: GenerateOptions) => string;
+ };
+
+ export type GraphiQLCodeExporterProps = {
+ query: string;
+ snippets: Array;
+ codeMirrorTheme?: string;
+ variables?: string;
+ context?: Record;
+ schema?: GraphQLSchema | null | undefined;
+ };
+
+ const GraphiQLCodeExporter: ComponentType;
+
+ export default GraphiQLCodeExporter;
+}
diff --git a/packages/graphiql-plugin-code-exporter/src/index.css b/packages/graphiql-plugin-code-exporter/src/index.css
new file mode 100644
index 00000000000..c139a05d582
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/index.css
@@ -0,0 +1,140 @@
+.docExplorerWrap {
+ height: unset !important;
+ min-width: unset !important;
+ width: unset !important;
+}
+
+.doc-explorer-title {
+ font-size: var(--font-size-h2);
+ font-weight: var(--font-weight-medium);
+}
+
+.doc-explorer-rhs {
+ display: none;
+}
+
+.doc-explorer-contents {
+ border-top: none !important;
+}
+
+.graphiql-code-exporter {
+ min-width: unset !important;
+ position: relative;
+ padding: var(--px-16) 0;
+ & > div {
+ font-family: var(--font-family) !important;
+ padding: 0 !important;
+ font-size: var(--font-size-body) !important;
+ }
+ & > div:first-of-type {
+ display: flex;
+ flex-direction: column;
+ gap: var(--px-16);
+ & > div {
+ padding: 0 !important;
+ }
+ & > div:first-of-type {
+ display: flex;
+ flex-direction: row;
+ gap: var(--px-16);
+ }
+ & > div:last-of-type {
+ & > div:first-of-type {
+ color: hsla(var(--color-neutral), var(--alpha-secondary)) !important;
+ font-variant: unset !important;
+ text-transform: unset !important;
+ font-weight: unset !important;
+ margin-bottom: var(--px-12);
+ }
+ }
+ }
+ & button.toolbar-button {
+ display: block;
+ height: var(--toolbar-width) !important;
+ width: var(--toolbar-width) !important;
+ border-radius: var(--border-radius-4) !important;
+ cursor: pointer;
+ display: inline-flex;
+ font-size: unset !important;
+ left: unset !important;
+ margin-top: unset !important;
+ top: var(--px-16);
+ right: 0;
+ justify-content: center;
+ align-items: center;
+ background-color: unset !important;
+ & svg {
+ fill: hsla(var(--color-neutral), var(--alpha-tertiary));
+ }
+ }
+ & > div:last-of-type {
+ border-top: none !important;
+ display: flex;
+ flex: 1;
+ margin-top: var(--px-24) !important;
+ & > div {
+ position: relative;
+ min-height: 600px;
+ width: 100%;
+ }
+ }
+ & .toolbar-menu.toolbar-button {
+ position: relative;
+ cursor: pointer;
+ text-decoration: none;
+ padding: var(--px-8) var(--px-12);
+ color: hsla(var(--color-neutral), 1) !important;
+ border-radius: var(--border-radius-4) !important;
+ &:hover {
+ background-color: hsla(
+ var(--color-neutral),
+ var(--alpha-background-light)
+ ) !important;
+ }
+ }
+ & .toolbar-menu-items {
+ background-color: hsl(var(--color-base)) !important;
+ border: var(--popover-border);
+ border-radius: var(--border-radius-8);
+ box-shadow: var(--popover-box-shadow) !important;
+ padding: var(--px-4);
+ max-width: 250px;
+ font-size: inherit;
+ display: block;
+ white-space: nowrap;
+ outline: none;
+ position: absolute;
+ z-index: 100;
+ margin-top: var(--px-8);
+ visibility: hidden;
+ left: 0;
+ &.open {
+ visibility: visible;
+ }
+ & > li {
+ cursor: pointer;
+ display: block;
+ color: inherit;
+ font: inherit;
+ text-decoration: initial;
+ border-radius: var(--border-radius-4);
+ margin: var(--px-4);
+ overflow: hidden;
+ padding: var(--px-6) var(--px-8);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &:hover {
+ color: inherit;
+ background-color: hsla(
+ var(--color-neutral),
+ var(--alpha-background-light)
+ );
+ }
+ }
+ }
+ & .CodeMirror {
+ box-shadow: var(--popover-box-shadow);
+ border-radius: calc(var(--border-radius-12));
+ padding: var(--px-16);
+ }
+}
diff --git a/packages/graphiql-plugin-code-exporter/src/index.tsx b/packages/graphiql-plugin-code-exporter/src/index.tsx
new file mode 100644
index 00000000000..7eadddbfd31
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/index.tsx
@@ -0,0 +1,40 @@
+import type { 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';
+
+export function useExporterPlugin(props: GraphiQLCodeExporterProps) {
+ const propsRef = useRef(props);
+ propsRef.current = props;
+ return useMemo(
+ () => ({
+ title: 'GraphiQL Code Exporter',
+ icon: () => (
+
+ ),
+ content: () => (
+
+ ),
+ }),
+ [],
+ );
+}
diff --git a/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts b/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts
new file mode 100644
index 00000000000..14fa7492304
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/src/vite-env.d.ts
@@ -0,0 +1 @@
+// /
diff --git a/packages/graphiql-plugin-code-exporter/tsconfig.json b/packages/graphiql-plugin-code-exporter/tsconfig.json
new file mode 100644
index 00000000000..872ce46c3eb
--- /dev/null
+++ b/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" }]
+}
diff --git a/packages/graphiql-plugin-code-exporter/tsconfig.node.json b/packages/graphiql-plugin-code-exporter/tsconfig.node.json
new file mode 100644
index 00000000000..9d31e2aed93
--- /dev/null
+++ b/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"]
+}
diff --git a/packages/graphiql-plugin-code-exporter/vite.config.ts b/packages/graphiql-plugin-code-exporter/vite.config.ts
new file mode 100644
index 00000000000..421069fc228
--- /dev/null
+++ b/packages/graphiql-plugin-code-exporter/vite.config.ts
@@ -0,0 +1,30 @@
+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: ['graphql', 'react', 'react-dom'],
+ output: {
+ chunkFileNames: '[name].[format].js',
+ globals: {
+ graphql: 'GraphiQL.GraphQL',
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ },
+ },
+ },
+ commonjsOptions: {
+ esmExternals: true,
+ requireReturnsDefault: 'auto',
+ },
+ },
+});
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index 9baf3c35ea6..b1f4cd79c31 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -228,7 +228,6 @@ button.graphiql-tab-add > svg {
border-left: 1px solid
hsla(var(--color-neutral), var(--alpha-background-heavy));
flex: 1;
- max-width: calc(100% - 2 * var(--px-16));
overflow-y: auto;
padding: var(--px-16);
}
diff --git a/yarn.lock b/yarn.lock
index 8261dfdd560..3966d71f484 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7431,10 +7431,10 @@ 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.2.0:
- version "3.3.1"
- resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
- integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0:
+ 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"
@@ -10652,6 +10652,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"
@@ -15857,10 +15864,10 @@ regenerator-runtime@^0.11.0:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-regenerator-runtime@^0.13.4:
- version "0.13.7"
- resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
- integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
+ version "0.13.9"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+ integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
regenerator-transform@^0.14.2:
version "0.14.5"