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

LekoArts · 2022-09-07T10:45:31Z

Description

Adds https://github.com/OneGraph/graphiql-code-exporter, copying what #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

Bildschirmaufnahme.2022-09-08.um.13.35.50.mov

Related Issues

Doing that to unblock myself for gatsbyjs/gatsby#36541

changeset-bot · 2022-09-07T10:45:34Z

🦋 Changeset detected

Latest commit: 56e56f1

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 · 2022-09-07T10:45:35Z

The committers listed above are authorized under a signed CLA.

✅ login: LekoArts / name: Lennart (45e41cc, 74678f8, 7bc8b1a)

acao · 2022-09-07T16:05:51Z

@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 · 2022-09-08T07:17:07Z

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 · 2022-09-08T07:35:43Z

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 · 2022-09-08T07:37:11Z

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

LekoArts · 2022-09-08T11:38:22Z

Current state of things:

Bildschirmaufnahme.2022-09-08.um.13.35.50.mov

LekoArts · 2022-09-08T12:09:59Z

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

thomasheyenbrock · 2022-09-08T13:24:19Z

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 · 2022-09-08T13:26:58Z

Ok, good to know. Enjoy your vacation!

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

LekoArts · 2022-09-09T11:50:22Z

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

LekoArts · 2022-09-22T08:42:07Z

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

thomasheyenbrock · 2022-09-28T11:07:34Z

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

packages/graphiql-plugin-code-exporter/README.md

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

LekoArts · 2022-10-04T06:39:10Z

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

LekoArts · 2022-10-10T07:57:59Z

@thomasheyenbrock @acao ICYMI

thomasheyenbrock · 2022-10-12T09:26:15Z

@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 🤞

thomasheyenbrock

Awesome work 👏 just some minor stuff, but apart from these this is looking good!

thomasheyenbrock · 2022-10-14T08:22:29Z

packages/graphiql-plugin-code-exporter/src/vite-env.d.ts

@@ -0,0 +1 @@
+// / <reference types="vite/client" />


We had an issue with out eslint config which always broke triple-slash directives (should by fixed by now)

Suggested change

// / <reference types="vite/client" />

/// <reference types="vite/client" />

Not fixed for me :/

It's also like that in the other packages so I don't think this was fixed

thomasheyenbrock · 2022-10-14T08:29:38Z

packages/graphiql-plugin-code-exporter/src/graphiql-code-exporter.d.ts

+  export type GraphiQLCodeExporterProps = {
+    query: string;
+    snippets: Array<Snippet>;
+    codeMirrorTheme: string;
+    variables?: string;
+    context?: Record<string, any>;
+    schema?: GraphQLSchema | null | undefined;
+  };


These are different to the prop definitions that I find in the source repository:

codeMirrorTheme is optional in the source repo but required here

variables and context are required in the source repo but optional here

A bunch of other props from the source repo are just missing here
Are there particular reasons for deviating from the prop definitions? Could we try to mirror them here instead of just declaring a subset?

codeMirrorTheme is optional in the source repo but required here

With the ref handling for some reason the default props weren't applied. So unless (with the current code) you define the codeMirrorTheme explicitly, the whole thing didn't work.

Maybe when I'll remove the wrapper it works, I'll test it.

variables and context are required in the source repo but optional here

But they are set with {} defaults. So actually their types are incorrect and they are optional.

A bunch of other props from the source repo are just missing here

I didn't find them useful at the time, as I just wanted to make something minimal working. But I can copy the types, yeah.

Also the props differ from README to code 😆
https://github.com/OneGraph/graphiql-code-exporter#props

packages/graphiql-plugin-code-exporter/src/index.css

packages/graphiql-plugin-code-exporter/src/index.tsx

packages/graphiql-plugin-code-exporter/package.json

packages/graphiql-plugin-code-exporter/vite.config.ts

yarn.lock

packages/graphiql-plugin-code-exporter/README.md

packages/graphiql-plugin-code-exporter/examples/index.html

LekoArts · 2022-10-14T08:58:58Z

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

thomasheyenbrock · 2022-10-14T09:01:45Z

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)

- deduplication - vite bundle config - move package to devDep - remove wrapper react component - eslint thingy

Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>

LekoArts · 2022-10-14T09:29:12Z

@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 · 2022-10-14T11:01:17Z

Bildschirmaufnahme.2022-10-14.um.12.59.10.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 · 2022-10-14T11:20:41Z

Fixed the dropdown styles

Bildschirmaufnahme.2022-10-14.um.13.18.39.mov

LekoArts · 2022-10-24T09:13:34Z

FYI, for now I copied the code from here to gatsbyjs/gatsby#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 · 2022-10-28T13:51:37Z

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

Thanks for this awesome plugin and your patience @LekoArts 🙇 gonna merge and publish this today!

thomasheyenbrock · 2022-10-28T13:59:15Z

...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 · 2022-10-28T14:15:57Z

Works again! CI is happy ✅

thomasheyenbrock · 2022-10-28T15:37:16Z

This is released now as @graphiql/plugin-code-exporter@0.1.0!

LekoArts · 2022-11-02T13:11:10Z

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

LekoArts added 3 commits September 7, 2022 12:15

initial

45e41cc

update cspell

