docs: restore typedoc, add docs for monaco-graphiql

graphql · May 12, 2020 · c9000d1 · c9000d1
1 parent addce72
commit c9000d1
Show file tree

Hide file tree

Showing 15 changed files with 2,322 additions and 311 deletions.
diff --git a/.gitignore b/.gitignore
@@ -12,7 +12,7 @@ coverage/
 packages/**/dist/.gitignore
 packages/**/dist/.npmignore
 packages/graphiql/storybook
-packages/graphiql/lsp
+packages/graphiql/typedoc
 dist
 esm
 bundle

diff --git a/examples/monaco-graphql-webpack/src/index.html.ejs b/examples/monaco-graphql-webpack/src/index.html.ejs
@@ -1,34 +1,42 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Monaco Example!</title>
+    <style>
+      .div {
+        margin: 0;
+        padding: 0;
+      }
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>Monaco Example!</title>
-  <style>
-    .div {
-      margin: 0;
-      padding: 0;
-    }
+      .full-height {
+        height: 100vh;
+      }
 
-    .full-height {
-      height: 100vh;
-    }
+      .column {
+        width: 50%;
+      }
+    </style>
+  </head>
 
-    .column {
-      width: 50%;
-    }
-  </style>
-</head>
-
-<body style="margin: 0; padding:0;">
-  <div style="display: flex;">
-    <div class="full-height column">
-      <div id="operation" style="height:70vh;"></div>
-      <div id="variables" style="height:30vh;"></div>
+  <body style="margin: 0; padding: 0;">
+    <div style="display: flex;">
+      <div class="full-height column">
+        <div id="toolbar" style=""></div>
+        <div id="operation" style="height: 70vh;"></div>
+        <div id="variables" style="height: 30vh;"></div>
+      </div>
+      <div
+        id="results"
+        class="full-height column"
+        aria-label="Result Window"
+        aria-live="polite"
+        aria-atomic="true"
+      ></div>
     </div>
-    <div id="results" class="full-height column" aria-label="Result Window" aria-live="polite" aria-atomic="true"></div>
-  </div>
-</body>
-
+  </body>
 </html>
diff --git a/examples/monaco-graphql-webpack/src/index.ts b/examples/monaco-graphql-webpack/src/index.ts
@@ -3,6 +3,11 @@
 import 'regenerator-runtime/runtime';
 import 'monaco-graphql/esm/monaco.contribution';
 
+// eslint-disable-next-line spaced-comment
+/// <reference path='../../../node_modules/monaco-editor/monaco.d.ts'/>
+// eslint-disable-next-line spaced-comment
+/// <reference path='../../../packages/monaco-graphql/src/typings/monaco.d.ts'/>
+
 // NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
 // import shouldn't go through loader syntax.
 // @ts-ignore
@@ -27,19 +32,22 @@ window.MonacoEnvironment = {
   },
 };
 
-// const schemaInput = document.createElement('input');
-// schemaInput.type = 'text'
+const schemaInput = document.createElement('input');
+schemaInput.type = 'text';
 
-// // @ts-ignore
-// schemaInput.value = SCHEMA_URL
+schemaInput.value = SCHEMA_URL;
 
-// schemaInput.onchange = (e) => {
-//   e.preventDefault()
-//   console.log(e.target.value)
-// }
+schemaInput.onkeyup = e => {
+  e.preventDefault();
+  // @ts-ignore
+  const val = e?.target?.value as string;
+  if (val && typeof val === 'string') {
+    monaco.languages.graphql.graphqlDefaults.setSchemaConfig({ uri: val });
+  }
+};
 
-// const toolbar = document.getElementById('toolbar')
-// toolbar?.appendChild(schemaInput)
+const toolbar = document.getElementById('toolbar');
+toolbar?.appendChild(schemaInput);
 
 const variablesModel = monaco.editor.createModel(
   `{}`,
@@ -91,7 +99,6 @@ const operationEditor = monaco.editor.create(
   },
 );
 
-// @ts-ignore
 monaco.languages.graphql.graphqlDefaults.setSchemaConfig({ uri: SCHEMA_URL });
 
 /**
@@ -149,3 +156,7 @@ resultsEditor.addAction(opAction);
 //     endColumn: 0,
 //   }],
 // );
+
+// operationEditor.onDidChangeModelContent(() => {
+//   // this is where
+// })
diff --git a/netlify.toml b/netlify.toml
@@ -1,5 +1,5 @@
 [build]
-  command = "yarn build && yarn build-bundles && yarn build-demo"
+  command = "yarn build && yarn build-bundles && yarn build-demo && yarn build-docs"
   publish = "packages/graphiql"
 
 

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "build-clean": "lerna run build-clean",
     "build-validate": "lerna run build-validate",
     "build-demo": "lerna run build-demo",
-    "build-docs": "rimraf 'packages/graphiql/lsp' && typedoc 'packages'",
+    "build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
     "build-bundles": "yarn prebuild-bundles && yarn workspace graphiql run build-bundles",
     "prebuild-bundles": "yarn build-ts-esm && yarn build-bundles-clean",
     "build-bundles-clean": "rimraf '{packages,examples}/**/{bundle,cdn,webpack}' && lerna run build-bundles-clean",
