[v4] use vite build --watch instead of vite for dev script because we don't need development server for them (#3705)

Author: dimaMachina

.changeset/orange-rivers-draw.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/plugin-code-exporter': patch
+'@graphiql/plugin-explorer': patch
+'@graphiql/react': patch
+---
+
+use `vite build --watch` instead of `vite` for `dev` script because we don't need development server for them
+
+do not use `vite-plugin-dts` when generating umd build 

packages/graphiql-plugin-code-exporter/package.json

@@ -22,7 +22,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "vite build && UMD=true vite build",
     "prebuild": "yarn types:check",
     "postbuild": "cp src/graphiql-code-exporter.d.ts dist/graphiql-code-exporter.d.ts",

packages/graphiql-plugin-code-exporter/vite.config.mts

@@ -6,7 +6,10 @@ import dts from 'vite-plugin-dts';
 const IS_UMD = process.env.UMD === 'true';
 
 export default defineConfig({
-  plugins: [react({ jsxRuntime: 'classic' }), dts()],
+  plugins: [
+    react({ jsxRuntime: 'classic' }),
+    !IS_UMD && dts({ rollupTypes: true }),
+  ],
   build: {
     minify: IS_UMD
       ? 'terser' // produce better bundle size than esbuild

packages/graphiql-plugin-explorer/package.json

@@ -21,7 +21,7 @@
     "dist"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "vite build && UMD=true vite build",
     "postbuild": "cp src/graphiql-explorer.d.ts dist/graphiql-explorer.d.ts",
     "prebuild": "yarn types:check",

packages/graphiql-plugin-explorer/vite.config.mts

@@ -15,7 +15,7 @@ export default defineConfig({
         titleProp: true,
       },
     }),
-    dts(),
+    !IS_UMD && dts({ rollupTypes: true }),
   ],
   build: {
     minify: IS_UMD

packages/graphiql-react/package.json

@@ -36,7 +36,7 @@
     "font"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "vite build",
     "prebuild": "yarn types:check",
     "types:check": "tsc --noEmit"

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

@@ -333,8 +333,6 @@ export function useAutoCompleteLeafs({
   }, [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') => {

packages/graphiql/src/cdn.ts

@@ -9,41 +9,28 @@ import { createGraphiQLFetcher, createLocalStorage } from '@graphiql/toolkit';
 import * as GraphQL from 'graphql';
 import { GraphiQL } from './components/GraphiQL';
 
-import '@graphiql/react/font/roboto.css';
-import '@graphiql/react/font/fira-code.css';
-import '@graphiql/react/dist/style.css';
-import './style.css';
-
 /**
  * For the CDN bundle we add some static properties to the component function
  * so that they can be accessed in the inline-script in the HTML file.
  */
-
-/**
- * This function is needed in order to easily create a fetcher function.
- */
-// @ts-expect-error
-GraphiQL.createFetcher = createGraphiQLFetcher;
-
-/**
- * This function is needed in order to easily generate a custom storage namespace
- */
-// @ts-expect-error
-GraphiQL.createLocalStorage = createLocalStorage;
-
-/**
- * We also add the complete `graphiql-js` exports so that this instance of
- * `graphiql-js` can be reused from plugin CDN bundles.
- */
-// @ts-expect-error
-GraphiQL.GraphQL = GraphQL;
-
-/**
- * We also add the complete `@graphiql/react` exports. These will be included
- * in the bundle anyway since they make up the `GraphiQL` component, so by
- * doing this we can reuse them from plugin CDN bundles.
- */
-// @ts-expect-error
-GraphiQL.React = GraphiQLReact;
-
-export default GraphiQL;
+export default Object.assign(GraphiQL, {
+  /**
+   * This function is needed in order to easily create a fetcher function.
+   */
+  createFetcher: createGraphiQLFetcher,
+  /**
+   * This function is needed in order to easily generate a custom storage namespace
+   */
+  createLocalStorage,
+  /**
+   * We also add the complete `graphiql-js` exports so that this instance of
+   * `graphiql-js` can be reused from plugin CDN bundles.
+   */
+  GraphQL,
+  /**
+   * We also add the complete `@graphiql/react` exports. These will be included
+   * in the bundle anyway since they make up the `GraphiQL` component, so by
+   * doing this we can reuse them from plugin CDN bundles.
+   */
+  React: GraphiQLReact,
+});

packages/graphiql/src/index.ts

@@ -4,11 +4,14 @@
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
  */
+import '@graphiql/react/font/roboto.css';
+import '@graphiql/react/font/fira-code.css';
+import '@graphiql/react/dist/style.css';
+import './style.css';
 
 /**
  * GraphiQL
  */
-
 export { GraphiQLProvider } from '@graphiql/react';
 
 /**