Skip to content

Commit c79158c

Browse files
acaoacao
authored
feat: monaco-graphql docs, api, improvements (#1521)
1 parent a9c3f88 commit c79158c

File tree

34 files changed

+3043
-675
lines changed

34 files changed

+3043
-675
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ coverage/
1212
packages/**/dist/.gitignore
1313
packages/**/dist/.npmignore
1414
packages/graphiql/storybook
15-
packages/graphiql/lsp
15+
packages/graphiql/typedoc
1616
dist
1717
esm
1818
bundle

‎examples/monaco-graphql-webpack/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
"private": true,
55
"license": "MIT",
66
"description": "A simple monaco example with webpack and typescript",
7+
"typings": "src/types.d.ts",
78
"scripts": {
8-
"build": "cross-env NODE_ENV=production webpack ",
9+
"build": "cross-env NODE_ENV=production webpack-cli",
910
"build-demo": "yarn build && yarn copy-demo",
1011
"copy-demo": "mkdirp ../../packages/graphiql/monaco && copy 'bundle/*' '../../packages/graphiql/monaco'",
1112
"start": "cross-env NODE_ENV=development webpack-dev-server"
@@ -28,9 +29,9 @@
2829
"monaco-editor-webpack-plugin": "^1.9.0",
2930
"react-dom": "^16.12.0",
3031
"style-loader": "^1.1.3",
31-
"webpack": "4.42.1",
32+
"webpack": "^4.42.0",
3233
"webpack-cli": "^3.3.11",
33-
"webpack-dev-server": "^3.10.1",
34+
"webpack-dev-server": "^3.10.3",
3435
"worker-loader": "^2.0.0"
3536
}
3637
}

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

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<title>Monaco Example!</title>
10+
<style>
11+
.div {
12+
margin: 0;
13+
padding: 0;
14+
}
315
4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7-
<title>Monaco Example!</title>
8-
<style>
9-
.div {
10-
margin: 0;
11-
padding: 0;
12-
}
16+
.full-height {
17+
height: 100vh;
18+
}
1319
14-
.full-height {
15-
height: 100vh;
16-
}
20+
.column {
21+
width: 50%;
22+
}
23+
</style>
24+
</head>
1725

18-
.column {
19-
width: 50%;
20-
}
21-
</style>
22-
</head>
23-
24-
<body style="margin: 0; padding:0;">
25-
<div style="display: flex;">
26-
<div class="full-height column">
27-
<div id="operation" style="height:70vh;"></div>
28-
<div id="variables" style="height:30vh;"></div>
26+
<body style="margin: 0; padding: 0;">
27+
<div style="display: flex;">
28+
<div class="full-height column">
29+
<div id="toolbar" style=""></div>
30+
<div id="operation" style="height: 70vh;"></div>
31+
<div id="variables" style="height: 30vh;"></div>
32+
</div>
33+
<div
34+
id="results"
35+
class="full-height column"
36+
aria-label="Result Window"
37+
aria-live="polite"
38+
aria-atomic="true"
39+
></div>
2940
</div>
30-
<div id="results" class="full-height column"></div>
31-
</div>
32-
</body>
33-
41+
</body>
3442
</html>

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

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
1+
/* global monaco */
22

33
import 'regenerator-runtime/runtime';
44
import 'monaco-graphql/esm/monaco.contribution';
55

6+
// eslint-disable-next-line spaced-comment
7+
/// <reference path='../../../node_modules/monaco-editor/monaco.d.ts'/>
8+
// eslint-disable-next-line spaced-comment
9+
/// <reference path='../../../packages/monaco-graphql/src/typings/monaco.d.ts'/>
10+
611
// NOTE: using loader syntax becuase Yaml worker imports editor.worker directly and that
712
// import shouldn't go through loader syntax.
813
// @ts-ignore
@@ -12,7 +17,7 @@ import JSONWorker from 'worker-loader!monaco-editor/esm/vs/language/json/json.wo
1217
// @ts-ignore
1318
import GraphQLWorker from 'worker-loader!monaco-graphql/esm/graphql.worker';
1419

15-
const SCHEMA_URL = 'https://swapi-graphql.netlify.app/.netlify/functions/index';
20+
const SCHEMA_URL = 'https://api.spacex.land/graphql/';
1621

1722
// @ts-ignore
1823
window.MonacoEnvironment = {
@@ -27,19 +32,22 @@ window.MonacoEnvironment = {
2732
},
2833
};
2934

30-
// const schemaInput = document.createElement('input');
31-
// schemaInput.type = 'text'
35+
const schemaInput = document.createElement('input');
36+
schemaInput.type = 'text';
3237

33-
// // @ts-ignore
34-
// schemaInput.value = SCHEMA_URL
38+
schemaInput.value = SCHEMA_URL;
3539

36-
// schemaInput.onchange = (e) => {
37-
// e.preventDefault()
38-
// console.log(e.target.value)
39-
// }
40+
schemaInput.onkeyup = e => {
41+
e.preventDefault();
42+
// @ts-ignore
43+
const val = e?.target?.value as string;
44+
if (val && typeof val === 'string') {
45+
monaco.languages.graphql.graphqlDefaults.setSchemaConfig({ uri: val });
46+
}
47+
};
4048

