@graphiql/react - npm Package Compare versions

Comparing version 0.6.0-canary-e5dcaa31.0 to 0.6.0-canary-e71a81a4.0

dist/graphiql-react.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.Argument=e.Argument;exports.ArgumentIcon=e.ArgumentIcon;exports.Button=e.Button;exports.ButtonGroup=e.ButtonGroup;exports.ChevronDownIcon=e.ChevronDownIcon;exports.ChevronLeftIcon=e.ChevronLeftIcon;exports.ChevronUpIcon=e.ChevronUpIcon;exports.CloseIcon=e.CloseIcon;exports.CopyIcon=e.CopyIcon;exports.DefaultValue=e.DefaultValue;exports.DeprecatedArgumentIcon=e.DeprecatedArgumentIcon;exports.DeprecatedFieldIcon=e.DeprecatedFieldIcon;exports.Directive=e.Directive;exports.DocsIcon=e.DocsIcon;exports.Dropdown=e.Dropdown;exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecuteButton=e.ExecuteButton;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.ExplorerSection=e.ExplorerSection;exports.FieldIcon=e.FieldIcon;exports.FieldLink=e.FieldLink;exports.HeaderEditor=e.HeaderEditor;exports.History=e.History;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.HistoryIcon=e.HistoryIcon;exports.ImagePreview=e.ImagePreview;exports.KeyboardShortcutIcon=e.KeyboardShortcutIcon;exports.MarkdownContent=e.MarkdownContent;exports.MergeIcon=e.MergeIcon;exports.PenIcon=e.PenIcon;exports.PlayIcon=e.PlayIcon;exports.PlusIcon=e.PlusIcon;exports.PrettifyIcon=e.PrettifyIcon;exports.QueryEditor=e.QueryEditor;exports.ResponseEditor=e.ResponseEditor;exports.RootTypeIcon=e.RootTypeIcon;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.SettingsIcon=e.SettingsIcon;exports.Spinner=e.Spinner;exports.StarFilledIcon=e.StarFilledIcon;exports.StarIcon=e.StarIcon;exports.StopIcon=e.StopIcon;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.ToolbarButton=e.ToolbarButton;exports.TypeIcon=e.TypeIcon;exports.TypeLink=e.TypeLink;exports.UnStyledButton=e.UnStyledButton;exports.VariableEditor=e.VariableEditor;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var e=require("./index.cjs.js");require("graphql");require("react");require("react-dom");exports.EditorContext=e.EditorContext;exports.EditorContextProvider=e.EditorContextProvider;exports.ExecutionContext=e.ExecutionContext;exports.ExecutionContextProvider=e.ExecutionContextProvider;exports.ExplorerContext=e.ExplorerContext;exports.ExplorerContextProvider=e.ExplorerContextProvider;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.ImagePreview=e.ImagePreview;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.onHasCompletion=e.onHasCompletion;exports.useAutoCompleteLeafs=e.useAutoCompleteLeafs;exports.useCopyQuery=e.useCopyQuery;exports.useDragResize=e.useDragResize;exports.useEditorContext=e.useEditorContext;exports.useExecutionContext=e.useExecutionContext;exports.useExplorerContext=e.useExplorerContext;exports.useHeaderEditor=e.useHeaderEditor;exports.useHistoryContext=e.useHistoryContext;exports.useMergeQuery=e.useMergeQuery;exports.usePrettifyEditors=e.usePrettifyEditors;exports.useQueryEditor=e.useQueryEditor;exports.useResponseEditor=e.useResponseEditor;exports.useSchemaContext=e.useSchemaContext;exports.useSelectHistoryItem=e.useSelectHistoryItem;exports.useStorageContext=e.useStorageContext;exports.useVariableEditor=e.useVariableEditor;

dist/graphiql-react.es.js

@@ -1,4 +0,4 @@
-export { A as Argument, Z as ArgumentIcon, an as Button, ao as ButtonGroup, _ as ChevronDownIcon, $ as ChevronLeftIcon, a0 as ChevronUpIcon, a1 as CloseIcon, a2 as CopyIcon, D as DefaultValue, a3 as DeprecatedArgumentIcon, a4 as DeprecatedFieldIcon, w as Directive, a5 as DocsIcon, ap as Dropdown, E as EditorContext, a as EditorContextProvider, al as ExecuteButton, r as ExecutionContext, s as ExecutionContextProvider, x as ExplorerContext, y as ExplorerContextProvider, z as ExplorerSection, a6 as FieldIcon, F as FieldLink, H as HeaderEditor, G as History, J as HistoryContext, K as HistoryContextProvider, a7 as HistoryIcon, b as ImagePreview, a8 as KeyboardShortcutIcon, aq as MarkdownContent, a9 as MergeIcon, aa as PenIcon, ab as PlayIcon, ac as PlusIcon, ad as PrettifyIcon, Q as QueryEditor, e as ResponseEditor, ae as RootTypeIcon, S as SchemaContext, N as SchemaContextProvider, af as SettingsIcon, ar as Spinner, ag as StarFilledIcon, ah as StarIcon, ai as StopIcon, U as StorageContext, W as StorageContextProvider, ak as ToolbarButton, aj as TypeIcon, T as TypeLink, am as UnStyledButton, V as VariableEditor, d as onHasCompletion, u as useAutoCompleteLeafs, f as useCopyQuery, Y as useDragResize, g as useEditorContext, v as useExecutionContext, B as useExplorerContext, h as useHeaderEditor, M as useHistoryContext, j as useMergeQuery, k as usePrettifyEditors, m as useQueryEditor, n as useResponseEditor, O as useSchemaContext, X as useStorageContext, q as useVariableEditor } from "./index.es.js";
+export { E as EditorContext, a as EditorContextProvider, q as ExecutionContext, r as ExecutionContextProvider, v as ExplorerContext, w as ExplorerContextProvider, H as HistoryContext, y as HistoryContextProvider, b as ImagePreview, S as SchemaContext, B as SchemaContextProvider, F as StorageContext, G as StorageContextProvider, d as onHasCompletion, u as useAutoCompleteLeafs, e as useCopyQuery, K as useDragResize, f as useEditorContext, s as useExecutionContext, x as useExplorerContext, g as useHeaderEditor, z as useHistoryContext, h as useMergeQuery, j as usePrettifyEditors, k as useQueryEditor, m as useResponseEditor, D as useSchemaContext, A as useSelectHistoryItem, J as useStorageContext, n as useVariableEditor } from "./index.es.js";
 import "graphql";
 import "react";
 import "react-dom";

