migrate graphiql-explorer into the repo, ts conversion #3374
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
4 tasks
|
The latest changes of this PR are not available as canary, since there are no linked |
✅ Deploy Preview for graphiql-test ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
acao
force-pushed
the
rehome-graphiql-explorer
branch
7 times, most recently
from
f44d5f7 to
0f75f9f
Compare
acao
changed the title
acao
commented
Jul 28, 2023
| Explorer as ExplorerInner, | ||
| ExplorerWrapper as default, | ||
| ExplorerWrapper as Explorer, | ||
| } from './explorer'; |
There was a problem hiding this comment.
@sgrove keeping the exports in parity here, but also exporting the inner component as we have our own plugin error boundary planned
TallTed
suggested changes
Jul 28, 2023
| } | ||
| return parse( | ||
| text, | ||
| // Tell graphql to not bother track locations when parsing, we don't need |
There was a problem hiding this comment.
Suggested change
| // Tell graphql to not bother track locations when parsing, we don't need | |
| // Tell graphql to not bother tracking locations when parsing; we don't need |
There was a problem hiding this comment.
thanks, Ted!
I'm trying to change as little as possible from the original project in this PR, but this change makes sense of course
acao
commented
Jul 28, 2023
| "version": "0.9.1", | ||
| "module": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "license": "MIT", |
There was a problem hiding this comment.
some other thoughts about the package @sgrove & @dwwoelfel :
- we can include a CJS export as well for backwards compatibility
- we can import and triage existing issues and PRs
- when we move to stylesheets and css variables, we would make it 0.11, and continue incrementing minor versions for breaking changes as such
acao
force-pushed
the
rehome-graphiql-explorer
branch
from
59351c0 to
af305bd
Compare
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## main #3374 +/- ##
==========================================
+ Coverage 55.75% 55.82% +0.07%
==========================================
Files 110 110
Lines 5243 5261 +18
Branches 1426 1434 +8
==========================================
+ Hits 2923 2937 +14
- Misses 1897 1900 +3
- Partials 423 424 +1
|
acao
force-pushed
the
rehome-graphiql-explorer
branch
3 times, most recently
from
9b38e22 to
f8cfaf0
Compare
acao
force-pushed
the
rehome-graphiql-explorer
branch
from
f8cfaf0 to
2340812
Compare
|
Hi @acao is anything blocking this / any way to help get this merged in? |
TallTed
suggested changes
Jan 24, 2024
|
|
||
| ### Customizing colors | ||
|
|
||
| The Explorer accepts a `colors` prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. `cm-def`, `cm-variable`, `cm-string`, etc.) use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the names of the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs). |
There was a problem hiding this comment.
Suggested change
| The Explorer accepts a `colors` prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. `cm-def`, `cm-variable`, `cm-string`, etc.) use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the names of the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs). | |
| The Explorer accepts a `colors` prop as a map of the class names in GraphiQL's css to hex colors. If you've edited the GraphiQL class names that control colors (e.g. `cm-def`, `cm-variable`, `cm-string`, etc.), use those same colors in the colors map. The naming of the keys in the colors map tries to align closely with the class names in GraphiQL's css (note that the Explorer can't just apply the classes because of conflicts with how the css file styles inputs). |
| 1. Converted to Typescript | ||
| 2. Split into multiple files | ||
| 3. new `ExplorerInner` and `GraphiQLExplorerInnerProps` exports which remove some of the presentation complexity for the graphiql plugin. | ||
| 4. uses modern targets and only exports esm build, does not export cjs, bundle and transpile as needed |
There was a problem hiding this comment.
Suggested change
| 4. uses modern targets and only exports esm build, does not export cjs, bundle and transpile as needed | |
| 4. uses modern targets and only exports esm build; does not export cjs; bundle and transpile as needed |
|
|
||
| ## Created by OneGraph | ||
|
|
||
| [OneGraph](https://www.onegraph.com) provides easy, consistent access to the APIs that underlie your business--all through the power of GraphQL. |
There was a problem hiding this comment.
Suggested change
| [OneGraph](https://www.onegraph.com) provides easy, consistent access to the APIs that underlie your business--all through the power of GraphQL. | |
| [OneGraph](https://www.onegraph.com) provides easy, consistent access to the APIs that underlie your business — all through the power of GraphQL. |
|
|
||
| ### Customizing arrows and checkboxes | ||
|
|
||
| The explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields). |
There was a problem hiding this comment.
Suggested change
| The explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields). | |
| The explorer accepts properties for setting custom checkboxes (for leaf fields) and arrows (for object fields). |
|
|
||
| The explorer accepts props for setting custom checkboxes (for leaf fields) and arrows (for object fields). | ||
|
|
||
| The props are `arrowOpen`, `arrowClosed`, `checkboxChecked`, and `checkboxUnchecked`. You can pass any react node for those props. |
There was a problem hiding this comment.
Suggested change
| The props are `arrowOpen`, `arrowClosed`, `checkboxChecked`, and `checkboxUnchecked`. You can pass any react node for those props. | |
| The properties are `arrowOpen`, `arrowClosed`, `checkboxChecked`, and `checkboxUnchecked`. You can pass any react node for those props. |
|
|
||
| You can modify the styles for the buttons that allow you to create new operations. | ||
|
|
||
| Pass the `styles` prop when you create the component. It's an object with two keys, `explorerActionsStyle` and `buttonStyle`. |
There was a problem hiding this comment.
Suggested change
| Pass the `styles` prop when you create the component. It's an object with two keys, `explorerActionsStyle` and `buttonStyle`. | |
| Pass the `styles` property when you create the component. It's an object with two keys, `explorerActionsStyle` and `buttonStyle`. |
| schema?: null | GraphQLSchema; | ||
| onEdit: (edit: string) => void; | ||
| /** | ||
| * the same prop as GraphiQLProps.getDefaultFieldNames |
There was a problem hiding this comment.
Suggested change
| * the same prop as GraphiQLProps.getDefaultFieldNames | |
| * the same property as GraphiQLProps.getDefaultFieldNames |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
strict: false, and withstrict: trueit is about ~51graphiql-explorerlocally for the plugin buildto preview, see:
https://deploy-preview-3374--graphiql-test.netlify.app/webpack
also provides a typedoc
CC
@dwwoelfel and/or @sgrove , how would you like to go about this? Attribution in the readme and whatever license you chose? Or should we publish it as
@graphiql/explorerunder a seperate NPM module?BCC @SachaG