graphql · shabab477 · Apr 22, 2022 · Apr 22, 2022 · Apr 22, 2022 · Aug 7, 2022
diff --git a/jest.config.base.js b/jest.config.base.js
@@ -22,6 +22,7 @@ module.exports = (dir, env = 'dom') => {
       '\\.(css|less)$': 'identity-obj-proxy',
       '^graphql-language-([^/]+)': `${__dirname}/packages/graphql-language-$1/src`,
       '^@graphiql-plugins\\/([^/]+)': `${__dirname}/plugins/$1/src`,
+      '^codemirror-graphql\\/esm\\/([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
       '^codemirror-graphql\\/([^]+)': `${__dirname}/packages/codemirror-graphql/src/$1`,
       '^example-([^/]+)': `${__dirname}/examples/$1/src`,
     },

diff --git a/packages/graphiql/.gitignore b/packages/graphiql/.gitignore
@@ -14,6 +14,7 @@ example/graphiql.js
 example/graphiql.css
 test/pid
 /*.html
+!index.html
 renderGraphiql.js
 cypress/screenshots
 .awcache
diff --git a/packages/graphiql/index.html b/packages/graphiql/index.html
@@ -0,0 +1,43 @@
+<!--
+ *  Copyright (c) 2022 GraphQL Contributors
+ *  All rights reserved.
+ *
+ *  This source code is licensed under the license found in the
+ *  LICENSE file in the root directory of this source tree.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        height: 100%;
+        margin: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+      #graphiql {
+        height: 100vh;
+      }
+    </style>
+
+    <!--
+      This GraphiQL example depends on Promise and fetch, which are available in
+      modern browsers, but can be "polyfilled" for older browsers.
+      GraphiQL itself depends on React DOM.
+      If you do not want to rely on a CDN, you can host these files locally or
+      include them directly in your favored resource bunder.
+    -->
+    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+
+    <!--
+      These two files can be found in the npm module, however you may wish to
+      copy them directly into your environment, or perhaps include them in your
+      favored resource bundler.
+     -->
+  </head>
+  <body>
+    <div id="graphiql">Loading...</div>
+    <script defer src="/resources/renderExample.js" type="application/javascript"></script>
+  </body>
+</html>
diff --git a/packages/graphiql/package.json b/packages/graphiql/package.json
@@ -28,18 +28,19 @@
   ],
   "scripts": {
     "analyze-bundle": "cross-env NODE_ENV=production CDN=1 ANALYZE=1 yarn webpack -p",
-    "build": "yarn build-clean && yarn build-cjs && yarn build-esm",
+    "build": "yarn build-cjs && yarn build-esm",
     "build-bundles": "yarn build-bundles-clean && yarn build-bundles-dev && yarn build-bundles-min",
-    "build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
-    "build-bundles-dev": "cross-env NODE_ENV=development CDN=1 yarn webpack -d --bail",
-    "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 yarn webpack -p --bail",
+    "build-bundles-clean": "rimraf 'graphiql.*{js,css}'",
+    "build-bundles-dev": "cross-env NODE_ENV=development CDN=1 yarn vite build --mode dev",
+    "build-bundles-min": "cross-env ANALYZE=1 NODE_ENV=production CDN=1 vite build",
     "build-cjs": "tsc",
     "build-clean": "rimraf esm dist webpack *.html",
     "build-demo": "build-storybook -o ./storybook",
     "build-esm": "tsc --project ./tsconfig.esm.json",
     "check": "tsc --noEmit",
     "cypress-open": "yarn e2e-server 'cypress open'",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
+    "dev-vite": "cross-env NODE_ENV=development 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 }}'",
     "storybook": "start-storybook",
@@ -62,6 +63,10 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "router": "^1.3.6",
+    "vite": "^2.9.5",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "rollup-plugin-visualizer": "^5.6.0",
     "@testing-library/jest-dom": "^5.4.0",
     "@testing-library/react": "9.4.1",
     "@types/codemirror": "^5.58.2",

diff --git a/packages/graphiql/src/components/QueryEditor.tsx b/packages/graphiql/src/components/QueryEditor.tsx
@@ -143,11 +143,11 @@ export class QueryEditor extends React.Component<QueryEditorProps, {}>
   addonModules = () => [
     import('codemirror/addon/comment/comment'),
     import('codemirror/addon/search/search'),
-    import('codemirror-graphql/hint'),
-    import('codemirror-graphql/lint'),
-    import('codemirror-graphql/info'),
-    import('codemirror-graphql/jump'),
-    import('codemirror-graphql/mode'),
+    import('codemirror-graphql/esm/hint'),
+    import('codemirror-graphql/esm/lint'),
+    import('codemirror-graphql/esm/info'),
+    import('codemirror-graphql/esm/jump'),
+    import('codemirror-graphql/esm/mode'),
   ];
 
   async initializeEditor() {

diff --git a/packages/graphiql/src/components/ResultViewer.tsx b/packages/graphiql/src/components/ResultViewer.tsx
@@ -81,7 +81,7 @@ export class ResultViewer extends React.Component<ResultViewerProps, {}>
     import('codemirror/addon/search/jump-to-line'),
     // @ts-expect-error
     import('codemirror/keymap/sublime'),
-    import('codemirror-graphql/results/mode'),
+    import('codemirror-graphql/esm/results/mode'),
   ];
 
   async initializeEditor() {
@@ -94,7 +94,7 @@ export class ResultViewer extends React.Component<ResultViewerProps, {}>
     const ImagePreview = this.props.ImagePreview;
 
     if (Tooltip || ImagePreview) {
-      await import('codemirror-graphql/utils/info-addon');
+      await import('codemirror-graphql/esm/utils/info-addon');
       const tooltipDiv = document.createElement('div');
       CodeMirror.registerHelper(
         'info',

diff --git a/packages/graphiql/src/components/VariableEditor.tsx b/packages/graphiql/src/components/VariableEditor.tsx
@@ -134,9 +134,9 @@ export class VariableEditor extends React.Component<VariableEditorProps> {
   }
 
   addonModules = () => [
-    import('codemirror-graphql/variables/hint'),
-    import('codemirror-graphql/variables/lint'),
-    import('codemirror-graphql/variables/mode'),
+    import('codemirror-graphql/esm/variables/hint'),
+    import('codemirror-graphql/esm/variables/lint'),
+    import('codemirror-graphql/esm/variables/mode'),
   ];
 
   async initializeEditor() {

diff --git a/packages/graphiql/tsconfig.esm.json b/packages/graphiql/tsconfig.esm.json
@@ -10,6 +10,7 @@
   },
   "include": ["src"],
   "exclude": [
+    "src/main.tsx",
     "**/__tests__/**",
     "**/dist/**.*",
     "**/*.spec.ts",

