Skip to content

Commit

Permalink
[2] GraphiQL x Vite v5 (#3679)
Browse files Browse the repository at this point in the history
* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>
  • Loading branch information
dimaMachina and TallTed authored Aug 7, 2024
1 parent 3c1a345 commit 5d90e0e
Show file tree
Hide file tree
Showing 14 changed files with 632 additions and 54 deletions.
5 changes: 5 additions & 0 deletions .changeset/rich-jobs-kick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': major
---

migrate from `webpack` to `vite`
7 changes: 1 addition & 6 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,7 @@ packages/codemirror-graphql/*.d.ts
packages/codemirror-graphql/*.map
!packages/codemirror-graphql/*.config.js

packages/graphiql/index.html
packages/graphiql/dev.html
packages/graphiql/analyzer.html
packages/graphiql/graphiql*.js
packages/graphiql/*.css
packages/graphiql/*.map
packages/graphiql/cypress/screenshots/
packages/graphiql/cypress/videos/
packages/graphiql/typedoc/
packages/graphiql/webpack/
2 changes: 1 addition & 1 deletion examples/graphiql-webpack/src/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { GraphiQL } from 'graphiql';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { getSnippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import 'graphiql/graphiql.css';
import 'graphiql/style.css';
import '@graphiql/plugin-explorer/dist/style.css';
import '@graphiql/plugin-code-exporter/dist/style.css';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"scripts": {
"build": "yarn build-clean && yarn tsc && yarn build:nontsc",
"build-bundles": "yarn prebuild-bundles && yarn wsrun:noexamples --stages build-bundles",
"build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}' && yarn workspace graphiql build-bundles-clean",
"build-bundles-clean": "rimraf '{packages,examples,plugins}/**/{bundle,cdn,webpack}'",
"build-clean": "yarn tsc --clean",
"build-docs": "rimraf packages/graphiql/typedoc && typedoc packages",
"build:nontsc": "yarn wsrun:noexamples --exclude-missing --serial build",
Expand All @@ -46,8 +46,7 @@
"check": "yarn tsc --noEmit",
"cypress-open": "yarn workspace graphiql cypress-open",
"dev-graphiql": "yarn workspace graphiql dev",
"e2e": "yarn run e2e:build && yarn workspace graphiql e2e",
"e2e:build": "WEBPACK_SERVE=1 yarn workspace graphiql build-bundles",
"e2e": "yarn workspace graphiql e2e",
"eslint": "NODE_OPTIONS=--max-old-space-size=4096 ESLINT_USE_FLAT_CONFIG=false eslint --max-warnings=0 --ignore-path .gitignore --cache .",
"format": "yarn eslint --fix && yarn pretty",
"jest": "jest",
Expand Down
2 changes: 1 addition & 1 deletion packages/graphiql-toolkit/src/create-fetcher/lib.ts
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export const createMultipartFetcher = (
*/
export const getWsFetcher = (
options: CreateFetcherOptions,
fetcherOpts: FetcherOpts | undefined,
fetcherOpts?: FetcherOpts,
) => {
if (options.wsClient) {
return createWebsocketsFetcherFromClient(options.wsClient);
Expand Down
43 changes: 43 additions & 0 deletions packages/graphiql/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/test/images/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphiQL</title>
<style>
body {
margin: 0;
}

#graphiql {
height: 100dvh;
}

.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
</style>
</head>
<body>
<div id="graphiql">
<div class="loading">Loading…</div>
</div>
<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>
<script type="module" src="resources/renderExample.js"></script>
</body>
</html>
40 changes: 18 additions & 22 deletions packages/graphiql/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,26 @@
},
"license": "MIT",
"main": "dist/index.js",
"module": "esm/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"files": [
"dist",
"esm",
"src",
"graphiql.js",
"graphiql.min.js",
"graphiql.min.js.map",
"graphiql.css",
"graphiql.min.css",
"graphiql.min.css.map"
"dist"
],
"exports": {
"./package.json": "./package.json",
"./style.css": "./dist/style.css",
".": {
"require": "./dist/index.js",
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
}
},
"scripts": {
"analyze-bundle": "cross-env NODE_ENV=production ANALYZE=1 yarn webpack -p",
"build": "yarn build-clean && yarn build-cjs && yarn build-esm",
"build-bundles": "yarn build-bundles-clean && yarn build-bundles-webpack",
"build-bundles-clean": "rimraf 'graphiql.*{js,css}' *.html",
"build-bundles-webpack": "cross-env yarn webpack --mode development --bail",
"build-cjs": "tsc",
"build-clean": "rimraf esm dist webpack *.html",
"build-esm": "tsc --project ./tsconfig.esm.json",
"check": "tsc --noEmit",
"cypress-open": "yarn e2e-server 'cypress open'",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config resources/webpack.config.js",
"build": "vite build && UMD=true vite build",
"dev": "concurrently 'cross-env PORT=8080 node test/e2e-server' vite",
"e2e": "yarn e2e-server 'cypress run'",
"e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'",
"webpack": "webpack-cli --config resources/webpack.config.js"
"e2e-server": "start-server-and-test 'cross-env PORT=8080 node test/e2e-server' 'http-get://localhost:8080/graphql?query={test { id }}'"
},
"dependencies": {
"@graphiql/react": "^0.23.0"
Expand Down Expand Up @@ -78,6 +70,7 @@
"mini-css-extract-plugin": "^2.7.2",
"postcss": "8.4.31",
"postcss-import": "15.1.0",
"postcss-lightningcss": "^1.0.0",
"postcss-loader": "7.0.2",
"postcss-preset-env": "^8.0.1",
"prop-types": "15.7.2",
Expand All @@ -92,6 +85,9 @@
"style-loader": "^3.3.1",
"subscriptions-transport-ws": "0.11.0",
"typescript": "^4.6.3",
"vite": "^5.3.5",
"vite-plugin-commonjs": "^0.10.1",
"vite-plugin-dts": "^3.9.1",
"webpack": "5.76.0",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "^5.0.1",
Expand Down
12 changes: 6 additions & 6 deletions packages/graphiql/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
module.exports = ({ options, webpackLoaderContext }) => ({
module.exports = {
plugins: {
// https://github.com/postcss/postcss-import/issues/442#issuecomment-822427606
'postcss-import': { root: webpackLoaderContext.context },
// contains autoprefixer, etc
'postcss-preset-env': options['postcss-preset-env'] || false,
cssnano: process.env.NODE_ENV === 'production' ? options.cssnano : false,
'postcss-import': '',
'postcss-lightningcss': {
browsers: '>= .25%',
},
},
});
};
42 changes: 42 additions & 0 deletions packages/graphiql/resources/dev.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/test/images/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphiQL</title>
<style>
body {
margin: 0;
}

#graphiql {
height: 100dvh;
}

.loading {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
</style>
<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>
</head>
<body>
<div id="graphiql">
<div class="loading">Loading…</div>
</div>
<script type="module" src="/resources/renderExample.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions packages/graphiql/resources/renderExample.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* global React, ReactDOM, GraphiQL, GraphQLVersion */
/* global React, ReactDOM, GraphiQL */

/**
* UMD GraphiQL Example
Expand Down Expand Up @@ -83,6 +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 graphqlVersion = GraphiQL.GraphQL.version;

root.render(
React.createElement(GraphiQL, {
Expand All @@ -100,7 +101,7 @@ root.render(
defaultEditorToolsVisibility: true,
isHeadersEditorEnabled: true,
shouldPersistHeaders: true,
inputValueDeprecation: GraphQLVersion.includes('15.5') ? undefined : true,
inputValueDeprecation: !graphqlVersion.includes('15.5'),
onTabChange,
forcedTheme: parameters.forcedTheme,
}),
Expand Down
14 changes: 12 additions & 2 deletions packages/graphiql/test/e2e-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,18 @@ app.post('/graphql-error/graphql', (_req, res, next) => {
next();
});

app.use(express.static(path.resolve(__dirname, '../')));
app.use('index.html', express.static(path.resolve(__dirname, '../dev.html')));
const IS_DEV = process.env.npm_lifecycle_script.endsWith(' vite');

if (IS_DEV) {
app.get('/', (req, res) => {
res.redirect('http://localhost:5173');
});
} else {
app.get('/', (req, res) => {
res.sendFile(path.resolve(__dirname, '../resources/dev.html'));
});
app.use(express.static(path.resolve(__dirname, '../')));
}

// messy but it allows close
const server = createServer(app);
Expand Down
68 changes: 68 additions & 0 deletions packages/graphiql/vite.config.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { defineConfig } from 'vite';
import packageJSON from './package.json';
import dts from 'vite-plugin-dts';
import commonjs from 'vite-plugin-commonjs';

const umdConfig = defineConfig({
define: {
'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
},
// To bundle `const { createClient } = require('graphql-ws')` in `createWebsocketsFetcherFromUrl` function
plugins: [commonjs()],
build: {
sourcemap: true,
emptyOutDir: false,
lib: {
entry: 'src/cdn.ts',
// 👇 The name of the exposed global variable. Required when the formats option includes umd or iife
name: 'GraphiQL',
fileName: 'index',
formats: ['umd'],
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
});

const esmConfig = defineConfig({
build: {
minify: false,
sourcemap: true,
lib: {
entry: 'src/index.ts',
fileName: 'index',
formats: ['cjs', 'es'],
},
rollupOptions: {
external: [
// Exclude peer dependencies and dependencies from bundle
...Object.keys(packageJSON.peerDependencies),
...Object.keys(packageJSON.dependencies),
],
},
},
server: {
// prevent browser window from opening automatically
open: false,
proxy: {
'/graphql': 'http://localhost:8080',
'/bad/graphql': 'http://localhost:8080',
'/http-error/graphql': 'http://localhost:8080',
'/graphql-error/graphql': 'http://localhost:8080',
'/subscriptions': {
target: 'ws://localhost:8081',
ws: true,
},
},
},
plugins: [dts({ rollupTypes: true })],
});

export default process.env.UMD === 'true' ? umdConfig : esmConfig;
1 change: 1 addition & 0 deletions resources/custom-words.txt
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ linenumber
linenumbers
linkify
listbox
lightningcss
listvalues
lostplan
maint
Expand Down
Loading

0 comments on commit 5d90e0e

Please sign in to comment.