Skip to content

Commit 45e41cc

Browse files
LekoArtsLekoArts
committed
initial
1 parent f302c85 commit 45e41cc

File tree

15 files changed

+282
-1
lines changed

15 files changed

+282
-1
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"npm": "please_use_yarn_instead"
3333
},
3434
"scripts": {
35-
"build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql-plugin-explorer && yarn build:graphiql",
35+
"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",
3636
"build-bundles": "yarn prebuild-bundles && wsrun -p -m -s build-bundles",
3737
"build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql run build-bundles-clean",
3838
"build-clean": "wsrun -m build-clean ",
@@ -41,6 +41,7 @@
4141
"build:clean": "yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json",
4242
"build:graphiql": "yarn tsc resources/tsconfig.graphiql.json",
4343
"build:graphiql-plugin-explorer": "yarn workspace @graphiql/plugin-explorer run build",
44+
"build:graphiql-plugin-code-exporter": "yarn workspace @graphiql/plugin-code-exporter run build",
4445
"build:graphiql-react": "yarn workspace @graphiql/react run build",
4546
"build:packages": "yarn tsc",
4647
"build:watch": "yarn tsc --watch",

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": ["plugin:react/jsx-runtime"]
3+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
types
14+
*.local
15+
16+
# Editor directories and files
17+
.vscode/*
18+
!.vscode/extensions.json
19+
.idea
20+
.DS_Store
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# @graphiql/plugin-code-exporter

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# GraphiQL Code Exporter Plugin
2+
3+
This package provides a plugin that integrated the [`GraphiQL Code Exporter`](https://github.com/OneGraph/graphiql-code-exporter) into the GraphiQL UI.
4+
5+
## Install
6+
7+
Use your favorite package manager to install the package:
8+
9+
```sh
10+
npm i -S @graphiql/plugin-code-exporter
11+
```
12+
13+
The following packages are peer dependencies, so make sure you have them installed as well:
14+
15+
```sh
16+
npm i -S react react-dom graphql
17+
```
18+
19+
## Usage
20+
21+
```jsx
22+
import { useCodeExporterPlugin } from '@graphiql/plugin-code-exporter';
23+
import { createGraphiQLFetcher } from '@graphiql/toolkit';
24+
import { GraphiQL } from 'graphiql';
25+
import { useState } from 'react';
26+
27+
import 'graphiql/graphiql.css';
28+
import '@graphiql/plugin-explorer/dist/style.css';
29+
30+
const fetcher = createGraphiQLFetcher({
31+
url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
32+
});
33+
34+
const snippets = [`your-custom-snippets`];
35+
36+
function GraphiQLWithExplorer() {
37+
const [query, setQuery] = useState(DEFAULT_QUERY);
38+
const exporterPlugin = useCodeExporterPlugin({
39+
query,
40+
snippets,
41+
});
42+
return (
43+
<GraphiQL
44+
fetcher={fetcher}
45+
query={query}
46+
onEditQuery={setQuery}
47+
plugins={[exporterPlugin]}
48+
/>
49+
);
50+
}
51+
```
52+
53+
## CDN bundles
54+
55+
TODO!
56+
57+
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‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "@graphiql/plugin-code-exporter",
3+
"version": "0.0.0",
4+
"repository": {
5+
"type": "git",
6+
"url": "https://github.com/graphql/graphiql",
7+
"directory": "packages/graphiql-plugin-code-exporter"
8+
},
9+
"author": "LekoArts",
10+
"main": "dist/graphiql-plugin-code-exporter.cjs.js",
11+
"module": "dist/graphiql-plugin-code-exporter.es.js",
12+
"types": "types/index.d.ts",
13+
"license": "MIT",
14+
"keywords": [
15+
"react",
16+
"graphql",
17+
"graphiql",
18+
"plugin",
19+
"explorer"
20+
],
21+
"files": [
22+
"dist",
23+
"src",
24+
"types"
25+
],
26+
"scripts": {
27+
"dev": "vite",
28+
"build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build",
29+
"preview": "vite preview"
30+
},
31+
"dependencies": {
32+
"@graphiql/react": "^0.13.0",
33+
"graphiql-code-exporter": "^3.0.3"
34+
},
35+
"peerDependencies": {
36+
"graphql": "^15.5.0 || ^16.0.0",
37+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
38+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
39+
},
40+
"devDependencies": {
41+
"@vitejs/plugin-react": "^1.3.0",
42+
"typescript": "^4.6.3",
43+
"vite": "^2.9.13"
44+
}
45+
}

‎packages/graphiql-plugin-code-exporter/resources/copy-types.mjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
import { fileURLToPath } from 'url';
4+
5+
const __filename = fileURLToPath(import.meta.url);
6+
const base = path.resolve(path.dirname(__filename), '..');
7+
8+
fs.copyFileSync(
9+
path.resolve(base, 'src', 'graphiql-code-exporter.d.ts'),
10+
path.resolve(base, 'types', 'graphiql-code-exporter.d.ts'),
11+
);

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
declare module 'graphiql-code-exporter' {
2+
import { GraphQLLeafType, ValueNode } from 'graphql';
3+
import { ComponentType } from 'react';
4+
5+
export type GraphiQLCodeExporterProps = {
6+
query: string;
7+
};
8+
9+
const GraphiQLCodeExporter: ComponentType<GraphiQLCodeExporterProps> & {
10+
defaultValue: (arg: GraphQLLeafType) => ValueNode;
11+
};
12+
13+
export default GraphiQLCodeExporter;
14+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* TODO */

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { GraphiQLPlugin } from '@graphiql/react';
2+
import { useMemo, useRef } from 'react';
3+
import GraphiQLCodeExporter, {
4+
GraphiQLCodeExporterProps,
5+
} from 'graphiql-code-exporter';
6+
7+
import './graphiql-code-exporter.d.ts';
8+
import './index.css';
9+
10+
function ExporterPlugin(props: GraphiQLCodeExporterProps) {
11+
return <GraphiQLCodeExporter {...props} />;
12+
}
13+
14+
export function useExplorerPlugin(props: GraphiQLCodeExporterProps) {
15+
const propsRef = useRef(props);
16+
propsRef.current = props;
17+
return useMemo<GraphiQLPlugin>(
18+
() => ({
19+
title: 'GraphiQL Code Exporter',
20+
icon: () => (
21+
<svg height="1em" strokeWidth="1.5" viewBox="0 0 24 24" fill="none">
22+
<path
23+
d="M18 6H20M22 6H20M20 6V4M20 6V8"
24+
stroke="currentColor"
25+
strokeLinecap="round"
26+
strokeLinejoin="round"
27+
/>
28+
<path
29+
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"
30+
stroke="currentColor"
31+
strokeLinecap="round"
32+
strokeLinejoin="round"
33+
/>
34+
<path
35+
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"
36+
stroke="currentColor"
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
/>
40+
</svg>
41+
),
42+
content: () => <ExporterPlugin {...propsRef.current} />,
43+
}),
44+
[],
45+
);
46+
}

0 commit comments

Comments
 (0)