[v3] migrate graphiql to vite and react compiler

[dimaMachina]

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

[github-actions]

The latest changes of this PR are available as canary in npm (based on the declared changesets):

[email protected]

[codecov]

Codecov Report

Attention: Patch coverage is 42.85714% with 4 lines in your changes missing coverage. Please review.

Project coverage is 63.96%. Comparing base (614ff8b) to head (fd8411b).

Files with missing lines	Patch %	Lines
packages/graphiql/test/schema.js	42.85%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3826      +/-   ##
==========================================
- Coverage   63.98%   63.96%   -0.03%     
==========================================
  Files          35       35              
  Lines        3088     3086       -2     
  Branches      951      951              
==========================================
- Hits         1976     1974       -2     
  Misses       1107     1107              
  Partials        5        5              

Files with missing lines	Coverage Δ
packages/graphiql/test/schema.js	36.76% <42.85%> (-1.81%)	⬇️

[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)