dist/info.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var v=Object.defineProperty;var s=(r,e)=>v(r,"name",{value:e,configurable:!0});var f=require("graphql"),h=require("./codemirror.cjs.js"),m=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");h.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,a=i.step,c=m.getTypeInfo(e.schema,r.state);if(n==="Field"&&a===0&&c.fieldDef||n==="AliasedField"&&a===2&&c.fieldDef){const d=document.createElement("div");d.className="CodeMirror-info-header",C(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.fieldDef),t}else if(n==="Directive"&&a===1&&c.directiveDef){const d=document.createElement("div");d.className="CodeMirror-info-header",E(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.directiveDef),t}else if(n==="Argument"&&a===0&&c.argDef){const d=document.createElement("div");d.className="CodeMirror-info-header",N(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.argDef),t}else if(n==="EnumValue"&&c.enumValue&&c.enumValue.description){const d=document.createElement("div");d.className="CodeMirror-info-header",T(d,c,e);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.enumValue),t}else if(n==="NamedType"&&c.type&&c.type.description){const d=document.createElement("div");d.className="CodeMirror-info-header",o(d,c,e,c.type);const t=document.createElement("div");return t.appendChild(d),u(t,e,c.type),t}});function C(r,e,i){D(r,e,i),p(r,e,i,e.type)}s(C,"renderField");function D(r,e,i){var n;const a=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"field-name",i,m.getFieldReference(e))}s(D,"renderQualifiedField");function E(r,e,i){var n;const a="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");l(r,a,"directive-name",i,m.getDirectiveReference(e))}s(E,"renderDirective");function N(r,e,i){var n;const a=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";l(r,a,"arg-name",i,m.getArgumentReference(e)),p(r,e,i,e.inputType)}s(N,"renderArg");function T(r,e,i){var n;const a=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";o(r,e,i,e.inputType),l(r,"."),l(r,a,"enum-value",i,m.getEnumValueReference(e))}s(T,"renderEnumValue");function p(r,e,i,n){const a=document.createElement("span");a.className="type-name-pill",n instanceof f.GraphQLNonNull?(o(a,e,i,n.ofType),l(a,"!")):n instanceof f.GraphQLList?(l(a,"["),o(a,e,i,n.ofType),l(a,"]")):l(a,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n)),r.appendChild(a)}s(p,"renderTypeAnnotation");function o(r,e,i,n){n instanceof f.GraphQLNonNull?(o(r,e,i,n.ofType),l(r,"!")):n instanceof f.GraphQLList?(l(r,"["),o(r,e,i,n.ofType),l(r,"]")):l(r,(n==null?void 0:n.name)||"","type-name",i,m.getTypeReference(e,n))}s(o,"renderType");function u(r,e,i){const n=i.description;if(n){const a=document.createElement("div");a.className="info-description",e.renderDescription?a.innerHTML=e.renderDescription(n):a.appendChild(document.createTextNode(n)),r.appendChild(a)}g(r,e,i)}s(u,"renderDescription");function g(r,e,i){const n=i.deprecationReason;if(n){const a=document.createElement("div");a.className="info-deprecation",r.appendChild(a);const c=document.createElement("span");c.className="info-deprecation-label",c.appendChild(document.createTextNode("Deprecated")),a.appendChild(c);const d=document.createElement("div");d.className="info-deprecation-reason",e.renderDescription?d.innerHTML=e.renderDescription(n):d.appendChild(document.createTextNode(n)),a.appendChild(d)}}s(g,"renderDeprecation");function l(r,e,i="",n={onClick:null},a=null){if(i){const c=n.onClick;let d;c?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",t=>{c(a,t)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}s(l,"text");
+"use strict";var h=Object.defineProperty;var l=(r,e)=>h(r,"name",{value:e,configurable:!0});var f=require("graphql"),g=require("./codemirror.cjs.js"),s=require("./SchemaReference.cjs.js");require("./info-addon.cjs.js");require("./index.cjs.js");require("react");require("react-dom");require("./introspection.cjs.js");require("./forEachState.cjs.js");g.CodeMirror.registerHelper("info","graphql",(r,e)=>{if(!e.schema||!r.state)return;const i=r.state,n=i.kind,c=i.step,a=s.getTypeInfo(e.schema,r.state);if(n==="Field"&&c===0&&a.fieldDef||n==="AliasedField"&&c===2&&a.fieldDef){const d=document.createElement("div");return T(d,a,e),m(d,e,a.fieldDef),d}else if(n==="Directive"&&c===1&&a.directiveDef){const d=document.createElement("div");return o(d,a,e),m(d,e,a.directiveDef),d}else if(n==="Argument"&&c===0&&a.argDef){const d=document.createElement("div");return E(d,a,e),m(d,e,a.argDef),d}else if(n==="EnumValue"&&a.enumValue&&a.enumValue.description){const d=document.createElement("div");return j(d,a,e),m(d,e,a.enumValue),d}else if(n==="NamedType"&&a.type&&a.type.description){const d=document.createElement("div");return u(d,a,e,a.type),m(d,e,a.type),d}});function T(r,e,i){v(r,e,i),p(r,e,i,e.type)}l(T,"renderField");function v(r,e,i){var n;const c=((n=e.fieldDef)===null||n===void 0?void 0:n.name)||"";c.slice(0,2)!=="__"&&(u(r,e,i,e.parentType),t(r,".")),t(r,c,"field-name",i,s.getFieldReference(e))}l(v,"renderQualifiedField");function o(r,e,i){var n;const c="@"+(((n=e.directiveDef)===null||n===void 0?void 0:n.name)||"");t(r,c,"directive-name",i,s.getDirectiveReference(e))}l(o,"renderDirective");function E(r,e,i){var n;e.directiveDef?o(r,e,i):e.fieldDef&&v(r,e,i);const c=((n=e.argDef)===null||n===void 0?void 0:n.name)||"";t(r,"("),t(r,c,"arg-name",i,s.getArgumentReference(e)),p(r,e,i,e.inputType),t(r,")")}l(E,"renderArg");function p(r,e,i,n){t(r,": "),u(r,e,i,n)}l(p,"renderTypeAnnotation");function j(r,e,i){var n;const c=((n=e.enumValue)===null||n===void 0?void 0:n.name)||"";u(r,e,i,e.inputType),t(r,"."),t(r,c,"enum-value",i,s.getEnumValueReference(e))}l(j,"renderEnumValue");function u(r,e,i,n){n instanceof f.GraphQLNonNull?(u(r,e,i,n.ofType),t(r,"!")):n instanceof f.GraphQLList?(t(r,"["),u(r,e,i,n.ofType),t(r,"]")):t(r,(n==null?void 0:n.name)||"","type-name",i,s.getTypeReference(e,n))}l(u,"renderType");function m(r,e,i){const n=i.description;if(n){const c=document.createElement("div");c.className="info-description",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n)),r.appendChild(c)}C(r,e,i)}l(m,"renderDescription");function C(r,e,i){const n=i.deprecationReason;if(n){const c=document.createElement("div");c.className="info-deprecation",e.renderDescription?c.innerHTML=e.renderDescription(n):c.appendChild(document.createTextNode(n));const a=document.createElement("span");a.className="info-deprecation-label",a.appendChild(document.createTextNode("Deprecated: ")),c.insertBefore(a,c.firstChild),r.appendChild(c)}}l(C,"renderDeprecation");function t(r,e,i="",n={onClick:null},c=null){if(i){const a=n.onClick;let d;a?(d=document.createElement("a"),d.href="javascript:void 0",d.addEventListener("click",D=>{a(c,D)})):d=document.createElement("span"),d.className=i,d.appendChild(document.createTextNode(e)),r.appendChild(d)}else r.appendChild(document.createTextNode(e))}l(t,"text");

