@graphiql/react - npm Package Compare versions

Comparing version 0.27.1-canary-c0342c2d.0 to 0.28.0-canary-0c3c4a96.0

dist/hint.cjs.js

@@ -6,3 +6,7 @@ "use strict";
 codemirror.CodeMirror.registerHelper("hint", "graphql", (editor, options) => {
-  const { schema, externalFragments, autocompleteOptions } = options;
+  const {
+    schema,
+    externalFragments,
+    autocompleteOptions
+  } = options;
   if (!schema) {
@@ -27,4 +31,10 @@ return;
     }),
-    from: { line: cur.line, ch: tokenStart },
-    to: { line: cur.line, ch: token.end }
+    from: {
+      line: cur.line,
+      ch: tokenStart
+    },
+    to: {
+      line: cur.line,
+      ch: token.end
+    }
   };
@@ -31,0 +41,0 @@ if ((results === null || results === void 0 ? void 0 : results.list) && results.list.length > 0) {

dist/hint.cjs2.js

@@ -13,4 +13,10 @@ "use strict";
     list: hints,
-    from: { line: cursor.line, ch: tokenStart },
-    to: { line: cursor.line, ch: token.end }
+    from: {
+      line: cursor.line,
+      ch: tokenStart
+    },
+    to: {
+      line: cursor.line,
+      ch: token.end
+    }
   };
@@ -81,7 +87,14 @@ }
   const state = token.state.kind === "Invalid" ? token.state.prevState : token.state;
-  const { kind, step } = state;
+  const {
+    kind,
+    step
+  } = state;
   if (kind === "Document" && step === 0) {
-    return hintList(cur, token, [{ text: "{" }]);
+    return hintList(cur, token, [{
+      text: "{"
+    }]);
   }
-  const { variableToType } = options;
+  const {
+    variableToType
+  } = options;
   if (!variableToType) {
@@ -109,3 +122,5 @@ return;
     if (namedInputType instanceof graphql.GraphQLInputObjectType) {
-      return hintList(cur, token, [{ text: "{" }]);
+      return hintList(cur, token, [{
+        text: "{"
+      }]);
     }
@@ -121,6 +136,11 @@ if (namedInputType instanceof graphql.GraphQLEnumType) {
     if (namedInputType === graphql.GraphQLBoolean) {
-      return hintList(cur, token, [
-        { text: "true", type: graphql.GraphQLBoolean, description: "Not false." },
-        { text: "false", type: graphql.GraphQLBoolean, description: "Not true." }
-      ]);
+      return hintList(cur, token, [{
+        text: "true",
+        type: graphql.GraphQLBoolean,
+        description: "Not false."
+      }, {
+        text: "false",
+        type: graphql.GraphQLBoolean,
+        description: "Not true."
+      }]);
     }
@@ -127,0 +147,0 @@ }

dist/hint.es.js

@@ -5,3 +5,7 @@ import { C as CodeMirror } from "./codemirror.es.js";
 CodeMirror.registerHelper("hint", "graphql", (editor, options) => {
-  const { schema, externalFragments, autocompleteOptions } = options;
+  const {
+    schema,
+    externalFragments,
+    autocompleteOptions
+  } = options;
   if (!schema) {
@@ -26,4 +30,10 @@ return;
     }),
-    from: { line: cur.line, ch: tokenStart },
-    to: { line: cur.line, ch: token.end }
+    from: {
+      line: cur.line,
+      ch: tokenStart
+    },
+    to: {
+      line: cur.line,
+      ch: token.end
+    }
   };
@@ -30,0 +40,0 @@ if ((results === null || results === void 0 ? void 0 : results.list) && results.list.length > 0) {

dist/hint.es2.js

@@ -12,4 +12,10 @@ import { C as CodeMirror } from "./codemirror.es.js";
     list: hints,
-    from: { line: cursor.line, ch: tokenStart },
-    to: { line: cursor.line, ch: token.end }
+    from: {
+      line: cursor.line,
+      ch: tokenStart
+    },
+    to: {
+      line: cursor.line,
+      ch: token.end
+    }
   };
@@ -80,7 +86,14 @@ }
   const state = token.state.kind === "Invalid" ? token.state.prevState : token.state;
-  const { kind, step } = state;
+  const {
+    kind,
+    step
+  } = state;
   if (kind === "Document" && step === 0) {
-    return hintList(cur, token, [{ text: "{" }]);
+    return hintList(cur, token, [{
+      text: "{"
+    }]);
   }
-  const { variableToType } = options;
+  const {
+    variableToType
+  } = options;
   if (!variableToType) {
@@ -108,3 +121,5 @@ return;
     if (namedInputType instanceof GraphQLInputObjectType) {
-      return hintList(cur, token, [{ text: "{" }]);
+      return hintList(cur, token, [{
+        text: "{"
+      }]);
     }
@@ -120,6 +135,11 @@ if (namedInputType instanceof GraphQLEnumType) {
     if (namedInputType === GraphQLBoolean) {
-      return hintList(cur, token, [
-        { text: "true", type: GraphQLBoolean, description: "Not false." },
-        { text: "false", type: GraphQLBoolean, description: "Not true." }
-      ]);
+      return hintList(cur, token, [{
+        text: "true",
+        type: GraphQLBoolean,
+        description: "Not false."
+      }, {
+        text: "false",
+        type: GraphQLBoolean,
+        description: "Not true."
+      }]);
     }
@@ -126,0 +146,0 @@ }

dist/info-addon.cjs.js

@@ -18,7 +18,11 @@ "use strict";
   return {
-    options: options instanceof Function ? { render: options } : options === true ? {} : options
+    options: options instanceof Function ? {
+      render: options
+    } : options === true ? {} : options
   };
 }
 function getHoverTime(cm) {
-  const { options } = cm.state.info;
+  const {
+    options
+  } = cm.state.info;
   return (options === null || options === void 0 ? void 0 : options.hoverTime) || 500;
@@ -63,3 +67,5 @@ }
   const state = cm.state.info;
