chore: fix/improve examples

DEVELOPMENT.md

@@ -54,13 +54,24 @@ First, you'll need to `yarn build` all the packages from the root.
 
 Then, you can run these commands:
 
-- `yarn workspace graphiql dev` will launch webpack dev server for graphiql from the root
-- `yarn workspace graphiql storybook` will launch graphiql storybook from the root
+- `yarn start-graphiql` will launch webpack dev server for graphiql from the root
+- `yarn start-monaco` will launch webpack dev server for the monaco editor example with github API from the root. this is the fastest way to test changes to `graphql-language-service-interface`, parser, etc.
 
-to run tests for GraphiQL:
+if you want these commands to watch for changes to dependent packages in the repo, then `yarn build --watch` is what you want to run alongside either of these.
 
-- `yarn jest graphiql` will run all tests for graphiql
-- `yarn jest --watch` will watch all changes in the monorepo
+**Run tests for GraphiQL:**
+
+- `yarn test graphiql` will run all tests for graphiql. you can also run tests from a workspace, but most tooling is at the root.
+- `yarn test --watch` will run jest with --watch
+- `yarn e2e` at the root will run the end to end suite. you can just run `ci e2e` if everything is already built
+
+**fix CI issues with linting**
+
+if you have prettier or eslint --fix able issues you see in CI, use yarn format:
+
+`yarn format`
+
+if you see typescript build issues, do a `yarn build` locally and make sure the whole project references tree builds. changing interfaces can end up breaking their implementations.
 
 ### All Commands
 

README.md

