all in one

Author: dimaMachina

.changeset/soft-cars-notice.md

@@ -0,0 +1,7 @@
+---
+'graphiql': major
+'@graphiql/react': minor
+'monaco-graphql': minor
+---
+
+replace Codemirror editor with Monaco editor and Monaco GraphQL

.eslintrc.js

@@ -393,6 +393,7 @@ module.exports = {
         '@typescript-eslint/consistent-type-assertions': 'error',
         '@typescript-eslint/no-duplicate-type-constituents': 'error',
         '@typescript-eslint/no-unnecessary-type-conversion': 'error',
+        // '@typescript-eslint/await-thenable': 'error', // TODO
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-deprecated': 'off',
         '@typescript-eslint/no-unsafe-function-type': 'off',
@@ -409,11 +410,10 @@ module.exports = {
         projectService: {
           allowDefaultProject: [
             'examples/monaco-graphql-react-vite/vite.config.ts',
-            'packages/graphiql/vite.config.mts',
-            'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax,graphiql}/vitest.config.mts',
+            'packages/{codemirror-graphql,graphiql-toolkit,graphql-language-service-cli,graphql-language-service,monaco-graphql,vscode-graphql-syntax}/vitest.config.mts',
 
             'packages/cm6-graphql/__tests__/test.spec.ts',
-            'packages/graphiql/src/GraphiQL.spec.tsx',
+            'packages/graphiql/cypress.config.ts',
             'packages/vscode-graphql-syntax/tests/*.spec.ts',
             'packages/graphql-language-service-cli/src/__tests__/*.test.ts',
             'packages/monaco-graphql/test/monaco-editor.test.ts',
@@ -515,7 +515,9 @@ module.exports = {
       rules: {
         '@typescript-eslint/no-restricted-imports': [
           'error',
-          ...RESTRICTED_IMPORTS,
+          ...RESTRICTED_IMPORTS
+            // TODO: enable when monaco-editor will be migrated over codemirror
+            .filter(({ name }) => name !== 'monaco-editor'),
           {
             name: 'react',
             importNames: ['memo', 'useCallback', 'useMemo'],

.github/workflows/pr.yml

@@ -36,11 +36,9 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     needs: [install]
-
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
-
       - id: cache-modules
         uses: actions/cache@v4
         with:
@@ -109,18 +107,15 @@ jobs:
     name: Vitest Unit Tests
     runs-on: ubuntu-latest
     needs: [build]
-
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
-
       - id: cache-modules
         uses: actions/cache@v4
         with:
           path: |
             **/node_modules
           key: modules-${{ github.sha }}
-
       - uses: actions/cache@v4
         with:
           key: build-${{ github.sha }}
@@ -131,11 +126,9 @@ jobs:
     name: ESLint
     runs-on: ubuntu-latest
     needs: [build]
-
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
-
       - id: cache-modules
         uses: actions/cache@v4
         with:
@@ -148,11 +141,29 @@ jobs:
           path: ${{ env.BUILD-CACHE-LIST }}
       - run: yarn eslint
 
+  types-check:
+    name: Types Check
+    runs-on: ubuntu-latest
+    needs: [build]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - id: cache-modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            **/node_modules
+          key: modules-${{ github.sha }}
+      - uses: actions/cache@v4
+        with:
+          key: build-${{ github.sha }}
+          path: ${{ env.BUILD-CACHE-LIST }}
+      - run: yarn types:check
+
   e2e:
     name: Cypress
     runs-on: ubuntu-latest
     needs: [build]
-
     steps:
       - uses: actions/checkout@v4
       - id: cache-modules

.vscode/settings.json

@@ -11,5 +11,6 @@
     "coverage.xml",
     "jacoco.xml",
     "coverage.cobertura.xml"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

cspell.json

@@ -19,6 +19,7 @@
     "**/esbuild.js",
     ".eslintrc.js",
     ".vscode/extensions.json",
+    "packages/monaco-graphql/test/monaco-editor.test.ts",
     "working-group"
   ],
   "files": ["**/*.{js,cjs,mjs,ts,jsx,tsx,md,mdx,html,json,css,toml,yaml,yml}"]

examples/graphiql-cdn/index.html

@@ -14,7 +14,6 @@
     <style>
       body {
         margin: 0;
-        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {

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

@@ -1,8 +1,6 @@
 # GraphiQL `create-react-app` Example
 
-This example demonstrates how to transpile your own custom ES6 and typescript GraphiQL implementation bootstrapped with `create-react-app`, no config needed.
-
-## Setup
-
-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.
+> [!WARNING]
+>
+> This example has been removed. You can find its last version [here](https://github.com/graphql/graphiql/tree/3b93d27f7568d93db5cd146157220b127eeea737/examples/graphiql-create-react-app).
+> We recommend using the [GraphiQL Vite](../graphiql-vite) or [GraphiQL Next.js](../graphiql-nextjs) examples instead.