dist/info.es.js

@@ -21,39 +21,24 @@ var __defProp = Object.defineProperty;
   if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef) {
-    const header = document.createElement("div");
-    header.className = "CodeMirror-info-header";
-    renderField(header, typeInfo, options);
     const into = document.createElement("div");
-    into.appendChild(header);
+    renderField(into, typeInfo, options);
     renderDescription(into, options, typeInfo.fieldDef);
     return into;
   } else if (kind === "Directive" && step === 1 && typeInfo.directiveDef) {
-    const header = document.createElement("div");
-    header.className = "CodeMirror-info-header";
-    renderDirective(header, typeInfo, options);
     const into = document.createElement("div");
-    into.appendChild(header);
+    renderDirective(into, typeInfo, options);
     renderDescription(into, options, typeInfo.directiveDef);
     return into;
   } else if (kind === "Argument" && step === 0 && typeInfo.argDef) {
-    const header = document.createElement("div");
-    header.className = "CodeMirror-info-header";
-    renderArg(header, typeInfo, options);
     const into = document.createElement("div");
-    into.appendChild(header);
+    renderArg(into, typeInfo, options);
     renderDescription(into, options, typeInfo.argDef);
     return into;
   } else if (kind === "EnumValue" && typeInfo.enumValue && typeInfo.enumValue.description) {
-    const header = document.createElement("div");
-    header.className = "CodeMirror-info-header";
-    renderEnumValue(header, typeInfo, options);
     const into = document.createElement("div");
-    into.appendChild(header);
+    renderEnumValue(into, typeInfo, options);
     renderDescription(into, options, typeInfo.enumValue);
     return into;
   } else if (kind === "NamedType" && typeInfo.type && typeInfo.type.description) {
-    const header = document.createElement("div");
-    header.className = "CodeMirror-info-header";
-    renderType(header, typeInfo, options, typeInfo.type);
     const into = document.createElement("div");
-    into.appendChild(header);
+    renderType(into, typeInfo, options, typeInfo.type);
     renderDescription(into, options, typeInfo.type);
@@ -71,2 +56,6 @@ return into;
   const fieldName = ((_a = typeInfo.fieldDef) === null || _a === void 0 ? void 0 : _a.name) || "";
+  if (fieldName.slice(0, 2) !== "__") {
+    renderType(into, typeInfo, options, typeInfo.parentType);
+    text(into, ".");
+  }
   text(into, fieldName, "field-name", options, getFieldReference(typeInfo));
@@ -83,7 +72,19 @@ }
   var _a;