74678f8

integrate into example

7bc8b1a

LekoArts mentioned this pull request Sep 7, 2022

(draft) graphiql 2 next steps roadmap #2690

Open

22 tasks

update props

e2ea00a

LekoArts added 2 commits September 8, 2022 09:59

get things working

da21fcc

add styling

23817b6

Merge branch 'main' into code-exporter

e3628dc

LekoArts marked this pull request as ready for review September 8, 2022 11:55

LekoArts mentioned this pull request Sep 8, 2022

feat: GraphiQL v2 gatsbyjs/gatsby#36541

Merged

2 tasks

add icon, svg example, inline snippets

c74bfa5

TallTed reviewed Sep 28, 2022

View reviewed changes

packages/graphiql-plugin-code-exporter/README.md Outdated Show resolved Hide resolved

TallTed reviewed Sep 28, 2022

View reviewed changes

packages/graphiql-plugin-code-exporter/README.md Outdated Show resolved Hide resolved

LekoArts and others added 2 commits October 1, 2022 09:40

Update packages/graphiql-plugin-code-exporter/README.md

598d7eb

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

Update packages/graphiql-plugin-code-exporter/README.md

26fda63

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

Merge branch 'main' into code-exporter

6255feb

thomasheyenbrock requested changes Oct 14, 2022

View reviewed changes

packages/graphiql-plugin-code-exporter/examples/index.html Outdated Show resolved Hide resolved

LekoArts and others added 2 commits October 14, 2022 11:16

review comments no1

c512add

- deduplication - vite bundle config - move package to devDep - remove wrapper react component - eslint thingy

review comments no2

4ad8fa9

Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>

LekoArts added 2 commits October 14, 2022 11:52

css nesting

2e86a76

fix default codeMirrorTheme issue

72c3941

fix dropdown styles

92ecd2c

thomasheyenbrock added 3 commits October 28, 2022 15:46

add doc explorer style resets

f9f8b78

adjust width of plugin pane and code exporter editor

83dfbc7

add changesets

56e56f1

thomasheyenbrock approved these changes Oct 28, 2022

View reviewed changes

thomasheyenbrock merged commit d63801f into graphql:main Oct 28, 2022

acao mentioned this pull request Oct 28, 2022

Version Packages #2846

Merged

theguild-bot mentioned this pull request Oct 28, 2022

Roadmap dotansimha/graphql-yoga#1358

Closed

LekoArts deleted the code-exporter branch November 2, 2022 13:13

LekoArts mentioned this pull request Nov 4, 2022

fix(gatsby-graphiql-explorer): Use upstream exporter package gatsbyjs/gatsby#36966

Merged

	// / <reference types="vite/client" />
	/// <reference types="vite/client" />

feat: Add @graphiql/plugin-code-exporter #2758

feat: Add @graphiql/plugin-code-exporter #2758

Conversation

LekoArts commented Sep 7, 2022 • edited Loading

Description

Preview

Related Issues

changeset-bot bot commented Sep 7, 2022 • edited Loading

🦋 Changeset detected

linux-foundation-easycla bot commented Sep 7, 2022 • edited Loading

acao commented Sep 7, 2022 • edited Loading

LekoArts commented Sep 8, 2022

LekoArts commented Sep 8, 2022

LekoArts commented Sep 8, 2022

LekoArts commented Sep 8, 2022

LekoArts commented Sep 8, 2022

thomasheyenbrock commented Sep 8, 2022

LekoArts commented Sep 8, 2022

LekoArts commented Sep 9, 2022

LekoArts commented Sep 22, 2022

thomasheyenbrock commented Sep 28, 2022

LekoArts commented Oct 4, 2022

LekoArts commented Oct 10, 2022

thomasheyenbrock commented Oct 12, 2022

thomasheyenbrock left a comment

Choose a reason for hiding this comment

thomasheyenbrock Oct 14, 2022

Choose a reason for hiding this comment

LekoArts Oct 14, 2022

Choose a reason for hiding this comment

LekoArts Oct 14, 2022

Choose a reason for hiding this comment

thomasheyenbrock Oct 14, 2022

Choose a reason for hiding this comment

LekoArts Oct 14, 2022

Choose a reason for hiding this comment

LekoArts Oct 14, 2022

Choose a reason for hiding this comment

LekoArts commented Oct 14, 2022

thomasheyenbrock commented Oct 14, 2022

LekoArts commented Oct 14, 2022

LekoArts commented Oct 14, 2022

LekoArts commented Oct 14, 2022

LekoArts commented Oct 24, 2022

thomasheyenbrock commented Oct 28, 2022

thomasheyenbrock left a comment

Choose a reason for hiding this comment

thomasheyenbrock commented Oct 28, 2022 • edited Loading

thomasheyenbrock commented Oct 28, 2022

thomasheyenbrock commented Oct 28, 2022

LekoArts commented Nov 2, 2022

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

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

LekoArts commented Sep 7, 2022 •

edited

Loading

changeset-bot bot commented Sep 7, 2022 •

edited

Loading

linux-foundation-easycla bot commented Sep 7, 2022 •

edited

Loading

acao commented Sep 7, 2022 •

edited

Loading

thomasheyenbrock commented Oct 28, 2022 •

edited

Loading