Merge branch 'main' into graphiql-v4

Author: dimaMachina

.changeset/pretty-panthers-deliver.md

@@ -343,7 +343,7 @@ module.exports = {
         'unicorn/prefer-node-protocol': 'error',
         'import-x/no-unresolved': [
           'error',
-          { ignore: ['^node:', '\\.svg\\?react$'] },
+          { ignore: ['^node:', '\\.svg\\?react$', 'vitest/config'] },
         ],
         'no-extra-boolean-cast': [
           'error',

.changeset/silent-ghosts-fix.md

@@ -11,7 +11,7 @@
   "dependencies": {
     "@graphiql/plugin-code-exporter": "^4.0.0-alpha.1",
     "@graphiql/plugin-explorer": "^4.0.0-alpha.2",
-    "@graphiql/toolkit": "^0.10.0",
+    "@graphiql/toolkit": "^0.11.0",
     "@graphiql/react": "^1.0.0-alpha.4",
     "graphiql": "^4.0.0-alpha.5",
     "graphql": "^16.9.0",

.eslintrc.js

@@ -9,7 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@graphiql/toolkit": "^0.10.0",
+    "@graphiql/toolkit": "^0.11.0",
     "graphql": "^16.9.0",
     "graphql-ws": "^5.5.5",
     "jsonc-parser": "^3.2.0",

examples/graphiql-webpack/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "dependencies": {
-    "@graphiql/toolkit": "^0.10.0",
+    "@graphiql/toolkit": "^0.11.0",
     "graphql": "^16.9.0",
     "graphql-language-service": "^5.3.0",
     "jsonc-parser": "^3.2.0",

examples/monaco-graphql-nextjs/package.json

@@ -138,7 +138,7 @@
     "ts-jest": "^27.1.5",
     "typedoc": "^0.19.2",
     "typescript": "^4.6.3",
-    "vitest": "^2.0.4",
+    "vitest": "^2.0.5",
     "wgutils": "^0.1.7",
     "wsrun": "^5.2.4"
   },

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

@@ -1,5 +1,13 @@
 # cm6-graphql
 
+## 0.1.1
+
+### Patch Changes
+
+- [#3751](https://github.com/graphql/graphiql/pull/3751) [`b8538d8`](https://github.com/graphql/graphiql/commit/b8538d87421edb086b32d4eb2e30a3f7d9d9e893) Thanks [@dimaMachina](https://github.com/dimaMachina)! - replace deprecated `navigator.platform` with `navigator.userAgent`
+
+  fix placeholder `⌘ K` in doc explorer search input for non mac devices, replace by `Ctrl K`
+
 ## 0.1.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm6-graphql",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "GraphQL language support for CodeMirror 6",
   "scripts": {
     "build": "cm-buildhelper src/index.ts",

packages/cm6-graphql/CHANGELOG.md

@@ -38,6 +38,6 @@ export class Position implements IPosition {
   }
 }
 
-const isMac = () => /mac/i.test(navigator.platform);
+const isMac = () => navigator.userAgent.includes('Mac');
 export const isMetaKeyPressed = (e: MouseEvent) =>
   isMac() ? e.metaKey : e.ctrlKey;

packages/cm6-graphql/package.json

@@ -1,5 +1,13 @@
 # Change Log
 
+## 2.1.1
+
+### Patch Changes
+
+- [#3751](https://github.com/graphql/graphiql/pull/3751) [`b8538d8`](https://github.com/graphql/graphiql/commit/b8538d87421edb086b32d4eb2e30a3f7d9d9e893) Thanks [@dimaMachina](https://github.com/dimaMachina)! - replace deprecated `navigator.platform` with `navigator.userAgent`
+
+  fix placeholder `⌘ K` in doc explorer search input for non mac devices, replace by `Ctrl K`
+
 ## 2.1.0
 
 ### Minor Changes

packages/cm6-graphql/src/helpers.ts

@@ -1,6 +1,6 @@
 {
   "name": "codemirror-graphql",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "GraphQL mode and helpers for CodeMirror.",
   "contributors": [
     "Hyohyeon Jeong <[email protected]>",

packages/codemirror-graphql/CHANGELOG.md

@@ -121,7 +121,7 @@ function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
 }
 
 const isMac =
-  typeof navigator !== 'undefined' && navigator?.appVersion.includes('Mac');
+  typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');
 
 function isJumpModifier(key: string) {
   return key === (isMac ? 'Meta' : 'Control');

packages/codemirror-graphql/package.json

@@ -56,6 +56,26 @@
 - [#3692](https://github.com/graphql/graphiql/pull/3692) [`82bc961`](https://github.com/graphql/graphiql/commit/82bc961a33c4e9da29dffb4a603035a4909f49ad) Thanks [@dimaMachina](https://github.com/dimaMachina)! - - prefer `location` over `window.location`
   - prefer `navigator` over `window.navigator`
 
+## 0.26.2
+
+### Patch Changes
+
+- [#3751](https://github.com/graphql/graphiql/pull/3751) [`b8538d8`](https://github.com/graphql/graphiql/commit/b8538d87421edb086b32d4eb2e30a3f7d9d9e893) Thanks [@dimaMachina](https://github.com/dimaMachina)! - replace deprecated `navigator.platform` with `navigator.userAgent`
+
+  fix placeholder `⌘ K` in doc explorer search input for non mac devices, replace by `Ctrl K`
+
+- Updated dependencies [[`b8538d8`](https://github.com/graphql/graphiql/commit/b8538d87421edb086b32d4eb2e30a3f7d9d9e893)]:
+  - [email protected]
+
+## 0.26.1
+
+### Patch Changes
+
+- [#3743](https://github.com/graphql/graphiql/pull/3743) [`7275c19`](https://github.com/graphql/graphiql/commit/7275c19b174f06bd031f49b33912c1babf29ccb0) Thanks [@dimaMachina](https://github.com/dimaMachina)! - create instance of `new HistoryStore` and `new StorageAPI` only on mount, use function with `useState`
+
+- Updated dependencies [[`21c4409`](https://github.com/graphql/graphiql/commit/21c44096c0c0b23cea955a574d1110cb19ab6405), [`2ad4e75`](https://github.com/graphql/graphiql/commit/2ad4e7505385fefd252b9aa8ea2233cbaeca7f6a)]:
+  - @graphiql/toolkit@0.11.0
+
 ## 0.26.0
 
 ### Minor Changes

packages/codemirror-graphql/src/utils/jump-addon.ts

@@ -46,7 +46,7 @@
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "dependencies": {
-    "@graphiql/toolkit": "^0.10.0",
+    "@graphiql/toolkit": "^0.11.0",
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -55,7 +55,7 @@
     "@types/codemirror": "^5.60.8",
     "clsx": "^1.2.1",
     "codemirror": "^5.65.3",
-    "codemirror-graphql": "^2.1.0",
+    "codemirror-graphql": "^2.1.1",
     "copy-to-clipboard": "^3.2.0",
     "framer-motion": "^10.0.0",
     "get-value": "^3.0.1",

packages/graphiql-react/CHANGELOG.md

@@ -1,12 +1,9 @@
 import { KeyMap } from './types';
+import { isMacOs } from '../utility/is-macos';
 
 export const DEFAULT_EDITOR_THEME = 'graphiql';
 export const DEFAULT_KEY_MAP: KeyMap = 'sublime';
 
-const isMacOs =
-  typeof navigator !== 'undefined' &&
-  navigator.platform.toLowerCase().indexOf('mac') === 0;
-
 export const commonKeys = {
   // Persistent search box in Query Editor
   [isMacOs ? 'Cmd-F' : 'Ctrl-F']: 'findPersistent',

packages/graphiql-react/package.json

@@ -38,7 +38,7 @@
 
   &:not(:focus-within) [role='combobox'] {
     height: 24px;
-    width: 4ch;
+    width: 5ch;
   }
 
   & [role='combobox']:focus {

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

@@ -24,6 +24,7 @@ import { useExplorerContext } from '../context';
 
 import './search.css';
 import { renderType } from './utils';
+import { isMacOs } from '../../utility/is-macos';
 
 export function Search() {
   const { explorerNavStack, push } = useExplorerContext({
@@ -103,7 +104,7 @@ export function Search() {
           onFocus={handleFocus}
           onBlur={handleFocus}
           onChange={event => setSearchValue(event.target.value)}
-          placeholder="⌘ K"
+          placeholder={`${isMacOs ? '⌘' : 'Ctrl'} K`}
           ref={inputRef}
           value={searchValue}
           data-cy="doc-explorer-input"

packages/graphiql-react/src/explorer/components/doc-explorer.css

@@ -71,6 +71,7 @@ export {
 } from './storage';
 export { useTheme } from './theme';
 export { useDragResize } from './utility/resize';
+export { isMacOs } from './utility/is-macos';
 
 export * from './icons';
 export * from './ui';

packages/graphiql-react/src/explorer/components/search.tsx

@@ -0,0 +1,2 @@
+export const isMacOs =
+  typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac');

packages/graphiql-react/src/index.ts

@@ -1,5 +1,15 @@
 # @graphiql/toolkit
 
+## 0.11.0
+
+### Minor Changes
+
+- [#3747](https://github.com/graphql/graphiql/pull/3747) [`21c4409`](https://github.com/graphql/graphiql/commit/21c44096c0c0b23cea955a574d1110cb19ab6405) Thanks [@dimaMachina](https://github.com/dimaMachina)! - do not include `require` statements in ESM build, include `import` in esm and `require` in cjs builds
+
+  make `getWsFetcher`, `createWebsocketsFetcherFromUrl` async
+
+- [#3746](https://github.com/graphql/graphiql/pull/3746) [`2ad4e75`](https://github.com/graphql/graphiql/commit/2ad4e7505385fefd252b9aa8ea2233cbaeca7f6a) Thanks [@dimaMachina](https://github.com/dimaMachina)! - compile with `tsup` instead of `tsc`
+
 ## 0.10.0
 
 ### Minor Changes

packages/graphiql-react/src/utility/is-macos.ts

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/toolkit",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Utility to build a fetcher for GraphiQL",
   "contributors": [
     "Rikki Schulte <[email protected]> (https://rikki.dev)"
@@ -22,7 +22,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "prebuild": "yarn types:check",
-    "types:check": "tsc --noEmit"
+    "types:check": "tsc --noEmit",
+    "test": "vitest run"
   },
   "dependencies": {
     "@n1ru4l/push-pull-async-iterable-iterator": "^3.1.0",

packages/graphiql-toolkit/CHANGELOG.md

@@ -1,34 +1,54 @@
+import { Mock } from 'vitest';
 import { parse, getIntrospectionQuery } from 'graphql';
 import { createGraphiQLFetcher } from '../createFetcher';
 
 import 'isomorphic-fetch';
 
-jest.mock('../lib');
+vi.mock('../lib');
 
-jest.mock('graphql-ws');
+vi.mock('graphql-ws');
 
-jest.mock('subscriptions-transport-ws');
+vi.mock('subscriptions-transport-ws');
 
 import {
-  createWebsocketsFetcherFromUrl,
-  createMultipartFetcher,
-  createSimpleFetcher,
-  createWebsocketsFetcherFromClient,
-  createLegacyWebsocketsFetcher,
+  createWebsocketsFetcherFromUrl as _createWebsocketsFetcherFromUrl,
+  createMultipartFetcher as _createMultipartFetcher,
+  createSimpleFetcher as _createSimpleFetcher,
+  createWebsocketsFetcherFromClient as _createWebsocketsFetcherFromClient,
+  createLegacyWebsocketsFetcher as _createLegacyWebsocketsFetcher,
 } from '../lib';
-import { createClient } from 'graphql-ws';
+import { createClient as _createClient } from 'graphql-ws';
 import { SubscriptionClient } from 'subscriptions-transport-ws';
 
 const serverURL = 'http://localhost:3000/graphql';
 const wssURL = 'ws://localhost:3000/graphql';
 
 const exampleIntrospectionDocument = parse(getIntrospectionQuery());
 
+const createWebsocketsFetcherFromUrl = _createWebsocketsFetcherFromUrl as Mock<
+  typeof _createWebsocketsFetcherFromUrl
+>;
+const createMultipartFetcher = _createMultipartFetcher as Mock<
+  typeof _createMultipartFetcher
+>;
+const createSimpleFetcher = _createSimpleFetcher as Mock<
+  typeof _createSimpleFetcher
+>;
+const createClient = _createClient as Mock<typeof _createClient>;
+const createWebsocketsFetcherFromClient =
+  _createWebsocketsFetcherFromClient as Mock<
+    typeof _createWebsocketsFetcherFromClient
+  >;
+const createLegacyWebsocketsFetcher = _createLegacyWebsocketsFetcher as Mock<
+  typeof _createLegacyWebsocketsFetcher
+>;
+
 describe('createGraphiQLFetcher', () => {
   afterEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
   it('returns fetcher without websocket client by default', () => {
+    // @ts-expect-error
     createWebsocketsFetcherFromUrl.mockReturnValue(true);
     createGraphiQLFetcher({ url: serverURL });
     expect(createWebsocketsFetcherFromUrl.mock.calls).toEqual([]);
@@ -38,6 +58,7 @@ describe('createGraphiQLFetcher', () => {
   });
 
   it('returns simple fetcher for introspection', async () => {
+    // @ts-expect-error
     createSimpleFetcher.mockReturnValue(async () => 'hey!');
     const fetcher = createGraphiQLFetcher({ url: serverURL });
     expect(createWebsocketsFetcherFromUrl.mock.calls).toEqual([]);
@@ -54,6 +75,7 @@ describe('createGraphiQLFetcher', () => {
     expect(res).toEqual('hey!');
   });
   it('returns fetcher without websocket client or multipart', () => {
+    // @ts-expect-error
     createWebsocketsFetcherFromUrl.mockReturnValue(true);
     createGraphiQLFetcher({ url: serverURL, enableIncrementalDelivery: false });
     expect(createWebsocketsFetcherFromUrl.mock.calls).toEqual([]);
@@ -63,6 +85,7 @@ describe('createGraphiQLFetcher', () => {
     ]);
   });
   it('returns fetcher with websocket client', () => {
+    // @ts-expect-error
     createWebsocketsFetcherFromUrl.mockReturnValue('Client1');
 
     const args = {
@@ -77,7 +100,9 @@ describe('createGraphiQLFetcher', () => {
   });
 
   it('returns fetcher with custom wsClient', () => {
+    // @ts-expect-error
     createClient.mockReturnValue('WSClient');
+    // @ts-expect-error
     createWebsocketsFetcherFromUrl.mockReturnValue('CustomWSSFetcher');
 
     const wsClient = createClient({ url: wssURL });
@@ -94,7 +119,9 @@ describe('createGraphiQLFetcher', () => {
   });
 
   it('returns fetcher with custom legacyClient', () => {
+    // @ts-expect-error
     createClient.mockReturnValue('WSClient');
+    // @ts-expect-error
     createLegacyWebsocketsFetcher.mockReturnValue('CustomWSSFetcher');
 
     const legacyClient = new SubscriptionClient(wssURL);