[v4] generate types with vite-plugin-dts

.changeset/flat-lies-heal.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+'@graphiql/plugin-explorer': minor
+'@graphiql/plugin-code-exporter': minor
+---
+
+generate types with `vite-plugin-dts`

examples/monaco-graphql-react-vite/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "scripts": {

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

@@ -9,7 +9,7 @@
   "author": "LekoArts",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "types": "types/index.d.ts",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "keywords": [
     "react",
@@ -19,15 +19,14 @@
     "explorer"
   ],
   "files": [
-    "dist",
-    "src",
-    "types"
+    "dist"
   ],
   "scripts": {
-    "prebuild": "rimraf dist types",
     "dev": "vite",
-    "build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build && UMD=true vite build",
-    "preview": "vite preview"
+    "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",
+    "types:check": "tsc --noEmit"
   },
   "dependencies": {
     "graphiql-code-exporter": "^3.0.3"
@@ -46,6 +45,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.3.5"
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.1"
   }
 }

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

@@ -14,9 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "declaration": true,
-    "declarationDir": "types",
     "jsx": "react"
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

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

@@ -1,13 +1,16 @@
 import { defineConfig } from 'vite';
 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' })],
+  plugins: [react({ jsxRuntime: 'classic' }), dts()],
   build: {
-    minify: IS_UMD ? 'esbuild' : false,
+    minify: IS_UMD
+      ? 'terser' // produce better bundle size than esbuild
+      : false,
     // avoid clean cjs/es builds
     emptyOutDir: !IS_UMD,
     lib: {

packages/graphiql-plugin-explorer/package.json

@@ -8,7 +8,7 @@
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "types": "types/index.d.ts",
+  "types": "dist/index.d.ts",
   "license": "MIT",
   "keywords": [
     "react",
@@ -18,15 +18,14 @@
     "explorer"
   ],
   "files": [
-    "dist",
-    "src",
-    "types"
+    "dist"
   ],
   "scripts": {
-    "prebuild": "rimraf dist types",
     "dev": "vite",
-    "build": "tsc --emitDeclarationOnly && node resources/copy-types.mjs && vite build && UMD=true vite build",
-    "preview": "vite preview"
+    "build": "vite build && UMD=true vite build",
+    "postbuild": "cp src/graphiql-explorer.d.ts dist/graphiql-explorer.d.ts",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit"
   },
   "dependencies": {
     "graphiql-explorer": "^0.9.0"
@@ -44,7 +43,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.1",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

packages/graphiql-plugin-explorer/tsconfig.json

@@ -14,9 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "declaration": true,
-    "declarationDir": "types",
     "jsx": "react"
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

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

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import packageJSON from './package.json';
+import dts from 'vite-plugin-dts';
 
 const IS_UMD = process.env.UMD === 'true';
 
@@ -14,9 +15,12 @@ export default defineConfig({
         titleProp: true,
       },
     }),
+    dts(),
   ],
   build: {
-    minify: IS_UMD ? 'esbuild' : false,
+    minify: IS_UMD
+      ? 'terser' // produce better bundle size than esbuild
+      : false,
     // avoid clean cjs/es builds
     emptyOutDir: !IS_UMD,
     lib: {

packages/graphiql-react/package.json

@@ -18,13 +18,13 @@
     ".": {
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
-      "types": "./types/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     },
     "./font/roboto.css": "./font/roboto.css",
     "./font/fira-code.css": "./font/fira-code.css",
     "./dist/style.css": "./dist/style.css"
   },
-  "types": "types/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "keywords": [
     "react",
     "graphql",
@@ -33,14 +33,13 @@
   ],
   "files": [
     "dist",
-    "font",
-    "src",
-    "types"
+    "font"
   ],
   "scripts": {
-    "prebuild": "rimraf dist types",
-    "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
-    "build": "tsc --emitDeclarationOnly && vite build"
+    "dev": "vite",
+    "build": "vite build",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0",
@@ -75,7 +74,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.1",
     "vite-plugin-svgr": "^4.2.0"
   }
 }

packages/graphiql-react/tsconfig.json

@@ -14,10 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "declaration": true,
-    "declarationDir": "types",
-    "outDir": "tsc"
+    "declaration": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }

packages/graphiql-react/vite.config.mts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import postCssNestingPlugin from 'postcss-nesting';
 import packageJSON from './package.json';
+import dts from 'vite-plugin-dts';
 
 export default defineConfig({
   plugins: [
@@ -13,6 +14,10 @@ export default defineConfig({
         titleProp: true,
       },
     }),
+    dts({
+      outDir: ['dist/types'],
+      exclude: ['**/*.spec.{ts,tsx}', '**/__tests__/'],
+    }),
   ],
   css: {
     postcss: {
@@ -37,7 +42,7 @@ export default defineConfig({
         ),
       ],
       output: {
-        chunkFileNames: '[name].[format].js',
+        chunkFileNames: '[format]/[name].js',
       },
     },
   },

packages/graphiql/package.json

@@ -35,6 +35,8 @@
     "cypress-open": "yarn dev 'cypress open'",
     "build": "vite build && UMD=true vite build",
     "dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
+    "prebuild": "yarn types:check",
+    "types:check": "tsc --noEmit",
     "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 }}'"
   },
@@ -65,9 +67,9 @@
     "start-server-and-test": "^1.10.11",
     "subscriptions-transport-ws": "0.11.0",
     "typescript": "^4.6.3",
-    "vite": "^5.3.5",
+    "vite": "^5.4.0",
     "vite-plugin-commonjs": "^0.10.1",
-    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-dts": "^4.0.1",
     "ws": "8.17.1"
   }
 }

packages/graphiql/vite.config.mts

@@ -12,6 +12,7 @@ const umdConfig = defineConfig({
   // To bundle `const { createClient } = require('graphql-ws')` in `createWebsocketsFetcherFromUrl` function
   plugins: [commonjs()],
   build: {
+    minify: 'terser', // produce less bundle size
     sourcemap: true,
     emptyOutDir: false,
     lib: {