chore: improve types, add editor option props, notes from @cshaver

.yarnrc

@@ -1,5 +1,3 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
-
-yarn-path ".yarn/releases/yarn-1.18.0.js"

examples/monaco-graphql-webpack/src/index.html.ejs

@@ -27,7 +27,7 @@
       <div id="operation" style="height:70vh;"></div>
       <div id="variables" style="height:30vh;"></div>
     </div>
-    <div id="results" class="full-height column"></div>
+    <div id="results" class="full-height column" aria-label="Result Window" aria-live="polite" aria-atomic="true"></div>
   </div>
 </body>
 

examples/monaco-graphql-webpack/src/index.ts

@@ -94,7 +94,7 @@ const operationEditor = monaco.editor.create(
   },
 );
 
-monaco.languages.graphql.graphqlDefaults.setSchemaUri(SCHEMA_URL);
+monaco.languages.graphql.graphqlDefaults.setSchemaConfig({ uri: SCHEMA_URL });
 
 /**
  * Basic Operation Exec Example
@@ -115,9 +115,6 @@ async function executeCurrentOp() {
       body: JSON.stringify(body),
     });
 
-    const schema = await monaco.languages.graphql.getSchema();
-    console.log({ schema: await schema });
-
     const resultText = await result.text();
     resultsEditor.setValue(JSON.stringify(JSON.parse(resultText), null, 2));
   } catch (err) {

packages/graphiql/src/api/actions/editorActions.ts

@@ -1,5 +1,3 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-
 export enum EditorActionTypes {
   EditorLoaded = 'EditorLoaded',
 }

packages/graphiql/src/api/common.ts

@@ -1,30 +1,5 @@
-import { buildClientSchema, IntrospectionQuery } from 'graphql';
-
-import {
-  introspectionQuery,
-  introspectionQueryName,
-} from '../utility/introspectionQueries';
-
 import { SchemaConfig, Fetcher } from '../types';
 import { GraphQLParams } from './types';
-import { observableToPromise } from '../utility/observableToPromise';
-
-export async function fetchSchema(fetcher: Fetcher) {
-  const rawResult = fetcher({
-    query: introspectionQuery,
-    operationName: introspectionQueryName,
-  });
-  const introspectionResponse = await observableToPromise(rawResult);
-  const parsedResult = JSON.parse(introspectionResponse);
-
-  if (!parsedResult || !('data' in parsedResult)) {
-    throw Error('error fetching introspection schema');
-  }
-
-  return buildClientSchema(parsedResult.data as IntrospectionQuery, {
-    assumeValid: true,
-  });
-}
 
 export function getDefaultFetcher(schemaConfig: SchemaConfig) {
   return async function defaultFetcher(graphqlParams: GraphQLParams) {

packages/graphiql/src/api/providers/GraphiQLEditorsProvider.tsx

@@ -1,21 +1,15 @@
 import React, { useCallback } from 'react';
 
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-
 import {
   editorLoadedAction,
   EditorActionTypes,
   EditorAction,
 } from '../actions/editorActions';
 
-// @ts-ignore
 import EditorWorker from 'worker-loader!monaco-editor/esm/vs/editor/editor.worker';
-// @ts-ignore
 import JSONWorker from 'worker-loader!monaco-editor/esm/vs/language/json/json.worker';
-// @ts-ignore
 import GraphQLWorker from 'worker-loader!../../workers/graphql.worker';
 
-// @ts-ignore
 window.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
     if (label === 'graphqlDev') {

packages/graphiql/src/components/GraphiQL.tsx

@@ -94,6 +94,9 @@ export type GraphiQLProps = {
   docExplorerOpen?: boolean;
   formatResult?: (result: any) => string;
   formatError?: (rawError: Error) => string;
+  variablesEditorOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
+  operationEditorOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
+  resultsEditorOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
 } & Partial<Formatters>;
 
 export type GraphiQLState = {
@@ -390,11 +393,9 @@ class GraphiQLInternals extends React.Component<
               <QueryEditor
                 onHintInformationRender={this.handleHintInformationRender}
                 onClickReference={this.handleClickReference}
-                onCopyQuery={this.handleCopyQuery}
-                onPrettifyQuery={this.handlePrettifyQuery}
-                onMergeQuery={this.handleMergeQuery}
                 editorTheme={this.props.editorTheme}
                 readOnly={this.props.readOnly}
+                editorOptions={this.props.operationEditorOptions}
               />
               <section
                 className="variable-editor"
@@ -415,6 +416,7 @@ class GraphiQLInternals extends React.Component<
                   onMergeQuery={this.handleMergeQuery}
                   editorTheme={this.props.editorTheme}
                   readOnly={this.props.readOnly}
+                  editorOptions={this.props.variablesEditorOptions}
                 />
               </section>
             </div>
@@ -424,7 +426,10 @@ class GraphiQLInternals extends React.Component<
                   <div className="spinner" />
                 </div>
               )}
-              <ResultViewer editorTheme={this.props.editorTheme} />
+              <ResultViewer
+                editorTheme={this.props.editorTheme}
+                editorOptions={this.props.resultsEditorOptions}
+              />
               {footer}
             </div>
           </div>

packages/graphiql/src/components/QueryEditor.tsx

@@ -6,19 +6,21 @@
  */
 
 import React from 'react';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
 import { GraphQLType } from 'graphql';
