feat: Add `@graphiql/plugin-code-exporter`

[LekoArts]

Description

Adds https://github.com/OneGraph/graphiql-code-exporter, copying what https://github.com/graphql/graphiql/pull/2715 did. Only "problems" are:

• The library itself is pretty outdated, maybe one should consider vendoring it completely?
• The underlying UI doesn't use the new @graphiql/react components
• a11y issues

With a bunch of CSS overrides it works fine now.

Preview

https://user-images.githubusercontent.com/16143594/189112549-ecf5bde2-8cce-44a9-845a-33933e84bf74.mov

Related Issues

Doing that to unblock myself for https://github.com/gatsbyjs/gatsby/pull/36541

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 56e56f13b6d23c6514c0d7c3c5311b4363a7e8da

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

This PR includes changesets to release 2 packages

Name	Type
graphiql	Patch
@graphiql/plugin-code-exporter	Minor

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

[linux-foundation-easycla[bot]]

The committers listed above are authorized under a signed CLA.

• :white_check_mark: login: LekoArts / name: Lennart (45e41cc79f2d24ae84c5b613cab2dd524001e7bf, 74678f85abbb8281df8076551b2aa3a5ad011e05, 7bc8b1a40c8e61d72a7faae955ddd96dc9c8939f)

[acao]

@LekoArts this is looking great, thank you! also, hello and nice to see you again, welcome!

i think all you need to do is to use @graphiql/react to generate the props you need for graphiql-code-exporter, similarly to how the graphiql explorer plugin works

[LekoArts]

Hey 👋 Nice to see you again, too 😊

I think I wired up all the props correctly, maybe @thomasheyenbrock sees an issue. But right now I'm trying to debug the code exporter itself as it somehow fails there:

[LekoArts]

Figured it out, somehow the props weren't set this way:

https://github.com/LekoArts/graphiql/blob/e2ea00aefd178745468f5d4e180dce3471e6e812/packages/graphiql-plugin-code-exporter/src/index.tsx#L13-L28

Do I need to set the defaults in here?

https://github.com/LekoArts/graphiql/blob/e2ea00aefd178745468f5d4e180dce3471e6e812/packages/graphiql-plugin-code-exporter/src/index.tsx#L31-L32

[LekoArts]

Styling is way off but setting the props directly in the user code for now unblocked me

[LekoArts]

Current state of things:

https://user-images.githubusercontent.com/16143594/189112549-ecf5bde2-8cce-44a9-845a-33933e84bf74.mov

[LekoArts]

Which icon set do y'all use and which icon should this plugin get?

[thomasheyenbrock]

Hey @LekoArts, this is awesome! You caught me heading out on vacation until end of next week, so I won't be able to give this a proper review until then.

Which icon set do y'all use and which icon should this plugin get?

I'm actually not sure if the icons GraphiQL uses for docs and history were custom-made by @julianbauer (who created the new design) or if they are coming from any library. For the explorer plugin I just picked a random one that I found online that kinda matched the others.

[LekoArts]

Ok, good to know. Enjoy your vacation!

Then I'll pick an icon (with proper license) to my best judgement :D

[LekoArts]

Added the arrow-up-on-square from https://heroicons.com/

[LekoArts]

@thomasheyenbrock I'll be on vacation next week, are you back? From my side everything would be finished

[thomasheyenbrock]

Hey @LekoArts 👋 I'm back since this week. I'll have time tomorrow to give this a review, but it already looks amazing! 😍

[LekoArts]

@thomasheyenbrock Anything I can help with to get this reviewed?

[LekoArts]

@thomasheyenbrock @acao ICYMI

[thomasheyenbrock]

@LekoArts sorry that this has been stuck for a while and it's my fault, I dropped the ball on this one. I currently only have time one day every other week to really focus on GraphiQL, so Friday this will be my first thing to review 🤞

[LekoArts]

Thanks for the comments! I'll adjust the PR shortly :)

[thomasheyenbrock]

Some more UI feedback after checking out the branch locally (screenshots and GIFs attached):

• The headline and the deprecated close button need some attention (you can solve that similarly to how the explorer-plugin does it)
• The plugin content has a fixed width and doesn't scale with the plugin pane
• The styles for the dropdown menus could still be improved (check out the execute button for reference)

---

---

---

[LekoArts]

@thomasheyenbrock

The headline and the deprecated close button need some attention (you can solve that similarly to how the explorer-plugin does it)

Where is that close button coming from and how I can enable it for testing?

[LekoArts]

https://user-images.githubusercontent.com/16143594/195831430-1aa0fb15-3630-42fd-b3f8-5e27f3f08342.mov

For me the pane hasn't a fixed width (on Chrome and Firefox). I set it to width: calc(100% - 2 * var(--px-16))

[LekoArts]

Fixed the dropdown styles

https://user-images.githubusercontent.com/16143594/195834937-bbeb2161-2d82-4ce5-bc44-58c0a164996e.mov

[LekoArts]

FYI, for now I copied the code from here to https://github.com/gatsbyjs/gatsby/pull/36541 and at the moment we just publish it ourselves. I'd still like to use this package once published instead of maintaining our own version :)

[thomasheyenbrock]

Where is that close button coming from and how I can enable it for testing?

I think that didn't happen for you because you also used the explorer plugin at the same time. Without the stylesheet from that plugin the styles are missing. I just did some finishing touches here and already added that part.

[thomasheyenbrock]

...if CI doesn't act up. Seems like unpkg has some issues 🤷 Loading https://unpkg.com/react-dom@17/umd/react-dom.development.js consistently returns a 520

[thomasheyenbrock]

Works again! CI is happy ✅

[thomasheyenbrock]

This is released now as @graphiql/[email protected]!

[LekoArts]

Thanks @thomasheyenbrock 👍 I'll then update our internal usage to this plugin instead :)