[graphiql] Plugin Examples / CDN integration broken

chaffeqa commented 4 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

When I try to use the CDN approach for any of the plugins, I run into the following issues:

Repo samples are broken
Unpkg versions are not fully published (3.0.1 loads, but not 3.0.3: https://unpkg.com/browse/graphiql-code-exporter@3.0.3 https://unpkg.com/browse/graphiql-code-exporter@3.0.1)
3.0.1 errors out due to incompatible runtime bundling:


<!DOCTYPE html>
<html>
<head>
<title>Sample - GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css" rel="stylesheet" />
<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>
<script crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script crossorigin src="https://unpkg.com/@graphiql/plugin-code-exporter@3.0.2"></script>
</head>
</html>

Expected Behavior

Working example files in the plugins

Steps To Reproduce

No response

Environment

GraphiQL Version:
OS:
Browser:
Bundler:
react Version:
graphql Version:

Anything else?

Guessing this may just simply be that 3.0.3 is not published to the CDN?

acao commented 4 months ago

2 & 3 will need to be fixed with peer versions I'm afraid, as the graphiql-code-exporter itself is third party, our module is @graphiql/plugin-code-exporter and implements this library

chaffeqa commented 4 months ago

Ah figured it out: So the example is referencing a UMD compiled version (which bundles in graphiql-code-exporter, hence why I was confused).

The issue is: it looks like the Babel regenerator-runtime is no longer included in any of the other previous scripts (react, react-dom, graphiql). Simply adding the script import fixes the issue:

<!DOCTYPE html>
<html>
<head>
<title>Sample - GraphiQL</title>
<link href="https://unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@graphiql/plugin-code-exporter/dist/style.css" rel="stylesheet" />
<script crossorigin src="https://unpkg.com/regenerator-runtime@0.14.1/runtime.js"></script>
<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 crossorigin src="https://unpkg.com/graphiql/graphiql.min.js"></script>
<script crossorigin src="https://unpkg.com/@graphiql/plugin-code-exporter/dist/index.umd.js"></script>
</head>
</html>

acao commented 4 months ago

fantastic! i forget why we hadn't removed that long ago, what an artefact 😂 we need to have some script type module examples as well, it's 2024 c'mon 😂!!

chaffeqa commented 4 months ago

Ok been diving even deeper now that I have this working:

OneGraph got acquired by Netlify, and it looks like has abandoned their plugin
this repo was forked from it, and looks to be the most up to date. I have a hunch it's owned by StepZen, however it hasn't been updated since Jul 29, 2023

I believe it would be in the communities best intirest to figure out how to move forward with this plugin. Maybe ask @mtrythall (who was the last committer) what their use is, whether that repo should be the community standard, or if it should be merged into this mono-repo?

graphql / graphiql