+import type { EditorOptions } from '../types';
+
 import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
 import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
 
-type QueryEditorProps = {
+export type QueryEditorProps = {
   onEdit?: (value: string) => void;
   readOnly?: boolean;
   onHintInformationRender: (elem: HTMLDivElement) => void;
   onClickReference?: (reference: GraphQLType) => void;
   editorTheme?: string;
   operation?: string;
-  editorOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
+  editorOptions?: EditorOptions;
 };
 
 /**
@@ -93,6 +95,16 @@ export function QueryEditor(props: QueryEditorProps) {
     setIgnoreChangeEvent(false);
   }, [session, session.operation, session.operation.text]);
 
+  React.useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    if (props.editorOptions) {
+      editor.updateOptions(props.editorOptions);
+    }
+  }, [props.editorOptions]);
+
   return (
     <section className="query-editor" aria-label="Query Editor" ref={divRef} />
   );

packages/graphiql/src/components/ResultViewer.tsx

@@ -7,13 +7,16 @@
 
 import React, { useEffect } from 'react';
 
+import type { EditorOptions } from '../types';
+
 import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
 import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
 
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-
-type ResultViewerProps = {
+export type ResultViewerProps = {
   editorTheme?: string;
+  editorOptions?: EditorOptions;
+  onMouseUp?: (e: monaco.editor.IEditorMouseEvent) => void;
+  onRenderResults?: (e: monaco.editor.IModelChangedEvent) => void;
 };
 
 export function ResultViewer(props: ResultViewerProps) {
@@ -25,16 +28,19 @@ export function ResultViewer(props: ResultViewerProps) {
     // Lazily require to ensure requiring GraphiQL outside of a Browser context
     // does not produce an error.
 
-    viewerRef.current = monaco.editor.create(divRef.current as HTMLElement, {
-      value: session.results?.text ?? '',
-      readOnly: true,
-      language: 'json',
-      automaticLayout: true,
-      theme: props.editorTheme,
-    });
-    loadEditor('results', viewerRef.current);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const viewer = (viewerRef.current = monaco.editor.create(
+      divRef.current as HTMLElement,
+      {
+        value: session.results?.text ?? '',
+        readOnly: true,
+        language: 'json',
+        automaticLayout: true,
+        theme: props.editorTheme,
+      },
+    ));
+    loadEditor('results', viewer);
+    props.onMouseUp && viewer.onMouseUp(props.onMouseUp);
+    props.onRenderResults && viewer.onDidChangeModel(props.onRenderResults);
   }, []);
 
   useEffect(() => {
@@ -43,6 +49,15 @@ export function ResultViewer(props: ResultViewerProps) {
     }
   }, [session.results, session.results.text]);
 
+  React.useEffect(() => {
+    const editor = viewerRef.current;
+    if (!editor) {
+      return;
+    }
+    if (props.editorOptions) {
+      editor.updateOptions(props.editorOptions);
+    }
+  }, [props.editorOptions]);
   return (
     <section
       className="result-window"

packages/graphiql/src/components/VariableEditor.tsx

@@ -6,21 +6,23 @@
  */
 import { GraphQLType } from 'graphql';
 
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-
 import React from 'react';
+
 import { useEditorsContext } from '../api/providers/GraphiQLEditorsProvider';
 import { useSessionContext } from '../api/providers/GraphiQLSessionProvider';
+
+import type { EditorOptions } from '../types';
 // import useQueryFacts from '../api/hooks/useQueryFacts';
 
-type VariableEditorProps = {
+export type VariableEditorProps = {
   variableToType?: { [variable: string]: GraphQLType };
   value?: string;
   readOnly?: boolean;
   onHintInformationRender: (value: HTMLDivElement) => void;
   onPrettifyQuery: (value?: string) => void;
   onMergeQuery: (value?: string) => void;
   editorTheme?: string;
+  editorOptions?: EditorOptions;
 };
 
 /**
@@ -65,14 +67,14 @@ export function VariableEditor(props: VariableEditorProps) {
     //     editor.execCommand('autocomplete');
     //   }
     // };
-
     const editor = (editorRef.current = monaco.editor.create(
       divRef.current as HTMLDivElement,
       {
         value: session?.variables?.text || '',
         language: 'json',
         theme: props?.editorTheme,
         readOnly: props?.readOnly ?? false,
+        ...props.editorOptions,
       },
     ));
     loadEditor('variables', editor);
@@ -105,6 +107,16 @@ export function VariableEditor(props: VariableEditorProps) {
     setIgnoreChangeEvent(false);
   }, [session.variables.text]);
 
+  React.useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) {
+      return;
+    }
+    if (props.editorOptions) {
+      editor.updateOptions(props.editorOptions);
+    }
+  }, [props.editorOptions]);
+
   // TODO: for variables linting/etc
   // React.useEffect(() => {
   //   const editor = editorRef.current;

packages/graphiql/src/types/global.ts

@@ -0,0 +1,4 @@
+interface Window {
+  MonacoEnvironment: any;
+  GraphiQL: any;
+}

packages/graphiql/src/types.ts → packages/graphiql/src/types/index.ts

@@ -52,6 +52,9 @@ export type FetcherParams = {
 
 export type FetcherResult = string;
 
+export type EditorOptions = monaco.editor.IEditorOptions &
+  monaco.editor.IGlobalEditorOptions;
+
 export type Fetcher = (
   graphQLParams: FetcherParams,
 ) => Promise<FetcherResult> | Observable<FetcherResult>;

packages/graphiql/src/types/worker-loader.ts

@@ -0,0 +1,5 @@
+declare module 'worker-loader!*' {
+  export default class WebpackWorker extends Worker {
+    constructor();
+  }
+}

packages/monaco-graphql/package.json

@@ -17,12 +17,13 @@
   ],
   "dependencies": {
     "graphql-language-service-utils": "^2.4.0-alpha.3",
-    "graphql-languageservice": "^2.4.0-alpha.5",
-    "monaco-editor-core": "^0.20.0",
-    "monaco-languages": "^1.10.0",
-    "vscode-languageserver-textdocument": "^1.0.1"
+    "graphql-languageservice": "^2.4.0-alpha.5"
   },
   "devDependencies": {
     "vscode-languageserver-types": "3.15.1"
+  },
+  "peerDependencies": {
+    "monaco-editor": "^0.20.0",
+    "monaco-languages": "^1.10.0"
   }
 }

packages/monaco-graphql/src/utils.ts

@@ -82,7 +82,7 @@ export function toMarkerData(
     startLineNumber: diagnostic.range.start.line + 1,
     endLineNumber: diagnostic.range.end.line + 1,
     startColumn: diagnostic.range.start.character + 1,
-    endColumn: diagnostic.range.end.character + 1,
+    endColumn: diagnostic.range.end.character,
     message: diagnostic.message,
     severity: 5,
     // severity: toMonacoSeverity(diagnostic.severity),