add @graphiql/plugin-explorer package

[thomasheyenbrock]

This adds a the first official GraphiQL plugin as package, which is the OneGraph Explorer!

The only export of the package is a hook called useExplorerPlugin which will return the plugin object that can be passed to the GraphiQL component. An example of how this works is included in the package README.

This PR also proposes a solution of how to use these plugin packages in CDN bundles. The crux here is that we mustn't load graphql-js more than once, otherwise we run into the "different realms" problem. The solution has two parts:

• The CDN bundle for graphiql already includes graphql-js, so we now set a static property GraphiQL.GraphQL that contains all the exports from graphql-js.
• When building UMD bundles for plugin packages we can then just mark graphql as external and set the global to GraphiQL.GraphQL, that way the CDN bundle for the plugin won't contain any parts of graphql-js and it will use the module from the graphiql CDN bundle.

(Note that we do basically the same thing with @graphiql/react as we already need to include it in the graphiql CDN bundle. That way we don't need to load the same code twice in plugin CDN bundles that need any of the exports from that package.)

There is a tiny breaking change hidden here, because we remove the three hooks that we previously directly added as static properties on GraphiQL in the CDN bundle. I reckon it's fine as we only added that two days ago, also there is a simply fix to that by just using the hook from GraphiQL.React.useXYZ.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b1104a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@graphiql/plugin-explorer	Minor
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

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

graphiql@2.0.3-canary-94faaeb2.0

[acao]

If you add it to the two resources/*build.tsconfig.json files, this project will build esm and cjs on tsc —build and tsc —build —watch. graphiql can take care of bundling everything else. No need to bundle any of the @graphiql projects with vite or rollup or webpack, sorry for introducing that anti-pattern. They are bundled with graphiql’s bundle, so we only need vite in packages/graphiql to replace webpack now

[thomasheyenbrock]

@acao we have some CSS that we wanna bundle up for @graphiql/react and this new package, so just using tsc is not enough. I heavily agree though that this build-setup is kinda a mess 😕 I'd propose to pull that out into a separate effort as we already have it in @graphiql/react, this package does not introduce anything new, it just copies the same setup. (I have something in mind about that we already had an issue tracking that, will double check and link it here or create one if none exists yet.)

[patrick91]

This looks great to me! Thank you!