Regen

Author: tyranron

juniper/Makefile

@@ -41,26 +41,23 @@ graphiql:
 	$(eval graphiql-react-ver := $(strip \
 		$(shell curl -fsL https://raw.githubusercontent.com/graphql/graphiql/refs/tags/graphiql%40$(GRAPHIQL_VER)/packages/graphiql/package.json \
 		        | grep -m1 '"@graphiql/react": "' | cut -d '"' -f4 | cut -d '^' -f2)))
-	$(eval graphiql-toolkit-ver := $(strip \
-		$(shell curl -fsL https://raw.githubusercontent.com/graphql/graphiql/refs/tags/graphiql%40$(GRAPHIQL_VER)/packages/graphiql/package.json \
-		        | grep -m1 '"@graphiql/toolkit": "' | cut -d '"' -f4 | cut -d '^' -f2)))
 	curl -fsL -o src/http/graphiql.html \
 		https://raw.githubusercontent.com/graphql/graphiql/graphiql%40$(GRAPHIQL_VER)/examples/graphiql-cdn/index.html
-	$(sed-i) 's|esm.sh/graphiql@4.0.0|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
+	$(sed-i) 's|esm.sh/graphiql@5.0.0-rc.1|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
 		src/http/graphiql.html
-	$(sed-i) 's|esm.sh/@graphiql/plugin-explorer@4.0.0|esm.sh/@graphiql/plugin-explorer@$(graphiql-plugin-explorer-ver)|g' \
+	$(sed-i) 's|esm.sh/graphiql@6.0.0-canary-b26dcda1.0|esm.sh/graphiql@$(GRAPHIQL_VER)|g' \
 		src/http/graphiql.html
-	$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/react@$(graphiql-react-ver)|g' \
+	$(sed-i) 's|esm.sh/@graphiql/[email protected]|esm.sh/@graphiql/plugin-explorer@$(graphiql-plugin-explorer-ver)|g' \
 		src/http/graphiql.html
-	$(sed-i) 's|esm.sh/@graphiql/toolkit@0.11.2|esm.sh/@graphiql/toolkit@$(graphiql-toolkit-ver)|g' \
+	$(sed-i) 's|esm.sh/@graphiql/react@0.36.0-canary-b26dcda1.0|esm.sh/@graphiql/react@$(graphiql-react-ver)|g' \
 		src/http/graphiql.html
 	$(sed-i) "s|'https://countries.trevorblades.com'|JUNIPER_URL|g" \
 		src/http/graphiql.html
 	$(sed-i) 's|url: JUNIPER_URL,|url: JUNIPER_URL,\n        subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)|' \
 		src/http/graphiql.html
 	$(sed-i) 's|<script type="module">|<script type="module">\n<!-- inject -->|' \
 		src/http/graphiql.html
-	$(sed-i) 's|GraphiQL 4 with React 19 and GraphiQL Explorer|GraphiQL|' \
+	$(sed-i) 's|GraphiQL 5 with React 19 and GraphiQL Explorer|GraphiQL|' \
 		src/http/graphiql.html
 
 

juniper/src/http/graphiql.html

@@ -1,5 +1,5 @@
 <!--
- *  Copyright (c) 2021 GraphQL Contributors
+ *  Copyright (c) 2025 GraphQL Contributors
  *  All rights reserved.
  *
  *  This source code is licensed under the license found in the
@@ -14,7 +14,6 @@
     <style>
       body {
         margin: 0;
-        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {
@@ -31,11 +30,11 @@
     </style>
     <link
       rel="stylesheet"
-      href="https://esm.sh/graphiql@4.1.2/dist/style.css"
+      href="https://esm.sh/graphiql@5.0.0/dist/style.css"
     />
     <link
       rel="stylesheet"
-      href="https://esm.sh/@graphiql/plugin-explorer@4.0.6/dist/style.css"
+      href="https://esm.sh/@graphiql/plugin-explorer@5.0.0/dist/style.css"
     />
     <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
     <script type="importmap">
@@ -47,11 +46,11 @@
           "react-dom": "https://esm.sh/[email protected]",
           "react-dom/client": "https://esm.sh/[email protected]/client",
 
-          "graphiql": "https://esm.sh/graphiql@4.1.2?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
-          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.6?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
-          "@graphiql/react": "https://esm.sh/@graphiql/react@0.34.1?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
+          "graphiql": "https://esm.sh/graphiql@5.0.0?standalone&external=react,react-dom,@graphiql/react,graphql",
+          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.0.0?standalone&external=react,@graphiql/react,graphql",
+          "@graphiql/react": "https://esm.sh/@graphiql/react@0.35.0?standalone&external=react,react-dom,graphql",
 
-          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
+          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
           "graphql": "https://esm.sh/[email protected]"
         }
       }
@@ -62,20 +61,38 @@
       import React from 'react';
       import ReactDOM from 'react-dom/client';
       // Import GraphiQL and the Explorer plugin
-      import { GraphiQL } from 'graphiql';
+      import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
       import { createGraphiQLFetcher } from '@graphiql/toolkit';
       import { explorerPlugin } from '@graphiql/plugin-explorer';
 
+      import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
+      import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
+      import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
+
+      globalThis.MonacoEnvironment = {
+        getWorker(_workerId, label) {
+          console.info('MonacoEnvironment.getWorker', { label });
+          switch (label) {
+            case 'json':
+              return createJSONWorker();
+            case 'graphql':
+              return createGraphQLWorker();
+          }
+          return createEditorWorker();
+        },
+      };
+
       const fetcher = createGraphiQLFetcher({
         url: JUNIPER_URL,
         subscriptionUrl: normalizeSubscriptionEndpoint(JUNIPER_URL, JUNIPER_SUBSCRIPTIONS_URL)
       });
-      const explorer = explorerPlugin();
+      const plugins = [HISTORY_PLUGIN, explorerPlugin()];
 
       function App() {
         return React.createElement(GraphiQL, {
           fetcher,
-          plugins: [explorer],
+          plugins,
+          defaultEditorToolsVisibility: true,
         });
       }