[v3] migrate graphiql to vite and react compiler

[dimaMachina]

• I took my changes from GraphiQL v4 new tabs look for graphiql v4 #3685
• added prepublishOnly with creating "graphiql.js", "graphiql.min.js", "graphiql.min.js.map", "graphiql.css", "graphiql.min.css"

[acao]

this should be graphiql.js or else it will break all the unpkg implementations

[dimaMachina]

what do you mean by it will break all the unpkg implementations?

/dist/index.umd.js === /graphql.js
/dist/index.umd.js === /graphql.min.js

[acao]

this is fine as long as it's serving the unminified umd version

[dimaMachina]

I made to use umd build only on CI, and you can see that all tests pass

locally I replace umd import

graphiql/packages/graphiql/index.html

Lines 26 to 37 in ad75cda

	<!--vite-replace-start-->
	<script
	crossorigin
	src="https://unpkg.com/react@18/umd/react.production.min.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
	></script>
	<script src="/dist/index.umd.js"></script>
	<link href="/dist/style.css" rel="stylesheet" />
	<!--vite-replace-end-->

with src/cdn.ts

graphiql/packages/graphiql/vite.config.mts

Lines 102 to 111 in ad75cda

	const htmlForVite = /* HTML */ `
	<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>
	<link href="/src/style.css" rel="stylesheet" />
	`;

[acao]

this looks good so far, but we still need graphiql.min.js and graphiql.js as the UMD versions or it will break all the many unpkg/jsdelivr implementations, just do a github code search and you'll see thousands. the benefits of consistent naming here are much less important than this pivotal backwards compatibility for our majority of users.

[acao]

exports don't work with jsdelivr/unpkg unfortunately, we must publish to npm with these exact files

[dimaMachina]

this is for backward compatibility since I added exports field

I added prepublishOnly with the exact files

graphiql/packages/graphiql/package.json

Line 48 in ad75cda

"prepublishOnly": "cp dist/index.umd.js graphiql.js && cp dist/index.umd.js.map graphiql.js.map && cp dist/index.umd.js graphiql.min.js && cp dist/index.umd.js.map graphiql.min.js.map && cp dist/style.css graphiql.css && cp dist/style.css graphiql.min.css",

[dimaMachina]

this looks good so far, but we still need graphiql.min.js and graphiql.js as the UMD versions or it will break all the many unpkg/jsdelivr implementations, just do a github code search and you'll see thousands. the benefits of consistent naming here are much less important than this pivotal backwards compatibility for our majority of users.

see #3826 (comment)