@@ -72,7 +72,6 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@commitlint/config-lerna-scopes": "^8.3.4",
-    "@strictsoftware/typedoc-plugin-monorepo": "0.3.1",
     "@testing-library/jest-dom": "^5.4.0",
     "@types/codemirror": "^0.0.90",
     "@types/fetch-mock": "^7.3.2",
@@ -115,5 +114,8 @@
     "ts-jest": "^25.3.1",
     "typedoc": "0.17.4",
     "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1"
   }
 }
diff --git a/packages/graphql-languageservice/README.md b/packages/graphql-languageservice/README.md
@@ -1,5 +1,36 @@
 # `graphql-languageservice`
 
-This package brings together all the dependencies for building out web or desktop IDE services for the GraphQL Language. For now, it just exports three packages in this monorepo.
+> **Note**: Still mostly experimental, however it depends mostly on stable libraries.
+
+## Purpose
+
+This package brings together all the dependencies for building out web or desktop IDE services for the GraphQL Language.
 
 It is named as such to match the convention of other vscode languageservices.
+
+It also provides a new `LanguageService` class as browser/web-worker runtime friendly alternative to the one that lives in `graphql-language-service-interface`, that utilizes the same underlying functions, meaning _most_ fixes and improvements from here on out will continue to be reflected by both implementations.
+
+## Usage
+
+Instantiates with these optional parameters:
+
+```ts
+type GraphQLLanguageConfig = {
+  parser?: typeof parse;
+  schemaLoader?: typeof defaultSchemaLoader;
+  schemaBuilder?: typeof defaultSchemaBuilder;
+  schemaConfig: SchemaConfig;
+};
+```
+
+this is the minimum configuration required:
+
+```ts
+const languageService = new LanguageService({
+  schemaConfig: { uri: 'https://my/schema' },
+});
+```
+
+### Methods
+
+We are working on restoring our typedoc which will provide much more info soon.
diff --git a/packages/graphql-languageservice/src/LanguageService.ts b/packages/graphql-languageservice/src/LanguageService.ts
@@ -16,12 +16,13 @@ import {
   defaultSchemaLoader,
   SchemaConfig,
   SchemaResponse,
-  buildSchemaFromResponse,
+  defaultSchemaBuilder,
 } from './schemaLoader';
 
-export type GraphQLLspConfig = {
+export type GraphQLLanguageConfig = {
   parser?: typeof parse;
   schemaLoader?: typeof defaultSchemaLoader;
+  schemaBuilder?: typeof defaultSchemaBuilder;
   schemaConfig: SchemaConfig;
 };
 
@@ -33,15 +34,24 @@ export class LanguageService {
   private _schemaLoader: (
     schemaConfig: SchemaConfig,
   ) => Promise<SchemaResponse | void> = defaultSchemaLoader;
+  private _schemaBuilder = defaultSchemaBuilder;
 
-  constructor({ parser, schemaLoader, schemaConfig }: GraphQLLspConfig) {
+  constructor({
+    parser,
+    schemaLoader,
+    schemaBuilder,
+    schemaConfig,
+  }: GraphQLLanguageConfig) {
     this._schemaConfig = schemaConfig;
     if (parser) {
       this._parser = parser;
     }
     if (schemaLoader) {
       this._schemaLoader = schemaLoader;
     }
+    if (schemaBuilder) {
+      this._schemaBuilder = schemaBuilder;
+    }
   }
 
   public get schema() {
@@ -74,7 +84,7 @@ export class LanguageService {
 
   public async loadSchema() {
     const schemaResponse = await this.loadSchemaResponse();
-    this._schema = buildSchemaFromResponse(
+    this._schema = this._schemaBuilder(
       schemaResponse,
       this._schemaConfig.buildSchemaOptions,
     ) as GraphQLSchema;

diff --git a/packages/graphql-languageservice/src/schemaLoader.ts b/packages/graphql-languageservice/src/schemaLoader.ts
@@ -23,7 +23,7 @@ export const defaultSchemaLoader: SchemaLoader = async (
   schemaConfig: SchemaConfig,
 ): Promise<SchemaResponse> => {
   const { requestOpts, uri, introspectionOptions } = schemaConfig;
-  const rawResult = await fetch(uri, {
+  const fetchResult = await fetch(uri, {
     method: requestOpts?.method ?? 'post',
     body: JSON.stringify({
       query: getIntrospectionQuery(introspectionOptions),
@@ -35,19 +35,17 @@ export const defaultSchemaLoader: SchemaLoader = async (
     },
     ...requestOpts,
   });
-
   const introspectionResponse: {
     data: IntrospectionQuery;
-  } = await rawResult.json();
-
+  } = await fetchResult.json();
   return introspectionResponse?.data;
 };
 /**
  *
  * @param response {DocumentNode | IntrospectionQuery} response from retrieving schema
  * @param buildSchemaOptions {BuildSchemaOptions} options for building schema
  */
-export function buildSchemaFromResponse(
+export function defaultSchemaBuilder(
   response: SchemaResponse,
   buildSchemaOptions?: BuildSchemaOptions,
 ) {