graphiql 5: remove UMD builds

.changeset/good-turtles-speak.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/plugin-code-exporter': major
+'@graphiql/plugin-explorer': major
+'graphiql': major
+---
+
+remove UMD builds

.gitignore

@@ -46,11 +46,7 @@ packages/codemirror-graphql/*.d.ts
 packages/codemirror-graphql/*.map
 !packages/codemirror-graphql/*.config.js
 
-packages/graphiql/graphiql*.js
-packages/graphiql/*.css
-packages/graphiql/*.map
 packages/graphiql/cypress/screenshots/
+packages/graphiql/cypress/downloads/
 packages/graphiql/typedoc/
 packages/graphiql/webpack/
-
-packages/graphiql/cypress/downloads/

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

@@ -29,7 +29,7 @@
   "scripts": {
     "types:check": "tsc --noEmit",
     "dev": "vite build --watch --emptyOutDir=false",
-    "build": "vite build && UMD=true vite build",
+    "build": "vite build",
     "postbuild": "cp src/graphiql-code-exporter.d.ts dist/graphiql-code-exporter.d.ts"
   },
   "dependencies": {

packages/graphiql-plugin-code-exporter/src/index.tsx

@@ -1,10 +1,8 @@
 import { useOperationsEditorState, type GraphiQLPlugin } from '@graphiql/react';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import GraphiQLCodeExporter, {
   GraphiQLCodeExporterProps,
 } from 'graphiql-code-exporter';
-
-import './graphiql-code-exporter.d.ts';
 import './index.css';
 
 type GraphiQLCodeExporterPluginProps = Omit<GraphiQLCodeExporterProps, 'query'>;

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

@@ -1,19 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "declaration": true,
-    "jsx": "react"
-  }
+  "extends": "../graphiql-react/tsconfig.json"
 }

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

@@ -3,44 +3,28 @@ import react from '@vitejs/plugin-react';
 import packageJSON from './package.json';
 import dts from 'vite-plugin-dts';
 
-const IS_UMD = process.env.UMD === 'true';
-
 export default defineConfig({
-  plugins: [
-    react({ jsxRuntime: 'classic' }),
-    !IS_UMD && dts({ include: ['src/**'] }),
-  ],
+  plugins: [react(), dts({ include: ['src/**'] })],
   css: {
     transformer: 'lightningcss',
   },
   build: {
-    minify: IS_UMD
-      ? 'terser' // produce better bundle size than esbuild
-      : false,
-    // avoid clean cjs/es builds
-    emptyOutDir: !IS_UMD,
+    minify: false,
     lib: {
       entry: 'src/index.tsx',
-      fileName: (format, filePath) =>
-        `${filePath}.${format === 'umd' ? 'umd.' : ''}js`,
-      name: 'GraphiQLPluginCodeExporter',
-      formats: IS_UMD ? ['umd'] : ['es'],
+      fileName: (_format, filePath) => `${filePath}.js`,
+      formats: ['es'],
       cssFileName: 'style',
     },
     rollupOptions: {
       external: [
+        'react/jsx-runtime',
         // Exclude peer dependencies and dependencies from bundle
-        ...Object.keys(packageJSON.peerDependencies),
-        ...(IS_UMD ? [] : Object.keys(packageJSON.dependencies)),
+        ...Object.keys({
+          ...packageJSON.peerDependencies,
+          ...packageJSON.dependencies,
+        }),
       ],
-      output: {
-        globals: {
-          '@graphiql/react': 'GraphiQL.React',
-          graphql: 'GraphiQL.GraphQL',
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
     },
   },
 });

packages/graphiql-plugin-explorer/package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "types:check": "tsc --noEmit",
     "dev": "vite build --watch --emptyOutDir=false",
-    "build": "vite build && UMD=true vite build",
+    "build": "vite build",
     "postbuild": "cp src/graphiql-explorer.d.ts dist/graphiql-explorer.d.ts"
   },
   "dependencies": {

packages/graphiql-plugin-explorer/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, FC, useCallback } from 'react';
+import { CSSProperties, FC, useCallback } from 'react';
 import {
   GraphiQLPlugin,
   useGraphiQL,

packages/graphiql-plugin-explorer/tsconfig.json

@@ -1,19 +1,3 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "declaration": true,
-    "jsx": "react"
-  }
+  "extends": "../graphiql-react/tsconfig.json"
 }

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

@@ -4,54 +4,36 @@ import svgr from 'vite-plugin-svgr';
 import dts from 'vite-plugin-dts';
 import packageJSON from './package.json';
 
-const IS_UMD = process.env.UMD === 'true';
-
 export default defineConfig({
   plugins: [
-    react({ jsxRuntime: 'classic' }),
+    react(),
     svgr({
       svgrOptions: {
         titleProp: true,
       },
     }),
-    !IS_UMD && [dts({ include: ['src/**'] })],
+    dts({ include: ['src/**'] }),
   ],
   css: {
     transformer: 'lightningcss',
   },
   build: {
-    minify: IS_UMD
-      ? 'terser' // produce better bundle size than esbuild
-      : false,
-    // avoid clean cjs/es builds
-    emptyOutDir: !IS_UMD,
+    minify: false,
     lib: {
       entry: 'src/index.tsx',
-      fileName: (format, filePath) =>
-        `${filePath}.${format === 'umd' ? 'umd.' : ''}js`,
-      name: 'GraphiQLPluginExplorer',
-      formats: IS_UMD ? ['umd'] : ['es'],
+      fileName: (_format, filePath) => `${filePath}.js`,
+      formats: ['es'],
       cssFileName: 'style',
     },
     rollupOptions: {
       external: [
+        'react/jsx-runtime',
         // Exclude peer dependencies and dependencies from bundle
-        ...Object.keys(packageJSON.peerDependencies),
-        ...(IS_UMD ? [] : Object.keys(packageJSON.dependencies)),
+        ...Object.keys({
+          ...packageJSON.peerDependencies,
+          ...packageJSON.dependencies,
+        }),
       ],
-      output: {
-        chunkFileNames: '[name].[format].js',
-        globals: {
-          '@graphiql/react': 'GraphiQL.React',
-          graphql: 'GraphiQL.GraphQL',
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-    commonjsOptions: {
-      esmExternals: true,
-      requireReturnsDefault: 'auto',
     },
   },
 });

packages/graphiql/package.json

@@ -26,17 +26,11 @@
   "files": [
     "dist",
     "!dist/e2e.*",
-    "graphiql.js",
-    "graphiql.js.map",
-    "graphiql.min.js",
-    "graphiql.min.js.map",
-    "graphiql.css",
-    "graphiql.min.css"
+    "!dist/workers/*"
   ],
   "exports": {
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css",
-    "./graphiql.css": "./dist/style.css",
     ".": "./dist/index.js",
     "./setup-workers/*": {
       "types": "./dist/setup-workers/*.d.ts",
@@ -50,7 +44,6 @@
     "dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
     "e2e": "yarn e2e-server 'cypress run'",
     "e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
-    "prepublishOnly": "cp dist/index.umd.js graphiql.js && cp dist/index.umd.js.map graphiql.js.map && cp dist/index.umd.js graphiql.min.js && cp dist/index.umd.js.map graphiql.min.js.map && cp dist/style.css graphiql.css && cp dist/style.css graphiql.min.css",
     "test": "vitest"
   },
   "dependencies": {

packages/graphiql/src/e2e.ts

@@ -1,13 +1,13 @@
 'use no memo';
 
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import ReactDOM from 'react-dom/client';
 import GraphiQL from './cdn';
 import type { TabsState, Theme } from '@graphiql/react';
 import './style.css';
 
 /**
- * UMD GraphiQL Example
+ * CDN GraphiQL Example
  *
  * This is a simple example that provides a primitive query string parser on top of GraphiQL props
  * It assumes a global umd GraphiQL, which would be provided by an index.html in the default example
@@ -96,7 +96,7 @@ function getSchemaUrl(): string {
 const root = ReactDOM.createRoot(document.getElementById('graphiql')!);
 const graphqlVersion = GraphiQL.GraphQL.version;
 
-const props = {
+const props: ComponentProps<typeof GraphiQL> = {
   fetcher: GraphiQL.createFetcher({
     url: getSchemaUrl(),
     subscriptionUrl: 'ws://localhost:8081/subscriptions',