Here is yet another plugin RFC, what do you think?
More details and examples to come
// example-sidebar-plugin.tsx
import {
useSidebarPlugin,
import type { GraphiQLProps } from 'graphiql'; | |
import type { FetcherOpts } from '@graphiql/toolkit'; | |
export type GenerateGraphiQLOptions = { | |
plugins?: ( | |
| '@graphiql/plugin-doc-explorer' | |
| '@graphiql/plugin-explorer' | |
| '@graphiql/plugin-code-exporter' | |
)[]; | |
props?: GraphiQLProps; | |
fetcherOptions?: FetcherOpts; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Parcel Sandbox</title> | |
<style> | |
body { | |
height: 100%; | |
margin: 0; | |
width: 100%; | |
overflow: hidden; |
import { | |
getIntrospectionQuery, | |
IntrospectionOptions, | |
IntrospectionQuery, | |
DocumentNode, | |
BuildSchemaOptions, | |
buildClientSchema, | |
buildASTSchema, | |
buildSchema | |
} from 'graphql'; |
import * as monaco from 'monaco-editor'; | |
import IWorkerContext = monaco.worker.IWorkerContext; | |
import * as graphqlService from 'graphql-language-service'; | |
import { GraphQLLanguageService } from 'graphql-language-service-interface'; | |
import { | |
Position, | |
Diagnostic, |
import { Component } from 'react'; | |
import { GraphQLSchema } from 'graphql'; | |
export interface GraphiQL extends Component<GraphiQLProps, GraphiQLState> {} | |
export interface GraphiQLProps { | |
fetcher?: (props: { query: string; operationName: string }) => Promise<any>; | |
schema?: GraphQLSchema; | |
query?: string; | |
variables?: string; | |
operationName?: string; |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { GraphiQL } from './components/GraphiQL'; | |
const logger = console; | |
const defaultOptions = { | |
containerId: 'root', | |
url: 'http://localhost:8080', | |
}; |
!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).GraphiQL=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n||e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";var _codemirror2=function(obj){return obj&&obj.__esModule?obj:{default:obj}}(require("codemirror")),_graphqlLanguageServiceInterface=require("graphql-language-service-interface");_codemirror2.default.registerHelper("hint","graphql",function(editor, |
<script> | |
var suite = new Benchmark.Suite(); | |
const obj = { | |
stuff: { | |
things: { | |
stuff: 'things', | |
things: 'stuff', | |
other: { | |
stuff: 'things' | |
} |