introduce pnpm, fix build tooling

package.json

@@ -32,11 +32,11 @@
   "scripts": {
     "build": "pnpm build:clean && pnpm build-clean && pnpm run tsc && pnpm run --recursive build",
     "build-bundles": "wsrun -p -m -s build-bundles",
-    "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && pnpm run build-bundles-clean",
+    "build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && pnpm -r run build-bundles-clean",
     "build-clean": "wsrun -m build-clean",
     "build-demo": "wsrun -m -s build-demo",
     "build-docs": "rimraf 'packages/graphiql/typedoc' && typedoc 'packages'",
-    "build:clean": "pnpm tsc --clean && pnpm tsc --clean resources/tsconfig.graphiql.json",
+    "build:clean": "pnpm tsc --clean",
     "build:cm6-graphql": "pnpm run --filter cm6-graphql build",
     "build:graphiql": "pnpm tsc resources/tsconfig.graphiql.json",
     "build:graphiql-plugin-explorer": "pnpm run --filter @graphiql/plugin-explorer build",
@@ -60,7 +60,7 @@
     "lint-check": "eslint-config-prettier .eslintrc.js",
     "lint-cspell": "cspell --gitignore '**/*.{js,ts,jsx,tsx,md,html,json,css}'",
     "lint-fix": "pnpm eslint --fix",
-    "postbuild": "pnpm run --recursive codemirror-graphql run postbuild",
+    "postbuild": "pnpm run --filter codemirror-graphql postbuild",
     "prebuild-bundles": "pnpm build-bundles-clean",
     "prepublishOnly": "./scripts/prepublish.sh && npm ci:prepublish",
     "pretty": "node scripts/pretty.js",
@@ -79,7 +79,7 @@
     "test": "pnpm jest --noStackTrace",
     "test:coverage": "pnpm jest --coverage",
     "test:watch": "pnpm jest --watch",
-    "testonly": "jest && pnpm run test --recursive codemirror-graphql",
+    "testonly": "jest && pnpm run test --filter codemirror-graphql",
     "tsc": "tsc --build"
   },
   "devDependencies": {
@@ -95,7 +95,6 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@manypkg/get-packages": "^1.1.3",
-    "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@types/aws-serverless-express": "^3.3.3",
     "@types/codemirror": "^0.0.90",
@@ -139,7 +138,8 @@
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.5",
-    "typedoc": "^0.19.2",
+    "typedoc": "0.22.7",
+    "typedoc-plugin-expand-object-like-types": "^0.1.1",
     "typescript": "^4.6.3",
     "wsrun": "^5.2.4"
   },

packages/graphiql-react/.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+cjs
 dist-ssr
 types
 *.local
@@ -24,4 +25,8 @@ types
 *.sln
 *.sw?
 
+# generated files
+vite.config.js
+vite.config.d.ts
+
 

packages/graphiql-react/package.json

@@ -11,9 +11,9 @@
     "url": "https://github.com/graphql/graphiql/issues?q=issue+label:@graphiql/react"
   },
   "license": "MIT",
-  "main": "dist/graphiql-react.cjs.js",
-  "module": "dist/graphiql-react.es.js",
   "types": "types/index.d.ts",
+  "main": "cjs/index.js",
+  "module": "dist/index.es.js",
   "keywords": [
     "react",
     "graphql",
@@ -26,9 +26,15 @@
     "src",
     "types"
   ],
