Skip to content

Commit 86a96e5

Browse files
dimaMachinadimaMachina
authored
[3] GraphiQL 5 x Monaco editor / Monaco-GraphQL / JSONC variables/headers (#3234)
* use execution store * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * default query * persist headers * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * reduce rerenders * add logs * try * cleanup * cspell * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * fixes * fixes * fixes * fixes * fixes * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * prettier * upd * move plugins check to store * upd * upd * refactor * refactor * upd * upd * upd * upd * upd * upd * lint fix * all in one * yarn lokc * fix * yarn.lock * update babel.config.js * fix tests * Delete .changeset/five-cars-roll.md * fix build * fix netlify * update changeset * update yarn.lock * polish * polish
1 parent 8965746 commit 86a96e5

File tree

131 files changed

+2984
-2471
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+2984
-2471
lines changed

‎.changeset/soft-cars-notice.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
'@graphiql/plugin-code-exporter': patch
3+
'@graphiql/plugin-doc-explorer': major
4+
'@graphiql/plugin-explorer': patch
5+
'@graphiql/plugin-history': patch
6+
'@graphiql/react': minor
7+
'graphiql': major
8+
---
9+
10+
Migration from Codemirror to [Monaco Editor](https://github.com/microsoft/monaco-editor)
11+
12+
Replacing `codemirror-graphql` with [`monaco-graphql`](https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql)
13+
14+
Support for comments in **Variables** and **Headers** editors

‎.eslintrc.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -393,6 +393,7 @@ module.exports = {
393393
'@typescript-eslint/consistent-type-assertions': 'error',
394394
'@typescript-eslint/no-duplicate-type-constituents': 'error',
395395
'@typescript-eslint/no-unnecessary-type-conversion': 'error',
396+
// '@typescript-eslint/await-thenable': 'error', // TODO
396397
// TODO: Fix all errors for the following rules included in recommended config
397398
'@typescript-eslint/no-deprecated': 'off',
398399
'@typescript-eslint/no-unsafe-function-type': 'off',
@@ -409,11 +410,10 @@ module.exports = {
409410
projectService: {
410411
allowDefaultProject: [
411412
'examples/monaco-graphql-react-vite/vite.config.ts',
412-
'packages/graphiql/vite.config.mts',
413-
'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax,graphiql}/vitest.config.mts',
413+
'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax}/vitest.config.mts',
414414

415415
'packages/cm6-graphql/__tests__/test.spec.ts',
416-
'packages/graphiql/src/GraphiQL.spec.tsx',
416+
'packages/graphiql/cypress.config.ts',
417417
'packages/vscode-graphql-syntax/tests/*.spec.ts',
418418
'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
419419
'packages/monaco-graphql/test/monaco-editor.test.ts',
@@ -515,7 +515,9 @@ module.exports = {
515515
rules: {
516516
'@typescript-eslint/no-restricted-imports': [
517517
'error',
518-
...RESTRICTED_IMPORTS,
518+
...RESTRICTED_IMPORTS
519+
// TODO: enable when monaco-editor will be migrated over codemirror
520+
.filter(({ name }) => name !== 'monaco-editor'),
519521
{
520522
name: 'react',
521523
importNames: ['memo', 'useCallback', 'useMemo'],

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,6 @@ packages/graphiql/*.css
5151
packages/graphiql/*.map
5252
packages/graphiql/cypress/screenshots/
5353
packages/graphiql/typedoc/
54+
packages/graphiql/webpack/
5455

5556
packages/graphiql/cypress/downloads/

‎cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"**/esbuild.js",
2020
".eslintrc.js",
2121
".vscode/extensions.json",
22+
"packages/monaco-graphql/test/monaco-editor.test.ts",
2223
"working-group"
2324
],
2425
"files": ["**/*.{js,cjs,mjs,ts,jsx,tsx,md,mdx,html,json,css,toml,yaml,yml}"]

‎examples/graphiql-webpack/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"graphql": "^16.9.0",
1818
"graphql-ws": "^5.5.5",
1919
"react": "^19.1.0",
20+
"react-dom": "^19.1.0",
2021
"regenerator-runtime": "^0.13.9"
2122
},
2223
"devDependencies": {
@@ -29,8 +30,8 @@
2930
"copy-webpack-plugin": "11.0.0",
3031
"cross-env": "^7.0.2",
3132
"css-loader": "^6.7.3",
33+
"file-loader": "^6.2.0",
3234
"html-webpack-plugin": "^5.5.0",
33-
"react-dom": "^19.1.0",
3435
"react-hot-loader": "^4.13.1",
3536
"style-loader": "^3.3.1",
3637
"webpack": "5.94.0",

‎examples/graphiql-webpack/src/constants.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/graphiql-webpack/src/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
@import 'graphiql/style.css';
2+
@import '@graphiql/plugin-explorer/style.css';
3+
@import '@graphiql/plugin-code-exporter/style.css';
4+
@import './select-server-plugin.css';
5+
16
body {
27
padding: 0;
38
margin: 0;

‎examples/graphiql-webpack/src/index.jsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,11 @@ import { GraphiQL } from 'graphiql';
55
import { explorerPlugin } from '@graphiql/plugin-explorer';
66
import { getSnippets } from './snippets';
77
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
8-
import 'graphiql/style.css';
9-
import '@graphiql/plugin-explorer/style.css';
10-
import '@graphiql/plugin-code-exporter/style.css';
8+
import 'graphiql/setup-workers/webpack';
119
import { createGraphiQLFetcher } from '@graphiql/toolkit';
1210
import { useStorage } from '@graphiql/react';
1311

14-
export const STARTING_URL =
15-
'https://swapi-graphql.netlify.app/.netlify/functions/index';
12+
export const STARTING_URL = 'https://countries.trevorblades.com';
1613

1714
import './index.css';
1815
import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';

‎examples/graphiql-webpack/src/select-server-plugin.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import * as React from 'react';
2-
3-
import './select-server-plugin.css';
42
import { useStorage, useSchemaStore } from '@graphiql/react';
53

64
export const LAST_URL_KEY = 'lastURL';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ module.exports = {
77
plugins: [
88
require.resolve('@babel/plugin-proposal-class-properties'),
99
require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
10+
require.resolve('@babel/plugin-transform-class-static-block'),
1011
],
1112
};

0 commit comments

Comments
 (0)