Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GraphiQL v4 #3685

Draft
wants to merge 66 commits into
base: main
Choose a base branch
from
Draft

GraphiQL v4 #3685

wants to merge 66 commits into from

Conversation

dimaMachina
Copy link
Collaborator

No description provided.

Copy link

changeset-bot bot commented Aug 7, 2024

🦋 Changeset detected

Latest commit: 068e23c

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

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

Copy link
Contributor

github-actions bot commented Aug 7, 2024

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* Update .changeset/thirty-spoons-call.md

* fix cypress

* this fix locally

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
Copy link

codecov bot commented Aug 7, 2024

Codecov Report

Attention: Patch coverage is 85.13514% with 11 lines in your changes missing coverage. Please review.

Project coverage is 65.30%. Comparing base (a929862) to head (068e23c).

Files Patch % Lines
packages/graphiql-react/src/editor/hooks.ts 20.00% 4 Missing ⚠️
packages/graphiql/test/schema.js 33.33% 4 Missing ⚠️
packages/graphiql/src/components/GraphiQL.tsx 94.33% 3 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #3685      +/-   ##
==========================================
- Coverage   65.32%   65.30%   -0.03%     
==========================================
  Files         122      121       -1     
  Lines        7003     7006       +3     
  Branches     2260     2263       +3     
==========================================
  Hits         4575     4575              
- Misses       2411     2414       +3     
  Partials       17       17              
Files Coverage Δ
packages/graphiql-react/src/editor/common.ts 100.00% <100.00%> (ø)
...hiql-react/src/editor/components/image-preview.tsx 2.70% <ø> (+0.13%) ⬆️
packages/graphiql-react/src/editor/query-editor.ts 64.28% <100.00%> (+0.18%) ⬆️
packages/graphiql-react/src/markdown.ts 100.00% <ø> (ø)
packages/graphiql-react/src/toolbar/menu.tsx 66.66% <100.00%> (ø)
packages/graphiql-react/src/ui/dialog.tsx 100.00% <100.00%> (ø)
packages/graphiql-react/src/ui/dropdown.tsx 40.00% <100.00%> (ø)
packages/graphiql-react/src/ui/tabs.tsx 100.00% <100.00%> (ø)
packages/graphiql-react/src/ui/tooltip.tsx 100.00% <100.00%> (ø)
packages/graphiql/src/components/GraphiQL.tsx 78.54% <94.33%> (-0.04%) ⬇️
... and 2 more

dimaMachina and others added 3 commits August 7, 2024 16:01
* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
* new looks of tabs

* add graphiql react too

* all fixes

* more polishing

* more

* more

* more

* more

* more

* prettier

* polish changeset

* disable shrinking while changing the operation name

* Update packages/graphiql-react/src/ui/tabs.css

Co-authored-by: Ted Thibodeau Jr <[email protected]>

* yarn i

* apply new design changes

* prettier

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* Update .changeset/thirty-spoons-call.md

* Update packages/graphiql/vite.config.mts

* merge

* add changeset

* yarn.lock

* yarn.lock

---------

Co-authored-by: Ted Thibodeau Jr <[email protected]>
… remove development code from cdn bundle (#3683)

* vite

more

more

more

* fix demo

* fix cspell

* fix dev

* update cypress to v13

* upd cache key

* remove webpack deps

* fix `yarn jest --coverage`

* upd graphql

* aa

* yarn.lock

* fix tests
* test umd build only on ci, locally test cdn.ts

* Update custom-words.txt
* aa

* fix netlify

* fix

* fix fails on ci
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* improve explorer styles

* aa
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
* add vite replace html plugin for graphiql plugin explorer

* fix build
* aa

* removes unneeded `undefined`

* try

* fix

* fix vitest
@acao
Copy link
Member

acao commented Aug 24, 2024

@dimaMachina what is the rationale behind removing the disableTabs option?

* @param query The current value of the query editor.
* @returns {string} The formatted query
*/
onPrettifyQuery?: (query: string) => string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😎

Copy link
Member

@acao acao Aug 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dimaMachina along the lines of our previous discussion, i think we should discontinue exposing handlers and state via props, and expose them via hooks instead, then people can provide formatters as plugins. in this case it's simply a callback and no state, so it doesn't impact the controlled vs uncontrolled scenario, but for something like this that is more likely to be used by plugins, we should expose that instead, and provider a prettier plugin

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we already expose the use editor hooks and users can use the refs, so a compositional @graphiql/react experience already exists (as of course GraphiQL has been!), so we should just provide a simple example in examples of a custom editor?

* @param query The current value of the query editor.
* @returns {string} The formatted query
*/
onPrettifyQuery?: (query: string) => string;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
onPrettifyQuery?: (query: string) => string;
onPrettifyQuery?: async (query: string) => string;

and the required changes as such, as prettier.format returns a promise, for example

@acao acao added this to the [email protected] milestone Aug 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants