@graphiql/react - npm Package Compare versions

Comparing version 0.6.0-canary-80402dea.0 to 0.6.0-canary-a106e5bf.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.ChevronDownIcon=e.ChevronDownIcon;exports.ChevronUpIcon=e.ChevronUpIcon;exports.CopyIcon=e.CopyIcon;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.HeaderEditor=e.HeaderEditor;exports.HistoryContext=e.HistoryContext;exports.HistoryContextProvider=e.HistoryContextProvider;exports.HistoryIcon=e.HistoryIcon;exports.ImagePreview=e.ImagePreview;exports.KeyboardShortcutIcon=e.KeyboardShortcutIcon;exports.MergeIcon=e.MergeIcon;exports.PlayIcon=e.PlayIcon;exports.PrettifyIcon=e.PrettifyIcon;exports.QueryEditor=e.QueryEditor;exports.ResponseEditor=e.ResponseEditor;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.SettingsIcon=e.SettingsIcon;exports.StopIcon=e.StopIcon;exports.StorageContext=e.StorageContext;exports.StorageContextProvider=e.StorageContextProvider;exports.ToolbarButton=e.ToolbarButton;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.useSelectHistoryItem=e.useSelectHistoryItem;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.ChevronDownIcon=e.ChevronDownIcon;exports.ChevronUpIcon=e.ChevronUpIcon;exports.CloseIcon=e.CloseIcon;exports.CopyIcon=e.CopyIcon;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.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.MergeIcon=e.MergeIcon;exports.PenIcon=e.PenIcon;exports.PlayIcon=e.PlayIcon;exports.PrettifyIcon=e.PrettifyIcon;exports.QueryEditor=e.QueryEditor;exports.ResponseEditor=e.ResponseEditor;exports.SchemaContext=e.SchemaContext;exports.SchemaContextProvider=e.SchemaContextProvider;exports.SettingsIcon=e.SettingsIcon;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.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;

dist/graphiql-react.es.js

@@ -1,4 +0,4 @@
-export { O as ChevronDownIcon, T as ChevronUpIcon, U as CopyIcon, W as DocsIcon, a5 as Dropdown, E as EditorContext, a as EditorContextProvider, a3 as ExecuteButton, r as ExecutionContext, s as ExecutionContextProvider, w as ExplorerContext, x as ExplorerContextProvider, H as HeaderEditor, z as HistoryContext, A as HistoryContextProvider, X as HistoryIcon, b as ImagePreview, Y as KeyboardShortcutIcon, Z as MergeIcon, _ as PlayIcon, $ as PrettifyIcon, Q as QueryEditor, e as ResponseEditor, S as SchemaContext, F as SchemaContextProvider, a0 as SettingsIcon, a1 as StopIcon, J as StorageContext, K as StorageContextProvider, a2 as ToolbarButton, a4 as UnStyledButton, V as VariableEditor, d as onHasCompletion, u as useAutoCompleteLeafs, f as useCopyQuery, N as useDragResize, g as useEditorContext, v as useExecutionContext, y as useExplorerContext, h as useHeaderEditor, B as useHistoryContext, j as useMergeQuery, k as usePrettifyEditors, m as useQueryEditor, n as useResponseEditor, G as useSchemaContext, D as useSelectHistoryItem, M as useStorageContext, q as useVariableEditor } from "./index.es.js";
+export { O as ChevronDownIcon, T as ChevronUpIcon, U as CloseIcon, W as CopyIcon, X as DocsIcon, a9 as Dropdown, E as EditorContext, a as EditorContextProvider, a7 as ExecuteButton, r as ExecutionContext, s as ExecutionContextProvider, w as ExplorerContext, x as ExplorerContextProvider, H as HeaderEditor, z as History, A as HistoryContext, B as HistoryContextProvider, Y as HistoryIcon, b as ImagePreview, Z as KeyboardShortcutIcon, _ as MergeIcon, $ as PenIcon, a0 as PlayIcon, a1 as PrettifyIcon, Q as QueryEditor, e as ResponseEditor, S as SchemaContext, F as SchemaContextProvider, a2 as SettingsIcon, a3 as StarFilledIcon, a4 as StarIcon, a5 as StopIcon, J as StorageContext, K as StorageContextProvider, a6 as ToolbarButton, a8 as UnStyledButton, V as VariableEditor, d as onHasCompletion, u as useAutoCompleteLeafs, f as useCopyQuery, N as useDragResize, g as useEditorContext, v as useExecutionContext, y as useExplorerContext, h as useHeaderEditor, D as useHistoryContext, j as useMergeQuery, k as usePrettifyEditors, m as useQueryEditor, n as useResponseEditor, G as useSchemaContext, M as useStorageContext, q as useVariableEditor } from "./index.es.js";
 import "graphql";
 import "react";
 import "react-dom";

