ui: use monaco instead of codemirror on api page

packages/ui-default/pages/api.page.tsx

@@ -1,50 +1,171 @@
-/* eslint-disable react/function-component-definition */
-import 'graphiql/graphiql.css';
+import 'graphiql/src/css/doc-explorer.css';
 
+import type { GraphQLSchema } from 'graphql';
+import { load as loadYaml } from 'js-yaml';
+import type * as monaco from 'monaco-editor';
+import type { SchemaConfig } from 'monaco-graphql/src/typings';
 import React from 'react';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { NamedPage } from 'vj/misc/Page';
 import request from 'vj/utils/request';
 
-const Logo = () => <span>Hydro API Console </span>;
 const defaultQuery = `\
-query {
-  user(id: 1) {
+query Example(
+  $name: String!
+) {
+  user(uname: $name) {
+    _id
     uname
   }
 }`;
+const variablesString = 'name: Hydro';
+const resultsString = '{}';
+const schemaSdlString = `\
+"""
+Loading schema...
+"""`;
 
 const page = new NamedPage('api', async () => {
-  const [{ default: GraphiQL }, { buildSchema }, res] = await Promise.all([
-    import('graphiql/esm/index.js'),
-    import('graphql'),
-    request.get('/api?schema'),
+  const [{ DocExplorer }, { buildClientSchema, getIntrospectionQuery, printSchema }, { load }] = await Promise.all([
+    import('graphiql/esm/components/DocExplorer'),
+    import('graphql/utilities'),
+    import('vj/components/monaco/loader'),
   ]);
-  // @ts-ignore
-  GraphiQL.Logo = Logo;
-  const App = () => (
-    <GraphiQL
-      schema={buildSchema(res.schema)}
-      defaultQuery={defaultQuery}
-      fetcher={async (graphQLParams) => {
-        const data = await fetch(
-          '',
-          {
-            method: 'POST',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(graphQLParams),
-            credentials: 'same-origin',
-          },
-        );
-        return data.json().catch(() => data.text());
-      }}
-    />
+  const { monaco } = await load(['graphql', 'json', 'yaml']);
+  const { initializeMode } = await import('monaco-graphql/esm/initializeMode');
+
+  const variablesModel = monaco.editor.createModel(
+    variablesString,
+    'yaml',
+    monaco.Uri.file('/1/variables.yaml'),
+  );
+  const variablesEditor = monaco.editor.create(
+    document.getElementById('variables') as HTMLElement,
+    {
+      model: variablesModel,
+      language: 'yaml',
+      formatOnPaste: true,
+      formatOnType: true,
+      comments: {
+        insertSpace: true,
+        ignoreEmptyLines: true,
+      },
+    },
   );
 
-  ReactDOM.createRoot(document.getElementById('graphiql')).render(<App />);
+  const operationModel = monaco.editor.createModel(
+    defaultQuery,
+    'graphql',
+    monaco.Uri.file('/1/operation.graphql'),
+  );
+  const operationEditor = monaco.editor.create(
+    document.getElementById('operation') as HTMLElement,
+    {
+      model: operationModel,
+      formatOnPaste: true,
+      formatOnType: true,
+      folding: true,
+      language: 'graphql',
+    },
+  );
+
+  const schemaModel = monaco.editor.createModel(
+    schemaSdlString,
+    'graphql',
+    monaco.Uri.file('/1/schema.graphqls'),
+  );
+  const schemaEditor = monaco.editor.create(
+    document.getElementById('schema-sdl') as HTMLElement,
+    {
+      model: schemaModel,
+      formatOnPaste: true,
+      formatOnType: true,
+      folding: true,
+      readOnly: true,
+      language: 'graphql',
+    },
+  );
+
+  const resultsModel = monaco.editor.createModel(
+    resultsString,
+    'json',
+    monaco.Uri.file('/1/results.json'),
+  );
+  const resultsEditor = monaco.editor.create(
+    document.getElementById('results') as HTMLElement,
+    {
+      model: resultsModel,
+      language: 'json',
+      wordWrap: 'on',
+      readOnly: true,
+      showFoldingControls: 'always',
+    },
+  );
+
+  const monacoGraphQLAPI = initializeMode({
+    formattingOptions: {
+      prettierConfig: {
+        printWidth: 120,
+      },
+    },
+  });
+
+  const toolbar = $('#toolbar')!;
+  toolbar.html();
+  const executeOpButton = $('<button id="execute-op">Run Operation ➤</button>');
+  toolbar.append(executeOpButton);
+
+  const operationUri = operationModel.uri.toString();
+  let schema: SchemaConfig;
+  let clientSchema: GraphQLSchema;
+  try {
+    const { data } = await request.post('/api?schema', {
+      query: getIntrospectionQuery(),
+      operationName: 'IntrospectionQuery',
+    });
+    clientSchema = buildClientSchema(data);
+    schema = {
+      introspectionJSON: data,
+      documentString: printSchema(clientSchema),
+      uri: monaco.Uri.parse('/api?schema').toString(),
+    };
+  } catch {
+    schemaModel.setValue('"""\nFailed to load schema.\n"""');
+  }
+  monacoGraphQLAPI.setSchemaConfig([
+    { ...schema, fileMatch: [operationUri, schemaModel.uri.toString()] },
+  ]);
+  schemaEditor.setValue(schema.documentString || '');
+
+  const operationHandler = async () => {
+    try {
+      resultsEditor.setValue(JSON.stringify({ message: 'Executing...' }, null, 2));
+      const result = await request.post('/api?schema', {
+        query: operationEditor.getValue(),
+        variables: loadYaml(variablesEditor.getValue()),
+      });
+      resultsEditor.setValue(JSON.stringify(result, null, 2));
+    } catch (err) {
+      if (err instanceof Error) {
+        resultsEditor.setValue(err.toString());
+      }
+    }
+  };
+  executeOpButton.on('click', operationHandler);
+  executeOpButton.on('touchend', operationHandler);
+  const opAction: monaco.editor.IActionDescriptor = {
+    id: 'graphql-run',
+    label: 'Run Operation',
+    contextMenuOrder: 0,
+    contextMenuGroupId: 'graphql',
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+    run: operationHandler,
+  };
+  operationEditor.addAction(opAction);
+  variablesEditor.addAction(opAction);
+  resultsEditor.addAction(opAction);
+
+  createRoot(document.getElementById('docs')).render(<DocExplorer schema={clientSchema} />);
 });
 
 export default page;