Merge remote-tracking branch 'upstream/main' into fix/graphql-syntax-…

…newlines
graphql · Feb 4, 2024 · 4edd5c0 · 4edd5c0
2 parents 90be966 + dfe083a
commit 4edd5c0
Show file tree

Hide file tree

Showing 29 changed files with 181 additions and 36 deletions.
diff --git a/.changeset/twelve-planes-breathe.md b/.changeset/twelve-planes-breathe.md
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -9,11 +9,11 @@
     "start": "NODE_ENV=development webpack-cli serve"
   },
   "dependencies": {
-    "@graphiql/plugin-code-exporter": "^1.0.3",
-    "@graphiql/plugin-explorer": "^1.0.2",
+    "@graphiql/plugin-code-exporter": "^1.0.4",
+    "@graphiql/plugin-explorer": "^1.0.3",
     "@graphiql/toolkit": "^0.9.1",
-    "@graphiql/react": "^0.20.2",
-    "graphiql": "^3.1.0",
+    "@graphiql/react": "^0.20.3",
+    "graphiql": "^3.1.1",
     "graphql": "^16.8.1",
     "graphql-ws": "^5.5.5",
     "react": "^18.2.0",

diff --git a/examples/monaco-graphql-nextjs/package.json b/examples/monaco-graphql-nextjs/package.json
@@ -16,7 +16,7 @@
     "marked": "^4.2.12",
     "monaco-editor": "^0.39.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-graphql": "^1.5.0",
+    "monaco-graphql": "^1.5.1",
     "next": "13.4.7",
     "prettier": "3.0.0-alpha.12",
     "react": "^18.2.0",

diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json
@@ -8,7 +8,7 @@
     "graphql-language-service": "^5.2.0",
     "jsonc-parser": "^3.2.0",
     "monaco-editor": "^0.39.0",
-    "monaco-graphql": "^1.5.0",
+    "monaco-graphql": "^1.5.1",
     "prettier": "3.0.0-alpha.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/monaco-graphql-webpack/package.json b/examples/monaco-graphql-webpack/package.json
@@ -14,7 +14,7 @@
     "json-schema": "^0.4.0",
     "jsonc-parser": "^3.2.0",
     "monaco-editor": "^0.39.0",
-    "monaco-graphql": "^1.5.0",
+    "monaco-graphql": "^1.5.1",
     "prettier": "3.0.0-alpha.12"
   },
   "devDependencies": {

diff --git a/packages/graphiql-plugin-code-exporter/CHANGELOG.md b/packages/graphiql-plugin-code-exporter/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @graphiql/plugin-code-exporter
 
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`2b6ea316`](https://github.com/graphql/graphiql/commit/2b6ea3166c8d8e152f16d87c878aa8a66f1b3775)]:
+  - @graphiql/react@0.20.3
+
 ## 1.0.3
 
 ### Patch Changes

diff --git a/packages/graphiql-plugin-code-exporter/package.json b/packages/graphiql-plugin-code-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
@@ -33,13 +33,13 @@
     "graphiql-code-exporter": "^3.0.3"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.20.2",
+    "@graphiql/react": "^0.20.3",
     "graphql": "^15.5.0 || ^16.0.0",
     "react": "^16.8.0 || ^17 || ^18",
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.20.2",
+    "@graphiql/react": "^0.20.3",
     "@vitejs/plugin-react": "^4.0.1",
     "graphql": "^16.8.1",
     "postcss-nesting": "^10.1.7",

diff --git a/packages/graphiql-plugin-explorer/CHANGELOG.md b/packages/graphiql-plugin-explorer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @graphiql/plugin-explorer
 
+## 1.0.3
+
+### Patch Changes
+
+- [#3526](https://github.com/graphql/graphiql/pull/3526) [`2b6ea316`](https://github.com/graphql/graphiql/commit/2b6ea3166c8d8e152f16d87c878aa8a66f1b3775) Thanks [@benjie](https://github.com/benjie)! - Fix bug whereby typing quickly into explorer sidebar would result in characters being dropped.
+
+- Updated dependencies [[`2b6ea316`](https://github.com/graphql/graphiql/commit/2b6ea3166c8d8e152f16d87c878aa8a66f1b3775)]:
+  - @graphiql/react@0.20.3
+
 ## 1.0.2
 
 ### Patch Changes

diff --git a/packages/graphiql-plugin-explorer/package.json b/packages/graphiql-plugin-explorer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-explorer",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
@@ -32,13 +32,13 @@
     "graphiql-explorer": "^0.9.0"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.20.2",
+    "@graphiql/react": "^0.20.3",
     "graphql": "^15.5.0 || ^16.0.0",
     "react": "^16.8.0 || ^17 || ^18",
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.20.2",
+    "@graphiql/react": "^0.20.3",
     "@vitejs/plugin-react": "^4.0.1",
     "graphql": "^16.8.1",
     "react": "^18.2.0",

diff --git a/packages/graphiql-plugin-explorer/src/index.tsx b/packages/graphiql-plugin-explorer/src/index.tsx
@@ -4,6 +4,7 @@ import {
   useExecutionContext,
   useSchemaContext,
   useOperationsEditorState,
+  useOptimisticState,
 } from '@graphiql/react';
 import {
   Explorer as GraphiQLExplorer,
@@ -139,7 +140,9 @@ function ExplorerPlugin(props: GraphiQLExplorerPluginProps) {
   );
 
   // load the current editor tab state into the explorer
-  const [operationsString, handleEditOperations] = useOperationsEditorState();
+  const [operationsString, handleEditOperations] = useOptimisticState(
+    useOperationsEditorState(),
+  );
 
   return (
     <GraphiQLExplorer

diff --git a/packages/graphiql-react/CHANGELOG.md b/packages/graphiql-react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @graphiql/react
 
+## 0.20.3
+
+### Patch Changes
+
+- [#3526](https://github.com/graphql/graphiql/pull/3526) [`2b6ea316`](https://github.com/graphql/graphiql/commit/2b6ea3166c8d8e152f16d87c878aa8a66f1b3775) Thanks [@benjie](https://github.com/benjie)! - Add new `useOptimisticState` hook that can wrap a useState-like hook to perform optimistic caching of state changes, this helps to avoid losing characters when the user is typing rapidly. Example of usage: `const [state, setState] = useOptimisticState(useOperationsEditorState());`
+
 ## 0.20.2
 
 ### Patch Changes

diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/react",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",

diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
@@ -3,7 +3,7 @@ import type { EditorChange, EditorConfiguration } from 'codemirror';
 import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useExplorerContext } from '../explorer';
 import { usePluginContext } from '../plugin';
@@ -388,3 +388,76 @@ export const useHeadersEditorState = (): [
 ] => {
   return useEditorState('header');
 };
+
+/**
+ * Implements an optimistic caching strategy around a useState-like hook in
+ * order to prevent loss of updates when the hook has an internal delay and the
+ * update function is called again before the updated state is sent out.
+ *
+ * Use this as a wrapper around `useOperationsEditorState`,
+ * `useVariablesEditorState`, or `useHeadersEditorState` if you anticipate
+ * calling them with great frequency (due to, for instance, mouse, keyboard, or
+ * network events).
+ *
+ * Example:
+ *
+ * ```ts
+ * const [operationsString, handleEditOperations] =
+ *   useOptimisticState(useOperationsEditorState());
+ * ```
+ */
+export function useOptimisticState([
+  upstreamState,
+  upstreamSetState,
+]: ReturnType<typeof useEditorState>): ReturnType<typeof useEditorState> {
+  const lastStateRef = useRef({
+    /** The last thing that we sent upstream; we're expecting this back */
+    pending: null as string | null,
+    /** The last thing we received from upstream */
+    last: upstreamState,
+  });
+
+  const [state, setOperationsText] = useState(upstreamState);
+
+  useEffect(() => {
+    if (lastStateRef.current.last === upstreamState) {
+      // No change; ignore
+    } else {
+      lastStateRef.current.last = upstreamState;
+      if (lastStateRef.current.pending === null) {
+        // Gracefully accept update from upstream
+        setOperationsText(upstreamState);
+      } else if (lastStateRef.current.pending === upstreamState) {
+        // They received our update and sent it back to us - clear pending, and
+        // send next if appropriate
+        lastStateRef.current.pending = null;
+        if (upstreamState !== state) {
+          // Change has occurred; upstream it
+          lastStateRef.current.pending = state;
+          upstreamSetState(state);
+        }
+      } else {
+        // They got a different update; overwrite our local state (!!)
+        lastStateRef.current.pending = null;
+        setOperationsText(upstreamState);
+      }
+    }
+  }, [upstreamState, state, upstreamSetState]);
+
+  const setState = useCallback(
+    (newState: string) => {
+      setOperationsText(newState);
+      if (
+        lastStateRef.current.pending === null &&
+        lastStateRef.current.last !== newState
+      ) {
+        // No pending updates and change has occurred... send it upstream
+        lastStateRef.current.pending = newState;
+        upstreamSetState(newState);
+      }
+    },
+    [upstreamSetState],
+  );
+
+  return useMemo(() => [state, setState], [state, setState]);
+}
diff --git a/packages/graphiql-react/src/editor/index.ts b/packages/graphiql-react/src/editor/index.ts
@@ -18,6 +18,7 @@ export {
   usePrettifyEditors,
   useEditorState,
   useOperationsEditorState,
+  useOptimisticState,
   useVariablesEditorState,
   useHeadersEditorState,
 } from './hooks';

diff --git a/packages/graphiql-react/src/index.ts b/packages/graphiql-react/src/index.ts
@@ -18,6 +18,7 @@ export {
   useVariableEditor,
   useEditorState,
   useOperationsEditorState,
+  useOptimisticState,
   useVariablesEditorState,
   useHeadersEditorState,
   VariableEditor,

diff --git a/packages/graphiql/CHANGELOG.md b/packages/graphiql/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`2b6ea316`](https://github.com/graphql/graphiql/commit/2b6ea3166c8d8e152f16d87c878aa8a66f1b3775)]:
+  - @graphiql/react@0.20.3
+
 ## 3.1.0
 
 ### Minor Changes

diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphiql",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "An graphical interactive in-browser GraphQL IDE.",
   "contributors": [
     "Hyohyeon Jeong <asiandrummer@fb.com>",
@@ -47,7 +47,7 @@
     "webpack": "webpack-cli --config resources/webpack.config.js"
   },
   "dependencies": {
-    "@graphiql/react": "^0.20.2",
+    "@graphiql/react": "^0.20.3",
     "@graphiql/toolkit": "^0.9.1",
     "graphql-language-service": "^5.2.0",
     "markdown-it": "^12.2.0"

diff --git a/packages/monaco-graphql/CHANGELOG.md b/packages/monaco-graphql/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.5.1
+
+### Patch Changes
+
+- [#3523](https://github.com/graphql/graphiql/pull/3523) [`88d76cab`](https://github.com/graphql/graphiql/commit/88d76cabe57aa99f89f569cb2787e2f06e0ab9c5) Thanks [@bboure](https://github.com/bboure)! - Fix JSON diagnostics for multiple editors
+
 ## 1.5.0
 
 ### Minor Changes

diff --git a/packages/monaco-graphql/package.json b/packages/monaco-graphql/package.json
@@ -1,7 +1,7 @@
 {
   "name": "monaco-graphql",
   "description": "full service, official monaco mode for GraphQL",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "license": "MIT",
   "main": "dist/monaco.contribution.js",
   "module": "esm/monaco.contribution.js",

diff --git a/packages/monaco-graphql/src/languageFeatures.ts b/packages/monaco-graphql/src/languageFeatures.ts
@@ -150,12 +150,17 @@ export class DiagnosticsAdapter {
         schema: jsonSchema,
         fileMatch: variablesUris,
       };
+      const currentSchemas =
+        languages.json.jsonDefaults.diagnosticsOptions.schemas?.filter(
+          s => s.uri !== schemaUri,
+        ) || [];
+
       // TODO: export from api somehow?
       languages.json.jsonDefaults.setDiagnosticsOptions({
         schemaValidation: 'error',
         validate: true,
         ...this.defaults?.diagnosticSettings?.jsonDiagnosticSettings,
-        schemas: [configResult],
+        schemas: [...currentSchemas, configResult],
         enableSchemaRequest: false,
       });
     }

diff --git a/packages/vscode-graphql-execution/CHANGELOG.md b/packages/vscode-graphql-execution/CHANGELOG.md
@@ -1,5 +1,11 @@
 # vscode-graphql-execution
 
+## 0.2.6
+
+### Patch Changes
+
+- [#3519](https://github.com/graphql/graphiql/pull/3519) [`8188e3e6`](https://github.com/graphql/graphiql/commit/8188e3e6fd979bcf2fbdf9568deb0c88d0df99e2) Thanks [@acao](https://github.com/acao)! - bump ovsx
+
 ## 0.2.5
 
 ### Patch Changes

diff --git a/packages/vscode-graphql-execution/package.json b/packages/vscode-graphql-execution/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vscode-graphql-execution",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "displayName": "GraphQL: Inline Operation Execution",
   "description": "Execute graphql operations from your code (revived!)",
   "publisher": "GraphQL",

diff --git a/packages/vscode-graphql-syntax/CHANGELOG.md b/packages/vscode-graphql-syntax/CHANGELOG.md
@@ -1,5 +1,17 @@
 # vscode-graphql-syntax
 
+## 1.3.2
+
+### Patch Changes
+
+- [#3529](https://github.com/graphql/graphiql/pull/3529) [`a38152ef`](https://github.com/graphql/graphiql/commit/a38152ef1248a480d5cad384780f82214a84f16d) Thanks [@acao](https://github.com/acao)! - fix triple double quote comment syntax by disabling inline double quote js strings for now
+
+## 1.3.1
+
+### Patch Changes
+
+- [#3519](https://github.com/graphql/graphiql/pull/3519) [`8188e3e6`](https://github.com/graphql/graphiql/commit/8188e3e6fd979bcf2fbdf9568deb0c88d0df99e2) Thanks [@acao](https://github.com/acao)! - bump ovsx
+
 ## 1.3.0
 
 ### Minor Changes