diff --git a/packages/graphiql/tsconfig.json b/packages/graphiql/tsconfig.json
@@ -5,7 +5,9 @@
     "outDir": "./dist",
     "composite": true,
     "jsx": "react",
-    "target": "es5",
+    "target": "ESNext",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
     "strictPropertyInitialization": false
   },
   "include": ["src"],

diff --git a/packages/graphiql/vite.config.ts b/packages/graphiql/vite.config.ts
@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite';
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import visualizer from 'rollup-plugin-visualizer';
+import path from 'path';
+import express from 'express';
+const { graphqlHTTP } = require('express-graphql');
+const schema = require('./test/schema');
+const { schema: badSchema } = require('./test/bad-schema');
+const Router = require('router');
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          'vue': 'React',
+          'react-dom': 'ReactDOM'
+        }
+      }
+    }
+  },
+  plugins: [
+    // reactRefresh(),
+    // visualizer()
+    {
+      name: 'vite-plugin-test-server',
+      configureServer(server) {
+        const app = new Router();
+        app.post('/graphql', graphqlHTTP({ schema }));
+
+        app.post('/bad/graphql', (_req, res, next) => {
+          res.json({ data: badSchema });
+          next();
+        });
+
+        app.get(
+          '/graphql',
+          graphqlHTTP({
+            schema,
+          }),
+        );
+
+        app.use('/images', express.static(path.join(__dirname, 'images')));
+
+        app.use(
+          '/renderExample.js',
+          express.static(path.join(__dirname, '../resources/renderExample.js')),
+        );
+        server.middlewares.use(app);
+      },
+    },
+  ],
+  css: {
+    postcss: {
+      file: path.resolve(__dirname, 'src/css'),
+    } as any,
+  },
+});
diff --git a/resources/tsconfig.build.esm.json b/resources/tsconfig.build.esm.json
@@ -9,10 +9,10 @@
       "path": "../packages/graphiql-toolkit/tsconfig.esm.json"
     },
     {
-      "path": "../packages/graphiql/tsconfig.esm.json"
+      "path": "../packages/codemirror-graphql/tsconfig.esm.json"
     },
     {
-      "path": "../packages/codemirror-graphql/tsconfig.esm.json"
+      "path": "../packages/graphiql/tsconfig.esm.json"
     },
     {
       "path": "../packages/monaco-graphql/tsconfig.esm.json"