Prettify code changes

Author: dondonz

packages/graphiql-react/src/editor/components/extension-editor.tsx

@@ -2,7 +2,10 @@ import { useEffect } from 'react';
 import { clsx } from 'clsx';
 
 import { useEditorContext } from '../context';
-import { useExtensionEditor, UseExtensionEditorArgs } from '../extension-editor';
+import {
+  useExtensionEditor,
+  UseExtensionEditorArgs,
+} from '../extension-editor';
 
 import '../style/codemirror.css';
 import '../style/fold.css';
@@ -11,27 +14,30 @@ import '../style/hint.css';
 import '../style/editor.css';
 
 type ExtensionEditorProps = UseExtensionEditorArgs & {
-    /**
-     * Visually hide the header editor.
-     * @default false
-     */
-    isHidden?: boolean;
+  /**
+   * Visually hide the header editor.
+   * @default false
+   */
+  isHidden?: boolean;
 };
 
-export function ExtensionEditor({ isHidden, ...hookArgs }: ExtensionEditorProps) {
-    const { extensionEditor } = useEditorContext({
-        nonNull: true,
-        caller: ExtensionEditor,
-    });
-    const ref = useExtensionEditor(hookArgs, ExtensionEditor);
+export function ExtensionEditor({
+  isHidden,
+  ...hookArgs
+}: ExtensionEditorProps) {
+  const { extensionEditor } = useEditorContext({
+    nonNull: true,
+    caller: ExtensionEditor,
+  });
+  const ref = useExtensionEditor(hookArgs, ExtensionEditor);
 
-    useEffect(() => {
-        if (extensionEditor && !isHidden) {
-            extensionEditor.refresh();
-        }
-    }, [extensionEditor, isHidden]);
+  useEffect(() => {
+    if (extensionEditor && !isHidden) {
+      extensionEditor.refresh();
+    }
+  }, [extensionEditor, isHidden]);
 
-    return (
-        <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
-    );
+  return (
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
+  );
 }

packages/graphiql-react/src/editor/context.tsx

@@ -296,9 +296,8 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
   const [variableEditor, setVariableEditor] = useState<CodeMirrorEditor | null>(
     null,
   );
-  const [extensionEditor, setExtensionEditor] = useState<CodeMirrorEditor | null>(
-      null,
-  );
+  const [extensionEditor, setExtensionEditor] =
+    useState<CodeMirrorEditor | null>(null);
 
   const [shouldPersistHeaders, setShouldPersistHeadersInternal] = useState(
     () => {
@@ -327,7 +326,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     const variables =
       props.variables ?? storage?.get(STORAGE_KEY_VARIABLES) ?? null;
     const extensions =
-        props.variables ?? storage?.get(STORAGE_KEY_EXTENSIONS) ?? null;
+      props.variables ?? storage?.get(STORAGE_KEY_EXTENSIONS) ?? null;
     const headers = props.headers ?? storage?.get(STORAGE_KEY_HEADERS) ?? null;
     const response = props.response ?? '';
 

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

@@ -26,22 +26,19 @@ export type UseExtensionEditorArgs = WriteableEditorProps & {
 };
 
 export function useExtensionEditor(
-    {
-      editorTheme = DEFAULT_EDITOR_THEME,
-      keyMap = DEFAULT_KEY_MAP,
-      onEdit,
-      readOnly = false,
-    }: UseExtensionEditorArgs = {},
-    caller?: Function,
+  {
+    editorTheme = DEFAULT_EDITOR_THEME,
+    keyMap = DEFAULT_KEY_MAP,
+    onEdit,
+    readOnly = false,
+  }: UseExtensionEditorArgs = {},
+  caller?: Function,
 ) {
-  const {
-    initialExtensions,
-    extensionEditor,
-    setExtensionEditor,
-  } = useEditorContext({
-    nonNull: true,
-    caller: caller || useExtensionEditor,
-  });
+  const { initialExtensions, extensionEditor, setExtensionEditor } =
+    useEditorContext({
+      nonNull: true,
+      caller: caller || useExtensionEditor,
+    });
   const executionContext = useExecutionContext();
   const merge = useMergeQuery({ caller: caller || useExtensionEditor });
   const prettify = usePrettifyEditors({ caller: caller || useExtensionEditor });
@@ -114,14 +111,18 @@ export function useExtensionEditor(
   useSynchronizeOption(extensionEditor, 'keyMap', keyMap);
 
   useChangeHandler(
-      extensionEditor,
-      onEdit,
-      STORAGE_KEY,
-      'extensions',
-      useExtensionEditor,
+    extensionEditor,
+    onEdit,
+    STORAGE_KEY,
+    'extensions',
+    useExtensionEditor,
   );
 
-  useKeyMap(extensionEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run);
+  useKeyMap(
+    extensionEditor,
+    ['Cmd-Enter', 'Ctrl-Enter'],
+    executionContext?.run,
+  );
   useKeyMap(extensionEditor, ['Shift-Ctrl-P'], prettify);
   useKeyMap(extensionEditor, ['Shift-Ctrl-M'], merge);
 

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

@@ -212,10 +212,11 @@ type UsePrettifyEditorsArgs = {
 };
 
 export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
-  const { queryEditor, headerEditor, variableEditor, extensionEditor } = useEditorContext({
-    nonNull: true,
-    caller: caller || usePrettifyEditors,
-  });
+  const { queryEditor, headerEditor, variableEditor, extensionEditor } =
+    useEditorContext({
+      nonNull: true,
+      caller: caller || usePrettifyEditors,
+    });
   return useCallback(() => {
     if (variableEditor) {
       const variableEditorContent = variableEditor.getValue();
@@ -238,9 +239,9 @@ export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
 
       try {
         const prettifiedExtensionEditorContent = JSON.stringify(
-            JSON.parse(extensionEditorContent),
-            null,
-            2,
+          JSON.parse(extensionEditorContent),
+          null,
+          2,
         );
         if (prettifiedExtensionEditorContent !== extensionEditorContent) {
           extensionEditor.setValue(prettifiedExtensionEditorContent);

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

@@ -229,7 +229,13 @@ export function useSynchronizeActiveTabValues({
         operationName,
       });
     },
-    [queryEditor, variableEditor, extensionEditor, headerEditor, responseEditor],
+    [
+      queryEditor,
+      variableEditor,
+      extensionEditor,
+      headerEditor,
+      responseEditor,
+    ],
   );
 }
 
@@ -301,7 +307,13 @@ export function useSetEditorValues({
       headerEditor?.setValue(headers ?? '');
       responseEditor?.setValue(response ?? '');
     },
-    [headerEditor, queryEditor, responseEditor, variableEditor, extensionEditor],
+    [
+      headerEditor,
+      queryEditor,
+      responseEditor,
+      variableEditor,
+      extensionEditor,
+    ],
   );
 }
 
@@ -365,7 +377,12 @@ function hashFromTabContents(args: {
   extensions?: string | null;
   headers?: string | null;
 }): string {
-  return [args.query ?? '', args.variables ?? '', args.extensions ?? '', args.headers ?? ''].join('|');
+  return [
+    args.query ?? '',
+    args.variables ?? '',
+    args.extensions ?? '',
+    args.headers ?? '',
+  ].join('|');
 }
 
 export function fuzzyExtractOperationName(str: string): string | null {

packages/graphiql-react/src/history/__tests__/components.spec.tsx

@@ -76,7 +76,7 @@ describe('QueryHistoryItem', () => {
   const mockedSetVariableEditor = useEditorContext()?.variableEditor
     ?.setValue as jest.Mock;
   const mockedSetExtensionEditor = useEditorContext()?.extensionEditor
-      ?.setValue as jest.Mock;
+    ?.setValue as jest.Mock;
   const mockedSetHeaderEditor = useEditorContext()?.headerEditor
     ?.setValue as jest.Mock;
   beforeEach(() => {
@@ -122,7 +122,7 @@ describe('QueryHistoryItem', () => {
     );
     expect(mockedSetExtensionEditor).toHaveBeenCalledTimes(1);
     expect(mockedSetExtensionEditor).toHaveBeenCalledWith(
-        mockProps.item.extensions,
+      mockProps.item.extensions,
     );
     expect(mockedSetHeaderEditor).toHaveBeenCalledTimes(1);
     expect(mockedSetHeaderEditor).toHaveBeenCalledWith(mockProps.item.headers);

packages/graphiql-react/src/history/components.tsx

@@ -112,10 +112,11 @@ export function HistoryItem(props: QueryHistoryItemProps) {
       nonNull: true,
       caller: HistoryItem,
     });
-  const { headerEditor, queryEditor, variableEditor, extensionEditor } = useEditorContext({
-    nonNull: true,
-    caller: HistoryItem,
-  });
+  const { headerEditor, queryEditor, variableEditor, extensionEditor } =
+    useEditorContext({
+      nonNull: true,
+      caller: HistoryItem,
+    });
   const inputRef = useRef<HTMLInputElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [isEditable, setIsEditable] = useState(false);
@@ -157,7 +158,14 @@ export function HistoryItem(props: QueryHistoryItemProps) {
       extensionEditor?.setValue(extensions ?? '');
       headerEditor?.setValue(headers ?? '');
       setActive(props.item);
-    }, [headerEditor, props.item, queryEditor, setActive, variableEditor, extensionEditor]);
+    }, [
+      headerEditor,
+      props.item,
+      queryEditor,
+      setActive,
+      variableEditor,
+      extensionEditor,
+    ]);
 
   const handleDeleteItemFromHistory: MouseEventHandler<HTMLButtonElement> =
     useCallback(

packages/graphiql-toolkit/src/storage/history.ts

@@ -156,7 +156,14 @@ export class HistoryStore {
   }
 
   deleteHistory = (
-    { query, variables, extensions, headers, operationName, favorite }: QueryStoreItem,
+    {
+      query,
+      variables,
+      extensions,
+      headers,
+      operationName,
+      favorite,
+    }: QueryStoreItem,
     clearFavorites = false,
   ) => {
     function deleteFromStore(store: QueryStore) {

packages/graphiql/cypress/e2e/tabs.cy.ts

@@ -34,8 +34,8 @@ describe('Tabs', () => {
     // Enter extensions
     cy.contains('Extensions').click();
     cy.get('.graphiql-editor-tool textarea')
-        .eq(2)
-        .type('{"myExtension":"myString"', { force: true });
+      .eq(2)
+      .type('{"myExtension":"myString"', { force: true });
 
     // Run the query
     cy.clickExecuteQuery();

packages/graphiql/cypress/support/commands.ts

@@ -74,7 +74,14 @@ Cypress.Commands.add('visitWithOp', ({ query, variables, variablesString }) => {
 
 Cypress.Commands.add(
   'assertHasValues',
-  ({ query, variables, variablesString, extensionsString, headersString, response }: Op) => {
+  ({
+    query,
+    variables,
+    variablesString,
+    extensionsString,
+    headersString,
+    response,
+  }: Op) => {
     cy.get('.graphiql-query-editor').should(element => {
       expect(normalize(element.get(0).innerText)).to.equal(
         codeWithLineNumbers(query),
@@ -101,24 +108,24 @@ Cypress.Commands.add(
         });
     }
     if (headersString !== undefined) {
-        cy.contains('Headers').click();
-        cy.get('.graphiql-editor-tool .graphiql-editor')
-            .eq(1)
-            .should(element => {
-                expect(normalize(element.get(0).innerText)).to.equal(
-                    codeWithLineNumbers(headersString),
-                );
-            });
+      cy.contains('Headers').click();
+      cy.get('.graphiql-editor-tool .graphiql-editor')
+        .eq(1)
+        .should(element => {
+          expect(normalize(element.get(0).innerText)).to.equal(
+            codeWithLineNumbers(headersString),
+          );
+        });
     }
     if (extensionsString !== undefined) {
-        cy.contains('Extensions').click();
-        cy.get('.graphiql-editor-tool .graphiql-editor')
-            .eq(2)
-            .should(element => {
-                expect(normalize(element.get(0).innerText)).to.equal(
-                    codeWithLineNumbers(extensionsString),
-                );
-            });
+      cy.contains('Extensions').click();
+      cy.get('.graphiql-editor-tool .graphiql-editor')
+        .eq(2)
+        .should(element => {
+          expect(normalize(element.get(0).innerText)).to.equal(
+            codeWithLineNumbers(extensionsString),
+          );
+        });
     }
     if (response !== undefined) {
       cy.get('.result-window').should(element => {