feat: typings, new languageservice, schema loading

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
graphql · Apr 15, 2020 · 8722551 · 8722551
1 parent 40cb142
commit 8722551
Show file tree

Hide file tree

Showing 71 changed files with 680 additions and 6,372 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -28,9 +28,11 @@
 **/flow-typed
 **/dist
 **/esm
+**/bundle
 packages/graphiql/webpack
 packages/graphiql/storybook
 packages/graphiql/lsp
+packages/graphiql/monaco  
 packages/graphiql/*.html
 **/renderExample.js
 **/*.min.js

diff --git a/.github/ISSUE_TEMPLATE/Bug_Report.md b/.github/ISSUE_TEMPLATE/Bug_Report.md
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -11,7 +11,7 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "dependencies": {
-    "graphiql": "1.0.0-alpha.5",
+    "graphiql": "file:../../packages/graphiql",
     "graphql": "15.0.0",
     "react": "16.13.1"
   },

diff --git a/examples/monaco-webpack/babel.config.js → ...es/monaco-graphql-webpack/babel.config.js b/examples/monaco-webpack/babel.config.js → ...es/monaco-graphql-webpack/babel.config.js
diff --git a/examples/monaco-webpack/package.json → examples/monaco-graphql-webpack/package.json b/examples/monaco-webpack/package.json → examples/monaco-graphql-webpack/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "example-monaco-webpack",
+  "name": "example-monaco-graphql-webpack",
   "version": "1.0.0-alpha.3",
   "private": true,
   "license": "MIT",
-  "description": "A monaco example with webpack and typescript",
+  "description": "A simple monaco example with webpack and typescript",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack",
-    "build-demo": "yarn build",
+    "build": "cross-env NODE_ENV=production webpack ",
+    "build-demo": "yarn build && yarn copy-demo",
     "copy-demo": "mkdirp ../../packages/graphiql/monaco && copy 'bundle/*' '../../packages/graphiql/monaco'",
     "start": "cross-env NODE_ENV=development webpack-dev-server"
   },
@@ -16,20 +16,20 @@
     "prettier": "^2.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "7.7.4",
+    "@babel/plugin-proposal-class-properties": "7.8.3",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.9.0",
+    "@babel/preset-env": "7.9.5",
     "@types/prettier": "^2.0.0",
     "babel-loader": "^8.1.0",
     "cross-env": "^7.0.0",
-    "css-loader": "^3.4.2",
-    "html-webpack-plugin": "^4.0.1",
+    "css-loader": "^3.5.1",
+    "html-webpack-plugin": "^4.2.0",
     "monaco-editor": "^0.20.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
     "react-dom": "^16.12.0",
-    "style-loader": "^1.0.1",
+    "style-loader": "^1.1.3",
     "webpack": "4.42.1",
-    "webpack-cli": "^3.3.10",
+    "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.1",
     "worker-loader": "^2.0.0"
   }

diff --git a/examples/monaco-graphql-webpack/src/index.html.ejs b/examples/monaco-graphql-webpack/src/index.html.ejs
@@ -0,0 +1,34 @@
+<!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;
+    }
+
+    .full-height {
+      height: 100vh;
+    }
+
+    .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>
+    </div>
+    <div id="results" class="full-height column"></div>
+  </div>
+</body>
+
+</html>
diff --git a/examples/monaco-webpack/src/index.ts → examples/monaco-graphql-webpack/src/index.ts b/examples/monaco-webpack/src/index.ts → examples/monaco-graphql-webpack/src/index.ts
@@ -1,8 +1,8 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+
 import 'regenerator-runtime/runtime';
 import 'monaco-graphql/esm/monaco.contribution';
-import * as prettierStandalone from 'prettier/standalone';
-import * as prettierGraphqlParser from 'prettier/parser-graphql';
+
 // NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
 // import shouldn't go through loader syntax.
 // @ts-ignore
@@ -13,6 +13,7 @@ import JSONWorker from 'worker-loader!monaco-editor/esm/vs/language/json/json.wo
 import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';
 
 const SCHEMA_URL = 'https://swapi-graphql.netlify.com/.netlify/functions/index';
+
 // @ts-ignore
 window.MonacoEnvironment = {
   getWorker(_workerId: string, label: string) {
@@ -26,11 +27,30 @@ window.MonacoEnvironment = {
   },
 };
 
+// const schemaInput = document.createElement('input');
+// schemaInput.type = 'text'
+
+// // @ts-ignore
+// schemaInput.value = SCHEMA_URL
+
+// schemaInput.onchange = (e) => {
+//   e.preventDefault()
+//   console.log(e.target.value)
+// }
+
+// const toolbar = document.getElementById('toolbar')
+// toolbar?.appendChild(schemaInput)
+
+const variablesModel = monaco.editor.createModel(
+  `{}`,
+  'json',
+  monaco.Uri.file('/1/variables.json'),
+);
+
 const resultsEditor = monaco.editor.create(
   document.getElementById('results') as HTMLElement,
   {
-    value: `{ }`,
-    language: 'json',
+    model: variablesModel,
   },
 );
 const variablesEditor = monaco.editor.create(
@@ -51,7 +71,7 @@ query Example {
 }
 `,
   'graphqlDev',
-  monaco.Uri.file('/1.graphql'),
+  monaco.Uri.file('/1/operation.graphql'),
 );
 
 const operationEditor = monaco.editor.create(
@@ -86,18 +106,14 @@ async function executeCurrentOp() {
   }
 }
 
-const opAction = {
-  id: 'run',
+const opAction: monaco.editor.IActionDescriptor = {
+  id: 'graphql-run',
   label: 'Run Operation',
+  contextMenuOrder: 0,
+  contextMenuGroupId: 'graphql',
   keybindings: [
     // eslint-disable-next-line no-bitwise
     monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-    // eslint-disable-next-line no-bitwise
-    monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
-    // eslint-disable-next-line no-bitwise
-    monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R,
-    // eslint-disable-next-line no-bitwise
-    monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Q,
   ],
   run: executeCurrentOp,
 };
@@ -106,26 +122,16 @@ operationEditor.addAction(opAction);
 variablesEditor.addAction(opAction);
 resultsEditor.addAction(opAction);
 
-/**
- * Basic custom formatter/language functionality example
- */
-
-monaco.languages.registerDocumentFormattingEditProvider('graphqlDev', {
-  provideDocumentFormattingEdits: (
-    document: monaco.editor.ITextModel,
-    _options: monaco.languages.FormattingOptions,
-    _token: monaco.CancellationToken,
-  ) => {
-    const text = document.getValue();
-    const formatted = prettierStandalone.format(text, {
-      parser: 'graphql',
-      plugins: [prettierGraphqlParser],
-    });
-    return [
-      {
-        range: document.getFullModelRange(),
-        text: formatted,
-      },
-    ];
-  },
-});
+// add your own diagnostics? why not!
+// monaco.editor.setModelMarkers(
+//   model,
+//   'graphql',
+//   [{
+//     severity: 5,
+//     message: 'An example diagnostic error',
+//     startColumn: 2,
+//     startLineNumber: 4,
+//     endLineNumber: 4,
+//     endColumn: 0,
+//   }],
+// );
diff --git a/examples/monaco-webpack/tsconfig.json → ...ples/monaco-graphql-webpack/tsconfig.json b/examples/monaco-webpack/tsconfig.json → ...ples/monaco-graphql-webpack/tsconfig.json
@@ -14,5 +14,5 @@
   },
   "references": [{ "path": "../../packages/monaco-graphql" }],
   "include": ["src"],