@@ -68,6 +68,17 @@ The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMi
 
 **The [GraphiQL Readme](packages/graphiql#readme) explains** some of the ways to implement GraphiQL, and we also have the [examples](examples) directory as well!
 
+## [Monaco GraphQL](packages/monaco-graphql#readme)
+
+[![NPM](https://img.shields.io/npm/v/monaco-graphql.svg)](https://npmjs.com/monaco-graphql)
+![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/graphiql)
+![npm downloads](https://img.shields.io/npm/dm/monaco-graphql?label=npm%20downloads)
+![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/monaco-graphql)
+
+Provides monaco editor with a powerful, schema-driven graphql language mode.
+
+See the [webpack example](examples/monaco-graphql-webpack#readme) for a plain javascript demo using github API
+
 ## [CodeMirror GraphQL](packages/codemirror-graphql#readme)
 
 [![NPM](https://img.shields.io/npm/v/codemirror-graphql.svg)](https://npmjs.com/codemirror-graphql)

examples/graphiql-cdn/README.md

@@ -1,6 +1,6 @@
 # GraphiQL CDN Example
 
-This example uses the CDN bundles to show the most simple example possible for CDN.
+This example uses the CDN bundles to show the most simple example possible. It uses the latest version published on npm, via unpkg
 
 ### Setup
 

examples/graphiql-create-react-app/README.md

@@ -6,5 +6,5 @@ This example demonstrates how to transpile your own custom ES6 and typescript Gr
 
 1. Run `yarn` at root of the repository to install the dependencies.
 1. Run `yarn build && yarn build-bundles` at the root to build graphiql for import
-1. `yarn` and `yarn start` from this folder to start `react-scripts` dev server.
-1. `yarn build` from this folder to build production ready transpiled files using `react-scripts`. Find the output in `build` folder.
+2.  `yarn start` from this folder to start `react-scripts` dev server.
+3. `yarn build` from this folder to build production ready transpiled files using `react-scripts`. Find the output in `build` folder.

examples/graphiql-parcel/README.md

@@ -5,5 +5,5 @@ This example demonstrates how to transpile your own custom ES6 GraphiQL implemen
 ### Setup
 
 1. `yarn` and `yarn build` at the root of this repository, if you have not already.
-2. `yarn` and `yarn start` from this folder to start parcel dev mode.
-3. `yarn build` to find production ready files.
+1. `yarn start` from this folder to start parcel dev mode.
+1. `yarn build` to find production ready files.

examples/graphiql-webpack/README.md

@@ -11,4 +11,4 @@ It appears `create-react-app` supports all the language features we require.
 ### Setup
 
 1. `yarn` and `yarn build` at the root of this repository, if you have not already.
-2. `yarn` and `yarn start` from this folder to start webpack dev server
+1. `yarn start` from this folder to start webpack dev server

examples/monaco-graphql-webpack/README.md

@@ -5,4 +5,4 @@ A simple example of `monaco-graphql` using webpack
 ### Setup
 
 1. `yarn` and `yarn build` at the root of this repository, if you have not already.
-2. `yarn` and `yarn start` from this folder to start webpack dev server
+2. `yarn start` from this folder to start webpack dev server

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

@@ -11,7 +11,22 @@ import JSONWorker from 'worker-loader!monaco-editor/esm/vs/language/json/json.wo
 // @ts-ignore
 import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';
 
-const SCHEMA_URL = 'https://api.spacex.land/graphql/';
+const SCHEMA_URL = 'https://api.github.com/graphql';
+
+let API_TOKEN = '';
+
+const promptForToken = () => {
+  API_TOKEN =
+    window.localStorage.getItem('API_TOKEN') ||
+    (prompt('provide valid github token') as string);
+  if (!API_TOKEN || API_TOKEN.length < 32) {
+    promptForToken();
+  } else {
+    window.localStorage.setItem('API_TOKEN', API_TOKEN);
+  }
+};
+
+promptForToken();
 
 // @ts-ignore
 window.MonacoEnvironment = {
@@ -25,24 +40,19 @@ window.MonacoEnvironment = {
     return new EditorWorker();
   },
 };
-
-const op = `
-query Example($limit: Int) {
-  launchesPast(limit: $limit) {
-    mission_name
-    # format me using the right click context menu
-              launch_date_local
-    launch_site {
-      site_name_long
-    }
-    links {
-      article_link
-      video_link
-    }
+const operation = `
+# right click to view context menu
+# F1 for command palette
+# enjoy prettier formatting, autocompletion, 
+# validation, hinting and more for GraphQL SDL and operations!
+
+query Example($owner: String!, $name: String!) {
+  repository(owner: $owner, name: $name) {
+    stargazerCount
   }
 }
-  `;
-const variables = `{ "limit": 10 }`;
+`;
+const variables = `{ "owner": "graphql", "name": "graphiql" }`;
 
 const THEME = 'vs-dark';
 
@@ -73,53 +83,41 @@ toolbar?.appendChild(schemaInput);
 toolbar?.appendChild(button);
 
 const variablesModel = monaco.editor.createModel(
-  `{}`,
+  variables,
   'json',
   monaco.Uri.file('/1/variables.json'),
 );
 
 const resultsEditor = monaco.editor.create(
   document.getElementById('results') as HTMLElement,
   {
-    model: variablesModel,
+    value: `{}`,
+    language: 'json',
     automaticLayout: true,
     theme: THEME,
+    wordWrap: 'on',
   },
 );
+
 const variablesEditor = monaco.editor.create(
   document.getElementById('variables') as HTMLElement,
   {
-    value: `{ "limit": 10 }`,
+    model: variablesModel,
     language: 'json',
     automaticLayout: true,
     theme: THEME,
   },
 );
-const model = monaco.editor.createModel(
-  `
-query Example($limit: Int) {
-  launchesPast(limit: $limit) {
-    mission_name
-    # format me using the right click context menu
-              launch_date_local
-    launch_site {
-      site_name_long
-    }
-    links {
-      article_link
-      video_link
-    }
-  }
-}
-`,
+const operationModel = monaco.editor.createModel(
+  operation,
   'graphqlDev',
   monaco.Uri.file('/1/operation.graphql'),
 );
 
 const operationEditor = monaco.editor.create(
   document.getElementById('operation') as HTMLElement,
   {
-    model,
+    model: operationModel,
     automaticLayout: true,
     formatOnPaste: true,
     formatOnType: true,
@@ -149,7 +147,10 @@ async function executeCurrentOp() {
     }
     const result = await fetch(GraphQLAPI.schemaConfig.uri || SCHEMA_URL, {
       method: 'POST',
-      headers: { 'content-type': 'application/json' },
+      headers: {
+        'content-type': 'application/json',
+        Authorization: `Bearer ${API_TOKEN}`,
+      },
       body: JSON.stringify(body),
     });
 
@@ -172,9 +173,6 @@ const opAction: monaco.editor.IActionDescriptor = {
   run: executeCurrentOp,
 };
 
-variablesEditor.setValue(variables);
-operationEditor.setValue(op);
-
 operationEditor.addAction(opAction);
 variablesEditor.addAction(opAction);
 resultsEditor.addAction(opAction);
@@ -186,7 +184,14 @@ resultsEditor.addAction(opAction);
 let initialSchema = false;
 
 if (!initialSchema) {
-  GraphQLAPI.setSchemaConfig({ uri: SCHEMA_URL });
+  GraphQLAPI.setSchemaConfig({
+    uri: SCHEMA_URL,
+    requestOpts: {
+      headers: {
+        Authorization: `Bearer ${API_TOKEN}`,
+      },
+    },
+  });
   initialSchema = true;
 }
 

jest.config.base.js

@@ -37,6 +37,7 @@ module.exports = dir => {
       '!**/test/**',
       '!**/examples/**',
       '!**/codemirror-graphql/**',
+      '!**/graphiql-2-rfc-context/**',
       '!**/graphql-language-service-types/**',
       '!**/*rfc*/**',
       '!**/*.d.ts',

lerna.json

@@ -5,7 +5,7 @@
   "version": "independent",
   "ignoreChanges": [
     "'__tests__' '**/*.spec.js' '**/*.spec.js' '**/*.spec.ts'",
-    "**/examples"
+    "**/examples/**"
   ],
   "command": {
     "publish": {
@@ -17,7 +17,11 @@
     "version": {
       "message": "chore(release): publish",
       "conventionalCommits": true,
-      "createRelease": "github"
+      "createRelease": "github",
+      "ignoreChanges": [
+        "'__tests__' '**/*.spec.js' '**/*.spec.js' '**/*.spec.ts'",
+        "**/examples/**"
+      ]
     }
   }
 }

package.json

@@ -2,7 +2,8 @@
   "private": true,
   "license": "MIT",
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "examples/*"
   ],
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": [
@@ -59,7 +60,8 @@
     "dev-lsp": "echo no-op",
     "lerna-publish": "yarn ci && yarn ci-e2e && lerna publish",
     "watch": "yarn tsc --watch",
-    "start-graphiql": "yarn workspace graphiql dev"
+    "start-graphiql": "yarn workspace graphiql dev",
+    "start-monaco": "yarn workspace example-monaco-graphql-webpack start"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

packages/graphql-language-service/package.json

@@ -29,9 +29,6 @@
   "peerDependencies": {
     "graphql": "^14.0.0 || ^15.0.0"
   },
-  "devDependencies": {
-    "graphql-language-service-types": "^1.6.0-alpha.5"
-  },
   "dependencies": {
     "graphql-language-service-interface": "^2.5.0",
     "graphql-language-service-types": "^1.6.3"

packages/graphql-language-service/src/LanguageService.ts

@@ -130,7 +130,7 @@ export class LanguageService {
     position: Position,
   ) => {
     const schema = await this.getSchema();
-    if (!schema) {
+    if (!documentText || documentText.length < 1 || !schema) {
       return [];
     }
     return getAutocompleteSuggestions(schema, documentText, position);