Rikki Schulte acao

## generate-graphiql-html.ts
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;

## graphiql-tab-bug.html
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;

## graphiql-plugin-rfc.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                acao
                / graphiql-plugin-rfc.md
            
            
              Last active
              April 21, 2022 19:19
            
          
    GraphiQL Plugin RFC

Here is yet another plugin RFC, what do you think?
More details and examples to come
// example-sidebar-plugin.tsx

import {
  useSidebarPlugin,

  
## graphiql_react_roadmap.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                acao
                / graphiql_react_roadmap.md
            
            
              Last active
              April 21, 2022 10:09
            
              
                roadmap for @graphiql/react component library
              
          
    GraphiQL Roadmap Notes
GraphiQL Component Library Roadmap

Initial Workspace Setup

Begin with setting up @graphiql/react workspace & component library tooling with:

storybook/ladle/etc


## schemaLoader.ts
import {
  getIntrospectionQuery,
  IntrospectionOptions,
  IntrospectionQuery,
  DocumentNode,
  BuildSchemaOptions,
  buildClientSchema,
  buildASTSchema,
  buildSchema
} from 'graphql';

## graphqlWorker.ts
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,

## graphiql.d.ts
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;

## renderGraphiql.js
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',
};

## graphiql.min.js
!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,

## index.html
<script>
    var suite = new Benchmark.Suite();
    const obj = {
      stuff: {
        things: {
          stuff: 'things',
          things: 'stuff',
          other: {
            stuff: 'things'
          }
	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',
	};
	<script>
	var suite = new Benchmark.Suite();
	const obj = {
	stuff: {
	things: {
	stuff: 'things',
	things: 'stuff',
	other: {
	stuff: 'things'
	}