add plugins to webpack dev bundle (#3403)

acao · web-flow · commit d67d11d8d782 · 2023-08-12T20:09:24.000+02:00
diff --git a/packages/graphiql/resources/index.html.ejs b/packages/graphiql/resources/index.html.ejs
@@ -5,7 +5,7 @@
  *  This source code is licensed under the license found in the
  *  LICENSE file in the root directory of this source tree.
 -->
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>GraphiQL</title>
@@ -28,20 +28,30 @@
       If you do not want to rely on a CDN, you can host these files locally or
       include them directly in your favored resource bundler.
     -->
-    <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
+      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 rel="stylesheet" href="/plugins/explorer/style.css" />
     <!--
-      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.
-     -->
+    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 type="application/javascript">
       window.GraphQLVersion = <%= htmlWebpackPlugin.options.graphqlVersion %>
     </script>
+    <script
+      defer
+      src="/plugins/explorer/index.umd.js"
+      type="application/javascript"
+    ></script>
     <script
       defer
       src="/resources/renderExample.js"
diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js
@@ -83,7 +83,7 @@ function getSchemaUrl() {
 // how you can customize GraphiQL by providing different values or
 // additional child elements.
 const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-
+const explorerPlugin = window.GraphiQLPluginExplorer.explorerPlugin();
 root.render(
   React.createElement(GraphiQL, {
     fetcher: GraphiQL.createFetcher({
@@ -102,5 +102,6 @@ root.render(
     shouldPersistHeaders: true,
     inputValueDeprecation: GraphQLVersion.includes('15.5') ? undefined : true,
     onTabChange,
+    plugins: [explorerPlugin],
   }),
 );
diff --git a/packages/graphiql/test/beforeDevServer.js b/packages/graphiql/test/beforeDevServer.js
@@ -10,6 +10,13 @@ const path = require('node:path');
 const { createHandler } = require('graphql-http/lib/use/express');
 const schema = require('./schema');
 const { schema: badSchema } = require('./bad-schema');
+const { readdirSync } = require('node:fs');
+
+const plugins = readdirSync(path.join(__dirname, '../../'))
+  .filter(
+    p => p.startsWith('graphiql-plugin-') && p !== 'graphiql-plugin-utils',
+  )
+  .map(p => ({ path: p, pluginName: p.replace('graphiql-plugin-', '') }));
 
 module.exports = function beforeDevServer(app, _server, _compiler) {
   // GraphQL Server
@@ -27,4 +34,10 @@ module.exports = function beforeDevServer(app, _server, _compiler) {
     '/resources/renderExample.js',
     express.static(path.join(__dirname, '../resources/renderExample.js')),
   );
+  for (const plugin of plugins) {
+    app.use(
+      `/plugins/${plugin.pluginName}/`,
+      express.static(path.join(__dirname, `../../${plugin.path}/dist/`)),
+    );
+  }
 };