-  const { options } = state;
+  const {
+    options
+  } = state;
   const render = options.render || cm.getHelper(pos, "info");
@@ -66,0 +72,0 @@ if (render) {

dist/info-addon.es.js

@@ -17,7 +17,11 @@ import { C as CodeMirror } from "./codemirror.es.js";
   return {
-    options: options instanceof Function ? { render: options } : options === true ? {} : options
+    options: options instanceof Function ? {
+      render: options
+    } : options === true ? {} : options
   };
 }
 function getHoverTime(cm) {
-  const { options } = cm.state.info;
+  const {
+    options
+  } = cm.state.info;
   return (options === null || options === void 0 ? void 0 : options.hoverTime) || 500;
@@ -62,3 +66,5 @@ }
   const state = cm.state.info;
-  const { options } = state;
+  const {
+    options
+  } = state;
   const render = options.render || cm.getHelper(pos, "info");
@@ -65,0 +71,0 @@ if (render) {

dist/info.cjs.js

@@ -11,3 +11,6 @@ "use strict";
   }
-  const { kind, step } = token.state;
+  const {
+    kind,
+    step
+  } = token.state;
   const typeInfo = SchemaReference.getTypeInfo(options.schema, token.state);
@@ -115,3 +118,5 @@ if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef || kind === "ObjectField" && step === 0 && typeInfo.fieldDef) {
 function renderDescription(into, options, def) {
-  const { description } = def;
+  const {
+    description
+  } = def;
   if (description) {
@@ -149,5 +154,9 @@ const descriptionDiv = document.createElement("div");
 }
-function text(into, content, className = "", options = { onClick: null }, ref = null) {
+function text(into, content, className = "", options = {
+  onClick: null
+}, ref = null) {
   if (className) {
-    const { onClick } = options;
+    const {
+      onClick
+    } = options;
     let node;
@@ -154,0 +163,0 @@ if (onClick) {

dist/info.es.js

@@ -10,3 +10,6 @@ import { GraphQLNonNull, GraphQLList } from "graphql";
   }
-  const { kind, step } = token.state;
+  const {
+    kind,
+    step
+  } = token.state;
   const typeInfo = getTypeInfo(options.schema, token.state);
@@ -114,3 +117,5 @@ if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef || kind === "ObjectField" && step === 0 && typeInfo.fieldDef) {
 function renderDescription(into, options, def) {
-  const { description } = def;
+  const {
+    description
+  } = def;
   if (description) {
@@ -148,5 +153,9 @@ const descriptionDiv = document.createElement("div");
 }
-function text(into, content, className = "", options = { onClick: null }, ref = null) {
+function text(into, content, className = "", options = {
+  onClick: null
+}, ref = null) {
   if (className) {
-    const { onClick } = options;
+    const {
+      onClick
+    } = options;
     let node;
@@ -153,0 +162,0 @@ if (onClick) {

dist/jump.cjs.js

@@ -73,3 +73,6 @@ "use strict";
   const onClick = (clickEvent) => {
-    const { destination, options } = cm.state.jump;
+    const {
+      destination,
+      options
+    } = cm.state.jump;
     if (destination) {
@@ -96,3 +99,6 @@ options.onClick(destination, clickEvent);
   }
-  const { cursor, options } = cm.state.jump;
+  const {
+    cursor,
+    options
+  } = cm.state.jump;
   const pos = cm.coordsChar(cursor);
@@ -104,3 +110,11 @@ const token = cm.getTokenAt(pos, true);
     if (destination) {
-      const marker = cm.markText({ line: pos.line, ch: token.start }, { line: pos.line, ch: token.end }, { className: "CodeMirror-jump-token" });
+      const marker = cm.markText({
+        line: pos.line,
+        ch: token.start
+      }, {
+        line: pos.line,
+        ch: token.end
+      }, {
+        className: "CodeMirror-jump-token"
+      });
       cm.state.jump.marker = marker;
@@ -112,3 +126,5 @@ cm.state.jump.destination = destination;
 function disableJumpMode(cm) {
-  const { marker } = cm.state.jump;
+  const {
+    marker
+  } = cm.state.jump;
   cm.state.jump.marker = null;
@@ -122,4 +138,9 @@ cm.state.jump.destination = null;
   }
-  const { state } = token;
-  const { kind, step } = state;
+  const {
+    state
+  } = token;
+  const {
+    kind,
+    step
+  } = state;
   const typeInfo = SchemaReference.getTypeInfo(options.schema, state);
@@ -126,0 +147,0 @@ if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef) {

dist/jump.es.js

@@ -72,3 +72,6 @@ import { C as CodeMirror } from "./codemirror.es.js";
   const onClick = (clickEvent) => {
-    const { destination, options } = cm.state.jump;
+    const {
+      destination,
+      options
+    } = cm.state.jump;
     if (destination) {
@@ -95,3 +98,6 @@ options.onClick(destination, clickEvent);
   }
-  const { cursor, options } = cm.state.jump;
+  const {
+    cursor,
+    options
+  } = cm.state.jump;
   const pos = cm.coordsChar(cursor);
@@ -103,3 +109,11 @@ const token = cm.getTokenAt(pos, true);
     if (destination) {
-      const marker = cm.markText({ line: pos.line, ch: token.start }, { line: pos.line, ch: token.end }, { className: "CodeMirror-jump-token" });
+      const marker = cm.markText({
+        line: pos.line,
+        ch: token.start
+      }, {
+        line: pos.line,
+        ch: token.end
+      }, {
+        className: "CodeMirror-jump-token"
+      });
       cm.state.jump.marker = marker;
@@ -111,3 +125,5 @@ cm.state.jump.destination = destination;
 function disableJumpMode(cm) {
-  const { marker } = cm.state.jump;
+  const {
+    marker
+  } = cm.state.jump;
   cm.state.jump.marker = null;
@@ -121,4 +137,9 @@ cm.state.jump.destination = null;
   }
-  const { state } = token;
-  const { kind, step } = state;
+  const {
+    state
+  } = token;
+  const {
+    kind,
+    step
+  } = state;
   const typeInfo = getTypeInfo(options.schema, state);
@@ -125,0 +146,0 @@ if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef) {

dist/lint.cjs2.js

@@ -11,3 +11,7 @@ "use strict";
 codemirror.CodeMirror.registerHelper("lint", "graphql", (text, options) => {
-  const { schema, validationRules, externalFragments } = options;
+  const {
+    schema,
+    validationRules,
+    externalFragments
+  } = options;
   const rawResults = graphqlLanguageService.getDiagnostics(text, schema, validationRules, void 0, externalFragments);
@@ -14,0 +18,0 @@ const results = rawResults.map((error) => ({

dist/lint.cjs3.js

@@ -86,3 +86,8 @@ "use strict";
 function curToken() {
-  return { kind, start, end, value: JSON.parse(string.slice(start, end)) };
+  return {
+    kind,
+    start,
+    end,
+    value: JSON.parse(string.slice(start, end))
+  };
 }
@@ -112,3 +117,6 @@ function expect(str) {
 function syntaxError(message) {
-  return new JSONSyntaxError(message, { start, end });
+  return new JSONSyntaxError(message, {
+    start,
+    end
+  });
 }
@@ -269,3 +277,5 @@ function skip(k) {
   }
-  const { variableToType } = options;
+  const {
+    variableToType
+  } = options;
   if (!variableToType) {
@@ -326,8 +336,3 @@ return [];
       if (!inputField) {
-        return [
-          [
-            member.key,
-            `Type "${type}" does not have a field "${fieldName}".`
-          ]
-        ];
+        return [[member.key, `Type "${type}" does not have a field "${fieldName}".`]];
       }
@@ -340,6 +345,3 @@ const fieldType = inputField ? inputField.type : void 0;
       if (!providedFields[fieldName] && field.type instanceof graphql.GraphQLNonNull && !field.defaultValue) {
-        fieldErrors.push([
-          valueAST,
-          `Object of type "${type}" is missing required field "${fieldName}".`
-        ]);
+        fieldErrors.push([valueAST, `Object of type "${type}" is missing required field "${fieldName}".`]);
       }
@@ -346,0 +348,0 @@ }

dist/lint.es2.js

@@ -10,3 +10,7 @@ import { C as CodeMirror } from "./codemirror.es.js";
 CodeMirror.registerHelper("lint", "graphql", (text, options) => {
-  const { schema, validationRules, externalFragments } = options;
+  const {
+    schema,
+    validationRules,
+    externalFragments
+  } = options;
   const rawResults = getDiagnostics(text, schema, validationRules, void 0, externalFragments);
@@ -13,0 +17,0 @@ const results = rawResults.map((error) => ({

dist/lint.es3.js

@@ -85,3 +85,8 @@ import { C as CodeMirror } from "./codemirror.es.js";
 function curToken() {
-  return { kind, start, end, value: JSON.parse(string.slice(start, end)) };
+  return {
+    kind,
+    start,
+    end,
+    value: JSON.parse(string.slice(start, end))
+  };
 }
@@ -111,3 +116,6 @@ function expect(str) {
 function syntaxError(message) {
-  return new JSONSyntaxError(message, { start, end });
+  return new JSONSyntaxError(message, {
+    start,
+    end
+  });
 }
@@ -268,3 +276,5 @@ function skip(k) {
   }
-  const { variableToType } = options;
+  const {
+    variableToType
+  } = options;
   if (!variableToType) {
@@ -325,8 +335,3 @@ return [];
       if (!inputField) {
-        return [
-          [
-            member.key,
-            `Type "${type}" does not have a field "${fieldName}".`
-          ]
-        ];
+        return [[member.key, `Type "${type}" does not have a field "${fieldName}".`]];
       }
@@ -339,6 +344,3 @@ const fieldType = inputField ? inputField.type : void 0;
       if (!providedFields[fieldName] && field.type instanceof GraphQLNonNull && !field.defaultValue) {
-        fieldErrors.push([
-          valueAST,
-          `Object of type "${type}" is missing required field "${fieldName}".`
-        ]);
+        fieldErrors.push([valueAST, `Object of type "${type}" is missing required field "${fieldName}".`]);
       }
@@ -345,0 +347,0 @@ }

dist/mode-indent.cjs.js

 "use strict";
 function indent(state, textAfter) {
   var _a, _b;
-  const { levels, indentLevel } = state;
+  const {
+    levels,
+    indentLevel
+  } = state;
   const level = !levels || levels.length === 0 ? indentLevel : levels.at(-1) - (((_a = this.electricInput) === null || _a === void 0 ? void 0 : _a.test(textAfter)) ? 1 : 0);
@@ -6,0 +9,0 @@ return (level || 0) * (((_b = this.config) === null || _b === void 0 ? void 0 : _b.indentUnit) || 0);

dist/mode-indent.es.js

 function indent(state, textAfter) {
   var _a, _b;
-  const { levels, indentLevel } = state;
+  const {
+    levels,
+    indentLevel
+  } = state;
   const level = !levels || levels.length === 0 ? indentLevel : levels.at(-1) - (((_a = this.electricInput) === null || _a === void 0 ? void 0 : _a.test(textAfter)) ? 1 : 0);
@@ -5,0 +8,0 @@ return (level || 0) * (((_b = this.config) === null || _b === void 0 ? void 0 : _b.indentUnit) || 0);

dist/mode.cjs.js

@@ -10,3 +10,5 @@ "use strict";
     parseRules: graphqlLanguageService.ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -13,0 +15,0 @@ return {

dist/mode.cjs2.js

@@ -10,3 +10,5 @@ "use strict";
     parseRules: ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -13,0 +15,0 @@ return {

dist/mode.cjs3.js

@@ -10,3 +10,5 @@ "use strict";
     parseRules: ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -13,0 +15,0 @@ return {

dist/mode.es.js

@@ -9,3 +9,5 @@ import { C as CodeMirror } from "./codemirror.es.js";
     parseRules: ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -12,0 +14,0 @@ return {

dist/mode.es2.js

@@ -9,3 +9,5 @@ import { C as CodeMirror } from "./codemirror.es.js";
     parseRules: ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -12,0 +14,0 @@ return {

dist/mode.es3.js

@@ -9,3 +9,5 @@ import { C as CodeMirror } from "./codemirror.es.js";
     parseRules: ParseRules,
-    editorConfig: { tabSize: config.tabSize }
+    editorConfig: {
+      tabSize: config.tabSize
+    }
   });
@@ -12,0 +14,0 @@ return {

package.json

 {
   "name": "@graphiql/react",
-  "version": "0.27.1-canary-c0342c2d.0",
+  "version": "0.28.0-canary-0c3c4a96.0",
   "repository": {
@@ -51,3 +51,4 @@ "type": "git",
   "dependencies": {
-    "@graphiql/toolkit": "^0.11.1-canary-c0342c2d.0",
+    "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
+    "@graphiql/toolkit": "^0.11.0",
     "@headlessui/react": "^1.7.15",
@@ -70,2 +71,3 @@ "@radix-ui/react-dialog": "^1.0.4",
   "devDependencies": {
+    "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
     "@babel/helper-string-parser": "^7.19.4",
@@ -72,0 +74,0 @@ "@testing-library/react": "14.0.0",

src/editor/common.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import { KeyMap } from './types';
@@ -2,0 +4,0 @@ import { isMacOs } from '../utility/is-macos';

src/editor/completion.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import type { Editor, EditorChange } from 'codemirror';
@@ -2,0 +4,0 @@ import type { IHint } from 'codemirror-graphql/hint';

src/editor/components/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 export { HeaderEditor } from './header-editor';
@@ -2,0 +4,0 @@ export { ImagePreview } from './image-preview';

src/editor/header-editor.ts

@@ -28,2 +28,11 @@ import { useEffect, useRef } from 'react';
 
+// To make react-compiler happy, otherwise complains about using dynamic imports in Component
+function importCodeMirrorImports() {
+  return importCodeMirror([
+    // @ts-expect-error
+    import('codemirror/mode/javascript/javascript'),
+  ]);
+}
+const _useHeaderEditor = useHeaderEditor;
+
 export function useHeaderEditor(
@@ -45,7 +54,7 @@ {
     nonNull: true,
-    caller: caller || useHeaderEditor,
+    caller: caller || _useHeaderEditor,
   });
   const executionContext = useExecutionContext();
-  const merge = useMergeQuery({ caller: caller || useHeaderEditor });
-  const prettify = usePrettifyEditors({ caller: caller || useHeaderEditor });
+  const merge = useMergeQuery({ caller: caller || _useHeaderEditor });
+  const prettify = usePrettifyEditors({ caller: caller || _useHeaderEditor });
   const ref = useRef<HTMLDivElement>(null);
@@ -56,6 +65,3 @@
 
-    void importCodeMirror([
-      // @ts-expect-error
-      import('codemirror/mode/javascript/javascript'),
-    ]).then(CodeMirror => {
+    void importCodeMirrorImports().then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
@@ -125,3 +131,3 @@ if (!isActive) {
     'headers',
-    useHeaderEditor,
+    _useHeaderEditor,
   );
@@ -128,0 +134,0 @@

src/editor/hooks.ts

@@ -6,3 +6,3 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 import { parse, print } from 'graphql';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
@@ -20,3 +20,3 @@ import { useExplorerContext } from '../explorer';
   editor: CodeMirrorEditor | null,
-  value: string | undefined,
+  value?: string,
 ) {
@@ -70,3 +70,3 @@ useEffect(() => {
       editorInstance: CodeMirrorEditor,
-      changeObj: EditorChange | undefined,
+      changeObj?: EditorChange,
     ) => {
@@ -136,3 +136,3 @@ // When we signal a change manually without actually changing anything
   keys: string[],
-  callback: EmptyCallback | undefined,
+  callback?: EmptyCallback,
 ) {
@@ -170,8 +170,14 @@ useEffect(() => {
 
+// To make react-compiler happy, otherwise complains about - Hooks may not be referenced as normal values
+const _useCopyQuery = useCopyQuery;
+const _useMergeQuery = useMergeQuery;
+const _usePrettifyEditors = usePrettifyEditors;
+const _useAutoCompleteLeafs = useAutoCompleteLeafs;
+
 export function useCopyQuery({ caller, onCopyQuery }: UseCopyQueryArgs = {}) {
   const { queryEditor } = useEditorContext({
     nonNull: true,
-    caller: caller || useCopyQuery,
+    caller: caller || _useCopyQuery,
   });
-  return useCallback(() => {
+  return () => {
     if (!queryEditor) {
@@ -185,3 +191,3 @@ return;
     onCopyQuery?.(query);
-  }, [queryEditor, onCopyQuery]);
+  };
 }
@@ -199,6 +205,9 @@
     nonNull: true,
-    caller: caller || useMergeQuery,
+    caller: caller || _useMergeQuery,
   });
-  const { schema } = useSchemaContext({ nonNull: true, caller: useMergeQuery });
-  return useCallback(() => {
+  const { schema } = useSchemaContext({
+    nonNull: true,
+    caller: _useMergeQuery,
+  });
+  return () => {
     const documentAST = queryEditor?.documentAST;
@@ -211,3 +220,3 @@ const query = queryEditor?.getValue();
     queryEditor.setValue(print(mergeAst(documentAST, schema)));
-  }, [queryEditor, schema]);
+  };
 }
@@ -225,5 +234,5 @@
     nonNull: true,
-    caller: caller || usePrettifyEditors,
+    caller: caller || _usePrettifyEditors,
   });
-  return useCallback(() => {
+  return () => {
     if (variableEditor) {
@@ -270,3 +279,3 @@ const variableEditorContent = variableEditor.getValue();
     }
-  }, [queryEditor, variableEditor, headerEditor]);
+  };
 }
@@ -293,9 +302,9 @@
     nonNull: true,
-    caller: caller || useAutoCompleteLeafs,
+    caller: caller || _useAutoCompleteLeafs,
   });
   const { queryEditor } = useEditorContext({
     nonNull: true,
-    caller: caller || useAutoCompleteLeafs,
+    caller: caller || _useAutoCompleteLeafs,
   });
-  return useCallback(() => {
+  return () => {
     if (!queryEditor) {
@@ -344,10 +353,10 @@ return;
     return result;
-  }, [getDefaultFieldNames, queryEditor, schema]);
+  };
 }
 
-export type InitialState = string | (() => string);
-
 // https://react.dev/learn/you-might-not-need-an-effect
 
-export const useEditorState = (editor: 'query' | 'variable' | 'header') => {
+export const useEditorState = (
+  editor: 'query' | 'variable' | 'header',
+): [string, (val: string) => void] => {
   const context = useEditorContext({
@@ -364,10 +373,4 @@ nonNull: true,
 
-  const handleEditorValue = useCallback(
-    (value: string) => editorInstance?.setValue(value),
-    [editorInstance],
-  );
-  return useMemo<[string, (val: string) => void]>(
-    () => [valueString, handleEditorValue],
-    [valueString, handleEditorValue],
-  );
+  const handleEditorValue = (value: string) => editorInstance?.setValue(value);
+  return [valueString, handleEditorValue];
 };
@@ -460,18 +463,15 @@
 
-  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],
-  );
+  const setState = (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);
+    }
+  };
 
-  return useMemo(() => [state, setState], [state, setState]);
+  return [state, setState];
 }

src/editor/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 export {
@@ -2,0 +4,0 @@ HeaderEditor,

src/editor/query-editor.ts

@@ -12,10 +12,5 @@ import { getSelectedOperationName } from '@graphiql/toolkit';
   GraphQLDocumentMode,
+  OperationFacts,
 } from 'graphql-language-service';
-import {
-  MutableRefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import { MutableRefObject, useEffect, useRef } from 'react';
 
@@ -71,2 +66,53 @@ import { useExecutionContext } from '../execution';
 
+// To make react-compiler happy, otherwise complains about using dynamic imports in Component
+function importCodeMirrorImports() {
+  return importCodeMirror([
+    import('codemirror/addon/comment/comment'),
+    import('codemirror/addon/search/search'),
+    import('codemirror-graphql/esm/hint'),
+    import('codemirror-graphql/esm/lint'),
+    import('codemirror-graphql/esm/info'),
+    import('codemirror-graphql/esm/jump'),
+    import('codemirror-graphql/esm/mode'),
+  ]);
+}
+const _useQueryEditor = useQueryEditor;
+
+// To make react-compiler happy since we mutate variableEditor
+function updateVariableEditor(
+  variableEditor: CodeMirrorEditor,
+  operationFacts?: OperationFacts,
+) {
+  variableEditor.state.lint.linterOptions.variableToType =
+    operationFacts?.variableToType;
+  variableEditor.options.lint.variableToType = operationFacts?.variableToType;
+  variableEditor.options.hintOptions.variableToType =
+    operationFacts?.variableToType;
+}
+function updateEditorSchema(
+  editor: CodeMirrorEditor,
+  schema: GraphQLSchema | null,
+) {
+  editor.state.lint.linterOptions.schema = schema;
+  editor.options.lint.schema = schema;
+  editor.options.hintOptions.schema = schema;
+  editor.options.info.schema = schema;
+  editor.options.jump.schema = schema;
+}
+function updateEditorValidationRules(
+  editor: CodeMirrorEditor,
+  validationRules: ValidationRule[] | null,
+) {
+  editor.state.lint.linterOptions.validationRules = validationRules;
+  editor.options.lint.validationRules = validationRules;
+}
+function updateEditorExternalFragments(
+  editor: CodeMirrorEditor,
+  externalFragmentList: FragmentDefinitionNode[],
+) {
+  editor.state.lint.linterOptions.externalFragments = externalFragmentList;
+  editor.options.lint.externalFragments = externalFragmentList;
+  editor.options.hintOptions.externalFragments = externalFragmentList;
+}
+
 export function useQueryEditor(
@@ -85,3 +131,3 @@ {
     nonNull: true,
-    caller: caller || useQueryEditor,
+    caller: caller || _useQueryEditor,
   });
@@ -99,3 +145,3 @@ const {
     nonNull: true,
-    caller: caller || useQueryEditor,
+    caller: caller || _useQueryEditor,
   });
@@ -106,5 +152,5 @@ const executionContext = useExecutionContext();
   const plugin = usePluginContext();
-  const copy = useCopyQuery({ caller: caller || useQueryEditor, onCopyQuery });
-  const merge = useMergeQuery({ caller: caller || useQueryEditor });
-  const prettify = usePrettifyEditors({ caller: caller || useQueryEditor });
+  const copy = useCopyQuery({ caller: caller || _useQueryEditor, onCopyQuery });
+  const merge = useMergeQuery({ caller: caller || _useQueryEditor });
+  const prettify = usePrettifyEditors({ caller: caller || _useQueryEditor });
   const ref = useRef<HTMLDivElement>(null);
@@ -151,11 +197,3 @@ const codeMirrorRef = useRef<CodeMirrorType>();
 
-    void importCodeMirror([
-      import('codemirror/addon/comment/comment'),
-      import('codemirror/addon/search/search'),
-      import('codemirror-graphql/esm/hint'),
-      import('codemirror-graphql/esm/lint'),
-      import('codemirror-graphql/esm/info'),
-      import('codemirror-graphql/esm/jump'),
-      import('codemirror-graphql/esm/mode'),
-    ]).then(CodeMirror => {
+    void importCodeMirrorImports().then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
@@ -326,8 +364,3 @@ if (!isActive) {
       if (variableEditor) {
-        variableEditor.state.lint.linterOptions.variableToType =
-          operationFacts?.variableToType;
-        variableEditor.options.lint.variableToType =
-          operationFacts?.variableToType;
-        variableEditor.options.hintOptions.variableToType =
-          operationFacts?.variableToType;
+        updateVariableEditor(variableEditor, operationFacts);
         codeMirrorRef.current?.signal(variableEditor, 'change', variableEditor);
@@ -397,6 +430,6 @@ }
 
-  useCompletion(queryEditor, onClickReference || null, useQueryEditor);
+  useCompletion(queryEditor, onClickReference || null, _useQueryEditor);
 
   const run = executionContext?.run;
-  const runAtCursor = useCallback(() => {
+  const runAtCursor = () => {
     if (
@@ -431,3 +464,3 @@ !run ||
     run();
-  }, [queryEditor, run, setOperationName]);
+  };
 
@@ -461,9 +494,4 @@ useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], runAtCursor);
     const didChange = editor.options.lint.schema !== schema;
+    updateEditorSchema(editor, schema);
 
-    editor.state.lint.linterOptions.schema = schema;
-    editor.options.lint.schema = schema;
-    editor.options.hintOptions.schema = schema;
-    editor.options.info.schema = schema;
-    editor.options.jump.schema = schema;
-
     if (didChange && codeMirrorRef.current) {
@@ -486,6 +514,4 @@ codeMirrorRef.current.signal(editor, 'change', editor);
     const didChange = editor.options.lint.validationRules !== validationRules;
+    updateEditorValidationRules(editor, validationRules);
 
-    editor.state.lint.linterOptions.validationRules = validationRules;
-    editor.options.lint.validationRules = validationRules;
-
     if (didChange && codeMirrorRef.current) {
@@ -502,6 +528,3 @@ codeMirrorRef.current.signal(editor, 'change', editor);
 ) {
-  const externalFragmentList = useMemo(
-    () => [...externalFragments.values()],
-    [externalFragments],
-  );
+  const externalFragmentList = [...externalFragments.values()];
 
@@ -515,7 +538,4 @@ useEffect(() => {
       editor.options.lint.externalFragments !== externalFragmentList;
+    updateEditorExternalFragments(editor, externalFragmentList);
 
-    editor.state.lint.linterOptions.externalFragments = externalFragmentList;
-    editor.options.lint.externalFragments = externalFragmentList;
-    editor.options.hintOptions.externalFragments = externalFragmentList;
-
     if (didChange && codeMirrorRef.current) {
@@ -522,0 +542,0 @@ codeMirrorRef.current.signal(editor, 'change', editor);

src/editor/tabs.ts

@@ -0,2 +1,5 @@
+'use no memo'; // can't figure why it isn't optimized
+
 import { StorageAPI } from '@graphiql/toolkit';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports -- fixme
 import { useCallback, useMemo } from 'react';
@@ -3,0 +6,0 @@

src/editor/variable-editor.ts

@@ -36,2 +36,14 @@ import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 
+// To make react-compiler happy, otherwise complains about using dynamic imports in Component
+function importCodeMirrorImports() {
+  return importCodeMirror([
+    import('codemirror-graphql/esm/variables/hint'),
+    import('codemirror-graphql/esm/variables/lint'),
+    import('codemirror-graphql/esm/variables/mode'),
+  ]);
+}
+
+// To make react-compiler happy, otherwise complains about - Hooks may not be referenced as normal values
+const _useVariableEditor = useVariableEditor;
+
 export function useVariableEditor(
@@ -50,7 +62,7 @@ {
       nonNull: true,
-      caller: caller || useVariableEditor,
+      caller: caller || _useVariableEditor,
     });
   const executionContext = useExecutionContext();
-  const merge = useMergeQuery({ caller: caller || useVariableEditor });
-  const prettify = usePrettifyEditors({ caller: caller || useVariableEditor });
+  const merge = useMergeQuery({ caller: caller || _useVariableEditor });
+  const prettify = usePrettifyEditors({ caller: caller || _useVariableEditor });
   const ref = useRef<HTMLDivElement>(null);
@@ -62,7 +74,3 @@ const codeMirrorRef = useRef<CodeMirrorType>();
 
-    void importCodeMirror([
-      import('codemirror-graphql/esm/variables/hint'),
-      import('codemirror-graphql/esm/variables/lint'),
-      import('codemirror-graphql/esm/variables/mode'),
-    ]).then(CodeMirror => {
+    void importCodeMirrorImports().then(CodeMirror => {
       // Don't continue if the effect has already been cleaned up
@@ -145,6 +153,6 @@ if (!isActive) {
     'variables',
-    useVariableEditor,
+    _useVariableEditor,
   );
 
-  useCompletion(variableEditor, onClickReference || null, useVariableEditor);
+  useCompletion(variableEditor, onClickReference || null, _useVariableEditor);
 
@@ -151,0 +159,0 @@ useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);

src/editor/whitespace.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 // Unicode whitespace characters that break the interface.
@@ -2,0 +4,0 @@ export const invalidCharacters = Array.from({ length: 11 }, (_, i) => {

src/explorer/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 export { Argument } from './components/argument';
@@ -2,0 +4,0 @@ export { DefaultValue } from './components/default-value';

src/history/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 export { History } from './components';
@@ -2,0 +4,0 @@ export {

src/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import './style/root.css';
@@ -2,0 +4,0 @@

src/markdown.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import MarkdownIt from 'markdown-it';
@@ -2,0 +4,0 @@

src/theme.ts

@@ -1,2 +0,2 @@
-import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { useStorageContext } from './storage';
@@ -44,13 +44,10 @@
 
-  const setTheme = useCallback(
-    (newTheme: Theme) => {
-      storageContext?.set(STORAGE_KEY, newTheme || '');
-      setThemeInternal(newTheme);
-    },
-    [storageContext],
-  );
+  const setTheme = (newTheme: Theme) => {
+    storageContext?.set(STORAGE_KEY, newTheme || '');
+    setThemeInternal(newTheme);
+  };
 
-  return useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+  return { theme, setTheme };
 }
 
 const STORAGE_KEY = 'theme';

src/toolbar/index.ts

@@ -0,3 +1,5 @@
+'use no memo';
+
 export * from './button';
 export * from './execute';
 export * from './menu';

src/ui/index.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 export * from './button';
@@ -2,0 +4,0 @@ export * from './button-group';

src/utility/component-group.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import { JSXElementConstructor } from 'react';
@@ -2,0 +4,0 @@

src/utility/context.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 import { Context, createContext, useContext } from 'react';
@@ -2,0 +4,0 @@

src/utility/debounce.ts

@@ -0,1 +1,3 @@
+'use no memo';
+
 /**
@@ -2,0 +4,0 @@ * Provided a duration and a function, returns a new function which is called

src/utility/is-macos.ts

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

src/utility/resize.ts

@@ -1,9 +0,2 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
@@ -63,11 +56,7 @@ import { useStorageContext } from '../storage';
 
-  const store = useMemo(
-    () =>
-      debounce(500, (value: string) => {
-        if (storageKey) {
-          storage?.set(storageKey, value);
-        }
-      }),
-    [storage, storageKey],
-  );
+  const store = debounce(500, (value: string) => {
+    if (storageKey) {
+      storage?.set(storageKey, value);
+    }
+  });
 
@@ -87,11 +76,8 @@ const [hiddenElement, setHiddenElement] = useState<ResizableElement | null>(
 
-  const setHiddenElementWithCallback = useCallback(
-    (element: ResizableElement | null) => {
-      if (element !== hiddenElement) {
-        setHiddenElement(element);
-        onHiddenElementChange?.(element);
-      }
-    },
-    [hiddenElement, onHiddenElementChange],
-  );
+  const setHiddenElementWithCallback = (element: ResizableElement | null) => {
+    if (element !== hiddenElement) {
+      setHiddenElement(element);
+      onHiddenElementChange?.(element);
+    }
+  };
 
@@ -129,31 +115,34 @@ const firstRef = useRef<HTMLDivElement>(null);
 
-  const hide = useCallback((resizableElement: ResizableElement) => {
-    const element =
-      resizableElement === 'first' ? firstRef.current : secondRef.current;
-    if (!element) {
-      return;
-    }
+  /**
+   * Hide and show items when state changes
+   */
+  useLayoutEffect(() => {
+    const hide = (resizableElement: ResizableElement) => {
+      const element =
+        resizableElement === 'first' ? firstRef.current : secondRef.current;
+      if (!element) {
+        return;
+      }
 
-    // We hide elements off screen because of codemirror. If the page is loaded
-    // and the codemirror container would have zero width, the layout isn't
-    // instant pretty. By always giving the editor some width we avoid any
-    // layout shifts when the editor reappears.
-    element.style.left = '-1000px';
-    element.style.position = 'absolute';
-    element.style.opacity = '0';
-    element.style.height = '500px';
-    element.style.width = '500px';
+      // We hide elements off screen because of codemirror. If the page is loaded
+      // and the codemirror container would have zero width, the layout isn't
+      // instant pretty. By always giving the editor some width we avoid any
+      // layout shifts when the editor reappears.
+      element.style.left = '-1000px';
+      element.style.position = 'absolute';
+      element.style.opacity = '0';
+      element.style.height = '500px';
+      element.style.width = '500px';
 
-    // Make sure that the flex value of the first item is at least equal to one
-    // so that the entire space of the parent element is filled up
-    if (firstRef.current) {
-      const flex = parseFloat(firstRef.current.style.flex);
-      if (!Number.isFinite(flex) || flex < 1) {
-        firstRef.current.style.flex = '1';
+      // Make sure that the flex value of the first item is at least equal to one
+      // so that the entire space of the parent element is filled up
+      if (firstRef.current) {
+        const flex = parseFloat(firstRef.current.style.flex);
+        if (!Number.isFinite(flex) || flex < 1) {
+          firstRef.current.style.flex = '1';
+        }
       }
-    }
-  }, []);
+    };
 
-  const show = useCallback(
-    (resizableElement: ResizableElement) => {
+    const show = (resizableElement: ResizableElement) => {
       const element =
@@ -181,10 +170,3 @@ resizableElement === 'first' ? firstRef.current : secondRef.current;
       }
-    },
-    [storage, storageKey],
-  );
-
-  /**
-   * Hide and show items when state changes
-   */
-  useLayoutEffect(() => {
+    };
     if (hiddenElement === 'first') {
@@ -200,3 +182,3 @@ hide('first');
     }
-  }, [hiddenElement, hide, show]);
+  }, [hiddenElement, storage, storageKey]);
 
@@ -293,12 +275,9 @@ useEffect(() => {
 
-  return useMemo(
-    () => ({
-      dragBarRef,
-      hiddenElement,
-      firstRef,
-      setHiddenElement,
-      secondRef,
-    }),
-    [hiddenElement, setHiddenElement],
-  );
+  return {
+    dragBarRef,
+    hiddenElement,
+    firstRef,
+    setHiddenElement,
+    secondRef,
+  };
 }
@@ -305,0 +284,0 @@

types/editor/hooks.d.ts

@@ -5,3 +5,3 @@ import { GetDefaultFieldNamesFn } from '@graphiql/toolkit';
 import { CodeMirrorEditor } from './types';
-export declare function useSynchronizeValue(editor: CodeMirrorEditor | null, value: string | undefined): void;
+export declare function useSynchronizeValue(editor: CodeMirrorEditor | null, value?: string): void;
 export declare function useSynchronizeOption<K extends keyof EditorConfiguration>(editor: CodeMirrorEditor | null, option: K, value: EditorConfiguration[K]): void;
@@ -11,3 +11,3 @@ export declare function useChangeHandler(editor: CodeMirrorEditor | null, callback: ((value: string) => void) | undefined, storageKey: string | null, tabProperty: 'variables' | 'headers', caller: Function): void;
 declare type EmptyCallback = () => void;
-export declare function useKeyMap(editor: CodeMirrorEditor | null, keys: string[], callback: EmptyCallback | undefined): void;
+export declare function useKeyMap(editor: CodeMirrorEditor | null, keys: string[], callback?: EmptyCallback): void;
 export declare type UseCopyQueryArgs = {
@@ -53,3 +53,2 @@ /**
 export declare function useAutoCompleteLeafs({ getDefaultFieldNames, caller, }?: UseAutoCompleteLeafsArgs): () => string | undefined;
-export declare type InitialState = string | (() => string);
 export declare const useEditorState: (editor: 'query' | 'variable' | 'header') => [string, (val: string) => void];
@@ -56,0 +55,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5505577

increased by6.3%

Lines of code

61938

increased by11.42%

Worsened metrics

Dependency count

20

increased by5.26%

Dev dependency count

14

increased by7.69%

Dependency changes

• + Addedreact-compiler-runtime@19.0.0-beta-37ed2a7-20241206

• + Addedreact-compiler-runtime@19.0.0-beta-37ed2a7-20241206(transitive)

• Updated@graphiql/toolkit@^0.11.0