+  "typedoc": {
+    "entryPoint": "./cjs/index.d.ts",
+    "readmeFile": "./README.md",
+    "displayName": "@graphiql/react",
+    "tsconfig": "./tsconfig.cjs.json"
+  },
   "scripts": {
-    "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
-    "build": "tsc --emitDeclarationOnly && vite build"
+    "build": "vite build",
+    "dev": "'vite build --watch'"
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0",
@@ -49,13 +55,14 @@
     "copy-to-clipboard": "^3.2.0",
     "graphql-language-service": "^5.1.1",
     "markdown-it": "^12.2.0",
-    "set-value": "^4.1.0"
+    "set-value": "^4.1.0",
+    "vite-plugin-no-bundle": "^2.0.1"
   },
   "devDependencies": {
     "@testing-library/react": "12.1.5",
     "@types/codemirror": "^5.60.5",
-    "@types/set-value": "^4.0.1",
     "@types/markdown-it": "12.2.3",
+    "@types/set-value": "^4.0.1",
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
     "postcss-nesting": "^10.1.7",

packages/graphiql-react/src/provider.tsx

@@ -12,13 +12,22 @@ import { PluginContextProvider, PluginContextProviderProps } from './plugin';
 import { SchemaContextProvider, SchemaContextProviderProps } from './schema';
 import { StorageContextProvider, StorageContextProviderProps } from './storage';
 
-export type GraphiQLProviderProps = EditorContextProviderProps &
-  ExecutionContextProviderProps &
-  ExplorerContextProviderProps &
-  HistoryContextProviderProps &
-  PluginContextProviderProps &
-  SchemaContextProviderProps &
-  StorageContextProviderProps;
+export interface GraphiQLProviderProps
+  extends EditorContextProviderProps,
+    ExecutionContextProviderProps,
+    ExplorerContextProviderProps,
+    HistoryContextProviderProps,
+    PluginContextProviderProps,
+    SchemaContextProviderProps,
+    StorageContextProviderProps {}
+
+// export type GraphiQLProviderProps = EditorContextProviderProps &
+//   ExecutionContextProviderProps &
+//   ExplorerContextProviderProps &
+//   HistoryContextProviderProps &
+//   PluginContextProviderProps &
+//   SchemaContextProviderProps &
+//   StorageContextProviderProps;
 
 export function GraphiQLProvider({
   children,

packages/graphiql-react/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
+    "composite": true,
     "useDefineForClassFields": true,
+    "target": "esnext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
@@ -16,9 +17,20 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationDir": "types",
-    "outDir": "tsc"
+    "emitDeclarationOnly": true,
+    "rootDir": "./src",
+
+    "sourceMap": true
   },
   "include": ["src"],
   "exclude": ["**/__tests__/**"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    {
+      "path": "../codemirror-graphql/tsconfig.esm.json"
+    },
+    {
+      "path": "../graphiql-toolkit"
+    }
+  ]
 }

packages/graphiql-react/vite.config.ts

@@ -1,22 +1,32 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import reactSvgPlugin from 'vite-plugin-react-svg';
-
+import postCssNestingPlugin from 'postcss-nesting';
+// import noBundlePlugin from 'vite-plugin-no-bundle';
 export default defineConfig({
   plugins: [
+    // TODO:  disable bundling dependencies
+    // noBundlePlugin(),
     react(),
     reactSvgPlugin({
       defaultExport: 'component',
       expandProps: 'end',
       titleProp: true,
     }),
   ],
+  css: {
+    postcss: {
+      // @ts-expect-error
+      plugins: [postCssNestingPlugin()],
+    },
+  },
   esbuild: {
     // We use function names for generating readable error messages, so we want
     // them to be preserved when building and minifying.
     keepNames: true,
   },
   build: {
+    sourcemap: true,
     lib: {
       entry: 'src/index.ts',
       fileName: 'graphiql-react',

packages/graphiql/package.json

@@ -16,9 +16,9 @@
     "url": "https://github.com/graphql/graphiql/issues?q=issue+label:graphiql"
   },
   "license": "MIT",
+  "types": "esm/index.d.ts",
   "main": "dist/index.js",
   "module": "esm/index.js",
-  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "esm",
@@ -36,11 +36,10 @@
     "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
     "build-bundles-dev": "cross-env NODE_ENV=development CDN=1 pnpm webpack --mode development --bail",
     "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 pnpm webpack --mode production --bail",
-    "build-clean": "rimraf esm dist webpack *.html",
     "build-demo": "build-storybook -o ./storybook",
     "check": "tsc --noEmit",
     "cypress-open": "pnpm e2e-server 'cypress open'",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
+    "dev": "cross-env NODE_ENV=development webpack-cli serve --config resources/webpack.config.js",
     "e2e": "pnpm 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 }}'",
     "storybook": "start-storybook",
@@ -51,6 +50,7 @@
     "@graphiql/toolkit": "^0.8.0",
     "entities": "^2.0.0",
     "graphql-language-service": "^5.1.1",
+    "graphql-ws": "^5.11.3",
     "markdown-it": "^12.2.0",
     "meros": "^1.2.1"
   },
@@ -82,8 +82,8 @@
     "identity-obj-proxy": "^3.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "postcss": "8.4.21",
-    "postcss-loader": "7.0.2",
     "postcss-import": "15.1.0",
+    "postcss-loader": "7.0.2",
     "postcss-preset-env": "^8.0.1",
     "prop-types": "15.7.2",
     "react": "^17.0.2",

packages/graphiql/src/components/GraphiQL.tsx

@@ -76,8 +76,9 @@ export type GraphiQLToolbarConfig = {
  *
  * https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops
  */
-export type GraphiQLProps = Omit<GraphiQLProviderProps, 'children'> &
-  GraphiQLInterfaceProps;
+export interface GraphiQLProps
+  extends Omit<GraphiQLProviderProps, 'children'>,
+    GraphiQLInterfaceProps {}
 
 /**
  * The top-level React component for GraphiQL, intended to encompass the entire

packages/graphiql/test/afterDevServer.js

@@ -2,7 +2,7 @@ const { useServer } = require('graphql-ws/lib/use/ws');
 const { Server: WebSocketServer } = require('ws');
 const schema = require('./schema');
 
-module.exports = function afterDevServer(_app, _server, _compiler) {
+module.exports = function afterDevServer() {
   const wsServer = new WebSocketServer({
     path: '/subscriptions',
     port: 8081,

packages/graphiql/test/beforeDevServer.js

@@ -11,7 +11,8 @@ const { graphqlHTTP } = require('express-graphql');
 const schema = require('./schema');
 const { schema: badSchema } = require('./bad-schema');
 
-module.exports = function beforeDevServer(app, _server, _compiler) {
+module.exports = function beforeDevServer(app) {
+  // console.log(app)
   // GraphQL Server
   app.post('/graphql', graphqlHTTP({ schema }));
   app.get('/graphql', graphqlHTTP({ schema }));
@@ -20,9 +21,9 @@ module.exports = function beforeDevServer(app, _server, _compiler) {
     res.json({ data: badSchema });
     next();
   });
+  // app.use('/', express.static(path.join(__dirname, '../')))
 
   app.use('/images', express.static(path.join(__dirname, 'images')));
-
   app.use(
     '/renderExample.js',
     express.static(path.join(__dirname, '../resources/renderExample.js')),

packages/graphiql/tsconfig.esm.json

@@ -26,6 +26,9 @@
     {
       "path": "../graphiql-toolkit"
     },
+    {
+      "path": "../graphiql-react"
+    },
     {
       "path": "../graphql-language-service"
     }

packages/graphiql/tsconfig.json

@@ -21,6 +21,9 @@
     {
       "path": "../graphiql-toolkit"
     },
+    {
+      "path": "../graphiql-react"
+    },
     {
       "path": "../codemirror-graphql"
     },

packages/graphql-language-service-server/package.json

@@ -43,6 +43,7 @@
     "@vue/compiler-sfc": "^3.2.41",
     "dotenv": "8.2.0",
     "fast-glob": "^3.2.7",
+    "handlebars": "^4.7.7",
     "glob": "^7.2.0",
     "graphql-config": "4.3.0",
     "graphql-language-service": "^5.1.1",