fix project references, upgrade @types/graphql

examples/monaco-graphql-react-vite/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "vite": "^2.7.0",
     "@vitejs/plugin-react": "^1.1.1",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.12",
     "vite-plugin-monaco-editor": "^1.0.10"
   },
   "scripts": {

package.json

@@ -30,14 +30,13 @@
     "npm": "please_use_yarn_instead"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:packages && yarn build:graphiql-react && yarn build:graphiql",
+    "build": "yarn build:clean && yarn tsc && yarn build:graphiql-react",
     "build-bundles": "yarn prebuild-bundles && wsrun -p -m -s build-bundles",
     "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql run build-bundles-clean",
-    "build-clean": "wsrun -m build-clean ",
+    "build-clean": "wsrun -m build-clean",
     "build-demo": "wsrun -m -s build-demo",
     "build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
-    "build:clean": "yarn tsc --clean && yarn tsc --clean resources/tsconfig.graphiql.json",
-    "build:graphiql": "yarn tsc resources/tsconfig.graphiql.json",
+    "build:clean": "yarn tsc --clean",
     "build:graphiql-react": "yarn workspace @graphiql/react run build",
     "build:packages": "yarn tsc",
     "build:watch": "yarn tsc --watch",
@@ -99,8 +98,6 @@
     "@types/jest": "^26.0.22",
     "@types/node": "^14.14.22",
     "@types/prettier": "^2.0.0",
-    "@types/react": "^17.0.37",
-    "@types/theme-ui": "^0.3.1",
     "@types/ws": "^7.4.0",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",

packages/graphiql-react/src/editor/hooks.ts

@@ -2,7 +2,7 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import { EditorChange } from 'codemirror';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
-import { RefObject, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useExplorerContext } from '../explorer';
 import { useSchemaContext } from '../schema';
@@ -160,7 +160,7 @@ export function useMergeQuery({ caller }: { caller?: Function } = {}) {
       return;
     }
 
-    queryEditor.setValue(print(mergeAst(documentAST, schema)));
+    queryEditor?.setValue(print(mergeAst(documentAST, schema)));
   }, [queryEditor, schema]);
 }
 

packages/graphiql-react/src/editor/query-editor.tsx

@@ -198,7 +198,7 @@ export function useQueryEditor({
         }
       });
 
-      newEditor.on('beforeChange', (editorInstance, change) => {
+      newEditor.on('beforeChange', (_editorInstance, change) => {
         // The update function is only present on non-redo, non-undo events.
         if (change.origin === 'paste') {
           const text = change.text.map(normalizeWhitespace);

packages/graphiql-react/src/execution.tsx

@@ -18,11 +18,7 @@ import { getFragmentDependenciesForAST } from 'graphql-language-service';
 import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import setValue from 'set-value';
 
-import {
-  useAutoCompleteLeafs,
-  useEditorContext,
-  UseQueryEditorArgs,
-} from './editor';
+import { useAutoCompleteLeafs, useEditorContext } from './editor';
 import { EditCallback } from './editor/hooks';
 import { useHistoryContext } from './history';
 import { createContextHook, createNullableContext } from './utility/context';

packages/graphiql-react/tsconfig.esm.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../resources/tsconfig.base.esm.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./esm",
+    "composite": false,
+    "jsx": "react",
+    "baseUrl": ".",
+    "target": "es5"
+  },
+  "include": ["src"],
+  "exclude": [
+    "**/__tests__/**",
+    "**/dist/**.*",
+    "**/*.spec.ts",
+    "**/*.spec.js",
+    "**/*-test.ts",
+    "**/*-test.js",
+    "**/*.stories.js",
+    "**/*.stories.ts"
+  ],
+  "references": [
+    {
+      "path": "../graphiql-toolkit"
+    },
+    {
+      "path": "../codemirror-graphql"
+    }
+  ]
+}

packages/graphiql-react/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../resources/tsconfig.base.cjs.json",
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -16,8 +17,14 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationDir": "types",
-    "outDir": "tsc"
+    "outDir": "dist"
   },
   "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "../graphiql-toolkit" },
+    {
+      "path": "../codemirror-graphql"
+    }
+  ]
 }

packages/graphiql/package.json

@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.4.0",
-    "@testing-library/react": "9.4.1",
+    "@testing-library/react": "13.3.0",
     "@types/codemirror": "^5.60.5",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^14.14.22",

resources/tsconfig.base.cjs.json

@@ -12,7 +12,7 @@
     "downlevelIteration": true,
     "removeComments": true,
     "strict": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "noImplicitAny": true,
     "noImplicitReturns": false,
     "noFallthroughCasesInSwitch": true,
@@ -21,7 +21,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "lib": ["dom", "es2017", "es2018", "esnext"],
-    "types": ["node", "jest"],
+    "types": ["node", "jest", "react"],
     "baseUrl": "."
   },
   "exclude": [

resources/tsconfig.build.cjs.json

@@ -8,6 +8,9 @@
     {
       "path": "../packages/graphiql-toolkit"
     },
+    {
+      "path": "../packages/graphiql-react"
+    },
     {
       "path": "../packages/monaco-graphql"
     },