package.json

 {
   "name": "@graphiql/react",
-  "version": "0.6.0-canary-80402dea.0",
+  "version": "0.6.0-canary-a106e5bf.0",
   "repository": {
@@ -42,3 +42,3 @@ "type": "git",
     "codemirror": "^5.65.3",
-    "codemirror-graphql": "^2.0.0-canary-80402dea.0",
+    "codemirror-graphql": "^2.0.0-canary-a106e5bf.0",
     "copy-to-clipboard": "^3.2.0",
@@ -50,2 +50,3 @@ "graphql-language-service": "^5.0.6",
   "devDependencies": {
+    "@testing-library/react": "9.4.1",
     "@types/codemirror": "^5.60.5",
@@ -52,0 +53,0 @@ "@types/set-value": "^4.0.1",

src/editor/common.ts

@@ -0,1 +1,6 @@
+import { KeyMap } from './types';
+
+export const DEFAULT_EDITOR_THEME = 'graphiql';
+export const DEFAULT_KEY_MAP: KeyMap = 'sublime';
+
 let isMacOs = false;
@@ -33,3 +38,3 @@
   );
-  const allAddons =
+  await Promise.all(
     options?.useCommonAddons === false
@@ -50,5 +55,5 @@ ? addons
           ...addons,
-        ];
-  await Promise.all(allAddons.map(addon => addon));
+        ],
+  );
   return CodeMirror;
 }

src/editor/hooks.ts

 import { fillLeafs, GetDefaultFieldNamesFn, mergeAst } from '@graphiql/toolkit';
-import { EditorChange } from 'codemirror';
+import type { EditorChange, EditorConfiguration } from 'codemirror';
 import copyToClipboard from 'copy-to-clipboard';
@@ -26,2 +26,14 @@ import { parse, print } from 'graphql';
 
+export function useSynchronizeOption<K extends keyof EditorConfiguration>(
+  editor: CodeMirrorEditor | null,
+  option: K,
+  value: EditorConfiguration[K],
+) {
+  useEffect(() => {
+    if (editor) {
+      editor.setOption(option, value);
+    }
+  }, [editor, option, value]);
+}
+
 export type EditCallback = (value: string) => void;
@@ -55,3 +67,12 @@
 
-    const handleChange = (editorInstance: CodeMirrorEditor) => {
+    const handleChange = (
+      editorInstance: CodeMirrorEditor,
+      changeObj: EditorChange | undefined,
+    ) => {
+      // When we signal a change manually without actually changing anything
+      // we don't want to invoke the callback.
+      if (!changeObj) {
+        return;
+      }
+
       const newValue = editorInstance.getValue();
@@ -58,0 +79,0 @@ store(newValue);

src/history/index.ts

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

src/index.ts

@@ -31,6 +31,6 @@ export {
 export {
+  History,
   HistoryContext,
   HistoryContextProvider,
   useHistoryContext,
-  useSelectHistoryItem,
 } from './history';
@@ -37,0 +37,0 @@ export * from './icons';

types/editor/common.d.ts

 /// <reference types="codemirror" />
+import { KeyMap } from './types';
+export declare const DEFAULT_EDITOR_THEME = "graphiql";
+export declare const DEFAULT_KEY_MAP: KeyMap;
 export declare const commonKeys: {
@@ -3,0 +6,0 @@ [x: string]: string;

types/editor/hooks.d.ts

 import { GetDefaultFieldNamesFn } from '@graphiql/toolkit';
+import type { EditorConfiguration } from 'codemirror';
 import { CodeMirrorEditor } from './types';
 export declare function useSynchronizeValue(editor: CodeMirrorEditor | null, value: string | undefined): void;
+export declare function useSynchronizeOption<K extends keyof EditorConfiguration>(editor: CodeMirrorEditor | null, option: K, value: EditorConfiguration[K]): void;
 export declare type EditCallback = (value: string) => void;
@@ -5,0 +7,0 @@ export declare function useChangeHandler(editor: CodeMirrorEditor | null, callback: EditCallback | undefined, storageKey: string | null, tabProperty: 'variables' | 'headers', caller: Function): void;

types/history/index.d.ts

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

types/icons/index.d.ts

 export declare const ChevronDownIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const ChevronUpIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
+export declare const CloseIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const CopyIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
@@ -8,5 +9,8 @@ export declare const DocsIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const MergeIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
+export declare const PenIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const PlayIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const PrettifyIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const SettingsIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
+export declare const StarFilledIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
+export declare const StarIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;
 export declare const StopIcon: (props: JSX.IntrinsicElements['svg']) => JSX.Element;

types/index.d.ts

 export { EditorContext, EditorContextProvider, HeaderEditor, ImagePreview, onHasCompletion, QueryEditor, ResponseEditor, useAutoCompleteLeafs, useCopyQuery, useEditorContext, useHeaderEditor, useMergeQuery, usePrettifyEditors, useQueryEditor, useResponseEditor, useVariableEditor, VariableEditor, } from './editor';
 export { ExecutionContext, ExecutionContextProvider, useExecutionContext, } from './execution';
 export { ExplorerContext, ExplorerContextProvider, useExplorerContext, } from './explorer';
-export { HistoryContext, HistoryContextProvider, useHistoryContext, useSelectHistoryItem, } from './history';
+export { History, HistoryContext, HistoryContextProvider, useHistoryContext, } from './history';
 export * from './icons';
@@ -6,0 +6,0 @@ export { SchemaContext, SchemaContextProvider, useSchemaContext, } from './schema';

types/utility/resize.d.ts

@@ -16,5 +16,5 @@ /// <reference types="react" />
     firstRef: import("react").RefObject<HTMLDivElement>;
-    setHiddenElement: (element: ResizableElement | null) => void;
+    setHiddenElement: import("react").Dispatch<import("react").SetStateAction<ResizableElement | null>>;
     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

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

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

2390041

increased by1.53%

Number of package files

180

increased by4.05%

Lines of code

45877

increased by1.49%

Worsened metrics

Dev dependency count

11

increased by10%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• Updatedcodemirror-graphql@^2.0.0-canary-a106e5bf.0