graphql · dimaMachina · Jun 16, 2023 · Jul 30, 2023 · Jul 30, 2023 · Jul 30, 2023
diff --git a/.browserslistrc b/.browserslistrc
@@ -1,5 +1 @@
-last 2 versions
-Firefox ESR
-not dead
-not IE 11
-not ios 10
+defaults and supports es6-module
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,25 @@
+{
+  "mode": "pre",
+  "tag": "monaco",
+  "initialVersions": {
+    "example-graphiql-webpack": "1.1.1-alpha.8",
+    "example-monaco-graphql-nextjs": "0.0.0",
+    "example-monaco-graphql-react-vite": "0.0.0",
+    "example-monaco-graphql-webpack": "1.1.1",
+    "cm6-graphql": "0.0.9",
+    "codemirror-graphql": "2.0.9",
+    "graphiql": "3.0.5",
+    "@graphiql/plugin-code-exporter": "0.3.4",
+    "@graphiql/plugin-explorer": "0.3.4",
+    "@graphiql/react": "0.19.3",
+    "@graphiql/toolkit": "0.9.1",
+    "graphql-language-service": "5.1.7",
+    "graphql-language-service-cli": "3.3.25",
+    "graphql-language-service-server": "2.11.3",
+    "monaco-graphql": "1.3.0",
+    "vscode-graphql": "0.8.17",
+    "vscode-graphql-execution": "0.2.4",
+    "vscode-graphql-syntax": "1.2.2"
+  },
+  "changesets": []
+}
diff --git a/.changeset/soft-cars-notice.md b/.changeset/soft-cars-notice.md
@@ -0,0 +1,7 @@
+---
+'graphiql': major
+'@graphiql/react': major
+'monaco-graphql': major
+---
+
+release `graphiql` with `monaco-editor` support
diff --git a/.gitignore b/.gitignore
@@ -41,6 +41,7 @@ packages/codemirror-graphql/*.d.ts
 packages/codemirror-graphql/*.map
 !packages/codemirror-graphql/*.config.js
 
+# cdn bundle build assets
 packages/graphiql/index.html
 packages/graphiql/dev.html
 packages/graphiql/analyzer.html
@@ -50,3 +51,4 @@ packages/graphiql/*.map
 packages/graphiql/cypress/screenshots/
 packages/graphiql/typedoc/
 packages/graphiql/webpack/
+packages/graphiql/*.worker.js
diff --git a/examples/graphiql-webpack/src/index.html.ejs b/examples/graphiql-webpack/src/index.html.ejs
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>GraphiQL Webpack Example!</title>
+  </head>
+
+  <body>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+        min-height: 100vh;
+      }
+      #root {
+        height: 100vh;
+      }
+    </style>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -1,4 +1,4 @@
-import 'regenerator-runtime/runtime.js';
+import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { GraphiQL } from 'graphiql';

diff --git a/examples/graphiql-webpack/webpack.config.js b/examples/graphiql-webpack/webpack.config.js
@@ -1 +1,83 @@
-module.exports = require('../../resources/webpack.config');
+const path = require('node:path');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const relPath = (...args) => path.resolve(__dirname, ...args);
+const rootPath = (...args) => relPath(...args);
+
+const resultConfig = {
+  mode: process.env.NODE_ENV,
+  entry: './index.jsx',
+  context: rootPath('src'),
+  output: {
+    path: rootPath('dist'),
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      // you can also use ts-loader of course
+      // i prefer to use babel-loader & @babel/plugin-typescript
+      // so we can experiment with how changing browserslistrc targets impacts
-      // you can also use ts-loader of course
-      // i prefer to use babel-loader & @babel/plugin-typescript
-      // so we can experiment with how changing browserslistrc targets impacts
+      // I prefer to use babel-loader & @babel/plugin-typescript
+      // Of course, you can also use ts-loader
+      // We can experiment to see how changing browserslistrc targets impacts
-      // you can also use ts-loader of course
-      // i prefer to use babel-loader & @babel/plugin-typescript
-      // so we can experiment with how changing browserslistrc targets impacts
+      // I prefer to use babel-loader & @babel/plugin-typescript
+      // Of course, you can also use ts-loader
+      // We can experiment to see how changing browserslistrc targets impacts
+      // monaco-graphql bundling
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: [{ loader: 'babel-loader' }],
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: [{ loader: 'svg-inline-loader' }],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.json', '.jsx', '.css', '.ts', '.tsx'],
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+    // in order to prevent async modules for CDN builds
+    // until we can guarantee it will work with the CDN properly
+    // and so that graphiql.min.js can retain parity
-    // in order to prevent async modules for CDN builds
-    // until we can guarantee it will work with the CDN properly
-    // and so that graphiql.min.js can retain parity
+    // This is to prevent async modules for CDN builds
+    // until we can guarantee it will work properly with the CDN
+    // and that graphiql.min.js can retain parity
-    // in order to prevent async modules for CDN builds
-    // until we can guarantee it will work with the CDN properly
-    // and so that graphiql.min.js can retain parity
+    // This is to prevent async modules for CDN builds
+    // until we can guarantee it will work properly with the CDN
+    // and that graphiql.min.js can retain parity
+    new HtmlWebpackPlugin({
+      template: relPath('src/index.html.ejs'),
+      filename: 'index.html',
+    }),
+
+    new MonacoWebpackPlugin({
+      languages: ['json', 'graphql'],
+      publicPath: '/',
+      customLanguages: [
+        {
+          label: 'graphql',
+          worker: {
+            id: 'graphql',
+            entry: 'monaco-graphql/esm/graphql.worker.js',
+          },
+        },
+      ],
+    }),
+  ],
+};
+
+if (process.env.ANALYZE) {
+  resultConfig.plugins.push(
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      reportFilename: rootPath('build/analyzer.html'),
+    }),
+  );
+}
+
+module.exports = resultConfig;
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -38,8 +38,7 @@
     "types"
   ],
   "scripts": {
-    "prebuild": "rimraf dist types",
-    "dev": "concurrently 'tsc --emitDeclarationOnly --watch' 'vite build --watch'",
+    "dev": "vite build --watch",
     "build": "tsc --emitDeclarationOnly && vite build"
   },
   "peerDependencies": {
@@ -49,6 +48,8 @@
   },
   "dependencies": {
     "@graphiql/toolkit": "^0.9.1",
+    "monaco-editor": "^0.39.0",
+    "monaco-graphql": "^1.2.3",
     "@headlessui/react": "^1.7.15",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",