add vite replace html plugin for graphiql plugin explorer (#3742)

* add vite replace html plugin for graphiql plugin explorer * fix build
graphql · Aug 20, 2024 · ffaf5c9 · ffaf5c9
1 parent e432fb5
commit ffaf5c9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 12 deletions.
diff --git a/packages/graphiql-plugin-explorer/example.html b/packages/graphiql-plugin-explorer/example.html
@@ -38,30 +38,27 @@
     ></script>
 
     <script
-      src="https://unpkg.com/graphiql@4.0.0-alpha.5/dist/index.umd.js"
+      src="https://unpkg.com/graphiql/dist/index.umd.js"
       crossorigin
     ></script>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/graphiql@4.0.0-alpha.5/dist/style.css"
-    />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
 
     <script
-      src="https://unpkg.com/@graphiql/plugin-explorer@4.0.0-alpha.0/dist/index.umd.js"
+      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
       crossorigin
     ></script>
     <link
       rel="stylesheet"
-      href="https://unpkg.com/@graphiql/plugin-explorer@4.0.0-alpha.0/dist/style.css"
+      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
     />
   </head>
 
   <body>
     <div id="graphiql">
-      <div class="loading">Loading…</div>
+      <div class="loading">Loading...</div>
     </div>
 
-    <script>
+    <script type="module">
       const fetcher = GraphiQL.createFetcher({
         url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
       });

diff --git a/packages/graphiql-plugin-explorer/vite.config.mts b/packages/graphiql-plugin-explorer/vite.config.mts
@@ -1,8 +1,9 @@
-import { defineConfig } from 'vite';
+import { createRequire } from 'node:module';
+import { defineConfig, PluginOption } 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';
+import packageJSON from './package.json';
 
 const IS_UMD = process.env.UMD === 'true';
 
@@ -15,7 +16,7 @@ export default defineConfig({
         titleProp: true,
       },
     }),
-    !IS_UMD && dts({ rollupTypes: true }),
+    !IS_UMD && [dts({ rollupTypes: true }), htmlPlugin()],
   ],
   build: {
     minify: IS_UMD
@@ -51,3 +52,37 @@ export default defineConfig({
     },
   },
 });
+
+function htmlPlugin(): PluginOption {
+  const require = createRequire(import.meta.url);
+
+  const graphiqlPath = require
+    .resolve('graphiql/package.json')
+    .replace('/package.json', '');
+
+  const htmlForVite = `<link rel="stylesheet" href="${graphiqlPath}/src/style.css" />
+<script type="module">
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import GraphiQL from '${graphiqlPath}/src/cdn';
+import * as GraphiQLPluginExplorer from './src';
+
+Object.assign(globalThis, { React, ReactDOM, GraphiQL, GraphiQLPluginExplorer });
+</script>`;
+
+  return {
+    name: 'html-replace-umd-with-src',
+    transformIndexHtml: {
+      order: 'pre',
+      handler(html) {
+        const start = '</style>';
+        const end = '<body>';
+        const contentToReplace = html.slice(
+          html.indexOf(start) + start.length,
+          html.indexOf(end),
+        );
+        return html.replace(contentToReplace, htmlForVite);
+      },
+    },
+  };
+}