+  if (typeInfo.directiveDef) {
+    renderDirective(into, typeInfo, options);
+  } else if (typeInfo.fieldDef) {
+    renderQualifiedField(into, typeInfo, options);
+  }
   const name = ((_a = typeInfo.argDef) === null || _a === void 0 ? void 0 : _a.name) || "";
+  text(into, "(");
   text(into, name, "arg-name", options, getArgumentReference(typeInfo));
   renderTypeAnnotation(into, typeInfo, options, typeInfo.inputType);
+  text(into, ")");
 }
 __name(renderArg, "renderArg");
+function renderTypeAnnotation(into, typeInfo, options, t) {
+  text(into, ": ");
+  renderType(into, typeInfo, options, t);
+}
+__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderEnumValue(into, typeInfo, options) {
@@ -97,18 +98,2 @@ var _a;
 __name(renderEnumValue, "renderEnumValue");
-function renderTypeAnnotation(into, typeInfo, options, t) {
-  const typeSpan = document.createElement("span");
-  typeSpan.className = "type-name-pill";
-  if (t instanceof GraphQLNonNull) {
-    renderType(typeSpan, typeInfo, options, t.ofType);
-    text(typeSpan, "!");
-  } else if (t instanceof GraphQLList) {
-    text(typeSpan, "[");
-    renderType(typeSpan, typeInfo, options, t.ofType);
-    text(typeSpan, "]");
-  } else {
-    text(typeSpan, (t === null || t === void 0 ? void 0 : t.name) || "", "type-name", options, getTypeReference(typeInfo, t));
-  }
-  into.appendChild(typeSpan);
-}
-__name(renderTypeAnnotation, "renderTypeAnnotation");
 function renderType(into, typeInfo, options, t) {
@@ -147,15 +132,12 @@ if (t instanceof GraphQLNonNull) {
     deprecationDiv.className = "info-deprecation";
-    into.appendChild(deprecationDiv);
-    const label = document.createElement("span");
-    label.className = "info-deprecation-label";
-    label.appendChild(document.createTextNode("Deprecated"));
-    deprecationDiv.appendChild(label);
-    const reasonDiv = document.createElement("div");
-    reasonDiv.className = "info-deprecation-reason";
     if (options.renderDescription) {
-      reasonDiv.innerHTML = options.renderDescription(reason);
+      deprecationDiv.innerHTML = options.renderDescription(reason);
     } else {
-      reasonDiv.appendChild(document.createTextNode(reason));
+      deprecationDiv.appendChild(document.createTextNode(reason));
     }
-    deprecationDiv.appendChild(reasonDiv);
+    const label = document.createElement("span");
+    label.className = "info-deprecation-label";
+    label.appendChild(document.createTextNode("Deprecated: "));
+    deprecationDiv.insertBefore(label, deprecationDiv.firstChild);
+    into.appendChild(deprecationDiv);
   }
@@ -162,0 +144,0 @@ }

package.json

 {
   "name": "@graphiql/react",
-  "version": "0.6.0-canary-e5dcaa31.0",
+  "version": "0.6.0-canary-e71a81a4.0",
   "repository": {
@@ -25,3 +25,2 @@ "type": "git",
     "dist",
-    "font",
     "src",
@@ -43,4 +42,5 @@ "types"
     "codemirror": "^5.65.3",
-    "codemirror-graphql": "^2.0.0-canary-e5dcaa31.0",
+    "codemirror-graphql": "^1.3.2",
     "copy-to-clipboard": "^3.2.0",
+    "escape-html": "^1.0.3",
     "graphql-language-service": "^5.0.6",
@@ -51,14 +51,12 @@ "markdown-it": "^12.2.0",
   "devDependencies": {
-    "@testing-library/react": "9.4.1",
     "@types/codemirror": "^5.60.5",
+    "@types/escape-html": "^1.0.1",
     "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
-    "postcss-nesting": "^10.1.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.6.3",
-    "vite": "^2.9.5",
-    "vite-plugin-react-svg": "^0.2.0"
+    "vite": "^2.9.5"
   }
 }

src/editor/completion.ts

 import type { Editor, EditorChange } from 'codemirror';
-import type { IHint } from 'codemirror-graphql/hint';
-import {
-  GraphQLNamedType,
-  GraphQLSchema,
-  GraphQLType,
-  isListType,
-  isNonNullType,
-} from 'graphql';
+import escapeHTML from 'escape-html';
+import { GraphQLSchema, GraphQLType, isListType, isNonNullType } from 'graphql';
 
@@ -24,14 +18,6 @@ import { ExplorerContextType } from '../explorer';
   explorer: ExplorerContextType | null,
-  callback: (type: GraphQLNamedType) => void,
 ) {
   importCodeMirror([], { useCommonAddons: false }).then(CodeMirror => {
     let information: HTMLDivElement | null;
-    let fieldName: HTMLSpanElement | null;
-    let typeNamePill: HTMLSpanElement | null;
-    let typeNamePrefix: HTMLSpanElement | null;
-    let typeName: HTMLAnchorElement | null;
-    let typeNameSuffix: HTMLSpanElement | null;
-    let description: HTMLDivElement | null;
     let deprecation: HTMLDivElement | null;
-    let deprecationReason: HTMLDivElement | null;
     CodeMirror.on(
@@ -41,7 +27,7 @@ data,
       // @ts-expect-error
-      (ctx: IHint, el: HTMLDivElement) => {
+      (ctx: GraphQLField<{}, {}, {}>, el: HTMLDivElement) => {
         // Only the first time (usually when the hint UI is first displayed)
         // do we create the information nodes.
         if (!information) {
-          const hintsUl = el.parentNode as HTMLUListElement & ParentNode;
+          const hintsUl = el.parentNode as Node & ParentNode;
 
@@ -52,97 +38,10 @@ // This "information" node will contain the additional info about the
           information.className = 'CodeMirror-hint-information';
+          information.addEventListener('click', onClickHintInformation);
           hintsUl.appendChild(information);
 
-          const header = document.createElement('header');
-          header.className = 'CodeMirror-hint-information-header';
-          information.appendChild(header);
-
-          fieldName = document.createElement('span');
-          fieldName.className = 'CodeMirror-hint-information-field-name';
-          header.appendChild(fieldName);
-
-          typeNamePill = document.createElement('span');
-          typeNamePill.className = 'CodeMirror-hint-information-type-name-pill';
-          header.appendChild(typeNamePill);
-
-          typeNamePrefix = document.createElement('span');
-          typeNamePill.appendChild(typeNamePrefix);
-
-          typeName = document.createElement('a');
-          typeName.className = 'CodeMirror-hint-information-type-name';
-          typeName.href = 'javascript:void 0'; // eslint-disable-line no-script-url
-          typeName.addEventListener('click', onClickHintInformation);
-          typeNamePill.appendChild(typeName);
-
-          typeNameSuffix = document.createElement('span');
-          typeNamePill.appendChild(typeNameSuffix);
-
-          description = document.createElement('div');
-          description.className = 'CodeMirror-hint-information-description';
-          information.appendChild(description);
-
+          // This "deprecation" node will contain info about deprecated usage.
           deprecation = document.createElement('div');
-          deprecation.className = 'CodeMirror-hint-information-deprecation';
-          information.appendChild(deprecation);
+          deprecation.className = 'CodeMirror-hint-deprecation';
+          hintsUl.appendChild(deprecation);
 
-          const deprecationLabel = document.createElement('span');
-          deprecationLabel.className =
-            'CodeMirror-hint-information-deprecation-label';
-          deprecationLabel.innerText = 'Deprecated';
-          deprecation.appendChild(deprecationLabel);
-
-          deprecationReason = document.createElement('div');
-          deprecationReason.className =
-            'CodeMirror-hint-information-deprecation-reason';
-          deprecation.appendChild(deprecationReason);
-
-          /**
-           * This is a bit hacky: By default, codemirror renders all hints
-           * inside a single container element. The only possibility to add
-           * something into this list is to add to the container element (which
-           * is a `ul` element).
-           *
-           * However, in the UI we want to have a two-column layout for the
-           * hints:
-           * - The first column contains the actual hints, i.e. the things that
-           *   are returned from the `hint` module from `codemirror-graphql`.
-           * - The second column contains the description and optionally the
-           *   deprecation reason for the given field.
-           *
-           * We solve this with a CSS grid layout that has an auto number of
-           * rows and two columns. All the hints go in the first column, and
-           * the description container (which is the `information` element
-           * here) goes in the second column. To make the hints scrollable, the
-           * container element has `overflow-y: auto`.
-           *
-           * Now here comes the crux: When scrolling down the list of hints we
-           * still want the description to be "sticky" to the top. We can't
-           * solve this with `position: sticky` as the container element itself
-           * is already positioned absolutely.
-           *
-           * There are two things to the solution here:
-           * - We add another `overflow: auto` to the `information` element.
-           *   This makes it scrollable on its own if the description or
-           *   deprecation reason is higher that the container element.
-           * - We add an `onscroll` handler to the container element. When the
-           *   user scrolls here we dynamically adjust the top padding of the
-           *   information element such that it looks like it's sticking to
-           *   the top. (Since the `information` element has some padding by
-           *   default we also have to make sure to use this as baseline for
-           *   the total padding.)
-           */
-          const defaultInformationPadding =
-            parseInt(
-              window
-                .getComputedStyle(information)
-                .paddingBottom.replace(/px$/, ''),
-              10,
-            ) || 0;
-          const handleScroll = () => {
-            if (information) {
-              information.style.paddingTop =
-                hintsUl.scrollTop + defaultInformationPadding + 'px';
-            }
-          };
-          hintsUl.addEventListener('scroll', handleScroll);
-
           // When CodeMirror attempts to remove the hint UI, we detect that it was
@@ -155,3 +54,2 @@ // removed and in turn remove the information nodes.
               if (event.target === hintsUl) {
-                hintsUl.removeEventListener('scroll', handleScroll);
                 hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
@@ -165,10 +63,3 @@ if (information) {
                 information = null;
-                fieldName = null;
-                typeNamePill = null;
-                typeNamePrefix = null;
-                typeName = null;
-                typeNameSuffix = null;
-                description = null;
                 deprecation = null;
-                deprecationReason = null;
                 onRemoveFn = null;
@@ -180,55 +71,27 @@ }
 
-        if (fieldName) {
-          fieldName.innerText = ctx.text;
-        }
+        // Now that the UI has been set up, add info to information.
+        const description = ctx.description
+          ? markdown.render(ctx.description)
+          : 'Self descriptive.';
+        const type = ctx.type
+          ? '<span class="infoType">' + renderType(ctx.type) + '</span>'
+          : '';
 
-        if (typeNamePill && typeNamePrefix && typeName && typeNameSuffix) {
-          if (ctx.type) {
-            typeNamePill.style.display = 'inline';
+        information.innerHTML =
+          '<div class="content">' +
+          (description.slice(0, 3) === '<p>'
+            ? '<p>' + type + description.slice(3)
+            : type + description) +
+          '</div>';
 
-            const renderType = (type: GraphQLType) => {
-              if (isNonNullType(type)) {
-                typeNameSuffix!.innerText = '!' + typeNameSuffix!.innerText;
-                renderType(type.ofType);
-              } else if (isListType(type)) {
-                typeNamePrefix!.innerText += '[';
-                typeNameSuffix!.innerText = ']' + typeNameSuffix!.innerText;
-                renderType(type.ofType);
-              } else {
-                typeName!.innerText = type.name;
-              }
-            };
-
-            typeNamePrefix.innerText = '';
-            typeNameSuffix.innerText = '';
-            renderType(ctx.type);
-          } else {
-            typeNamePrefix.innerText = '';
-            typeName.innerText = '';
-            typeNameSuffix.innerText = '';
-            typeNamePill.style.display = 'none';
-          }
+        if (ctx && deprecation && ctx.deprecationReason) {
+          const reason = ctx.deprecationReason
+            ? markdown.render(ctx.deprecationReason)
+            : '';
+          deprecation.innerHTML =
+            '<span class="deprecation-label">Deprecated</span>' + reason;
+          deprecation.style.display = 'block';
+        } else if (deprecation) {
+          deprecation.style.display = 'none';
         }
-
-        if (description) {
-          if (ctx.description) {
-            description.style.display = 'block';
-            description.innerHTML = markdown.render(ctx.description);
-          } else {
-            description.style.display = 'none';
-            description.innerHTML = '';
-          }
-        }
-
-        if (deprecation && deprecationReason) {
-          if (ctx.deprecationReason) {
-            deprecation.style.display = 'block';
-            deprecationReason.innerHTML = markdown.render(
-              ctx.deprecationReason,
-            );
-          } else {
-            deprecation.style.display = 'none';
-            deprecationReason.innerHTML = '';
-          }
-        }
       },
@@ -239,7 +102,12 @@ );
   function onClickHintInformation(event: Event) {
-    if (!schema || !explorer || !(event.currentTarget instanceof HTMLElement)) {
+    if (
+      !schema ||
+      !explorer ||
+      !(event.currentTarget instanceof HTMLElement) ||
+      event.currentTarget.className !== 'typeName'
+    ) {
       return;
     }
 
-    const typeName = event.currentTarget.innerText;
+    const typeName = event.currentTarget.innerHTML;
     const type = schema.getType(typeName);
@@ -249,5 +117,14 @@ if (type) {
       explorer.push({ name: type.name, def: type });
-      callback?.(type);
     }
   }
 }
+
+function renderType(type: GraphQLType): string {
+  if (isNonNullType(type)) {
+    return `${renderType(type.ofType)}!`;
+  }
+  if (isListType(type)) {
+    return `[${renderType(type.ofType)}]`;
+  }
+  return `<a class="typeName">${escapeHTML(type.name)}</a>`;
+}

src/editor/components/index.ts

@@ -1,13 +0,3 @@
-import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
-import { QueryEditor } from './query-editor';
-import { ResponseEditor } from './response-editor';
-import { VariableEditor } from './variable-editor';
 
-export {
-  HeaderEditor,
-  ImagePreview,
-  QueryEditor,
-  ResponseEditor,
-  VariableEditor,
-};
+export { ImagePreview };

src/editor/hooks.ts

@@ -7,5 +7,7 @@ import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
 
+import { useExplorerContext } from '../explorer';
 import { useSchemaContext } from '../schema';
 import { useStorageContext } from '../storage';
 import debounce from '../utility/debounce';
+import { onHasCompletion } from './completion';
 import { useEditorContext } from './context';
@@ -92,2 +94,33 @@ import { CodeMirrorEditor } from './types';
 
+export function useCompletion(
+  editor: CodeMirrorEditor | null,
+  caller: Function,
+) {
+  const { schema } = useSchemaContext({ nonNull: true, caller });
+  const explorer = useExplorerContext();
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const handleCompletion = (
+      instance: CodeMirrorEditor,
+      changeObj?: EditorChange,
+    ) => {
+      onHasCompletion(instance, changeObj, schema, explorer);
+    };
+    editor.on(
+      // @ts-expect-error @TODO additional args for hasCompletion event
+      'hasCompletion',
+      handleCompletion,
+    );
+    return () =>
+      editor.off(
+        // @ts-expect-error @TODO additional args for hasCompletion event
+        'hasCompletion',
+        handleCompletion,
+      );
+  }, [editor, explorer, schema]);
+}
+
 type EmptyCallback = () => void;
@@ -248,3 +281,3 @@
             {
-              className: 'auto-inserted-leaf',
+              className: 'autoInsertedLeaf',
               clearOnEnter: true,
@@ -251,0 +284,0 @@ title: 'Automatically added leaf fields',

src/editor/index.ts

 export { onHasCompletion } from './completion';
+export { ImagePreview } from './components';
 export {
-  HeaderEditor,
-  ImagePreview,
-  QueryEditor,
-  ResponseEditor,
-  VariableEditor,
-} from './components';
-export {
   EditorContext,
@@ -11,0 +5,0 @@ EditorContextProvider,

src/history/index.ts

@@ -1,3 +0,2 @@
-export { History } from './components';
-export {
+import {
   HistoryContext,
@@ -7,3 +6,13 @@ HistoryContextProvider,
 } from './context';
+import { useSelectHistoryItem } from './hooks';
 
-export type { HistoryContextType } from './context';
+import type { HistoryContextType } from './context';
+
+export {
+  HistoryContext,
+  HistoryContextProvider,
+  useHistoryContext,
+  useSelectHistoryItem,
+};
+
+export type { HistoryContextType };

src/index.ts

 export {
   EditorContext,
   EditorContextProvider,
-  HeaderEditor,
   ImagePreview,
   onHasCompletion,
-  QueryEditor,
-  ResponseEditor,
   useAutoCompleteLeafs,
@@ -18,3 +15,2 @@ useCopyQuery,
   useVariableEditor,
-  VariableEditor,
 } from './editor';
@@ -27,19 +23,12 @@ export {
 export {
-  Argument,
-  DefaultValue,
-  Directive,
   ExplorerContext,
   ExplorerContextProvider,
-  ExplorerSection,
-  FieldLink,
-  TypeLink,
   useExplorerContext,
 } from './explorer';
 export {
-  History,
   HistoryContext,
   HistoryContextProvider,
   useHistoryContext,
+  useSelectHistoryItem,
 } from './history';
-export * from './icons';
 export {
@@ -55,4 +44,2 @@ SchemaContext,
 } from './storage';
-export * from './toolbar';
-export * from './ui';
 export { useDragResize } from './utility/resize';
@@ -80,3 +67,1 @@
 export type { StorageContextType } from './storage';
-
-import './style/root.css';

src/markdown.ts

 import MarkdownIt from 'markdown-it';
 
-export const markdown = new MarkdownIt({
-  breaks: true,
-  linkify: true,
-});
+export const markdown = new MarkdownIt();

src/vite-env.d.ts

@@ -1,1 +0,1 @@
-/// <reference types="vite/client" />
+// / <reference types="vite/client" />

types/editor/completion.d.ts

 import type { Editor, EditorChange } from 'codemirror';
-import { GraphQLNamedType, GraphQLSchema } from 'graphql';
+import { GraphQLSchema } from 'graphql';
 import { ExplorerContextType } from '../explorer';
@@ -8,2 +8,2 @@ /**
  */
-export declare function onHasCompletion(_cm: Editor, data: EditorChange | undefined, schema: GraphQLSchema | null | undefined, explorer: ExplorerContextType | null, callback: (type: GraphQLNamedType) => void): void;
+export declare function onHasCompletion(_cm: Editor, data: EditorChange | undefined, schema: GraphQLSchema | null | undefined, explorer: ExplorerContextType | null): void;

types/editor/components/index.d.ts

@@ -1,6 +0,2 @@
-import { HeaderEditor } from './header-editor';
 import { ImagePreview } from './image-preview';
-import { QueryEditor } from './query-editor';
-import { ResponseEditor } from './response-editor';
-import { VariableEditor } from './variable-editor';
-export { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor, };
+export { ImagePreview };

types/editor/header-editor.d.ts

@@ -11,3 +11,3 @@ /// <reference types="react" />
 };
-export declare function useHeaderEditor({ editorTheme, keyMap, onEdit, readOnly, shouldPersistHeaders, }?: UseHeaderEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
+export declare function useHeaderEditor({ editorTheme, keyMap, onEdit, readOnly, shouldPersistHeaders, }?: UseHeaderEditorArgs): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY = "headers";

types/editor/hooks.d.ts

@@ -8,2 +8,3 @@ import { GetDefaultFieldNamesFn } from '@graphiql/toolkit';
 export declare function useChangeHandler(editor: CodeMirrorEditor | null, callback: EditCallback | undefined, storageKey: string | null, tabProperty: 'variables' | 'headers', caller: Function): void;
+export declare function useCompletion(editor: CodeMirrorEditor | null, caller: Function): void;
 declare type EmptyCallback = () => void;
@@ -10,0 +11,0 @@ export declare function useKeyMap(editor: CodeMirrorEditor | null, keys: string[], callback: EmptyCallback | undefined): void;

types/editor/index.d.ts

 export { onHasCompletion } from './completion';
-export { HeaderEditor, ImagePreview, QueryEditor, ResponseEditor, VariableEditor, } from './components';
+export { ImagePreview } from './components';
 export { EditorContext, EditorContextProvider, useEditorContext, } from './context';
@@ -4,0 +4,0 @@ export { useHeaderEditor } from './header-editor';

types/editor/query-editor.d.ts

@@ -18,4 +18,4 @@ /// <reference types="react" />
 };
-export declare function useQueryEditor({ editorTheme, keyMap, externalFragments, onClickReference, onCopyQuery, onEdit, onEditOperationName, readOnly, validationRules, }?: UseQueryEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
+export declare function useQueryEditor({ editorTheme, keyMap, externalFragments, onClickReference, onCopyQuery, onEdit, onEditOperationName, readOnly, validationRules, }?: UseQueryEditorArgs): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY_QUERY = "query";
 export {};

types/editor/response-editor.d.ts

@@ -13,2 +13,2 @@ import type { Position } from 'codemirror';
 };
-export declare function useResponseEditor({ ResponseTooltip, editorTheme, keyMap, value, }?: UseResponseEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
+export declare function useResponseEditor({ ResponseTooltip, editorTheme, keyMap, value, }?: UseResponseEditorArgs): import("react").RefObject<HTMLDivElement>;

types/editor/variable-editor.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 };
-export declare function useVariableEditor({ editorTheme, keyMap, onEdit, readOnly, }?: UseVariableEditorArgs, caller?: Function): import("react").RefObject<HTMLDivElement>;
+export declare function useVariableEditor({ editorTheme, keyMap, onEdit, readOnly, }?: UseVariableEditorArgs): import("react").RefObject<HTMLDivElement>;
 export declare const STORAGE_KEY = "variables";

types/history/index.d.ts

@@ -1,3 +0,5 @@
-export { History } from './components';
-export { HistoryContext, HistoryContextProvider, useHistoryContext, } from './context';
-export type { HistoryContextType } from './context';
+import { HistoryContext, HistoryContextProvider, useHistoryContext } from './context';
+import { useSelectHistoryItem } from './hooks';
+import type { HistoryContextType } from './context';
+export { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, };
+export type { HistoryContextType };

types/index.d.ts

@@ -1,10 +0,7 @@
-export { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor, } from './editor';
+export { EditorContext, EditorContextProvider, ImagePreview, onHasCompletion, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, } from './editor';
 export { ExecutionContext, ExecutionContextProvider, useExecutionContext, } from './execution';
-export { Argument, DefaultValue, Directive, ExplorerContext, ExplorerContextProvider, ExplorerSection, FieldLink, TypeLink, useExplorerContext, } from './explorer';
-export { History, HistoryContext, HistoryContextProvider, useHistoryContext, } from './history';
-export * from './icons';
+export { ExplorerContext, ExplorerContextProvider, useExplorerContext, } from './explorer';
+export { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, } from './history';
 export { SchemaContext, SchemaContextProvider, useSchemaContext, } from './schema';
 export { StorageContext, StorageContextProvider, useStorageContext, } from './storage';
-export * from './toolbar';
-export * from './ui';
 export { useDragResize } from './utility/resize';
@@ -17,2 +14,1 @@ export type { EditorContextType, ResponseTooltipType, TabsState, UseHeaderEditorArgs, UseQueryEditorArgs, UseResponseEditorArgs, UseVariableEditorArgs, KeyMap, } from './editor';
 export type { StorageContextType } from './storage';
-import './style/root.css';

types/utility/resize.d.ts

@@ -16,5 +16,5 @@ /// <reference types="react" />
     firstRef: import("react").RefObject<HTMLDivElement>;
-    setHiddenElement: import("react").Dispatch<import("react").SetStateAction<ResizableElement | null>>;
+    setHiddenElement: (element: ResizableElement | null) => void;
     secondRef: import("react").RefObject<HTMLDivElement>;
 };
 export {};

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-18.18%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1879914

decreased by-22.91%

Dependency count

11

increased by10%

Number of package files

123

decreased by-43.06%

Lines of code

41668

decreased by-11.31%

Dependency changes

• + Addedescape-html@^1.0.3

• + Added@codemirror/language@0.20.2(transitive)

• + Added@codemirror/state@0.20.1(transitive)

• + Added@codemirror/view@0.20.7(transitive)

• + Added@lezer/common@0.16.1(transitive)

• + Added@lezer/highlight@0.16.0(transitive)

• + Added@lezer/lr@0.16.3(transitive)

• + Addedcodemirror-graphql@1.3.2(transitive)

• + Addedescape-html@1.0.3(transitive)

• - Removed@codemirror/language@6.0.0(transitive)

• - Removed@codemirror/state@6.4.1(transitive)

• - Removed@codemirror/view@6.34.1(transitive)

• - Removed@lezer/common@1.2.3(transitive)

• - Removed@lezer/highlight@1.2.1(transitive)

• - Removed@lezer/lr@1.4.2(transitive)

• - Removed@types/codemirror@0.0.90(transitive)

• - Removed@types/estree@1.0.6(transitive)

• - Removed@types/tern@0.23.9(transitive)

• - Removedcodemirror-graphql@2.1.1(transitive)

• Updatedcodemirror-graphql@^1.3.2