graphql · dimaMachina · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -20,6 +20,7 @@
     "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
+    "react-hot-loader": "^4.13.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.20.2",

diff --git a/examples/graphiql-webpack/public/logo.svg b/examples/graphiql-webpack/public/logo.svg
diff --git a/functions/graphql.ts b/functions/graphql.ts
@@ -45,11 +45,10 @@ export function createHandler<Context extends OperationContext = undefined>(
         statusCode: init.status,
       };
     } catch (err) {
-      // The handler should'nt throw errors.
+      // The handler shouldn't throw errors.
       // If you wish to handle them differently, consider implementing your own request handler.
       console.error(
-        'Internal error occurred during request handling. ' +
-          'Please check your implementation.',
+        'Internal error occurred during request handling. Please check your implementation.',
         err,
       );
       return { statusCode: 500 };

diff --git a/packages/graphiql/index.html b/packages/graphiql/index.html
@@ -22,15 +22,18 @@
         font-size: 4rem;
       }
     </style>
-    <!--umd-replace-start-->
-    <script type="module">
-      import React from 'react';
-      import ReactDOM from 'react-dom/client';
-      import GraphiQL from './src/cdn';
-
-      Object.assign(globalThis, { React, ReactDOM, GraphiQL });
-    </script>
-    <!--umd-replace-end-->
+    <!--vite-replace-start-->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+    ></script>
+    <script src="/dist/index.umd.js"></script>
+    <link href="/dist/style.css" rel="stylesheet" />
+    <!--vite-replace-end-->
   </head>
   <body>
     <div id="graphiql">

diff --git a/packages/graphiql/src/index.ts b/packages/graphiql/src/index.ts
@@ -4,9 +4,6 @@
  *  This source code is licensed under the MIT license found in the
  *  LICENSE file in the root directory of this source tree.
  */
-import '@graphiql/react/font/roboto.css';
-import '@graphiql/react/font/fira-code.css';
-import '@graphiql/react/dist/style.css';
 import './style.css';
 
 /**

diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
@@ -1,3 +1,7 @@
+@import '@graphiql/react/font/roboto.css';
+@import '@graphiql/react/font/fira-code.css';
+@import '@graphiql/react/dist/style.css';
+
 /* Everything */
 .graphiql-container {
   background-color: hsl(var(--color-base));

diff --git a/packages/graphiql/test/e2e-server.js b/packages/graphiql/test/e2e-server.js
@@ -7,7 +7,6 @@
 
 /* eslint-disable no-console, import-x/no-extraneous-dependencies */
 import { createServer } from 'node:http';
-import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import express from 'express';
@@ -44,37 +43,6 @@ app.post('/graphql-error/graphql', (_req, res, next) => {
 if (process.env.CI === 'true') {
   const __dirname = path.dirname(fileURLToPath(import.meta.url));
   // const __dirname = import.meta.dirname; // can be converted to, after Node.js upgrade to v20
-
-  const indexHtml = fs.readFileSync(
-    path.join(__dirname, '..', 'index.html'),
-    'utf8',
-  );
-  const start = '<!--umd-replace-start-->';
-  const end = '<!--umd-replace-end-->';
-  const contentToReplace = indexHtml.slice(
-    indexHtml.indexOf(start),
-    indexHtml.indexOf(end) + end.length,
-  );
-
-  const indexHtmlWithUmd = indexHtml.replace(
-    contentToReplace,
-    /* HTML */ `
-      <script
-        crossorigin
-        src="https://unpkg.com/react@18/umd/react.development.js"
-      ></script>
-      <script
-        crossorigin
-        src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
-      ></script>
-      <link href="/dist/style.css" rel="stylesheet" />
-      <script src="/dist/index.umd.js"></script>
-    `,
-  );
-
-  app.get('/', (req, res) => {
-    res.send(indexHtmlWithUmd);
-  });
   app.use(express.static(path.join(__dirname, '..')));
 } else {
   app.get('/', (req, res) => {

diff --git a/packages/graphiql/vite.config.mts b/packages/graphiql/vite.config.mts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import { defineConfig, PluginOption } from 'vite';
 import packageJSON from './package.json';
 import dts from 'vite-plugin-dts';
 import commonjs from 'vite-plugin-commonjs';
@@ -65,7 +65,37 @@ const esmConfig = defineConfig({
       },
     },
   },
-  plugins: [dts({ rollupTypes: true })],
+  plugins: [htmlPlugin(), dts({ rollupTypes: true })],
 });
 
+function htmlPlugin(): PluginOption {
+  return {
+    name: 'html-replace-umd-with-src',
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html) {
+        const start = '<!--vite-replace-start-->';
+        const end = '<!--vite-replace-end-->';
+        const contentToReplace = html.slice(
+          html.indexOf(start),
+          html.indexOf(end) + end.length,
+        );
+        return html.replace(
+          contentToReplace,
+          /* HTML */ `
+            <script type="module">
+              import React from 'react';
+              import ReactDOM from 'react-dom/client';
+              import GraphiQL from './src/cdn';
+
+              Object.assign(globalThis, { React, ReactDOM, GraphiQL });
+            </script>
+            <link href="/src/style.css" rel="stylesheet" />
+          `,
+        );
+      },
+    },
+  };
+}
+
 export default process.env.UMD === 'true' ? umdConfig : esmConfig;
diff --git a/yarn.lock b/yarn.lock
@@ -7770,6 +7770,11 @@ dom-serializer@^1.0.1, dom-serializer@^1.3.2:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@^2.0.1, domelementtype@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
@@ -9780,6 +9785,14 @@ global-prefix@^0.1.4:
     is-windows "^0.2.0"
     which "^1.2.12"
 
+global@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -10055,6 +10068,13 @@ highlight.js@^9.15.6:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
   integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -12183,7 +12203,7 @@ loader-utils@^1.0.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0, loader-utils@^2.0.2:
+loader-utils@^2.0.0, loader-utils@^2.0.2, loader-utils@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -13073,6 +13093,13 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -14385,7 +14412,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14542,7 +14569,21 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-is@^16.13.1:
+react-hot-loader@^4.13.1:
+  version "4.13.1"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.13.1.tgz#979fd7598e27338b3faffae6ed01c65374dace5e"
+  integrity sha512-ZlqCfVRqDJmMXTulUGic4lN7Ic1SXgHAFw7y/Jb7t25GBgTR0fYAJ8uY4mrpxjRyWGWmqw77qJQGnYbzCvBU7g==
+  dependencies:
+    fast-levenshtein "^2.0.6"
+    global "^4.3.0"
+    hoist-non-react-statics "^3.3.0"
+    loader-utils "^2.0.3"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+    source-map "^0.7.3"
+
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -14557,6 +14598,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-refresh@^0.14.2:
   version "0.14.2"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"
@@ -15448,6 +15494,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"