graphql · dimaMachina · Aug 8, 2024 · Aug 8, 2024
diff --git a/.changeset/rich-jobs-kick.md b/.changeset/rich-jobs-kick.md
@@ -3,3 +3,21 @@
 ---
 
 migrate from `webpack` to `vite`
+
+changed exports
+
+```diff
+-graphiql/graphiql.css
++graphiql/style.css
+```
+
+changed cdn paths, `dist/index.umd.js` and `dist/style.css` are minified
+
+```diff
+-https://unpkg.com/graphiql/graphiql.js
+-https://unpkg.com/graphiql/graphiql.min.js
++https://unpkg.com/graphiql/dist/index.umd.js
+-https://unpkg.com/graphiql/graphiql.css
+-https://unpkg.com/graphiql/graphiql.min.css
++https://unpkg.com/graphiql/dist/style.css
+```
diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html
@@ -42,11 +42,11 @@
       favored resource bundler.
      -->
     <script
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-      type="application/javascript"
+      src="https://unpkg.com/graphiql/dist/index.umd.js"
+      crossorigin
     ></script>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
-    <!-- 
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
+    <!--
       These are imports for the GraphIQL Explorer plugin.
      -->
     <script

diff --git a/examples/graphiql-create-react-app/src/App.tsx b/examples/graphiql-create-react-app/src/App.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { GraphiQL } from 'graphiql';
 import type { Fetcher } from '@graphiql/toolkit';
-import 'graphiql/graphiql.min.css';
+import 'graphiql/style.css';
 
 const fetcher: Fetcher = async graphQLParams => {
   const data = await fetch(

diff --git a/examples/graphiql-parcel/src/index.html b/examples/graphiql-parcel/src/index.html
@@ -16,7 +16,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Parcel React Example</title>
 
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
   </head>
 
   <body>

diff --git a/examples/monaco-graphql-webpack/webpack.config.js b/examples/monaco-graphql-webpack/webpack.config.js
@@ -47,7 +47,7 @@ const resultConfig = {
   plugins: [
     // in order to prevent async modules for CDN builds
     // until we can guarantee it will work with the CDN properly
-    // and so that graphiql.min.js can retain parity
+    // and so that `index.umd.js` can retain parity
     new HtmlWebpackPlugin({
       template: relPath('src/index.html.ejs'),
       filename: 'index.html',

diff --git a/packages/graphiql-plugin-code-exporter/README.md b/packages/graphiql-plugin-code-exporter/README.md
@@ -31,7 +31,7 @@ import { useState } from 'react';
 import { GraphiQL } from 'graphiql';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
-import 'graphiql/graphiql.css';
+import 'graphiql/style.css';
 import '@graphiql/plugin-code-exporter/dist/style.css';
 
 const fetcher = createGraphiQLFetcher({

diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -22,7 +22,7 @@
       }
     </style>
 
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
     <link
       rel="stylesheet"
       href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css"
@@ -42,9 +42,8 @@
     ></script>
 
     <script
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-      integrity="sha512-FmqQBx9FVDKvUNDuimXswv4o1eqQUqzQYIuEoIkmkDaoXMUvmD9fKQXYSrSEMf5LQUEZr5EEMesxUzex2wS/hg=="
-      crossorigin="anonymous"
+      src="https://unpkg.com/graphiql/dist/index.umd.js"
+      crossorigin
     ></script>
     <script
       src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/index.umd.js"

diff --git a/packages/graphiql-plugin-explorer/README.md b/packages/graphiql-plugin-explorer/README.md
@@ -25,7 +25,7 @@ npm install react react-dom graphql
 import { GraphiQL } from 'graphiql';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
-import 'graphiql/graphiql.css';
+import 'graphiql/style.css';
 import '@graphiql/plugin-explorer/dist/style.css';
 
 const fetcher = createGraphiQLFetcher({

diff --git a/packages/graphiql-plugin-explorer/examples/index.html b/packages/graphiql-plugin-explorer/examples/index.html
@@ -22,7 +22,7 @@
       }
     </style>
 
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
     <link
       rel="stylesheet"
       href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
@@ -42,9 +42,8 @@
     ></script>
 
     <script
-      src="https://unpkg.com/graphiql/graphiql.min.js"
-      integrity="sha512-FVCV2//UVo1qJ3Kg6kkHLe0Hg+IJhjrGa+aYHh8xD4KmwbbjthIzvaAcCJsQgA43+k+6u7HqORKXMyMt82Srfw=="
-      crossorigin="anonymous"
+      src="https://unpkg.com/graphiql/dist/index.umd.js"
+      crossorigin
     ></script>
     <script
       src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"

diff --git a/packages/graphiql/README.md b/packages/graphiql/README.md
@@ -63,8 +63,8 @@ _/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE.
 With `unpkg`/`jsdelivr`, etc.:
 
 ```html
-<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
-<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
+<link href="https://unpkg.com/graphiql/dist/style.css" rel="stylesheet" />
+<script crossorigin src="https://unpkg.com/graphiql/dist/index.umd.js"></script>
 ```
 
 (see: Usage UMD Bundle below for more required script tags)
@@ -107,7 +107,7 @@ import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import { GraphiQL } from 'graphiql';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import 'graphiql/graphiql.css';
+import 'graphiql/style.css';
 
 const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });
 

diff --git a/packages/graphiql/cypress/e2e/errors.cy.ts b/packages/graphiql/cypress/e2e/errors.cy.ts
@@ -31,7 +31,7 @@ describe('Errors', () => {
     cy.visit('/?bad=true');
     /**
      * We can't use `cy.assertQueryResult` here because the stack contains line
-     * and column numbers of the `graphiql.min.js` bundle which are not stable.
+     * and column numbers of the `index.umd.js` bundle which are not stable.
      */
     cy.get('section.result-window').should(element => {
       expect(element.get(0).innerText).to.contain(