-  "exclude": ["**/__tests__/**", "**/build/**.*"]
+  "exclude": ["**/__tests__/**", "**/build/**.*", "../../node_modules"]
 }
diff --git a/examples/monaco-webpack/webpack.config.js → .../monaco-graphql-webpack/webpack.config.js b/examples/monaco-webpack/webpack.config.js → .../monaco-graphql-webpack/webpack.config.js
@@ -15,7 +15,7 @@ const resultConfig = {
   entry: {
     app: './index.ts',
     'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
-    'json.worker': 'monaco-editor/esm/vs/language/json/json.worker.js',
+    // 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker.js',
     'graphql.worker': 'monaco-graphql/esm/graphql.worker.js',
   },
   context: rootPath('src'),
@@ -69,9 +69,6 @@ const resultConfig = {
     // in order to prevent async modules for CDN builds
     // until we can guarantee it will work with the CDN properly
     // and so that graphiql.min.js can retain parity
-    new webpack.optimize.LimitChunkCountPlugin({
-      maxChunks: 1,
-    }),
     new HtmlWebpackPlugin({
       template: relPath('src/index.html.ejs'),
       filename: 'index.html',

diff --git a/examples/monaco-webpack/src/index.html.ejs b/examples/monaco-webpack/src/index.html.ejs
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "watch": "yarn tsc --watch",
     "start-graphiql": "yarn workspace graphiql dev"
   },
-  "dependencies": {
+  "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/node": "^7.8.7",

diff --git a/packages/graphiql/src/components/QueryHistory.tsx b/packages/graphiql/src/components/QueryHistory.tsx
@@ -69,7 +69,7 @@ type QueryHistoryState = {
 export class QueryHistory extends React.Component<
   QueryHistoryProps,
   QueryHistoryState
-  > {
+> {
   historyStore: QueryStore;
   favoriteStore: QueryStore;
 

diff --git a/packages/graphiql/tsconfig.esm.json b/packages/graphiql/tsconfig.esm.json
@@ -17,8 +17,6 @@
     "**/*-test.ts",
     "**/*-test.js",
     "**/*.stories.js",
-    "**/*.stories.ts",
-    "esm",
-    "node_modules"
+    "**/*.stories.ts"
   ]
 }
diff --git a/packages/graphiql/tsconfig.json b/packages/graphiql/tsconfig.json
@@ -9,9 +9,7 @@
     "target": "es5",
     "strictPropertyInitialization": false
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "exclude": [
     "**/__tests__/**",
     "**/dist/**.*",