graphiql 5: reduce bundle size, import prettier dynamically to avoid bundling Prettier (#4069)

* upd

* Apply suggestions from code review

Author: dimaMachina

.changeset/brave-points-bathe.md

@@ -0,0 +1,13 @@
+---
+'@graphiql/react': patch
+'graphiql': patch
+---
+
+reduce bundle size, import `prettier` dynamically to avoid bundling Prettier
+
+diff from vite example
+
+```diff
+-dist/assets/index-BMgFrxsd.js             4,911.53 kB │ gzip: 1,339.77 kB
++dist/assets/index-BlpzusGL.js             4,221.28 kB │ gzip: 1,145.58 kB
+```

packages/graphiql-react/src/constants.ts

@@ -1,9 +1,5 @@
 /* eslint-disable no-bitwise */
 import { initializeMode } from 'monaco-graphql/esm/lite.js';
-// @ts-expect-error -- wrong types
-import { printers } from 'prettier/plugins/graphql'; // eslint-disable-line import-x/no-duplicates
-import { parsers } from 'prettier/parser-graphql'; // eslint-disable-line import-x/no-duplicates
-import prettier from 'prettier/standalone';
 import type { DiagnosticSettings } from 'monaco-graphql';
 import { KeyCode, KeyMod, languages } from './monaco-editor';
 import type { EditorSlice } from './stores';
@@ -147,13 +143,21 @@ export const MONACO_GRAPHQL_API = initializeMode({
   diagnosticSettings: MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS,
 });
 
-export const DEFAULT_PRETTIFY_QUERY: EditorSlice['onPrettifyQuery'] = query =>
-  prettier.format(query, {
-    parser: 'graphql',
-    plugins: [
-      // Fix: Couldn't find plugin for AST format "graphql"
-      { printers },
-      // @ts-expect-error -- Fix: Couldn't resolve parser "graphql"
-      { parsers },
-    ],
-  });
+export const DEFAULT_PRETTIFY_QUERY: EditorSlice['onPrettifyQuery'] =
+  async query => {
+    // We don't need to load Prettier initially; it's only used when the 'Format Query' button or shortcut is triggered
+    // @ts-expect-error -- wrong types
+    const { printers } = await import('prettier/plugins/graphql');
+    const { parsers } = await import('prettier/parser-graphql');
+    const prettier = await import('prettier/standalone');
+
+    return prettier.format(query, {
+      parser: 'graphql',
+      plugins: [
+        // Fix: Couldn't find plugin for AST format "graphql"
+        { printers },
+        // @ts-expect-error -- Fix: Couldn't resolve parser "graphql"
+        { parsers },
+      ],
+    });
+  };

packages/graphiql-react/src/utility/jsonc.ts

@@ -1,14 +1,16 @@
-import prettier from 'prettier/standalone';
-// @ts-expect-error -- wrong types
-import { printers } from 'prettier/plugins/estree';
-import { parsers } from 'prettier/parser-babel';
 import {
   parse as jsoncParse,
   ParseError,
   printParseErrorCode,
 } from 'jsonc-parser';
 
-export function formatJSONC(content: string) {
+export async function formatJSONC(content: string): Promise<string> {
+  // We don't need to load Prettier initially; it's only used when the 'Format Query' button or shortcut is triggered
+  const prettier = await import('prettier/standalone');
+  // @ts-expect-error -- wrong types
+  const { printers } = await import('prettier/plugins/estree');
+  const { parsers } = await import('prettier/parser-babel');
+
   return prettier.format(content, {
     parser: 'jsonc',
     plugins: [