41-
// const toolbar = document.getElementById('toolbar')
42-
// toolbar?.appendChild(schemaInput)
49+
const toolbar = document.getElementById('toolbar');
50+
toolbar?.appendChild(schemaInput);
4351

4452
const variablesModel = monaco.editor.createModel(
4553
`{}`,
@@ -51,22 +59,31 @@ const resultsEditor = monaco.editor.create(
5159
document.getElementById('results') as HTMLElement,
5260
{
5361
model: variablesModel,
62+
automaticLayout: true,
5463
},
5564
);
5665
const variablesEditor = monaco.editor.create(
5766
document.getElementById('variables') as HTMLElement,
5867
{
59-
value: `{ }`,
68+
value: `{ "limit": 10 }`,
6069
language: 'json',
70+
automaticLayout: true,
6171
},
6272
);
6373
const model = monaco.editor.createModel(
6474
`
65-
query Example {
66-
allFilms {
67-
films {
68-
id
69-
}
75+
query Example($limit: Int) {
76+
launchesPast(limit: $limit) {
77+
mission_name
78+
# format me using the right click context menu
79+
launch_date_local
80+
launch_site {
81+
site_name_long
82+
}
83+
links {
84+
article_link
85+
video_link
86+
}
7087
}
7188
}
7289
`,
@@ -78,9 +95,12 @@ const operationEditor = monaco.editor.create(
7895
document.getElementById('operation') as HTMLElement,
7996
{
8097
model,
98+
automaticLayout: true,
8199
},
82100
);
83101

102+
monaco.languages.graphql.graphqlDefaults.setSchemaConfig({ uri: SCHEMA_URL });
103+
84104
/**
85105
* Basic Operation Exec Example
86106
*/
@@ -99,6 +119,7 @@ async function executeCurrentOp() {
99119
headers: { 'content-type': 'application/json' },
100120
body: JSON.stringify(body),
101121
});
122+
102123
const resultText = await result.text();
103124
resultsEditor.setValue(JSON.stringify(JSON.parse(resultText), null, 2));
104125
} catch (err) {
@@ -135,3 +156,7 @@ resultsEditor.addAction(opAction);
135156
// endColumn: 0,
136157
// }],
137158
// );
159+
160+
// operationEditor.onDidChangeModelContent(() => {
161+
// // this is where
162+
// })

‎examples/monaco-graphql-webpack/src/types.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// eslint-disable-next-line spaced-comment
2+
/// <reference path='../../../node_modules/monaco-editor/monaco.d.ts'/>
3+
// eslint-disable-next-line spaced-comment
4+
/// <reference path='../../../packages/monaco-graphql/src/typings/monaco.d.ts'/>

‎examples/monaco-graphql-webpack/webpack.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const path = require('path');
2-
const webpack = require('webpack');
32

43
const HtmlWebpackPlugin = require('html-webpack-plugin');
54
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

‎netlify.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[build]
2-
command = "yarn build && yarn build-bundles && yarn build-demo"
2+
command = "yarn build && yarn build-bundles && yarn build-demo && yarn build-docs"
33
publish = "packages/graphiql"
44

55

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"build-clean": "lerna run build-clean",
3030
"build-validate": "lerna run build-validate",
3131
"build-demo": "lerna run build-demo",
32-
"build-docs": "rimraf 'packages/graphiql/lsp' && typedoc 'packages'",
32+
"build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
3333
"build-bundles": "yarn prebuild-bundles && yarn workspace graphiql run build-bundles",
3434
"prebuild-bundles": "yarn build-ts-esm && yarn build-bundles-clean",
3535
"build-bundles-clean": "rimraf '{packages,examples}/**/{bundle,cdn,webpack}' && lerna run build-bundles-clean",
@@ -72,7 +72,6 @@
7272
"@commitlint/cli": "^8.3.5",
7373
"@commitlint/config-conventional": "^8.3.4",
7474
"@commitlint/config-lerna-scopes": "^8.3.4",
75-
"@strictsoftware/typedoc-plugin-monorepo": "0.3.1",
7675
"@testing-library/jest-dom": "^5.4.0",
7776
"@types/codemirror": "^0.0.90",
7877
"@types/fetch-mock": "^7.3.2",
@@ -115,5 +114,8 @@
115114
"ts-jest": "^25.3.1",
116115
"typedoc": "0.17.4",
117116
"typescript": "^3.8.3"
117+
},
118+
"dependencies": {
119+
"@strictsoftware/typedoc-plugin-monorepo": "^0.3.1"
118120
}
119121
}

‎packages/graphql-language-service-interface/src/autocompleteUtils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function forEachState(
8282
}
8383
}
8484

85-
export function objectValues(object: Record<string, any>): Array<any> {
85+
export function objectValues<T>(object: Record<string, T>): Array<T> {
8686
const keys = Object.keys(object);
8787
const len = keys.length;
8888
const values = new Array(len);

0 commit comments

Comments
 (0)